vue quasar admin

El código es demasiado feo.

vue-quaso-addmin

Quasar-Framework es un marco front-end de código abierto desarrollado basado en Vue.js. Esencia Quasar permite a los desarrolladores publicar en múltiples plataformas, PWA, aplicación móvil y aplicación Electron cuando solo escriben una vez. simple. Vue-Quasar-Admin es un conjunto de sistemas de gestión de fondo contenidos en el control de permisos generales basados ​​en el trabajo de frame cuásar (actualmente solo para el final de la PC).

demostración en línea

Cuenta de inicio de sesión:

 admin 123

test 123456

website_admin 123456

No modifique el nombre de la cuenta a voluntad.

Diagrama de flujo del sistema

Función y características

• Soporte de datos reales de retroceso
• Iniciar sesión/Iniciar sesión
• Diseño flexible de jiugongge
• Barra de menú izquierda Shin
• navegación de etiqueta de etiqueta
• Pan
• Pantalla completa/salida de pantalla completa
• Menú dinámico
• El menú está dividido por el módulo
• Control de permiso universal
  • Control de permisos de nivel de menú
  • Interfaz -control de permisos de nivel
  • Control de permisos elementales
• Global se puede configurar con efecto de carga
• Tratamiento anormal de red
• Módulo
  • Módulo de sistema
    • Configuración del sistema
      • Gestión del menú
    • Gestión de la autoridad
      • Gestión funcional
      • Gestión de roles
      • Gestión de permiso de rol
      • Gestión de usuarios de roles
      • Gestión de roles de usuario
    • Estructura organizacional
      • Gestión del departamento
      • Gestión de empleo
    • Gestión de usuarios
  • Módulo de sitio web
    • CMS
      • Gestión de artículos
  • Módulo de desarrollo
    • Componente oficial
      • Esencia Esencia Esencia
    • Componente comercial
      • Sku
  • Registro de auditoría
  • Inicialización de datos

Estructura de archivo

 .
├── .quasar  Quasar CLI生成的配置
└── src
    ├── assets  资源文件
    ├── components 自定义组件
    ├── css 样式文件
    ├── layout 布局组件
    ├── libs  工具方法
    ├── router  路由配置
    ├── store  状态管理
    ├── service  API管理
    ├── plugins  需要全局注册的组件、指令、插件
    └── pages
        ├── cms 
        │   └── 文章管理
        ├── develop
        │   ├── 官方组件
        │   └── 业务组件
        ├── organization
        │   ├── 部门管理
        │   └── 职位管理
        ├── other
        │   └── 审计日志
        ├── permission
        │   ├── 功能管理
        │   ├── 角色管理
        │   ├── 角色权限管理 
        │   ├── 角色用户管理
        │   └── 用户角色管理
        ├── system  
        │   ├── 菜单管理
        ├── user  
        │   └── 用户管理
        ├── 403 无权限页面
        ├── index 首页
        └── login 登录页
        

Instalación

Instalar

 npm install -g vue-cli

 npm install -g quasar-cli

 npm install

Correr

Desarrollo

 quasar dev

Producción (construcción)

 quasar build

Instale el programa de fondo

Programa de antecedentes

 git clone https://github.com/wjkang/quasar-admin-server.git

Instalar

 npm install

Correr

Desarrollo

 npm run start

Producción (construcción)

 npm run production

El programa Back -end se construye con KOA2, y LowDB se usa para persistir en los datos en el archivo JSON (el archivo JSON se almacena para construir rápidamente la demostración).

Pasos de desarrollo funcional (tome la gestión de artículos como ejemplo)

• Interfaz
  • Código de función de definición:
  • Post_view -ew de la lista de artículos
  • Post_edit -article editar
  • Post_del -article eliminar
  • Nueva página de la lista de artículos post.vue
  • Nuevo enrutamiento
  • Use la función de administración del menú para agregar el menú relacionado con la "Administración de artículos". Código permanente Completo de la función "Vista de lista de artículos" definida correspondiente a la función (control de permisos de nivel de menú)
  • Use la administración de funciones para ingresar el nombre de función y el código de función definido en el nuevo menú en el nuevo menú
  • Configurar caracteres y usuarios
  • Establecer permisos funcionales para la configuración de roles correspondiente en la gestión de la autoridad de carácter
• extremo posterior
  • Archivo DB.JSON Estructura de almacenamiento de nuevos artículos
  • Agregar Postervice.js bajo servicio
  • Agregar post.js en controladores para introducir PostService.js para operaciones relacionadas
  • Main-Rutes.js agrega enrutamiento relacionado y utiliza Middleware de cheque de permisos para realizar el control de permisos del nivel oral trasero (código funcional disponible o código de caracteres)
• Interfaz
  • Agregue post.js en servicio, configure las operaciones relacionadas con API y configure el campo de carga para lograr el efecto de carga personalizado.
  • Volver al archivo Post.vue, introducir archivos de acceso API, escribir código de negocio
  • Use la instrucción de permisión en V para controlar si se muestra el elemento de página, se puede usar la codificación funcional y la codificación de caracteres
  • Configurar Dontcache en el módulo de aplicación de almacenamiento para controlar el caché de la página

Puede ver el código fuente para más detalles

Visualización de efectos