基于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

相关文章
|
2天前
|
存储 JavaScript Java
后端开发的艺术:从新手到专家的旅程
在数字化时代,后端开发是构建现代应用程序不可或缺的一部分。本文将探讨后端开发的核心概念、技术栈选择、最佳实践以及如何从初学者成长为专家。我们将通过一系列实用的建议和策略,帮助读者理解并掌握后端开发的精髓,从而在这个充满挑战和机遇的领域中取得成功。
|
1天前
|
缓存 负载均衡 安全
后端开发的艺术:构建高效、可扩展的API
在现代软件开发中,后端开发扮演着至关重要的角色。它不仅负责处理数据存储、业务逻辑和安全性,还需要提供高效、可扩展的API供前端和其他服务使用。本文将深入探讨后端开发的关键概念和技术,帮助读者了解如何构建高效、可扩展的API,并提供一些实用的建议和最佳实践。
|
2天前
|
关系型数据库 API 数据库
后端开发的艺术:从零到一构建高效服务器
在数字化时代,后端开发是支撑现代互联网应用的基石。本文旨在探讨后端开发的核心概念、关键技术以及如何构建一个高效的服务器。我们将从基础的编程语言选择开始,逐步深入到数据库设计、API开发和性能优化等关键领域。通过实际案例分析,我们将揭示后端开发的复杂性和挑战性,同时提供实用的解决方案和最佳实践。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的见解和启发。
|
1天前
|
NoSQL Java API
后端开发的艺术:从初学者到高手的旅程
在这个数字时代,后端开发是构建现代应用程序不可或缺的一部分。本文旨在为初学者提供一条清晰的路径,从理解后端开发的基本概念开始,逐步深入到掌握高级技能。我们将探讨后端开发的核心技术,如编程语言、框架、数据库和API设计,并讨论如何通过实际项目经验来提升技能。此外,我们还将介绍一些实用的学习资源和社区,帮助读者在后端开发的旅途中不断进步。
|
1天前
|
JavaScript Java 云计算
后端开发的演变与未来趋势
在数字化时代的浪潮中,后端开发扮演着至关重要的角色。本文将探讨后端技术的历史演变、当前主流技术和框架、以及面临的挑战和未来的发展趋势。通过深入浅出的方式,为读者揭示后端开发的奥秘,并启发对未来技术的思考。
|
1天前
|
关系型数据库 测试技术 API
探索后端开发:构建高效API的艺术
【10月更文挑战第25天】在数字化时代,后端开发不仅仅是编写代码那么简单。它是连接用户与数据的桥梁,是实现业务逻辑的基石。本文将深入探讨如何构建高效的API,从理解RESTful原则到选择合适的框架,再到处理数据库交互,每一步骤都是精心策划的舞蹈。我们将通过实际案例,揭示如何在保证性能和安全性的同时,提供流畅的用户体验。让我们一起走进后端开发的世界,发现那些隐藏在代码背后的智慧和创造力。
|
2天前
|
前端开发 JavaScript NoSQL
探索后端开发之旅:从基础到高级实战
【10月更文挑战第24天】在这个数字时代的浪潮中,后端开发如同一座巨大的宝藏岛,等待着勇敢的探险者去发掘。本文将作为你的藏宝图,引领你从浅滩走向深海,探索后端开发的广阔天地。无论你是初心者还是资深开发者,这篇文章都将为你提供价值连城的知识和技能。准备好了吗?让我们启航,一起构建强大、高效、安全的后端系统!
|
10天前
|
缓存 Java 数据库
后端开发的艺术与科学
在这篇文章中,我们将深入探讨后端开发的核心理念和技术。从基础的编程语言和框架到复杂的系统架构和性能优化,我们将一探究竟。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和实用的技巧。让我们一起走进后端开发的世界,探索它的艺术与科学。
|
10天前
|
Java 持续交付 微服务
后端开发中的微服务架构实践与挑战####
本文深入探讨了微服务架构在现代后端开发中的应用,通过具体案例分析,揭示了其如何助力企业应对业务复杂性、提升系统可维护性和可扩展性。文章首先概述了微服务的核心概念及其优势,随后详细阐述了实施微服务过程中的关键技术选型、服务拆分策略、容错机制以及持续集成/持续部署(CI/CD)的最佳实践。最后,通过一个真实世界的应用实例,展示了微服务架构在实际项目中的成功应用及其带来的显著成效。 ####
|
3天前
|
缓存 运维 监控
后端开发中的微服务架构实践与挑战#### 一、
【10月更文挑战第22天】 本文探讨了微服务架构在后端开发中的应用实践,深入剖析了其核心优势、常见挑战及应对策略。传统后端架构难以满足快速迭代与高可用性需求,而微服务通过服务拆分与独立部署,显著提升了系统的灵活性和可维护性。文章指出,实施微服务需关注服务划分的合理性、通信机制的选择及数据一致性等问题。以电商系统为例,详细阐述了微服务改造过程,包括用户、订单、商品等服务的拆分与交互。最终强调,微服务虽优势明显,但落地需谨慎规划,持续优化。 #### 二、