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

1 产生数据字典表的原因

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

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

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

order id
order status
order number order class
2021092212
2021092323
2021092324
order type
order action
2
2
business type
9
9
3
Order date consignee
1 2021-09 22 22:
2 2021-09 23 21:
2 2021-09-23 21:
Remark
2 WEI
2
3

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

订单一
订单状态
业昔口
务涌、
类业业
型
1 出库待审
1 订
2 换
2 出库审
3 已出
4 已发
5 已到
6 已签刂
7 已拒刂
8 已付款
9 退货待审
配送、
10 退货审
11 退
1 斟
付方、
1 货到付发七
凵士了

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

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

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

2 数据字典表建表代码

2.1 一张表

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

id
type type value
type text
1 订购
2
3 支付
1 出库待审核
2 出库正在审核
3 已出库
4 已发货
5 已到货
6 已签收
7 已拒收
8 已付款
9 退货待审核
10 退货审核
11 退货丿、库
2 号上业务
1 B2C

数据字典表建表语句一览

sales dictionary'
DROP TABLE IF EXISTS
- CREATE TABLE sales dictionary ' (
id' int (11) NOT NULL AUTO INCREMENT,
int (11) DEFAULT NULL COMMENT 1. 2
type
int (11) DEFAULT NULL COMMENT '17' ,
type value
varchar (2SS) DEFAULT NULL COMMENT
type text
PRIMARY KEY ('id')
10 DEFAULT CHARSET=utf8,•
ENGINE=1nnoDB AUTO INCREMENT

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 两张表

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

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

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

下面是摘录：

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

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

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

