03.前后端分离中台框架 zhontai 项目代码生成器的使用

前后,分离,中台,框架,zhontai,项目,代码,生成器,使用 · 浏览次数 : 1369

小编点评

**开发理念：** 1. **采用可视化代码生成器：** 使用第三方代码生成器，自动生成前端代码，减少开发工作量。 2. **分发代码生成器配置：** 将代码生成器配置项添加到项目配置中，方便手动配置。 3. **利用自动生成器配置：** 使用代码生成器配置项，自动生成所需的 API 和模型路由。 4. **简化视图和权限分配：** 使用 codegen 配置简化视图和权限分配，降低开发难度。 5. **采用可扩展性：** 考虑使用模块化设计，将代码组织成独立模块，方便维护和扩展。 6. **关注性能：** 在代码生成过程中，关注性能，并采用最佳实践来优化响应速度。 7. **提供清晰的文档：** 创建详细的文档，说明代码生成器的配置和使用指南，帮助开发者快速上手。

正文

zhontai 项目

基于 .Net7.x + Vue 等技术的前后端分离后台权限管理系统，想你所想的开发理念，希望减少工作量，帮助大家实现快速开发

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

代码生成器：
- 后端：https://github.com/yimogit/Admin.Core.Dev Fork 自 https://github.com/share36/Admin.Core.Dev
- 前端：https://github.com/yimogit/admin.ui.plus.dev Fork 自 https://github.com/share36/admin.ui.plus.dev
官方默认项目模板生成：
- dotnet new install ZhonTai.Template
- dotnet new MyApp -n MyCompanyName.MyProjectName

本文主要介绍使用第三方的可视化代码生成器生成前后台代码

后端生成

代码仓库 https://github.com/yimogit/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/yimogit/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，希望后来者可以少踩一些坑吧。
目前准备使用框架来整个管理系统，等我边踩坑边记录吧，后面有空再分享。