vue quasar admin Download - vue quasar admin -Quellcode herunterladen

vue quasar admin

Andere Kategorien

1.0.0

Herunterladen

Der Code ist zu hässlich.

Vue-Quasar-Addmin

Quasar-Framework ist ein Open-Source-Front-End-Framework, das basierend auf VUE.JS. Wesen In Quasar können Entwickler auf mehreren Plattformen, PWA, mobiler App und Elektronen -App veröffentlichen, wenn sie nur einmal schreiben. einfach. Vue-Quasar-Admin ist eine Reihe von Hintergrundmanagementsystemen, die in der allgemeinen Berechtigungssteuerung enthalten sind, die auf Quasar-Framework (derzeit nur für das PC-Ende) basiert.

Online -Demo

Login -Konto:

 admin 123

test 123456

website_admin 123456

Bitte ändern Sie den Kontonamen nicht nach Belieben.

Systemflussdiagramm

Funktion und Eigenschaften

Real Back -End -Datenunterstützung
Login/Login
Flexibler Jiugongge -Layout
Shin Links -Menüleiste
Tagschild -Navigation
Brot
Vollbildschirm/Vollbildschirm beenden
Dynamisches Menü
Das Menü ist durch das Modul geteilt
Universelle Berechtigungskontrolle
- Menüstufe -Berechtigungssteuerung
- Schnittstellen -Level -Berechtigungssteuerung
- Elementarberechtigungskontrolle
Global kann mit dem Belastungseffekt konfiguriert werden
Netzwerk abnormale Behandlung
Modul
- Systemmodul
  - Systemeinstellungen
    - Menüverwaltung
  - Autoritätsmanagement
    - Funktionsmanagement
    - Rollenmanagement
    - Rollenberechtigung Management
    - Rolle Benutzerverwaltung
    - Benutzerrollenverwaltung
  - Organisationsstruktur
    - Abteilungsmanagement
    - Jobmanagement
  - Benutzerverwaltung
- Website -Modul
  - CMS
    - Artikelmanagement
- Entwicklungsmodul
  - Offizielle Komponente
    - Wesen Wesen Wesen
  - Geschäftskomponente
    - SKU
- Prüfprotokoll
- Initialisierung von Daten

Dateistruktur

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

Installieren

 npm install -g vue-cli

 npm install -g quasar-cli

 npm install

Laufen

Entwicklung

 quasar dev

Produktion (Build)

 quasar build

Installieren Sie das Hintergrundprogramm

Hintergrundprogramm

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

Installieren

 npm install

Laufen

Entwicklung

 npm run start

Produktion (Build)

 npm run production

Das Back -End -Programm wird mit KOA2 konstruiert, und LowDB wird verwendet, um Daten in die JSON -Datei zu bestehen (die JSON -Datei wird gespeichert, um schnell Demo zu erstellen).

Funktionale Entwicklungsschritte (Artikelmanagement als Beispiel nehmen)

Frontend
- Definitionsfunktionscode:
- post_view -artikellistenansicht
- Post_edit -artikel bearbeiten
- post_del -artikel löschen
- Neue Artikelliste Seite Post.vue
- Neues Routing
- Verwenden Sie die Menüverwaltungsfunktion, um das verwandte Menü "Artikelverwaltung" hinzuzufügen. Permanente Codefüllung definiert "Artikellistenansicht" -Funktion, die der Funktion entspricht (Menüstufe -Berechtigungssteuerung)
- Verwenden Sie die Funktionsverwaltung, um den definierten Funktionsnamen und den Funktionscode im neuen Menü im neuen Menü einzugeben
- Konfigurieren Sie Zeichen und Benutzer
- Legen Sie funktionale Berechtigungen für die entsprechenden Rolleneinstellungen in Character Authority Management fest
hinteres Ende
- DB.JSON -Datei neue Artikel Speicherstruktur Struktur
- Fügen Sie PostService.js unter Service hinzu
- Fügen Sie post.js unter Controllern hinzu, um PostService.js für verwandte Operationen einzuführen
- Main-routes.js fügt das zugehörige Routing hinzu und verwendet die Middleware für die Berechtigte, um die Berechtigungssteuerung für die orale Ebene der Rückseite durchzuführen (verfügbarer Funktionscode oder Zeichencode).
Frontend
- Fügen Sie post.js unter service hinzu, konfigurieren Sie api -bezogene Operationen und konfigurieren Sie das Feld Ladung, um einen benutzerdefinierten Ladeeffekt zu erzielen.
- Zurück zur Datei post.vue, stellen Sie API -Zugriffsdateien vor, schreiben Sie Geschäftscode
- Verwenden Sie den Anweisungen zur V-Permission, um zu steuern, ob das Seitenelement angezeigt wird. Die Funktionscodierung und die Zeichencodierung können verwendet werden
- Konfigurieren Sie dontCache unter dem Modul des Store -App, um den Seitencache zu steuern