$- @Data -@Equa1sAndHashCode(ca11Super = false) public class SalesDictionary implements Serializable {l private static final long seriaLVersionUID = IL; @Tab1eId(va1ue = " id" , private Integer id; type IdType . AUTO) * 2 3 4 iTæ5ö*_ 5 iTæ3& 6 7 private Integer type; @Tab1eFie1d("Type_value") private Integer typeVa1ue; @Tab1eFie1d("Type_text " ) private String typeText;$

3.2 步骤二写一个mapper 查询数据字典表

3.2.1 单张数据字典表

在后端写一个mapper，查询数据库的字典表

public interface SalesDictionaryMapper extends BaseMapper<Sa1esDictionary> {
List<Sa1esDictionary> findA11();

(select
select * from sales_dictionary;
< / select>

3.2.2 两张数据字典表

相比起一张表，两张表管理更为清晰，只是在后端mapper查询数据库表时，需要两张表进行联查

参考SpringBoot+Redis实现数据字典_蹊源的奇思妙想的博客-CSDN博客_springboot缓存数据字典

getall .
<select id="getall" resultType="com.luo.dao.entity.SysDictPojo">
1
select
2
3
t1. name,
t1. value,
4
t2. value typeCodeVa1ue
5
from SYS DICT tl
6
7
8
left join SYS DICT TYPE t2 on t2. code
. type_code

3.3 步骤三编写词典全局缓存方法

3.3.1 存放位置

直接复制下面的代码，粘贴到IDEA中

com
javasm
V common
cache
constants
dictionary
InitContext

3.3.2 代码

注意根据步骤一和二修改一下声明的mapper接口以及集合中的元素类型

@Component
public class InitContext {

    /**
     * 词典全局缓存对象
     * key : type 表示哪个类型
     * value中的hashMap中的key : 表示value value表示text文本
     */
    public static final Map<Integer,LinkedHashMap<Integer,String>> dic = new HashMap<>();
    //ProjectApplication是当前springboot模块的启动类，Logger类是一个日志对象 作用是在缓存好词典后，在控制台提示一下
    Logger logger = LoggerFactory.getLogger(ProjectApplication.class);
    @Resource
    private SalesDictionaryMapper salesDictionaryMapper;

    /**
     * 容器创建自动执行
     */
    @PostConstruct
    public void init(){
        initDictionary();
    }
    
    /**
     * 初始化词典
     */
    public void initDictionary(){
        List<SalesDictionary> all = salesDictionaryMapper.findAll();
        all.forEach(sysDictionary -> {
            LinkedHashMap<Integer, String> kv = dic.get(sysDictionary.getType());
            if(kv == null){
                kv = new LinkedHashMap<>();
            }
            kv.put(sysDictionary.getTypeValue(),sysDictionary.getTypeText());
            dic.put(sysDictionary.getType(),kv);
        });
        //缓存完毕，logger对象在控制台打印下面的语句进行说明，可以不要
        logger.debug("词典初始化完成");
    }
}

3.3.3 几个知识点

3.3.3.1 Logger，是一个日志对象

java日志LoggerFactory.getLogger最全讲解使用方法_滑稽的鼠标的博客-CSDN博客_loggerfactory.getlogger

下图划线代码就是在springboot的启动类下创建一个日志对象，其实不是必须的

@Component
public class InitContext {
* key : type
* : *iÄvaLue
new HashMap<>();
public static final Map<lnteger, LinkedHashMap<Integer, dic
Logger logger = LoggerFactory. getLogger(ProjectApp1ication . class) ;
@Resource
private SalesDictionaryMapper sales ictlonarymapper;

这个对象要做的就是在springboot启动完毕并且词典缓存后，在控制台提示一下，这不是必须要做的

3.3.3.2 @PostConstruct 这个注解注释的方法会在整个类被注入spring容器后自动执行

springboot 启动时加载数据(字典)到内存 - 简书 (jianshu.com)

主要看文章中对 “@PostConstruct”的介绍以及存在“BiMap”这种东西，能把map的value也唯一化，不过我这里没有用

下面是部分摘录

@PostConstruct

spring中Constructor、@Autowired、@PostConstruct的顺序（网上解释比较清楚的版本）

要将对象p注入到对象a，那么首先就必须得生成对象p与对象a，才能执行注入。所以，如果一个类A中有个成员变量p被@Autowired注解，那么@Autowired注入是发生在A的构造方法执行完之后的。

如果想在生成对象时候完成某些初始化操作，而偏偏这些初始化操作又依赖于依赖注入，那么就无法在构造函数中实现。为此，可以使用@PostConstruct注解一个方法来完成初始化，@PostConstruct注解的方法将会在依赖注入完成后被自动调用。

Constructor >> @Autowired >> @PostConstruct

3.3.3.3 字典的数据类型 Map<Integer,LinkedHashMap<Integer,String>> dic

这是一个嵌套map，外层map的key对应type，value是一个LinkedHashMap，LinkedHashMap的key对应type_value，value对应type_text

实际使用时，可以根据自己的字典表格式变化，比如只建立一张数据字典表的情况下，type不用数字，而是用字符串，那么此时外层map的key就要用String

4 在VUE+springboot项目中使用数据字典表

4.1 缓存完毕的字典表样式

数据字典表存到项目的map后，数据结构如图

logger .
System. out. println( -
¯ .xxer . hikari . HikariDataSource
s . SalesDictionaryMapper . findA11
> " +dic . toString());
s . SalesDictionaryMapper . findA11
Hi kariP001-1
— = > Preparing:
Parameters:
Total :
Start
select
25
System. out. println(dic . get(l) . tostring()) ;
s . SalesDictionaryMapper . findA11
System. out. println (dic . get (1) . get (1)
J _.vasm . ProjectApp1ication
3*ff},

4.2 使用方式直接使用

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

son (dic . get (8) . get (salesReturn . getReason
Create local variable 'dic
Create field 'die in 'SalesReturnTransfer'
Create parameter 'die
Import static constant 'com.javasm.common.dictionary.InitContext.dic'
Oat
Qualify static constant access 'com.javasm.common.dictionary.InitContext.dic'

4.3 应用场景一 PO转VO时进行转义

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

//EF*ällfJÄä
if (salesReturn . getReason()
salesReturnVO. setReason (dic . get (8) . get (salesReturn . getReason
26
pe$Ä

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

冲类型 1. 订单动作 2 订单状态 3 业务类型 4 订单分类 5 订单类型 5 配送方式 7 支付方式 8 客户拒收原因
pr 、 Ivate Integer 、 type;

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

4.4.1 效果图

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

订望编号
下望日
订望类型
开始凸
毛话订望
电话 iJ 单
订望
0 查河
前端的下拉列表的 | abe 厢 va 》 ue 动态生成
号订单编号
订单类型

4.4.2 后端

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

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

" dic " )
public AxiosResu1t<Map<Integer, LinkedHashMap<Integer, dic(){
return AxiosResu1t.success(dic);

封装类如图，返回成功的方法的status和message已经用枚举类预设好

public enum EnumStatus {
OK(20000, " ) ,
ERROR(40000,
NO LOGIN(33333, "*F"),
"R F-€öffifi"),
".%$iEi$8Eifi"),
PASSWOED ERROR(22224,
FORM VALICATOR ERROR(33233,
"iLi!H"),
* preturn
public class AxiosResu1t<T> {
private int status;
private String message;
private T data;
public static < T > AxiosResu1t<T> success() {
return OK, data: null);

postman请求结果一览

“ St t05 “ ： 22222J
作成功
"data" ： {
．出库待审核
．出库审核
．已出库
．已发货
．已到货
．已拒收
．退货待审核
" 退货审核
" 退货入库

4.4.3 前端

4.4.3.1 请求方法

前端基于VUE+ElementUI

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

wtÄEaxios
axios . create({
nconst instance
baseURL:
' http://10ca1host:8088/',
timeout: 3000
- export function {
return instance . get(
sales/dic•

4.4.3.2 methods

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

$async queryDic(){ await queryA11Dic(); let result 2 3 4 5 6 gæi*fijt 7 result 7 ] ; this . res u 1 t C 5 ] ; this . res u 1 t C 3 ] ; this. . orderActionList= result [1]; this . orderStatusList= resultC2]; this orderTypeList: ] / pay Typel_ist: C], / /-*-fffij-tt business Typel_ist: c], orderActionList: C ] , / orderStatusList:$

4.4.3.3 前端下拉列表代码

ElementUI实现的下拉列表代码

4.4.4 前端的知识点说明

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

4.4.4.1 console.log显示object

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

console.log时不要加字符串

在这里插入图片描述

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

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

要给方法加同步锁，即async和await

async queryDic(){
await queryA11Dic();
let result
result 7 ] ;
this .
res u 1 t C 5 ] ;
this .
res u 1 t C 3 ] ;
this .
. orderActionList= result [1];
this
. orderStatusList= resultC2];
this

4.4.4.3 json取值方式 json对象[]

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

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

async queryDic(){
await queryA11Dic();
let result
2 3 4 5 6 gæi*fijt 7
. resultC7];
this
res u 1 t C 5 ] ;
this.
res u 1 t C 3 ] ;
this .
. orderActionList= result [1];
this
. orderStatusList= resultC2];
this

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

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

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

1
2
3
4
5
6
7
8
9
11
12
13
14
15
16
17
18
19
-table-column
v-for=" (k, index) in data "
align="center"
: prop= " k"
: key—I' index"
show-overflow-tooltip >
(template slot-scope="scope">
(span v-if=" ! dictionary[k]
(span v-else>
(div v-for=" (v, i) in dictionaryCk)"
(span v . rowCk] -
v . dict typeCode " span
< / span>
</template>
</el -table-col umn>

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

<el-form-item " >
el-select . orderType" placeholder= " >
<el-option v-for=" (key, value) in orderTypeList" :label="key" :
< / el - selecg>
</el-form- item>

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

<el-form-item " >
@-select . reason'
<el-option v-for="type in reasonList" :label="type. reasonName" : value="type. reasonld"
< /e1- select >
< / el - form- item>
reasonList:C
{reasonld: "1" ,
{reasonld: "2"
reasonName :
reasonName :

4.5 应用场景三前端VUE表格列的动态转义

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

Vue 利用后端的数据字典和Map对象实现表格列字段动态转义的处理方案 - 阿拉伯1999 - 博客园 (cnblogs.com)

这个场景与应用场景一相悖，毕竟如果PO转VO时就把数字转为字符串了，前端就没必要转了，我通常会依据应用场景一去实现转义，所以这个我就不研究了，仅放在这里

5 数据字典表缓存到本地内存还是redis中

5.1 结论依据公司技术选型而定

在实际使用时，需要在整个项目启动时就执行查询语句，把数据字典表整体保存到一个map中，这个map再存到redis或者本地内存中，然后在项目的各个类中随调随用

而到底是直接用static把map存到内存中还是直接把map存到redis中，就看以后的技术选型，从速度上看前者肯定更快，因为用的就是本地的内存

5.2 本文缓存到本地

本篇文章是将字典表存在本地内存中，所以使用了static修饰方法

5.3 缓存到redis的方式

如果要探究存到redis中，参见SpringBoot+Redis实现数据字典_蹊源的奇思妙想的博客-CSDN博客_springboot缓存数据字典

文章的部分知识点的个人理解如下

5.3.1 springUtils工具类

文章中的RedisDistUtil类用于获取被spring管理的service接口对象，然后调用这个对象的方法实现转义

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

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

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

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

Exception in thread "main" java. lang. NullPointerException
at com.javasm.common . util . SpringContainerLlti1s . getBean(SprineContainerlJti1s. -java: 24)
at com.javasm.common . excel. ExcelReaderDemo. main(Exce1ReaderDemo . iava: 24)

5.3.2 RedisTemplate

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

. ( ) ; / /Î*fËhEEh
.2PEFzzLiEZ ( ) ; /
.2PEFzzSet ( ) ; /
.2PEFzzZSeZ ( ) ; /

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

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

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

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

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

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

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

posted @ 2021-10-05 00:25 夏·舍阅读(2805) 评论(1) 编辑收藏举报

刷新页面返回顶部

夏·舍

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