基於SqlSugar的開發框架循序漸進介紹(21)-- 在工作流列表頁面中增加一些轉義信息的輸出,在後端進行內容轉換

来源:https://www.cnblogs.com/wuhuacong/archive/2022/11/11/16879792.html
-Advertisement-
Play Games

有時候,為了給前端頁面輸出內容,有時候我們需要準備和資料庫不一樣的實體信息,因為資料庫可能記錄的是一些引用的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 
    

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一. 單行函數:可以理解為向函數傳入一個參數,返回一個值。 單行函數是指對每一題記錄輸入值進行計算,並得到相應的計算結果,然後返回給用戶,也就是說,每條記錄作為一個輸入參數,經過函數計算得到每條記錄的計算結果。 單行函數 -- 函數舉例: select empno,ename, lower(enam ...
  • 作為一個批流統一的數據集成框架,秉承著易用、穩定、高效的目標,ChunJun於2018年4月29日在Github上將內核源碼正式開放。 從還被叫作FlinkX,寫下第一行代碼開始,ChunJun已經走過了第六個年頭,經歷了從分散式離線/實時數據同步插件,晉級為批流統一數據集成框架的蛻變時刻。越來越多 ...
  • 3D儲能、3D配電站、3D太陽能、三維儲能、使用three.js(webgl)搭建智慧樓宇、3D園區、3D廠房、3D倉庫、設備檢測、數字孿生、物聯網3D、物業3D監控、物業基礎設施可視化運維、3d建築,3d消防,消防演習模擬,3d庫房,webGL,threejs,3d機房,bim管理系統 ...
  • 隨著移動互聯網的飛速發展,無數移動APP琳琅滿目;在移動App的發展的基礎上,衍生了小程式、輕應用技術,它隨時可用,但又無需安裝卸載。uni-app 是一個使用 Vue.js 開發所有前端應用的框架,開發者編寫一套代碼,可發佈到iOS、Android、Web(響應式)、以及各種小程式等多個平臺。AI... ...
  • 在這個系列文章里,我嘗試將自己開發唯一客服系統(gofly.v1kf.com)所涉及的經驗和技術點進行梳理總結。 文章寫作水平有限,有時候會表達不清楚,難免有所疏漏,歡迎批評指正 該系列將分成以下幾個部分 一. 需求分析 二. 初步技術方案選型,驗證 三. 資料庫結構設計 四. WEB訪客前端設計與 ...
  • 前文已經初始化了 workspace-root,從本文開始就需要依次搭建組件庫、example、文檔、cli。本文內容是搭建 組件庫的開發環境。 ...
  • 組件化編程 什麼是組件化編程 傳統方式的編寫模式 組件化編程的模式 組件是實現應用中局部功能代碼和資源的集合 vue中非單文件組件的基本使用 點擊查看代碼 <!-- Vue中使用組件的三大步驟: 一、定義組件(創建組件) 二、註冊組件 三、使用組件(寫組件標簽) 一、如何定義一個組件? 使用Vue. ...
  • 本篇文章將為我們的組件庫添加一個新成員:Input組件。其中Input組件要實現的功能有: 基礎用法 禁用狀態 尺寸大小 輸入長度 可清空 密碼框 帶Icon的輸入框 文本域 自適應文本高度的文本域 複合型輸入框 每個功能的實現代碼都做了精簡,方便大家快速定位到核心邏輯,接下來就開始對這些功能進行一 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...