vue quasar admin

O código é muito feio.

Vue-Quasar-Addmin

Quasar-framework é uma estrutura de front-end de código aberto desenvolvido com base no Vue.js. Essência O Quasar permite que os desenvolvedores publiquem no site de várias plataformas, PWA, aplicativo móvel e eletrônicos quando escrevem apenas uma vez. simples. O Vue-Quasar-Admin é um conjunto de sistemas de gerenciamento de fundo contidos no controle de permissões gerais com base no quadro de quasar (atualmente apenas para a extremidade do PC).

demonstração online

Conta de login:

 admin 123

test 123456

website_admin 123456

Por favor, não modifique o nome da conta à vontade.

Fluxograma do sistema

Função e características

• Suporte de dados de volta real
• Login/login
• Layout de Jiugongge flexível
• Barra de menu esquerda Shin
• Navegação por etiqueta de tags
• Pão
• Tela inteira/saída de tela cheia
• Menu dinâmico
• O menu é dividido pelo módulo
• Controle universal de permissão
  • Controle de permissões de nível de menu
  • Controle de permissões de interface no nível
  • Controle de permissões elementares
• Global pode ser configurado com efeito de carregamento
• Tratamento anormal da rede
• Módulo
  • Módulo do sistema
    • Configurações do sistema
      • Gerenciamento de menu
    • Gestão da autoridade
      • Gerenciamento funcional
      • Gerenciamento de papéis
      • Gerenciamento de permissão de função
      • Gerenciamento de usuários de função
      • Gerenciamento de função do usuário
    • Estrutura organizacional
      • Gerenciamento de departamento
      • Gerenciamento de empregos
    • Gerenciamento de usuários
  • Módulo do site
    • Cms
      • Gerenciamento de artigos
  • Módulo de desenvolvimento
    • Componente oficial
      • Essência Essência Essência
    • Componente de negócios
      • Sku
  • Log de auditoria
  • Inicialização de dados

Estrutura de arquivo

 .
├── .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 登录页
        

Instalação

Instalar

 npm install -g vue-cli

 npm install -g quasar-cli

 npm install

Correr

Desenvolvimento

 quasar dev

Produção (Build)

 quasar build

Instale o programa em segundo plano

Programa de fundo

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

Instalar

 npm install

Correr

Desenvolvimento

 npm run start

Produção (Build)

 npm run production

O programa traseiro -end é construído usando o KOA2 e o LowDB é usado para persistir dados no arquivo JSON (o arquivo JSON é armazenado para criar uma demonstração rapidamente).

Etapas de desenvolvimento funcional (Tome o gerenciamento de artigos como exemplo)

• front-end
  • Código da função de definição:
  • Post_View -article List List View
  • Post_edit -article Editar
  • post_del -article Excluir
  • Novo artigo da lista de artigos post.vue
  • Novo roteamento
  • Use a função de gerenciamento de menu para adicionar o menu "Gerenciamento de Artigo". Preenchimento permanente de código definido "Lista de artigos View" Função correspondente à função (controle de permissões de nível de menu)
  • Use o gerenciamento de funções para inserir o nome da função definido e o código da função no novo menu no novo menu
  • Configurar personagens e usuários
  • Definir permissões funcionais para as configurações de função correspondentes no gerenciamento de autoridade de caracteres
• extremidade traseira
  • Db.json arquive nova estrutura de armazenamento de artigo
  • Adicionar PostService.js em serviço
  • Adicionar post.js sob controladores para introduzir PostService.js para operações relacionadas
  • Main-routes.js adiciona roteamento relacionado e usa o Middleware PermissionCheck para executar o controle de permissões do nível oral traseiro (código funcional disponível ou código de caractere)
• front-end
  • Adicione o Post.js em serviço, configure operações relacionadas à API e configure o campo de carregamento para obter um efeito de carregamento personalizado.
  • De volta ao arquivo post.vue, introduza arquivos de acesso da API, grave o código comercial
  • Use a instrução de permissão V para controlar se o elemento da página é exibido, a codificação funcional e a codificação de caracteres podem ser usadas
  • Configure o DontCache no módulo de aplicativo da loja para controlar o cache da página

Você pode visualizar o código -fonte para obter mais detalhes

Exibição de efeito