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

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

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

相关文章
|
1天前
|
前端开发 JavaScript Java
编程入门之前端和后端开发
前端开发就是开发网页上的内容展示与用户的交互,一部分后端开发工作就是开发数据访问服务,使前端可以通过后端服务对数据进行增删改查,也就是Crud,对前端用户的请求进行相应。
19 8
|
2天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第11天】本文将带你走进Node.js的世界,了解其背后的运行机制和实际应用。我们将从基础概念出发,逐步深入到实战应用,最后通过代码示例巩固学习成果。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和思考。
|
1天前
|
存储 缓存 API
后端开发的艺术:如何优雅地处理数据流
在当今的软件开发领域,后端开发扮演着至关重要的角色。本文将深入探讨后端开发中的一些关键概念和技术,包括数据流的处理、API设计原则以及性能优化等。通过阅读本文,您将了解到如何在后端开发中实现高效、可维护和可扩展的数据流处理。
11 2
|
2天前
|
Java 关系型数据库 API
后端开发之道:从新手到专家的蜕变之旅
在数字化时代的浪潮中,后端开发如同一座桥梁,连接着数据世界的每一个角落。本文将带领读者踏上一段从零基础到精通后端开发的旅程,探索编程语言的选择、框架的应用、数据库的设计以及API的开发等关键知识点。我们将以通俗易懂的语言,结合条理清晰的结构,逐步揭开后端开发的神秘面纱,让每一位读者都能在这段旅途中找到属于自己的位置和方向。
|
1天前
|
存储 Java 数据库
探索后端开发:从基础到高级实践
【9月更文挑战第12天】本文深入探讨了后端开发的核心概念、关键技术和进阶实践。我们将通过一个实际的代码示例,展示如何搭建一个简单的后端服务,并解释其背后的原理。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
2天前
|
Web App开发 JavaScript NoSQL
深入浅出Node.js后端开发
在数字化时代的浪潮中,后端开发作为技术支柱之一,承载着数据处理和业务逻辑实现的重要任务。本文将通过浅显易懂的方式,带你走进Node.js的世界,从基础概念到实战应用,逐步揭开后端开发的神秘面纱。无论你是编程新手还是希望扩展技术栈的开发者,这篇文章都将为你提供有价值的指导和启示。让我们一起探索如何在不断变化的技术环境中,保持初心,寻找属于自己的方向,并成为希望在世界上看到的改变。
11 1
|
2天前
|
Web App开发 缓存 JavaScript
构建高效后端服务:Node.js与Express框架的完美结合
【9月更文挑战第11天】本文将引导开发者探索如何利用Node.js和Express框架搭建一个高效的后端服务。文章不仅深入讲解了这两个工具的核心概念,还通过实际示例展示了它们的强大功能和易用性。读者将学会如何处理HTTP请求、设计RESTful API以及优化应用性能。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的知识,帮助你在后端开发领域更进一步。
|
3天前
|
存储 JavaScript Java
深入浅出后端开发:从零到一的旅程
【9月更文挑战第10天】本文将带领读者走进后端开发的神秘世界,从基本概念到实战应用,一步步揭开后端技术的面纱。通过浅显易懂的语言和实际代码示例,我们将探索如何搭建一个简单的后端服务,理解数据库交互,并实现API的基本功能。无论你是编程新手还是希望扩展知识的开发者,这篇文章都将为你提供一条清晰的学习路径。
|
3天前
|
存储 前端开发 Java
探索后端开发:从新手到专家的旅程
在这篇文章中,我们将一起踏上一段奇妙的旅程,探索后端开发的奥秘。无论你是刚刚踏入编程世界的新手,还是已经在这条路上走了一段时间的开发者,这篇文章都将为你提供有价值的见解和建议。我们将从基础概念开始,逐步深入到高级主题,包括框架选择、数据库设计、API开发等。让我们一起开启这段旅程吧!
|
4天前
|
JavaScript 关系型数据库 数据库
探索后端开发:从新手到专家的旅程
本文将带领读者踏上一场激动人心的旅程,从零基础开始,逐步深入后端开发的奥秘。我们将一起揭开后端世界的面纱,探索其核心概念、关键技术和实用工具。无论你是编程新手还是有一定经验的开发者,这篇文章都将为你提供宝贵的知识和启发,帮助你在后端开发的道路上更进一步。准备好迎接挑战,让我们启程吧!
23 8

热门文章

最新文章