中台框架模块开辟实践-代码生成器的添加及使用

tsx81428  金牌会员 | 2024-6-24 10:39:20 | 来自手机 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题

主题 844|帖子 844|积分 2534

前言

之前已经分享过几篇关于中台项目框架的文章,相关介绍就不再赘述
所谓工欲善其事必先利其器,一个项目拥有一个代码生成器是很有必要的,能够大大的节省时间,减少手误,提供开辟效率(ps:特殊小团队搞微服务但是没有代码生成器,简直要了老命)
本文将分享怎样在中台框架项目 Admin.Core 中添加代码生成器模块,助力项目标快速开辟
预备

作为本系列的第一篇第一个模块,我们将从拉取代码开始,当然也可以通过堆栈的脚手架直接创建自己的项目,本系列后续都将直接基于源码开辟,保持框架的同步更新
克隆或下载 Admin.Core 代码

git clone  https://github.com/zhontai/Admin.Core.git
当然,也可以直接拉取改造创建好的模块堆栈 https://github.com/yimogit/Admin.Core
新建模块文件夹

添加 modules 文件夹及解决方案文件夹,存放模块代码

添加代码生成器模块


  • 功能:

    • 中台模块服务代码生成
    • 后续计划

      • 自界说模板管理
      • 通用代码生成器


  • 参考之前的设置文章,代码可直接从当前堆栈获取最新代码
设置后端


  • 添加模块类库 ZhonTai.Module.Dev


  • ZhonTai.Module.Dev 需添加对 ZhonTai.Admin 的引用
  • ZhonTai.Host 需添加对 modules/ZhonTai.Module.Dev 的引用,确保 xml 生成,不然 swagger 显示不了中文
  • 修改设置 Configs/appconfig.json

    • 程序集设置:"assemblyNames": [ "ZhonTai.Admin", "ZhonTai.Module.Dev" ]
    • Swagger 设置:
      1. "swagger": {
      2.   //启用
      3.   "enable": true,
      4.   "projects": [
      5.     {
      6.       "name": "中台Admin",
      7.       "code": "admin",
      8.       "version": "v8.2.0",
      9.       "description": ""
      10.     },
      11.     {
      12.       "name": "代码生成",
      13.       "code": "dev",
      14.       "version": "v8.2.0",
      15.       "description": ""
      16.     }
      17.   ]
      18. }
      复制代码

  • Ctrl+F5 运行后模块加载成功,后端设置完成

设置前端


  • 安装包:npm run install
  • 修改 gen/gen-api.js 添加生成器模块


  • 将生成器代码复制到 views 中


  • 实行:npm run gen:api 重新生成接口映射,会把后端接口转为前台可以直接调用的 ts 代码


  • 个人发起:可以根据模块独立一个文件,添加模块生成 gen-module.js,就只会重新生成模块文件


  • 运行项目:npm run dev 使用 admin 123asd 即可登录到系统

设置菜单


  • 代码生成器的代码添加了,但是目前还无法再页面中显示出来,有两三种做法
  • 第一种:可以直接修改 /src/router/route.ts 将下面的路由设置添加到参考样例的路由中,只能在开辟时使用

      1.     {
      2.         path: '/dev',
      3.         name: 'dev',
      4.         redirect: '/dev/codegen',
      5.         meta: {
      6.           title: '生成器',
      7.           isLink: '',
      8.           isHide: false,
      9.           isKeepAlive: true,
      10.           isAffix: false,
      11.           isIframe: false,
      12.           roles: ['admin'],
      13.           icon: 'iconfont icon-zujian',
      14.         },
      15.         children: [
      16.           {
      17.             path: '/dev/codegen',
      18.             name: '/dev/codegen',
      19.             component: () => import('/@/views/dev/codegen/index.vue'),
      20.             meta: {
      21.               title: '代码生成',
      22.               isLink: '',
      23.               isHide: false,
      24.               isKeepAlive: true,
      25.               isAffix: false,
      26.               isIframe: false,
      27.               roles: ['admin'],
      28.               icon: 'iconfont icon-zujian',
      29.             },
      30.           }]
      31.       }
      32.       //...{path: '/example',...}
      复制代码

  • 第二种方法是正常使用动态路由添加

    • 系统管理-视图管理中添加对应的视图(代码中的路由的界说,地址为 dev/codegen/index)

    • 权限管理-权限管理中添加对应菜单(路由地址:/codegen,路由命名:devgen)

    • 添加后刷新页面即可访问到代码生成页面


  • 第三种方法:直接实行 sql 即可(这个也是根据前面的操作生成的)
  1. --添加视图
  2. INSERT INTO ad_view (Id,ParentId,Name,Label,"Path",Description,Cache,Sort,Enabled,CreatedUserId,CreatedUserName,CreatedUserRealName,CreatedTime,ModifiedUserId,ModifiedUserName,ModifiedUserRealName,ModifiedTime,IsDeleted) VALUES
  3.          (558530915442693,0,NULL,'代码管理',NULL,NULL,0,99,1,161223411986501,'admin','管理员','2024-06-16 16:08:08',161223411986501,'admin','管理员','2024-06-16 16:08:16',0),
  4.          (558531082424325,558530915442693,'codegen','代码生成','dev/codegen/index',NULL,0,1,1,161223411986501,'admin','管理员','2024-06-16 16:08:49',NULL,NULL,NULL,NULL,0);
  5. -- 添加权限
  6. INSERT INTO ad_permission (Id,ParentId,Label,Code,"Type",ViewId,Name,"Path",Redirect,Icon,Hidden,Opened,NewWindow,"External",IsKeepAlive,IsAffix,Link,IsIframe,Sort,Description,Enabled,CreatedUserId,CreatedUserName,CreatedUserRealName,CreatedTime,ModifiedUserId,ModifiedUserName,ModifiedUserRealName,ModifiedTime,IsDeleted) VALUES
  7.          (558531409440773,0,'代码生成',NULL,2,558531082424325,'devgen','/codegen',NULL,'ele-Memo',0,0,0,0,0,0,NULL,0,5,NULL,1,161223411986501,'admin','管理员','2024-06-16 16:10:09',161223411986501,'admin','管理员','2024-06-16 16:10:55',0);
