VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景 PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

发布时间:2022-07-04 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景 PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

1 产生数据字典表的原因

现在有这么一张表,其中的大部分字段都是固定值,比如订单分类、类型、动作、状态、业务类型

如果都以字符串的形式存入数据库中,就存在数据冗余的情况,而且如果希望修改某一字段的字符串(比如从“来自网络的订单”改为“网络订单”),那就不是修改一条,而是需要修改许多条

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

因此通常以数字的格式存入表中,此时原表的数据如图

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

而每个字段的数字与字符串的对应关系单独建一张表进行管理,示意图如下

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

但是如果字段很多,比如上面有5个字段,那么进行转义时就要连接6张表进行查询,而这并不是为了业务进行连表,只是单纯需要转义,这就非常麻烦了

每个字段分别建一个表也很繁琐,不方便管理,此时就可以考虑把这些字段全部统合在一张表里——数据字典表

数据字典表 能起到减少代码量以及灵活修改固定值的作用

 

2 数据字典表建表代码

2.1 一张表

如图,就是数据字典表,每个字段根据type进行区分,同一type的数据再根据type_value进行区分,并与type_text构成对应关系用于转义

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

数据字典表建表语句一览

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

CREATE TABLE `sales_dictionary` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `type` int(11) DEFAULT NULL COMMENT '类型 1.订单动作 2 订单状态 3 业务类型 4 订单分类 5 订单类型 6 配送方式 7 支付方式',
  `type_value` int(11) DEFAULT NULL COMMENT '值',
  `type_text` varchar(255) DEFAULT NULL COMMENT '文本',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;

2.2 两张表

上面是简单的建表,将类型、keyvalue统合在一张表,方便直接查询使用,但很明显,时间久了谁记得type中的数字对应什么,如果直接改用字符串,又会陷入“改一个字符串就要修改多条记录”的情况

因此实际上应该拆为两张表。

两张表的建表方式以及查询方式具体见SpringBoot+Redis实现数据字典_蹊源的奇思妙想的博客-CSDN博客_springboot缓存数据字典

下面是摘录:

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

3 查询数据库的数据字典表并缓存到集合中

3.1 步骤一 建一个与字典对应的实体类

如图,为单张数据字典表对应的实体类,姑且可以理解为PO,如果是两张数据字典表,那么就是两表联查的PO

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

4.2 使用方式 直接使用

缓存数据字典表后,可以直接在controller类、serviceimpl类或者transfer类中使用“dic"IDEA会提示需要导入,直接导入即可

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

4.3 应用场景一 POVO时进行转义

POVO时,在transfer类中使用,第一个get要人为指定,第二个get直接将PO的属性值传入,这样VO就能获得对应的字符串

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

可以把数据库的字典表的注释放在实体类上 方便查看

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

4.4 应用场景二 令前端下拉列表动态生成

4.4.1 效果图

前端基于VUE+ElementUI,要实现的效果如图

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

4.4.2 后端

之前考虑的做法是每个字段单独建表,后端分别查询,然后传给前端,一旦字段多了,那也太麻烦了

现在有了数据字典表,直接把数据字典表传给前端即可

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

封装类如图,返回成功的方法的statusmessage已经用枚举类预设好

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

postman请求结果一览

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

4.4.3 前端

4.4.3.1 请求方法

前端基于VUE+ElementUI

前端向后端的controller发送请求,其中instance是自定义封装好的类

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

4.4.3.2 methods

methods的代码如下,获取到数据后,存到VUE的属性下

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

4.4.3.3 前端下拉列表代码

ElementUI实现的下拉列表代码

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

4.4.4 前端的知识点说明

后端没啥要说的,倒是前端让我吃尽了苦头,下面是我遇到的问题和解决办法

 

4.4.4.1 console.log显示object

ajax请求后的返回结果显示[object Object]的原因_IT_townlet的博客-CSDN博客

console.log时不要加字符串

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

4.4.4.2 后端返回的数据是Promise对象

打印后端传进来的数据时返回数据是Promise对象_Olliverzhang的博客-CSDN博客

要给方法加同步锁,即asyncawait

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

4.4.4.3 json取值方式 json对象[]

JSON取值(key是中文或者数字)方式详解_Care_about的博客-CSDN博客

json的取值方式有好几种,对于后端传递的这种嵌套map,需要手动指定一下外层mapkey

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

4.4.4.4 ElementUI的下拉列表动态生成的方式

笔记: SpringBoot + VUE实现数据字典展示功能_CJG753951的博客-CSDN博客

下图是文章摘录,其中的取值方式启发了我

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

动态生成的下拉列表,可以在遍历json对象时,将获得的元素拆开使用

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

可以对比写死的情况,如图

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

为了能从spring容器中取出service接口对象,借助了springUtils工具类,这是一个自定义的工具类,用于从spring容器中取出对象

①本篇文章的数据字典表被定义为static 静态的对象,被存在内存中,所以可以直接使用,不需要springUtils这种类

 

②如果不使用这个工具类,而是在当前类声明要使用的对象并利用@Autowired等注解注入spring容器,那么还得先把最外层这个类(RedisDistUtil)注入spring容器,然而注入spring容器的类不是越多越好

 

③显然,这个工具类要求springboot项目启动,否则spring容器中是空的,方法getBean取不到东西就报空指针异常

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

5.3.2 RedisTemplate

文章中提到spring封装了一个对象叫RedisTemplate 基于这个对象提供的方法 我们能操控redis储存的数据

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

6 数据字典表和常量类对比

我没有使用数据字典表时,直接在项目建了一个常量类,如图

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

借助这个常量类也能实现转义以及管理,但真的太麻烦了

比如转义,代码量可见一斑,而且每当需要新增一条“订单动作”,我就需要到各个transform中为switch-case增加一条

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

再就是管理时,每新增一条,我就得准备一个常量名,写起来特麻烦

VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景  PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义

 

现在固定值写在一张数据库表中 相比常量类就方便维护了

 

并且前端下拉菜单不再需要写死 直接去读字典表类的map即可

脚本宝典总结

以上是脚本宝典为你收集整理的VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景 PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义全部内容,希望文章能够帮你解决VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景 PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:数据库