03.前後端分離中臺框架 zhontai 項目代碼生成器的使用

zhontai 項目

基於 .Net7.x + Vue 等技術的前後端分離後臺權限管理系統，想你所想的開發理念，希望減少工作量，幫助大家實現快速開發

後端地址：https://github.com/zhontai/Admin.Core
前端地址：https://github.com/zhontai/admin.ui.plus

• 代碼生成器：

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

• 官方默認項目模板生成：

  • dotnet new install ZhonTai.Template
  • dotnet new MyApp -n MyCompanyName.MyProjectName

本文主要介紹使用第三方的可視化代碼生成器生成前後臺代碼

後端生成

• 代碼倉庫 https://github.com/share36/Admin.Core.Dev
• 在 ZhonTai.Host 添加對 ZhonTai.Admin.Dev 的項目引用
• 修改 ZhonTai.Host 項目 Config\appconfig.json 配置
  • assemblyNames：[... "ZhonTai.Admin.Dev" ]
  • swagger節點projects增加項 [...{"name":"代碼生成","code":"dev","version":"v0.0.1","description":""}]
• 已經在開發環境對CodeGenService忽略權限,前端直接顯示代碼生成不需要加到數據庫中

  #if DEBUG
  [AllowAnonymous]
  #endif
  public partial class CodeGenService{}
  

• 後端生成器配置圖片說明
  

前端生成

• 代碼倉庫 https://github.com/share36/admin.ui.plus.dev

• 複製 gen/gen-dev-api.js 到項目，添加package.json命令："gen:dev:api": "node ./gen/gen-dev-api",執行npm run gen:dev:api生成dev模塊接口定義

• 將src/views/dev添加到項目src/views文件夾

• 修改/src/router/route.ts,將生成器節點添加到 '/example' 即可

  [
        {
          path: '/dev',
          name: 'dev',
          redirect: '/dev/codegen',
          meta: {
            title: '生成器',
            isLink: '',
            isHide: false,
            isKeepAlive: true,
            isAffix: false,
            isIframe: false,
            roles: ['admin'],
            icon: 'iconfont icon-zujian',
          },
          children: [
            {
              path: '/dev/codegen',
              name: '/dev/codegen',
              component: () => import('/@/views/dev/codegen/index.vue'),
              meta: {
                title: '代碼生成',
                isLink: '',
                isHide: false,
                isKeepAlive: true,
                isAffix: false,
                isIframe: false,
                roles: ['admin'],
                icon: 'iconfont icon-zujian',
              },
            }]
        },
        //...{path: '/example',...}
  ]
  

• 配置api+模型生成
  

• 配置路由
  

因爲框架有些更新改動，未做適配會存在一些報錯，解決即可，已經提PR了，可以根據需要查看pr或我的主頁獲取代碼

生成器使用

配置就緒，項目就可以絲滑的運行起來了

• 可以直接創建數據表，再生成代碼，亦可以根據已有的數據庫表來生成
  

• 創建完成後，在列表右側下拉按鈕 生成代碼 即可
  

• 生成菜單數據的前置操作，正常需要手動添加視圖及權限分組，再生成菜單

  • 新建視圖
    • 視圖名稱：代碼測試
    • 上級視圖：平臺管理
  • 新建權限分組
    • 上級分組：平臺管理
    • 名稱：代碼測試
    • 路由地址：/platform/test
    • 重定向：/platform/test/index

• 生成菜單

  • 點擊生成菜單數據
  • 將會在[視圖管理]頁面下生成
    • 測試管理 視圖命名：admin/test 視圖地址：admin/test/index
    • 這裏生成的是會加載到vue-router，地址如果有下劃線，橫槓等特殊符號需要自己修改
  • 將會在[權限管理]頁生成
    測試管理 菜單 路由地址：/admin/test 視圖地址：admin/test/index  路由命名：admin/test
    這個測試頁因爲是生成到平臺管理模塊所以才需要修改，因爲平臺模塊的key是platform，
    打開後左側導航會無法正確定位，所以需要修改下生成的權限菜單項
    將路由地址修改爲：/platform/test/index
    將路由名稱修改爲：platform/test/index

• 生成結果示例
  

結語

至此，對於zhontai的框架使用產出了三篇文章，框架上手還是比較簡單，有了代碼生成器也可以快速開發；目前得知作者也在弄微服務的框架，表示期待，默默點贊，覺得有用的也可以去zhontai/Admin.Core點個Star，希望後來者可以少踩一些坑吧。
目前準備使用框架來整個管理系統，等我邊踩坑邊記錄吧，後面有空再分享。