复制代码
代码生成服务已就位,接下来分享怎样使用
使用代码生成器的使用


  • 使用需知:在当地运行访问生成器列表时,将会同步迁徙生成器表,自动创建表到数据库(默认与后台模块同一个库)



  • 使用前确保有可用数据源,当地直接运行默认 sqlite 数据库,选择数据库后可以检察已有数据库表来进行代码生成


  • 当然,也可以直接创建表生成代码&创建表,这里以新建一个家常管理系统的模块作为演示
  • ~~前置条件:必要先在 modules 中创建对应类库 ZhonTai.Module.Homely,并添加对 ZhonTai.Admin 的引用,创建 DbKeys.AppDb 指定数据库注册键,HomelyConsts.AreaName 指定默认地区名称 ~~(目前已支持类库的自动创建)
设置生成规则


  • 第一步:选择数据源后,创建业务相关表:家常管理-物品管理

    • 根据格式来创建即可,实体名帕斯卡命名,会自动转换写法
    • 父菜单:必要在生成菜单前创建菜单分组


发起保存后再进行字段设置,避免误操作

创建完成后点击按钮【生成代码】即可

添加代码到项目


  • 第二步:生成代码后,将【后台代码】其拷贝到对应模块文件夹 ZhonTai.Module.Homely 中,并添加类库添加到 modules 文件夹(可根据必要分离 Default_Consts 内容,此中包含了路由前缀,数据库键值的默认设置,Core 文件夹只第一次使用,后续生成可以只覆盖实体&仓储&服务)


    • 修改 ZhonTai.Host 项目,添加对模块类库 ZhonTai.Module.Homely 的引用,并修改设置文件 appconfig.json 或者 appconfig.Development.json(若启用了设置中心 UseConfigCenter:true 则修改 ConfigCenter 文件夹下的设置,我这里因为设置中心的设置无效,于是禁用了)

    • 设置完成运行项目即可

    • 然后将前台代码【views】 文件夹拷贝到对应前端目录中,实行 npm run gen:api 或 npm run gen:module 生成新接口的前端映射文件,重新启动 下前端项目


生成迁徙数据&菜单&权限


  • 第三步:生成迁徙脚本到剪切板,连接到数据库进行实行(没有直接生成,实际应用场景中,生产环境一样平常手动实行,为了确保脚本的精确性,照旧先看一眼,背面加个生成并实行)


  • 第四步:因为是模块的第一个服务,所以必要先在权限管理中创建一个【家常管理】的分组,这里的名字和代码生成器中填写的父菜单必要一致,否则无法生成菜单


    • 这里可以重定向的路由地址由后续生成,默认列表页以 /list 末端

  • 第五步:接口管理中同步最新接口



  • 第六步:在代码生成列表点击【生成菜单数据】将会自动将模块的菜单,视图生成

结果展示

生成成功,刷新页面,一个简单的物品管理的基础功能就出来了

新增编辑页面已同步优化为弹窗

后语

至此,代码生成器又一次被我重新改造了一番,后续有时间还会继续完善代码生成器。
flag 先立在这:做一个可以自界说模块的通用代码生成器
有感爱好的小伙伴欢迎一起加 zhontai 群沟通交流
改代码不易,写作更不易,渴望路过的大佬们点个赞,指点一二
相关堆栈


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

tsx81428

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表