02.前後端分離中臺框架前端 admin.ui.plus 學習-介紹與簡單使用

中臺框架前臺項目 admin.ui.plus 的初識

基於 vue3.x + CompositionAPI setup 語法糖 + typescript + vite + element plus + vue-router-next + pinia 技術，內置支持一鍵生成微服務接口，適配手機、平板、pc 的後臺權限管理框架，希望減少工作量，幫助大家實現快速開發。

• 框架一覽
  

• 項目地址

  • https://github.com/zhontai/admin.ui.plus

• 技術棧

  • node 16+
  • vue 3.x
  • typescript
  • element plus

• 特點

  • 界面還可以，自定義度高，適配移動端
  • 自動生成api接口定義文件
  • 沒有過度封裝
  • 系統權限封裝基本滿足大部分項目

• 推薦環境

  • Node v18
  • VsCode
  • VsCode插件
    • TypeScript Vue Plugin (Volar)
    • Vue Language Features (Volar)
    • Vue 3 Snippets
    • ESLint
    • Prettier - Code formatter

• 項目結構

  • bin 打包腳本
  • gen 根據./templates生成api相關文件，接口更新後執行npm run gen:api會生成接口的定義和接口模型
  • public 不需要打包的資源
  • src 源碼，vue項目結構，具體文檔參考vue-next-admin，element-plus
  • package.json script
    • npm run dev 運行
    • npm run build 打包
    • npm run gen:api 生成api代碼，添加了模塊後加入到apis中

默認實現功能

1. 用戶管理：配置用戶，查看部門用戶列表，支持禁用/啓用、重置密碼、設置主管、用戶可配置多角色、多部門和上級主管。
2. 角色管理：配置角色，支持角色分組、設置角色菜單和數據權限、批量添加和移除角色員工。
3. 部門管理：配置部門，支持樹形列表展示。
4. 權限管理：配置分組、菜單、操作、權限點、權限標識，支持樹形列表展示。
5. 租戶套餐：配置租戶套餐，支持新增/移除套餐企業。
6. 租戶管理：配置租戶，新增租戶時初始化部門、角色和管理員數據，支持租戶配置套餐、禁用/啓用功能。
7. 字典管理：配置字典，查看字典類型和字典數據列表，支持字典類型和字典數據維護。
8. 任務調度：查看任務和任務日誌列表，支持任務啓動、執行、暫停等功能。
9. 緩存管理：緩存列表查詢，支持根據緩存鍵清除緩存
10. 接口管理：配置接口，支持接口同步功能，用於新增權限點選擇接口，支持樹形列表展示。
11. 視圖管理：配置視圖，支持視圖維護功能，用於新增菜單選擇視圖，支持樹形列表展示。
12. 文件管理：支持文件列表查詢、文件上傳/下載、查看大圖、複製文件地址、刪除文件功能。
13. 登錄日誌：登錄日誌列表查詢，記錄用戶登錄成功和失敗日誌。
14. 操作日誌：操作日誌列表查詢，記錄用戶操作正常和異常日誌。

框架的使用

1. 從GitHub 克隆/下載項目

• 前端：git clone https://github.com/zhontai/admin.ui.plus.git
• 後端：git clone https://github.com/zhontai/Admin.Core.git

2. 啓動運行

安裝好nodejs18+,vscode，執行 npm i && npm run dev 運行即可
啓動地址：http://localhost:8100
默認會跳轉到登錄頁，賬號密碼 admin 111111 會自動賦值
後臺 ZhonTai.Host 接口運行起來，登錄無阻礙

3. 修改事項

• 修改系統名稱
  • 需要修改的文件
  • index.html
  • src/layout/footer/index.vue
  • src/layout/stores/themeConfig.ts
• 更新logo
  • 可以從iconfont字體網站找個字體文件當logo,然後再前往圖標工場生成需要的圖片
• 更新api接口
  • 使用 npm run gen:api 生成，將會根據接口文檔生成對應的模型，接口ts文件
  • 如果加了新的模塊，配置 /gen/gen-api.js 中的apis即可

    const apis =[
        {
            output: path.resolve(__dirname, '../src/api/admin'),
            url: 'http://localhost:8000/admin/swagger/admin/swagger.json',
        },
        //添加模塊 dev
        {
            output: path.resolve(__dirname, '../src/api/dev'),
            url: 'http://localhost:8000/admin/swagger/dev/swagger.json',
        }
    ]
    

• 平臺管理-系統管理-視圖管理
  • 視圖配置對應vue視圖文件地址，權限菜單配置路由，路由對應跳轉到視圖
  • views模塊正常添加文件copy其他的頁面即可
• 平臺管理-權限管理-權限管理(菜單)
  • 對應vue的路由配置，後臺返回，前臺動態加載
• 平臺管理-系統管理-接口管理-同步，將接口定義寫入到數據庫，用於指定頁面權限及按鈕權限的控制
• 新增一個模塊頁面的步驟
  • 在項目中添加視圖文件，如 /views/admin/test/index.vue
  • 在視圖管理中添加視圖，配置爲新增視圖的信息 視圖名稱：admin/test 視圖地址：admin/test/index
  • 新增權限，分組(一級導航)，菜單(下級導航)，權限點 ，分組和菜單的路由地址不能一致，路由前綴也需要一致切換菜單時才能準確定位菜單
  • 測試菜單：路由地址：/platform/test/index 視圖地址：選擇admin/test/index
    

4. 代碼生成

• 後端：https://github.com/share36/Admin.Core.Dev
• 前端：https://github.com/share36/admin.ui.plus.dev

代碼生成的使用見下篇