vue quasar admin

Le code est trop laid.

vue-quasar-addmin

Quasar-Framework est un framework frontal open source développé basé sur Vue.js. Il peut aider les développeurs Web à créer rapidement les sites Web suivants: site Web réactif, application progressive, application mobile (via Cordova), applications multiplatelies (via Electron) Essence Quasar permet aux développeurs de publier plusieurs plates-formes, PWA, application mobile et application électronique lorsqu'ils n'écrivent qu'une seule fois. simple. Vue-Quasar-Admin est un ensemble de systèmes de gestion de fond contenus dans le contrôle général des autorisations basée sur le quasar-trame (actuellement uniquement pour la fin du PC).

démo en ligne

Compte de connexion:

 admin 123

test 123456

website_admin 123456

Veuillez ne pas modifier le nom du compte à volonté.

Tableau de flux du système

Fonction et caractéristiques

• Prise en charge des données réelles de Back-Fend
• Connexion / connexion
• Disposition flexible du jiugongge
• Bar de menu à gauche tibia
• Navigation sur l'étiquette des étiquettes
• Pain
• Plein écran / sortie en plein écran
• Menu dynamique
• Le menu est divisé par le module
• Contrôle d'autorisation universel
  • Contrôle des autorisations de niveau de menu
  • Contrôle des autorisations de niveau interface
  • Contrôle des autorisations élémentaires
• Global peut être configuré avec l'effet de chargement
• Traitement du réseau anormal
• Module
  • Module système
    • Paramètres du système
      • Gestion de menu
    • Gestion des autorités
      • Gestion fonctionnelle
      • Gestion des rôles
      • Gestion de l'autorisation des rôles
      • Gestion des utilisateurs de rôle
      • Gestion des rôles utilisateur
    • Structure organisationnelle
      • Gestion du département
      • Gestion de l'emploi
    • Gestion des utilisateurs
  • Module de site Web
    • CMS
      • Gestion des articles
  • Module de développement
    • Composant officiel
      • Essence Essence Essence
    • Composant commercial
      • Sku
  • Journal d'audit
  • Initialisation des données

Structure de fichiers

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

Installation

Installer

 npm install -g vue-cli

 npm install -g quasar-cli

 npm install

Courir

Développement

 quasar dev

Production (build)

 quasar build

Installez le programme d'arrière-plan

Programme de fond

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

Installer

 npm install

Courir

Développement

 npm run start

Production (build)

 npm run production

Le programme Back -end est construit à l'aide de KOA2, et LowDB est utilisé pour persister des données dans le fichier JSON (le fichier JSON est stocké pour créer rapidement une démo).

Étapes de développement fonctionnel (prenez la gestion des articles comme exemple)

• l'extrémité avant
  • Code de fonction de définition:
  • Post_view - View de la liste des articules
  • Post_Edit -article Modifier
  • Post_del -article Supprimer
  • NOUVELLE LISTE DE LISTE PAGE POST.VUE
  • Nouveau routage
  • Utilisez la fonction de gestion du menu pour ajouter le menu lié à la "gestion d'article". Remplissage de code permanent Défini "Affichage de la liste d'articles" Fonction correspondant à la fonction (Contrôle des autorisations de niveau de menu)
  • Utilisez la gestion de la fonction pour entrer le nom et le code de fonction de fonction définis sous le nouveau menu dans le nouveau menu
  • Configurer les caractères et les utilisateurs
  • Définir les autorisations fonctionnelles pour les paramètres de rôle correspondants dans la gestion de l'autorité des caractères
• extrémité arrière
  • Db.json Fichier Nouveau article Structure de stockage de l'article
  • Ajouter PostService.js sous service
  • Ajouter Post.js sous Contrôleurs pour introduire PostService.js pour les opérations connexes
  • Main-Routes.js ajoute un routage connexe et utilise le middleware de Permissioncheck pour effectuer le contrôle des autorisations du niveau oral arrière (code fonctionnel disponible ou code de caractère)
• l'extrémité avant
  • Ajoutez Post.js sous service, configurez les opérations liées à l'API et configurez le champ de chargement pour obtenir un effet de chargement personnalisé.
  • Retour au fichier post.vue, introduisez des fichiers d'accès à l'API, écrivez le code commercial
  • Utilisez les instructions en V-Permission pour contrôler si l'élément de page s'affiche, le codage fonctionnel et le codage des caractères peuvent être utilisés
  • Configurez DontCache sous le module d'application Store pour contrôler le cache de la page

Vous pouvez afficher le code source pour plus de détails

Affichage d'effet