電商供應(yīng)鏈網(wǎng)站競(jìng)價(jià)推廣返點(diǎn)開(kāi)戶
1、通用的業(yè)務(wù)編碼規(guī)則的管理功能
在前面隨筆我們介紹了一個(gè)通用的業(yè)務(wù)編碼規(guī)則的管理功能,通過(guò)代碼生成工具Database2Sharp一步步的生成相關(guān)的后端和Winform、WPF的界面,進(jìn)行了整合,通過(guò)利用代碼生成工具Database2sharp生成節(jié)省了常規(guī)功能的開(kāi)發(fā)時(shí)間,并且實(shí)現(xiàn)的界面整體一致的風(fēng)格。
通用的業(yè)務(wù)編碼規(guī)則的用途:
在我們很多應(yīng)用系統(tǒng)中,往往都需要根據(jù)實(shí)際情況生成一些編碼規(guī)則,如訂單號(hào)、入庫(kù)單號(hào)、出庫(kù)單號(hào)、退貨單號(hào)等等,我們有時(shí)候根據(jù)規(guī)則自行增加一個(gè)函數(shù)來(lái)生成處理,不過(guò)我們仔細(xì)觀察后,發(fā)現(xiàn)它們的編碼規(guī)則有很大的共通性,因此可以考慮使用一些通用的業(yè)務(wù)編碼規(guī)則生成,從而在系統(tǒng)中統(tǒng)一維護(hù)即可。
數(shù)據(jù)庫(kù)設(shè)計(jì)信息:
設(shè)計(jì)一個(gè)通用的編碼規(guī)則,對(duì)這些元素進(jìn)行組合配置,數(shù)據(jù)庫(kù)設(shè)計(jì)如下所示。
利用代碼生成工具Database2sharp生成基于《SqlSugar開(kāi)發(fā)框架》的后端接口:
首先我們通過(guò)上面PowerDesigner工具生成SQL腳本后,創(chuàng)建對(duì)應(yīng)的數(shù)據(jù)庫(kù)表,從代碼生成工具中展開(kāi)數(shù)據(jù)庫(kù)信息。
先展開(kāi)數(shù)據(jù)庫(kù)和表的列表信息,然后選擇《SqlSugar框架代碼生成》,選擇剛才創(chuàng)建的表信息,生成SqlSugar框架代碼,如下界面所示。
生成的代碼整合到基礎(chǔ)框架上,實(shí)現(xiàn)我們業(yè)務(wù)代碼的增量開(kāi)發(fā)。同理對(duì)于Winform的代碼和WPF的代碼,選擇相關(guān)的功能入口,生成相關(guān)的界面代碼整合到對(duì)應(yīng)的項(xiàng)目上即可,這里不再贅述。
最終Winform和WPF管理界面如下所示。
其中Winform端的業(yè)務(wù)編碼的管理界面和查看的對(duì)應(yīng)編碼的界面如下所示,供參考設(shè)計(jì)界面處理。
Winform端的編輯單個(gè)業(yè)務(wù)編碼規(guī)則的界面如下所示。
同樣,WPF管理端的界面也可以重用具體的業(yè)務(wù)編碼規(guī)則處理,WPF應(yīng)用端的界面如下所示。
?WPF應(yīng)用端的通用業(yè)務(wù)編碼規(guī)則的編輯界面如下所示。
?因此,不管對(duì)于Winform還是WPF的界面,他們的展示方式都是類似的,我們可以重用業(yè)務(wù)層對(duì)通用編碼規(guī)則的定義。
2、使用代碼生成工具快速開(kāi)發(fā)Vue3+ElementPlus前端應(yīng)用
我們?cè)陂_(kāi)始Vue3的前端界面生成之前,我們先來(lái)看看WebAPI的控制器代碼,由于使用代碼生成工具生成的控制器,具有標(biāo)準(zhǔn)的CRUD等常規(guī)的接口,因此我們只需要實(shí)現(xiàn)一些自定義的接口即可,由于自定義的接口也在Service層實(shí)現(xiàn)了,如下代碼所示。
這個(gè)Service層的接口里面的一些函數(shù)代碼,我們是根據(jù)數(shù)據(jù)庫(kù)表的信息一一生成,基本不需要過(guò)多改動(dòng),只需要增加一個(gè)自定義的測(cè)試生成業(yè)務(wù)編碼的接口即可。?
而由于Service層的實(shí)現(xiàn)了邏輯處理的接口,因此Web API的控制器代碼也是比較簡(jiǎn)單,只是需要繼承一下基類即可,如下代碼所示。
namespace WebApi.Controllers
{/// <summary>/// 業(yè)務(wù)表編碼規(guī)則 業(yè)務(wù)控制器/// </summary>public class TableNumberController : BusinessController<TableNumberInfo, string, TableNumberPagedDto>{ private ITableNumberService _tablenumberService;/// <summary>/// 構(gòu)造函數(shù),并注入基礎(chǔ)接口對(duì)象/// </summary>/// <param name="tablenumberService">服務(wù)接口對(duì)象</param>public TableNumberController(ITableNumberService tablenumberService) :base(tablenumberService){this._tablenumberService = tablenumberService;}/// <summary>/// 根據(jù)定義表名、單據(jù)頭、分割符1、分割符2,生成業(yè)務(wù)編碼。如果生成錯(cuò)誤,返回空字符串/// </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);}}
}
自定義的接口實(shí)現(xiàn),也只需簡(jiǎn)單的調(diào)用一下接口即可。
有了前面這些準(zhǔn)備,我們來(lái)看看如何實(shí)現(xiàn)快速的Vue3+ElementPlus前端界面的開(kāi)發(fā)整合。
在代碼生成工具的數(shù)據(jù)庫(kù)列表右鍵上找到上面的功能入口(或者在工具欄的Web界面代碼生成中選擇)
或者從工具欄中選擇【Vue3+Element界面代碼生成】
最后選擇該業(yè)務(wù)處理的表,生成相關(guān)的界面代碼,其中包括了對(duì)WebAPI 的遠(yuǎn)程調(diào)用封裝的API客戶端類,以及View視圖界面。
其中Vue3+Element前端的API類如下位置復(fù)制過(guò)去,放在Src/api目錄下,這個(gè)是統(tǒng)一放置相關(guān)Web API調(diào)用的JS的ES6類。
其中這個(gè)tablenumber的類也是有基類的,我們基于基類的基礎(chǔ)上添加我們的自定義接口調(diào)用接口,如下是實(shí)際的代碼。
// 導(dǎo)入API基類對(duì)象,默認(rèn)具有Get/GetAll/Create/Update/Delete/BatchDelete/SaveImport/Count等接口
import BaseApi from './base-api';
// 業(yè)務(wù)類自定義接口實(shí)現(xiàn), 通用的接口已經(jīng)在BaseApi中定義
class Api extends BaseApi {// 參考下面案例,增加自定義函數(shù)// GET 方法例子// 根據(jù)條件計(jì)算記錄數(shù)量// async GetCount(params: object) {// return await this.HttpGet<number>(this.baseurl + "count", params);// }// POST 方法例子// 創(chuàng)建對(duì)象// async Create(data: object) {// return await this.HttpPost<boolean>(this.baseurl + `create`, data);// }// PUT 方法例子// 更新對(duì)象// async Update(data: object) {// return await this.HttpPut<boolean>(this.baseurl + `update`, data);// }// DELETE 方法例子// 刪除指定ID的對(duì)象// async Delete(id: number | string) {// return await this.HttpDelete<boolean>(this.baseurl + `${id}`);// }// 根據(jù)定義表名、單據(jù)頭、分割符1、分割符2,生成業(yè)務(wù)編碼。如果生成錯(cuò)誤,返回空字符串a(chǎn)sync GenerateNumber(tableNameOrCode: string) {return await this.HttpGet<string>(this.baseurl + `GenerateNumber/${tableNameOrCode}`);}
}// 構(gòu)造業(yè)務(wù)表編碼規(guī)則 Api實(shí)例,并傳遞業(yè)務(wù)類接口地址
export default new Api('/api/tablenumber/');
我們注釋掉的代碼,是統(tǒng)一生成,供參考生成自定義的接口調(diào)用代碼的,其中GenerateNumber?是我們手工添加的一個(gè)自定義Web API的封裝調(diào)用,對(duì)應(yīng)著Web API的接口規(guī)則。
而視圖代碼,我們復(fù)制到對(duì)應(yīng)的views目錄上即可,具體位置可以根據(jù)實(shí)際的需要移動(dòng)目錄處理,由于是一些通用的功能,我們把它放到了Security權(quán)限的視圖目錄中。
?使用代碼生成工具,直接生成的視圖包含了幾個(gè)文件,這些文件就是各個(gè)模塊的組件定義,如下視圖代碼所示。
它們最終是整合呈現(xiàn)在index.vue的視圖入口中,我們可以適當(dāng)?shù)恼{(diào)整一下相關(guān)的界面代碼。
在我們測(cè)試界面前,我們需要把靜態(tài)路由添加到系統(tǒng)中去,我們找到對(duì)應(yīng)模塊的路由定義信息,如下所示。
?添加上剛才的頁(yè)面路由地址,如下所示。
?至此,我們構(gòu)建了一個(gè)完整的界面和入口了,可以在VSCode的控制臺(tái)中運(yùn)行前端界面測(cè)試了,測(cè)試需要結(jié)合其中Web API的后端。
我們可以根據(jù)實(shí)際的效果進(jìn)行界面的微調(diào)處理和完善即可,主要是排版布局的一些微調(diào)。
運(yùn)行界面,登錄后進(jìn)入界面,可以查看相關(guān)的菜單,然后查看《業(yè)務(wù)編碼規(guī)則》界面信息了。
查看界面和編輯界面分屬不同的視圖界面,查看界面效果如下所示。
?編輯界面效果如下所示,微調(diào)了界面效果,并增加了一個(gè)測(cè)試生成的按鈕。
結(jié)合前面的WInform和WPF管理端的界面,達(dá)到了三者前端共同管理的效果了。
文章轉(zhuǎn)載自:伍華聰
原文鏈接:https://www.cnblogs.com/wuhuacong/p/17921357.html
體驗(yàn)地址:引邁 - JNPF快速開(kāi)發(fā)平臺(tái)_低代碼開(kāi)發(fā)平臺(tái)_零代碼開(kāi)發(fā)平臺(tái)_流程設(shè)計(jì)器_表單引擎_工作流引擎_軟件架構(gòu)