有時候，為了給前端頁面輸出內容，有時候我們需要準備和資料庫不一樣的實體信息，因為資料庫可能記錄的是一些引用的ID或者特殊字元，那麼我們為了避免前端單獨的進行轉義處理，我們可以在後端進行統一的格式化後再行輸出，後端處理可以採用不同的DTO屍體信息，後端對不同的實體進行映射處理即可，也可以採用同一個實體... ...
有時候，為了給前端頁面輸出內容，有時候我們需要準備和資料庫不一樣的實體信息，因為資料庫可能記錄的是一些引用的ID或者特殊字元，那麼我們為了避免前端單獨的進行轉義處理，我們可以在後端進行統一的格式化後再行輸出，後端處理可以採用不同的DTO屍體信息，後端對不同的實體進行映射處理即可，也可以採用同一個實體，在SqlSugar實體信息中忽略對應的欄位寫入實現，本篇隨筆介紹後者的處理方式，實現在在工作流列表頁面中增加一些轉義信息的輸出處理。
1、後端的轉義處理
大多數頁面，我們的前端顯示信息DTO和後端的資料庫實體信息Entity是一致的，只有部分信息的差異，特別在工作流模塊中，由於繼承原來歷史的資料庫設計結構，因此很多引用的欄位是int類型的，那麼為了避免前端對內容的頻繁解析，因此必要的時候在後端對內容進行統一的處理，實現內容的轉義。
例如我們以其中的模板流程的實體信息定義來看，除了對常規的信息，我們還需要對一些轉義信息的處理。
如實體類對應欄位的SqlSugar的標識，只需要增加SqlsugarColumn的標識即可。
[SqlSugar.SugarColumn(ColumnName = "PROC_TYPE")] public virtual int ProcType { get; set; }
如下所示的實體類
如果我們需要額外增加一些信息的承載，而在保存或者提取資料庫欄位信息的時候，進行忽略處理，那麼標識為Ignor即可。
[SqlSugar.SugarColumn(IsIgnore = true)] public virtual string ProcTypeName { get; set; }
如下實體類代碼所示
有了實體信息的定義，我們在SqlSurgar框架的服務層返回列表信息的時候，可以對列表的內容進行統一的轉換，而列表返回是在基類定義的統一泛型函數，如下定義所示。
/// <summary> /// 根據條件獲取列表 /// </summary> /// <param name="input">分頁查詢條件</param> /// <returns></returns> public virtual async Task<PagedResultDto<TEntity>> GetListAsync(TGetListInput input) { var query = CreateFilteredQueryAsync(input); var totalCount = await query.CountAsync(); query = ApplySorting(query, input); query = ApplyPaging(query, input); var list = await query.ToListAsync(); return new PagedResultDto<TEntity>( totalCount, list ); }
因此需要在繼承的子類中重寫一下進行處理，如下代碼所示。
而對於附加信息的多少，則根據我們的業務規則適當調整即可，有些實體信息附加的內容可能會多一些，有些會少一些，有些可能保存原狀即可。
2、前端的列表顯示
介紹了後端的內容轉義，前端相對處理就比較簡單了，只需要把對應的內容進行顯示即可。如前端的Vue3+TypeScript+ElementPlus的代碼如下。
<!--表格列表信息 --> <el-table v-loading="loading" :data="list" border fit stripe highlight-current-row :header-cell-style="{ background: '#eef1f6', color: '#606266' }" @selection-change="selectionChange" @row-dblclick="rowDbclick" @sort-change="sortChange" > <el-table-column type="selection" width="40" /> <el-table-column align="center" sortable="custom" prop="proc_Name" label="流程環節名稱"> <template v-slot="scope"> {{ scope.row.procName }} </template> </el-table-column> <el-table-column align="center" sortable="custom" prop="proc_Type" label="處理類型"> <template v-slot="scope"> {{ scope.row.procTypeName }} </template> </el-table-column> <el-table-column align="center" sortable="custom" prop="form_ID" label="對應表單"> <template v-slot="scope"> {{ scope.row.formName ?? '所有表單' }} </template> </el-table-column>
js代碼也只需簡單的獲取對應list的分頁列表即可。前端沒有額外增加工作量。
工作流部分轉義頁面顯示效果如下所示。
系列文章：
《基於SqlSugar的開發框架的循序漸進介紹（1）--框架基礎類的設計和使用》
《基於SqlSugar的開發框架循序漸進介紹（2）-- 基於中間表的查詢處理》
《基於SqlSugar的開發框架循序漸進介紹（3）-- 實現代碼生成工具Database2Sharp的整合開發》
《基於SqlSugar的開發框架循序漸進介紹（4）-- 在數據訪問基類中對GUID主鍵進行自動賦值處理 》
《基於SqlSugar的開發框架循序漸進介紹（5）-- 在服務層使用介面註入方式實現IOC控制反轉》
《基於SqlSugar的開發框架循序漸進介紹（6）-- 在基類介面中註入用戶身份信息介面 》
《基於SqlSugar的開發框架循序漸進介紹（7）-- 在文件上傳模塊中採用選項模式【Options】處理常規上傳和FTP文件上傳》
《基於SqlSugar的開發框架循序漸進介紹（8）-- 在基類函數封裝實現用戶操作日誌記錄》
《基於SqlSugar的開發框架循序漸進介紹（9）-- 結合Winform控制項實現欄位的許可權控制》
《基於SqlSugar的開發框架循序漸進介紹（10）-- 利用axios組件的封裝，實現對後端API數據的訪問和基類的統一封裝處理》
《基於SqlSugar的開發框架循序漸進介紹（11）-- 使用TypeScript和Vue3的Setup語法糖編寫頁面和組件的總結》
《基於SqlSugar的開發框架循序漸進介紹（12）-- 拆分頁面模塊內容為組件，實現分而治之的處理》
《基於SqlSugar的開發框架循序漸進介紹（13）-- 基於ElementPlus的上傳組件進行封裝，便於項目使用》
《基於SqlSugar的開發框架循序漸進介紹（14）-- 基於Vue3+TypeScript的全局對象的註入和使用》
《基於SqlSugar的開發框架循序漸進介紹（15）-- 整合代碼生成工具進行前端界面的生成》
《基於SqlSugar的開發框架循序漸進介紹（16）-- 工作流模塊的功能介紹》
《基於SqlSugar的開發框架循序漸進介紹（17）-- 基於CSRedis實現緩存的處理》
《基於SqlSugar的開發框架循序漸進介紹（18）-- 基於代碼生成工具Database2Sharp，快速生成Vue3+TypeScript的前端界面和Winform端界面》
《基於SqlSugar的開發框架循序漸進介紹（19）-- 基於UniApp+Vue的移動前端的功能介紹》
《基於SqlSugar的開發框架循序漸進介紹（20）-- 在基於UniApp+Vue的移動端實現多條件查詢的處理》
專註於代碼生成工具、.Net/.NetCore 框架架構及軟體開發，以及各種Vue.js的前端技術應用。著有Winform開發框架/混合式開發框架、微信開發框架、Bootstrap開發框架、ABP開發框架、SqlSugar開發框架等框架產品。
轉載請註明出處：撰寫人：伍華聰 http://www.iqidi.com
