vue quasar admin

Kode ini terlalu jelek.

Vue-Quasar-Addmin

Quasar-Framework adalah kerangka kerja front-end open source yang dikembangkan berdasarkan Vue.Js. Esensi Quasar memungkinkan pengembang untuk menerbitkan ke beberapa platform, PWA, aplikasi seluler, dan aplikasi elektron ketika mereka hanya menulis sekali. sederhana. Vue-Quasar-Admin adalah seperangkat sistem manajemen latar belakang yang terkandung dalam kontrol izin umum berdasarkan kerangka quasar (saat ini hanya untuk akhir PC).

demo online

Akun Login:

 admin 123

test 123456

website_admin 123456

Harap jangan memodifikasi nama akun sesuka hati.

Bagan Aliran Sistem

Fungsi dan karakteristik

• Dukungan Data Punggung Nyata
• Masuk/Masuk
• Tata letak Jiugongge yang fleksibel
• Shin Left Menu Bar
• navigasi label tag
• Roti
• Layar penuh/keluar layar penuh
• Menu Dinamis
• Menu dibagi dengan modul
• Kontrol izin universal
  • Kontrol Izin Tingkat Menu
  • Kontrol Izin Tingkat Antarmuka
  • Kontrol izin unsur
• Global dapat dikonfigurasi dengan efek pemuatan
• Perawatan abnormal jaringan
• Modul
  • Modul sistem
    • Pengaturan Sistem
      • Manajemen Menu
    • Manajemen Otoritas
      • Manajemen fungsional
      • Manajemen peran
      • Manajemen Izin Peran
      • Manajemen Pengguna Peran
      • Manajemen Peran Pengguna
    • Struktur organisasi
      • Manajemen Departemen
      • Manajemen pekerjaan
    • Manajemen Pengguna
  • Modul situs web
    • CMS
      • Manajemen Artikel
  • Modul pengembangan
    • Komponen resmi
      • Esensi Esensi Esensi
    • Komponen bisnis
      • Sku
  • Log audit
  • Inisialisasi data

Struktur file

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

Instalasi

Memasang

 npm install -g vue-cli

 npm install -g quasar-cli

 npm install

Berlari

Perkembangan

 quasar dev

Produksi (build)

 quasar build

Instal Program Latar Belakang

Program Latar Belakang

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

Memasang

 npm install

Berlari

Perkembangan

 npm run start

Produksi (build)

 npm run production

Program back -end dibangun menggunakan KOA2, dan LOWDB digunakan untuk bertahan data ke file JSON (file JSON disimpan untuk dengan cepat membangun demo).

Langkah Pengembangan Fungsional (ambil manajemen artikel sebagai contoh)

• ujung depan
  • Kode Fungsi Definisi:
  • POST_VIEW -Article List View
  • POST_EDIT -Artikel Edit
  • POST_DEL -Article Delete
  • Halaman Daftar Artikel Baru Posting.vue
  • Routing baru
  • Gunakan fungsi manajemen menu untuk menambahkan menu terkait "Manajemen Artikel". Fungsi "Tampilan Daftar Artikel" yang Ditentukan Kode Permanen Sesuai fungsi (Kontrol Izin Tingkat Menu)
  • Gunakan manajemen fungsi untuk memasukkan nama fungsi dan kode fungsi yang ditentukan di bawah menu baru di bawah menu baru
  • Konfigurasikan karakter dan pengguna
  • Tetapkan izin fungsional untuk pengaturan peran yang sesuai dalam manajemen otoritas karakter
• ujung belakang
  • DB.JSON File Struktur Penyimpanan Artikel Baru
  • Tambahkan Posservice.js di bawah Layanan
  • Tambahkan post.js di bawah pengontrol untuk memperkenalkan postservice.js untuk operasi terkait
  • Main-rutes.js Menambahkan routing terkait, dan menggunakan Izin Middleware untuk melakukan kontrol izin dari level oral ujung belakang (kode fungsional yang tersedia atau kode karakter)
• ujung depan
  • Tambahkan post.js di bawah layanan, konfigurasikan operasi terkait API, dan konfigurasikan bidang pemuatan untuk mencapai efek pemuatan khusus.
  • Kembali ke file post.vue, perkenalkan file akses API, tulis kode bisnis
  • Gunakan instruksi permisi V untuk mengontrol apakah elemen halaman ditampilkan, pengkodean fungsional dan pengkodean karakter dapat digunakan
  • Konfigurasikan Dontcache Di Bawah Modul Aplikasi Store Untuk Mengontrol Cache Halaman

Anda dapat melihat kode sumber untuk lebih jelasnya

Tampilan Efek