使用代码生成工具快速开发应用 - 结合后端 Web API 提供接口和前端页面快速生成，实现通用的业务编码规则管理

2023-12-25
福建
本文字数：3074 字
阅读完需：约 10 分钟

1、通用的业务编码规则的管理功能

在前面随笔我们介绍了一个通用的业务编码规则的管理功能，通过代码生成工具Database2Sharp一步步的生成相关的后端和 Winform、WPF 的界面，进行了整合，通过利用代码生成工具 Database2sharp 生成节省了常规功能的开发时间，并且实现的界面整体一致的风格。

通用的业务编码规则的用途：

在我们很多应用系统中，往往都需要根据实际情况生成一些编码规则，如订单号、入库单号、出库单号、退货单号等等，我们有时候根据规则自行增加一个函数来生成处理，不过我们仔细观察后，发现它们的编码规则有很大的共通性，因此可以考虑使用一些通用的业务编码规则生成，从而在系统中统一维护即可。

数据库设计信息：

设计一个通用的编码规则，对这些元素进行组合配置，数据库设计如下所示。

利用代码生成工具 Database2sharp 生成基于《SqlSugar开发框架》的后端接口:

首先我们通过上面 PowerDesigner 工具生成 SQL 脚本后，创建对应的数据库表，从代码生成工具中展开数据库信息。

先展开数据库和表的列表信息，然后选择《SqlSugar 框架代码生成》，选择刚才创建的表信息，生成 SqlSugar 框架代码，如下界面所示。

生成的代码整合到基础框架上，实现我们业务代码的增量开发。同理对于 Winform 的代码和 WPF 的代码，选择相关的功能入口，生成相关的界面代码整合到对应的项目上即可，这里不再赘述。

最终 Winform 和 WPF 管理界面如下所示。

其中 Winform 端的业务编码的管理界面和查看的对应编码的界面如下所示，供参考设计界面处理。

Winform 端的编辑单个业务编码规则的界面如下所示。

同样，WPF 管理端的界面也可以重用具体的业务编码规则处理，WPF 应用端的界面如下所示。

WPF 应用端的通用业务编码规则的编辑界面如下所示。

因此，不管对于 Winform 还是 WPF 的界面，他们的展示方式都是类似的，我们可以重用业务层对通用编码规则的定义。

2、使用代码生成工具快速开发 Vue3+ElementPlus 前端应用

我们在开始 Vue3 的前端界面生成之前，我们先来看看 WebAPI 的控制器代码，由于使用代码生成工具生成的控制器，具有标准的 CRUD 等常规的接口，因此我们只需要实现一些自定义的接口即可，由于自定义的接口也在 Service 层实现了，如下代码所示。

这个 Service 层的接口里面的一些函数代码，我们是根据数据库表的信息一一生成，基本不需要过多改动，只需要增加一个自定义的测试生成业务编码的接口即可。

而由于 Service 层的实现了逻辑处理的接口，因此 Web API 的控制器代码也是比较简单，只是需要继承一下基类即可，如下代码所示。

namespace WebApi.Controllers{    /// <summary>    /// 业务表编码规则 业务控制器    /// </summary>    public class TableNumberController : BusinessController<TableNumberInfo, string, TableNumberPagedDto>    {               private ITableNumberService _tablenumberService;
        /// <summary>        /// 构造函数，并注入基础接口对象        /// </summary>        /// <param name="tablenumberService">服务接口对象</param>        public TableNumberController(ITableNumberService tablenumberService) :base(tablenumberService)        {            this._tablenumberService = tablenumberService;        }
        /// <summary>        /// 根据定义表名、单据头、分割符1、分割符2，生成业务编码。如果生成错误，返回空字符串        /// </summary>        /// <param name="tableNameOrCode">表名或代码</param>        /// <returns></returns>        /// <returns></returns>        [HttpGet]        [Route("GenerateNumber/{tableNameOrCode}")]        public async Task<string> GenerateNumber(string tableNameOrCode)        {            return await _tablenumberService.GenerateNumber(tableNameOrCode);        }    }}

复制代码

自定义的接口实现，也只需简单的调用一下接口即可。

有了前面这些准备，我们来看看如何实现快速的 Vue3+ElementPlus 前端界面的开发整合。

在代码生成工具的数据库列表右键上找到上面的功能入口（或者在工具栏的 Web 界面代码生成中选择）

或者从工具栏中选择【Vue3+Element 界面代码生成】

最后选择该业务处理的表，生成相关的界面代码，其中包括了对 WebAPI 的远程调用封装的 API 客户端类，以及 View 视图界面。

其中 Vue3+Element 前端的 API 类如下位置复制过去，放在 Src/api 目录下，这个是统一放置相关 Web API 调用的 JS 的 ES6 类。

其中这个 tablenumber 的类也是有基类的，我们基于基类的基础上添加我们的自定义接口调用接口，如下是实际的代码。

// 导入API基类对象,默认具有Get/GetAll/Create/Update/Delete/BatchDelete/SaveImport/Count等接口import BaseApi from './base-api';// 业务类自定义接口实现, 通用的接口已经在BaseApi中定义class Api extends BaseApi {  // 参考下面案例，增加自定义函数  // GET 方法例子  // 根据条件计算记录数量  // async GetCount(params: object) {  //   return await this.HttpGet<number>(this.baseurl + "count", params);  // }  // POST 方法例子  // 创建对象  // async Create(data: object) {  //   return await this.HttpPost<boolean>(this.baseurl + `create`, data);  // }  // PUT 方法例子  // 更新对象  // async Update(data: object) {  //   return await this.HttpPut<boolean>(this.baseurl + `update`, data);  // }  // DELETE 方法例子  // 删除指定ID的对象  // async Delete(id: number | string) {  //   return await this.HttpDelete<boolean>(this.baseurl + `${id}`);  // }
  // 根据定义表名、单据头、分割符1、分割符2，生成业务编码。如果生成错误，返回空字符串  async GenerateNumber(tableNameOrCode: string) {    return await this.HttpGet<string>(this.baseurl + `GenerateNumber/${tableNameOrCode}`);  }}
// 构造业务表编码规则 Api实例，并传递业务类接口地址export default new Api('/api/tablenumber/');