脚本宝典收集整理的这篇文章主要介绍了VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景 PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
现在有这么一张表,其中的大部分字段都是固定值,比如订单分类、类型、动作、状态、业务类型
如果都以字符串的形式存入数据库中,就存在数据冗余的情况,而且如果希望修改某一字段的字符串(比如从“来自网络的订单”改为“网络订单”),那就不是修改一条,而是需要修改许多条
因此通常以数字的格式存入表中,此时原表的数据如图
而每个字段的数字与字符串的对应关系单独建一张表进行管理,示意图如下
但是如果字段很多,比如上面有5个字段,那么进行转义时就要连接6张表进行查询,而这并不是为了业务进行连表,只是单纯需要转义,这就非常麻烦了
每个字段分别建一个表也很繁琐,不方便管理,此时就可以考虑把这些字段全部统合在一张表里——数据字典表
数据字典表 能起到减少代码量以及灵活修改固定值的作用
如图,就是数据字典表,每个字段根据type进行区分,同一type的数据再根据type_value进行区分,并与type_text构成对应关系用于转义
数据字典表建表语句一览
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;
上面是简单的建表,将类型、key、value统合在一张表,方便直接查询使用,但很明显,时间久了谁记得type中的数字对应什么,如果直接改用字符串,又会陷入“改一个字符串就要修改多条记录”的情况
因此实际上应该拆为两张表。
两张表的建表方式以及查询方式具体见SpringBoot+Redis实现数据字典_蹊源的奇思妙想的博客-CSDN博客_springboot缓存数据字典
下面是摘录:
如图,为单张数据字典表对应的实体类,姑且可以理解为PO,如果是两张数据字典表,那么就是两表联查的PO
缓存数据字典表后,可以直接在controller类、serviceimpl类或者transfer类中使用“dic",IDEA会提示需要导入,直接导入即可
在PO转VO时,在transfer类中使用,第一个get要人为指定,第二个get直接将PO的属性值传入,这样VO就能获得对应的字符串
可以把数据库的字典表的注释放在实体类上 方便查看
前端基于VUE+ElementUI,要实现的效果如图
之前考虑的做法是每个字段单独建表,后端分别查询,然后传给前端,一旦字段多了,那也太麻烦了
现在有了数据字典表,直接把数据字典表传给前端即可
封装类如图,返回成功的方法的status和message已经用枚举类预设好
postman请求结果一览
前端基于VUE+ElementUI
前端向后端的controller发送请求,其中instance是自定义封装好的类
methods的代码如下,获取到数据后,存到VUE的属性下
ElementUI实现的下拉列表代码
后端没啥要说的,倒是前端让我吃尽了苦头,下面是我遇到的问题和解决办法
ajax请求后的返回结果显示[object Object]的原因_IT_townlet的博客-CSDN博客
console.log时不要加字符串
打印后端传进来的数据时返回数据是Promise对象_Olliverzhang的博客-CSDN博客
要给方法加同步锁,即async和await
JSON取值(key是中文或者数字)方式详解_Care_about的博客-CSDN博客
json的取值方式有好几种,对于后端传递的这种嵌套map,需要手动指定一下外层map的key
笔记: SpringBoot + VUE实现数据字典展示功能_CJG753951的博客-CSDN博客
下图是文章摘录,其中的取值方式启发了我
动态生成的下拉列表,可以在遍历json对象时,将获得的元素拆开使用
可以对比写死的情况,如图
为了能从spring容器中取出service接口对象,借助了springUtils工具类,这是一个自定义的工具类,用于从spring容器中取出对象
①本篇文章的数据字典表被定义为static 静态的对象,被存在内存中,所以可以直接使用,不需要springUtils这种类
②如果不使用这个工具类,而是在当前类声明要使用的对象并利用@Autowired等注解注入spring容器,那么还得先把最外层这个类(RedisDistUtil)注入spring容器,然而注入spring容器的类不是越多越好
③显然,这个工具类要求springboot项目启动,否则spring容器中是空的,方法getBean取不到东西就报空指针异常
文章中提到spring封装了一个对象叫RedisTemplate 基于这个对象提供的方法 我们能操控redis储存的数据
我没有使用数据字典表时,直接在项目建了一个常量类,如图
借助这个常量类也能实现转义以及管理,但真的太麻烦了
比如转义,代码量可见一斑,而且每当需要新增一条“订单动作”,我就需要到各个transform中为switch-case增加一条
再就是管理时,每新增一条,我就得准备一个常量名,写起来特麻烦
现在固定值写在一张数据库表中 相比常量类就方便维护了
并且前端下拉菜单不再需要写死 直接去读字典表类的map即可
以上是脚本宝典为你收集整理的VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景 PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义全部内容,希望文章能够帮你解决VUE+ElementUI+springboot项目中 数据字典表全面解析与使用场景 PO转VO时进行转义 令前端下拉列表动态生成 前端VUE表格列的动态转义所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。