使用代碼生成工具快速開發應用-結合後端Web API提供介面和前端頁面快速生成，實現通用的業務編碼規則管理

在前面隨筆《在Winform應用中增加通用的業務編碼規則生成》，我介紹了基於Winform和WPF的一個通用的業務編碼規則的管理功能，本篇隨筆介紹基於後端Web API介面，實現快速的Vue3+ElementPlus前端界面的開發整合，同樣是基於代碼生成工具實現快速的前端代碼的生成處理。

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/');

我們註釋掉的代碼，是統一生成，供參考生成自定義的介面調用代碼的，其中GenerateNumber 是我們手工添加的一個自定義Web API的封裝調用，對應著Web API的介面規則。

而視圖代碼，我們複製到對應的views目錄上即可，具體位置可以根據實際的需要移動目錄處理，由於是一些通用的功能，我們把它放到了Security許可權的視圖目錄中。

 使用代碼生成工具，直接生成的視圖包含了幾個文件，這些文件就是各個模塊的組件定義，如下視圖代碼所示。

它們最終是整合呈現在index.vue的視圖入口中，我們可以適當的調整一下相關的界面代碼。

在我們測試界面前，我們需要把靜態路由添加到系統中去，我們找到對應模塊的路由定義信息，如下所示。

 添加上剛纔的頁面路由地址，如下所示。

 至此，我們構建了一個完整的界面和入口了，可以在VSCode的控制臺中運行前端界面測試了，測試需要結合其中Web API的後端。

我們可以根據實際的效果進行界面的微調處理和完善即可，主要是排版佈局的一些微調。

運行界面，登錄後進入界面，可以查看相關的菜單，然後查看《業務編碼規則》界面信息了。

查看界面和編輯界面分屬不同的視圖界面，查看界面效果如下所示。

 編輯界面效果如下所示，微調了界面效果，並增加了一個測試生成的按鈕。

結合前面的WInform和WPF管理端的界面，達到了三者前端共同管理的效果了。