vue-quasar-admin

Quasar-framework is an open source front-end Framework based on vue.js that allows Web developers to quickly create responsive websites, progressive applications, mobile applications (via Cordova), and cross-platform applications (via Electron). Quasar allows developers to write code once to publish to multiple platforms website, PWA,Mobile App and Electron App. You don’t even need Hammerjs, Momentjs, Or the Bootstrap, Quasar framework contains all of these things that you can easily use. Vue – Quasar- admin is a background management system based on quasar- Framework that contains general permission control (currently only for PCS).

github

online demo

Login Account:

admin 123

test 123456

website_admin 123456
Copy the code

Do not change the account name. You can use the “Data Initialization” button in the upper right corner to initialize data

Functions and Features

  • Real back-end data support
  • Login/logout
  • Flexible nine-grid layout
  • Shrink the left menu bar
  • Tag Navigation
  • Bread crumbs
  • Full screen/Exit full screen
  • Dynamic menu
  • The menu is divided by module
  • General permission control
    • Menu level permission control
    • Interface-level permission control
    • Element-level permission control
  • Loading effects can be configured globally
  • Network Exception Handling
  • The module
    • System module
      • System Settings
        • Menu management
      • Rights management
        • Functional management
        • Role management
        • Role Rights Management
        • Role User Management
        • User Role Management
      • Organizational structure
        • Department of management
        • Position management
      • User management
    • Website module
      • CMS
        • The article management
    • Development module
      • The official component
        • .
      • The business component
        • sku
    • The audit log
    • Data initialization

File structure

.├ ─.Quasar Quasar CLI Generated Config ├─ SRC ├─ Assets ├─ Components Custom Component ├─ CSS Style Document ├─ Layout Component ├─ Libs Tool Method ├─ ├─ All exercises, ├─ all Exercises, ├─ all Exercises, ├─ all exercises, ├─ all exercises, ├─ all exercises, ├─ all exercises, ├─ all exercises, ├─ all exercises, ├─ all exercises ├ ─ ─ the official component │ └ ─ ─ the business component ├ ─ ─ organization │ ├ ─ ─ department management │ └ ─ ─ position management ├ ─ ─ other │ └ ─ ─ the audit log ├ ─ ─ permission │ ├ ─ ─ functional management │ ├ ─ ─ │ role management ├── ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ index Home ├─ login Login pageCopy the code

Install and use

Install

npm install
Copy the code

Run

Development

quasar dev
Copy the code

Production(Build)

quasar build
Copy the code

Install daemon

daemon

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

Install

npm install
Copy the code

Run

Development

npm run start
Copy the code

Production(Build)

npm run production
Copy the code

The back-end program is built using KOA2, and lowDB is used to persist data to JSON files (JSON file storage is used for quick demo building).

Functional development steps (with article management as an example)

  • The front end
    • Define function code:
    • Post_view – Article list view
    • Post_edit – Article editing
    • Post_del – Article deleted
    • Create a new article list page, post.vue
    • New routing
    • Use the menu management function to add the related menu of “Article Management”. The menu name must be the same as the name field of the route added in the previous step. Permission code The permission code corresponding to the defined “View article list” function (menu-level permission control)
    • Using Function Management Enter the defined function name and function code in the new menu
    • Configure roles and users
    • Set function permissions for the corresponding roles in Role Rights Management
  • The back-end
    • New article storage structure for db.json file
    • Services added postservice. js, write operations on db.json file
    • Controllers under the new post, js, introducing the postService. Js do related operations
    • Main-routes. js adds related routes and uses PermissionCheck middleware to control back-end interface permissions (function codes or role codes can be used)
  • The front end
    • Add post.js under service, configure API related operations, configure the loading field to customize the loading effect, and configure the permission field to configure function coding and role coding (realize front-end interface-level permission control).
    • Go back to the post.vue file, introduce the API access file, and write the business code
    • Use v-permission directives to control whether page elements are displayed or not. You can use function encoding and role encoding (element-level permission control)
    • DontCache is configured in store APP module to control whether pages are cached

More details can be viewed source code

Results show