vue3代码生成器

约 1686 字大约 6 分钟

2025-04-23

前言

都什么年代了，还在用代码生成器？有这个想法的人，通常是拿来和低代码平台做对比。那我们就从多维度对比一下：

维度	低代码平台	代码生成器
用户群体	非专业开发者、业务人员、快速交付团队	专业开发者
技术门槛	无需编码能力，强调业务逻辑可视化配置	需理解生成代码并手动集成/调试
灵活性	受限于平台提供的组件和逻辑抽象能力	生成代码可自由修改，灵活性高
技术依赖性	依赖平台运行时，可能面临厂商锁定风险	生成代码脱离工具，技术栈自主可控
适用场景	快速构建标准化应用（如简单报表、问卷调查、信息登记等）	减少重复编码，提升开发效率

从上面对比我们可以看出二者使用场景完全不同：

低代码平台：业务人员通过拖拽表单设计器、配置数据源等，直接发布到低代码平台，无需编写代码。
代码生成器：自动创建Entity、Controller、Service层基础代码，开发者手动补充业务逻辑，一旦代码生成完成，就可以脱离工具，技术自主可控。

于是就有了本节的内容。当然，OpenAuth.Net即将推出低代码平台版本，敬请期待😀

术语解释

在使用代码生成器添加新功能之前，需要先了解OpenAuth.Net生成代码时的两个概念：动态头部和固定头部

动态头部

如果启用动态头部，表示前端渲染列表（或表单）时，列表的列定义是从后端返回。通常用于控制前端字段显示权限。配合后端：权限控制/字段权限如：常见的前端代码如下：

  <auth-table  ref="mainTable" :table-fields="headerList"></auth-table>

getList() {
      resources.getList(this.listQuery).then((response) => {
        ...
        this.headerList = response.columnFields
        ...
      })
    },

固定头部

如果不是上面的情况，则生成的前端列为固定的头部。如下：


  <auth-table  ref="mainTable" :table-fields="headerList"></auth-table>

initCfg() {
      this.headerList = [
        new ColumnDefine('id', 'id', false, false, 'text', '', 'string', 'varchar', ''),
        new ColumnDefine('tableName', '表名', true, true, 'text', '', 'string', 'varchar', ''),
        new ColumnDefine('moduleName', '模块名称', true, true, 'text', '', 'string', 'varchar', ''),
        new ColumnDefine('parentTableId', '父表', true, true, 'selectDynamic', '/BuilderTables/AllMain', 'string', 'varchar', ''),
        new ColumnDefine('foreignKey', '外键', true, true, 'text', '', 'string', 'varchar', ''),
      ]

准备工作

数据库OpenAuthPro中添加仓储表【Stock】，本文以该数据表为例。参考表结构如下：

-- mysql示例
create table stock
(
    Id       varchar(50)    not null comment '数据ID'
        primary key,
    Name     text           not null comment '产品名称',
    Number   int            not null comment '产品数量',
    Price    decimal(10, 1) not null comment '产品单价',
    Status   int            not null comment '出库/入库',
    Viewable varchar(50)    not null comment '可见范围',
    User     varchar(50)    not null comment '操作人',
    Time     datetime       not null comment '操作时间',
    OrgId    varchar(50)    null comment '组织ID'
)
    comment '出入库信息表' charset = utf8
                           row_format = COMPACT;

使用Visual Studio 以开发模式启动后端。参考：编译运行webapi
启动企业版前端。参考：启动前端

后续操作全部在系统中完成。

单表添加

代码生成界面，点击添加按钮，输入想添加的模块信息。

录入基础信息，点击确认保存后，系统会添加一条记录，并自动加载对应的字段信息。

这时，编辑字段具体的属性。如是否【可显示】【可编辑】等。

子表添加

注意

如果只生成单表结构，可以跳过本节

如果需要添加主/从（父/子）结构，需要先添加子表信息。代码生成界面，点击添加按钮，输入想添加的模块信息。

注意

子表的动态头部属性务必与父表保持一致，否则会造成生成的代码不能正常运行

生成模块

选中刚刚添加的Stock表，依次点击【生成实体】【生成业务代码】【生成vue页面】;

如果存在子表，也进行相同的操作。即选中刚刚添加的StockDetail表，依次点击【生成实体】【生成业务代码】【生成vue页面】;

成功后生成的后端.Net代码位置如下：

OpenAuth.Repository\Domain\Stock.cs OpenAuth.App\StockApp\StockApp.cs OpenAuth.App\StockApp\Request\AddOrUpdateStockReq.cs OpenAuth.App\StockApp\Request\QueryStockListReq.cs OpenAuth.WebApi\Controllers\StocksController.cs

并且会在OpenAuth.Repository\OpenAuthDBContext.cs中自动添加：

 public virtual DbSet<Stock> Stocks { get; set; }

前端Vue代码： src\api\stocks.js src\views\stocks\index.vue

注意

完成以上步骤后，请重启OpenAuth.WebApi，用来重新加载刚刚生成的后台代码

子表不需要添加模块

配置模块地址

经过以上步骤，重启系统后，使用System账号重新登录，在【模块管理】中，添加"仓储管理"模块，如下图：

这样就可以访问刚刚新加的仓储管理功能，到此就完成了添加一个新模块功能：

代码生成功能字段详解

模块名称：表示这个生成的模块名称，根据自己需要填写。
表名：必填表示数据库中对应的表名。
父表：表示主/从（父/子）表的父表。如果该项不选，则生成的是单表结构的代码，如果选择了父表，则生成主/从（父/子）表的代码。
外键：表示与父表关联的外键。如果选择了父表，则该项必填。
外部数据源：如果需要连接其他数据库生成代码，需要选对应的外部数据源，外部数据源在【数据源管理】功能中配置。
动态头部：如果选中，表示前端渲染列表（或表单）时，列表的列定义是从后端返回。通常用于控制前端字段显示权限。
实体类名称：必填表示生成的实体类名称。
命名空间：必填表示生成的实体类的命名空间。默认OpenAuth.Repository.Domain。
模块编码：必填表示生成的模块业务类名称，比如XxxxxApp。
Vue目录: 生成vue代码时，代码存放的目录。比如D:\openauthvue3。

其他

当采用动态头部时，如果数据库新加了字段，需要使用【同步结构】功能把新字段同步到代码生成器中。为了防止对已有的配置造成影响，该功能只新增字段，不会对已有字段进行调整。