基于SqlSugar的开发框架循序渐进介绍（21）-- 在工作流列表页面中增加一些转义信息的输出，在后端进行内容转换

基于,sqlsugar,开发,框架,循序渐进,介绍,工作,列表,页面,增加,一些,转义,信息,输出,后端,进行,内容,转换 · 浏览次数 : 936

小编点评

**后端转义处理** 为了避免前端单独进行转义处理，我们可以在后端进行统一的格式化后再行输出，后端处理可以采用不同的DTO尸体信息，也可以采用同一个实体，在SqlSugar实体信息中忽略对应的字段写入实现。 **前端列表展示介绍** 前端的列表显示介绍了后端的内容转义，前端相对处理就比较简单了，只需要把对应的内容进行显示即可。如前端的Vue3+TypeScript+ElementPlus的代码如下： ```html <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> ``` 前端没有额外增加工作量。

正文

有时候，为了给前端页面输出内容，有时候我们需要准备和数据库不一样的实体信息，因为数据库可能记录的是一些引用的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>