curd-gen 项目

curd-gen 项目的创建本来是为了做为 illuminant 项目的一个工具，用来生成前端增删改查页面中的基本代码。

最近，随着 antd Pro v5 的升级，将项目进行了升级，现在生成的都是 ts 代码。这个项目的自动生成代码都是基于 golang 的标准库 template 的，所以这篇博客也算是对使用 template 库的一次总结。

自动生成的配置

curd-gen 项目的自动代码生成主要是3部分：

  • 类型定义：用于API请求和页面显示的各个类型
  • API请求：graphql 请求语句和函数
  • 页面：列表页面，新增页面和编辑页面。新增和编辑是用弹出 modal 框的方式。

根据要生成的内容，定义了一个json格式文件，做为代码生成的基础。 json文件的说明在：https://gitee.com/wangyubin/curd-gen#curdjson

生成类型定义

类型是API请求和页面显示的基础，一般开发流程也是先根据业务定义类型，才开始API和页面的开发的。 ​

自动生成类型定义就是根据 json 文件中的字段列表，生成 ts 的类型定义。模板定义如下：

​

除了主要的类型，还包括了增删改查 API 返回值的定义。 ​

其中用到 text/template 库相关的知识点有：

  1. 通过 **with **限制访问范围，这样，在 {{- with xxx}} 和 {{- end}} 的代码中，不用每个字段前再加 .Model.Fields 前缀了
  2. 通过 range 循环访问数组，根据数组中每个元素来生成相应的代码
  3. 通过 if 判断，根据json文件中的属性的不同的定义生成不同的代码
  4. 自定义函数 **ConvertTypeForTs **，这个函数是将json中定义的 graphql type 转换成 typescript 中对应的类型。用自定义函数是为了避免在模板中写过多的逻辑代码

生成API

这里只生成 graphql 请求的 API，是为了配合 illuminant 项目。 API的参数和返回值用到的对象就在上面自动生成的类型定义中。 ​

这个模板中也使用了几个自定义函数，GenGraphqlSearchWhere，GenGraphqlInsertParams，**GenGraphqlUpdateParams **等等。

生成列表页面，新增和编辑页面

最后一步，就是生成页面。列表页面是主要页面：

新增页面和编辑页面差别不大，分开定义是为了以后能分别扩展。新增页面：

页面生成中有个地方困扰了我一阵，就是页面中有个和 text/template 标记冲突的地方，也就是 {{ 的显示。比如上面的 submitter={{"{{"}} ，页面中需要直接显示 {{ 2个字符，但 {{ }} 框住的部分是模板中需要替换的部分。

所以，模板中需要显示 {{ 的地方，可以用 {{"{{"}} 代替。

总结

上面的代码生成虽然需要配合 illuminant 项目一起使用，但是其思路可以参考。

代码生成无非就是找出重复代码的规律，将其中变化的部分定义出来，然后通过模板来生成不同的代码。通过模板来生成代码，跟拷贝相似代码来修改相比，可以有效减少很多人为造成的混乱，比如拷贝过来后漏改，或者有些多余代码未删除等等。