vue quasar admin

The code is too ugly. It is not recommended to copy it. You can take a look at the implementation of RBAC. This is common.

vue-quasar-addmin

Quasar-Framework is an open source front-end framework developed based on Vue.js. It can help Web developers quickly create the following websites: responsive website, progressive application, mobile application (through Cordova), cross-platform applications (via Electron) Essence Quasar allows developers to publish to multiple platforms Website, PWA, Mobile App and Electron APP when they only write only once. When using Quasar, you don't even need to have Hammerjs, Momentjs, or Bootstrap. Things, you can use it very simple. Vue-QUASAR-Admin is a set of background management systems contained in general permissions control based on Quasar-Framework (currently only for the PC end).

online demo

Login account:

 admin 123

test 123456

website_admin 123456

Please do not modify the account name at will.

System flow chart

Function and characteristics

• Real back -end data support
• Login/Login
• Flexible Jiugongge layout
• Shin left menu bar
• tag label navigation
• Bread
• Full screen/exit full screen
• Dynamic menu
• The menu is divided by the module
• Universal permission control
  • Menu level permissions control
  • Interface -level permissions control
  • Elemental permissions control
• Global can be configured with loading effect
• Network abnormal treatment
• Module
  • System module
    • System settings
      • Menu management
    • Authority management
      • Functional management
      • Role management
      • Role permission management
      • Role user management
      • User role management
    • Organizational structure
      • Department management
      • Job management
    • User management
  • Website module
    • CMS
      • Article management
  • Development module
    • Official component
      • Essence Essence Essence
    • Business component
      • SKU
  • Audit log
  • Initialization of data

File structure

 .
├── .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

Install

 npm install -g vue-cli

 npm install -g quasar-cli

 npm install

Run

Development

 quasar dev

Production (Build)

 quasar build

Install the background program

Background program

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

Install

 npm install

Run

Development

 npm run start

Production (Build)

 npm run production

The back -end program is constructed using KOA2, and LOWDB is used to persist data to the JSON file (the JSON file is stored to quickly build DEMO).

Functional development steps (take articles management as an example)

• front end
  • Definition function code:
  • post_View -Article List View
  • Post_edit -Article Edit
  • post_del -Article delete
  • New article list page post.vue
  • New routing
  • Use the menu management function to add the "article management" related menu. The menu name must be consistent with the name field of the newly added route in the previous step. Permanent code filling defined "article list View" function corresponding to the function (menu level permissions control)
  • Use function management to enter the defined function name and function code under the new menu under the new menu
  • Configure characters and users
  • Set functional permissions for the corresponding role settings in character authority management
• rear end
  • DB.JSON file new article storage structure
  • Add postService.js under service
  • Add post.js under controllers to introduce postService.js for related operations
  • Main-Routes.js adds related routing, and uses permissionCheck middleware to perform the permissions control of the rear-end oral level (available functional code or character code)
• front end
  • Add post.js under service, configure API -related operations, and configure the loading field to achieve custom loading effect.
  • Back to the post.Vue file, introduce API access files, write business code
  • Use the V-Permission instruction to control whether the page element is displayed, the functional encoding and character coding can be used
  • Configure Dontcache under the Store APP module to control the page cache

You can view the source code for more details

Effect display