一、思路:
- 在设计前端页面时,展示的字段内容不应写死,因此引入了数据库字典的概念,如下图2。
- 以本项目为例,在前端页面中的订单信息表(图1),其中的字段在数据库中的设计如图3。字段应为数据库字典表中所对应的dvalue。
- 字典表中的字段解释:did:主键;dtype:字典项类型;dvalue:字段值,与前端组件的value属性绑定;dlabel:字段展示内容,与前端组件的label属性绑定。
- 本文要达到的效果为:在MySQL数据库中修改dlabel的值,在前端页面应同步更新。
图1 前端页面
图2 数据库字典表tb_dictionary
图3 订单信息表tb_order
二、MySQL数据库中的数值如何在前端显示成文字形式?
- tb_order中的字段存储的值均为数字形式,与字典表tb_dictionary相对应;
- 进入页面时应触发Vue的初始化函数created,向后端发送请求,获取字典项的值。后端将dtype类型的数据(json数组的格式返回给前端),前端对这个json数组进行遍历,展示dlabel的值即可;
- 具体代码见链接:https://blog.youkuaiyun.com/Hsssc/article/details/109374589
三、字典项改变,前端如何同步显示更新后的内容?
(一)初级:MySQL
@GetMapping("getColor")
public ResponseEntity getColor() {
// String hget = redisService.hget("Dictionary", "color");
// List<NewDictionary> list = JSONArray.parseArray(hget, NewDictionary.class);
List<NewDictionary> list = newDictionaryService.selectByType("color");
return ResponseEntity.ok(new ResponseBean(StatusCode.OPERATE_SUCCESS, list));
}
- 调用MySQL语句,将改变了内容的数据从数据库返回给前端;
- 逻辑比较简单,但是不建议操作MySQL数据;
(二)高级:Redis
@GetMapping("getColor")
public ResponseEntity getColor() {
String hget = redisService.hget("Dictionary", "color");
List<NewDictionary> list = JSONArray.parseArray(hget, NewDictionary.class);
// List<NewDictionary> list = newDictionaryService.selectByType("color");
return ResponseEntity.ok(new ResponseBean(StatusCode.OPERATE_SUCCESS, list))