Stories

Detail Return Return

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

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

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

  • 項目地址

    • 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
      image.png

4. 代碼生成

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

代碼生成的使用見下篇

前端 , 前後端分離 , vue.js , typescript , 中台概念
Favorites

Add a new Comments

Some HTML is okay.