在之前对数据库 某些状态码转文字 比如 1 => 成功 我都是在查询数据库的时候对字段进行,判断并返回,结果在发现类型不匹配的时候,我开始反思自己的操作。
因为我之前为了方便,喜欢字段尽可能都用字符串,所以之前没有出现问题。后面我了解到了字典,便开始学习使用了,我没有找到太多字典的使用方法,就自己试了一下。
首先是数据库的表结构
CREATE TABLE `sys_dict_data` (
`dict_code` bigint NOT NULL AUTO_INCREMENT COMMENT '字典编码',
`dict_sort` int DEFAULT '0' COMMENT '字典排序',
`dict_label` varchar(100) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT '' COMMENT '字典标签',
`dict_value` varchar(100) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT '' COMMENT '字典键值',
`dict_type` varchar(100) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT '' COMMENT '字典类型',
`css_class` varchar(100) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT NULL COMMENT '样式属性(其他样式扩展)',
`list_class` varchar(100) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT NULL COMMENT '表格回显样式',
`is_default` char(1) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT 'N' COMMENT '是否默认(Y是 N否)',
`status` char(1) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT '0' COMMENT '状态(0正常 1停用)',
`create_by` varchar(64) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT '' COMMENT '创建者',
`create_time` datetime DEFAULT NULL COMMENT '创建时间',
`update_by` varchar(64) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT '' COMMENT '更新者',
`update_time` datetime DEFAULT NULL COMMENT '更新时间',
`remark` varchar(500) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT NULL COMMENT '备注',
PRIMARY KEY (`dict_code`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=42 DEFAULT CHARSET=utf8mb3 ROW_FORMAT=DYNAMIC COMMENT='字典数据表';
我们主要使用类型dict_type 来获取对应的字典List
控制器层我是这样写的
@GetMapping
public ResponseResult<List<DictData>> getByDictType(String dictType){
List<DictData> list = dictDataService.getDictDdataList(dictType);
return ResponseResult.ok(list);
}
mapper.xml如下 (映射什么的我没有写下来,有数据库就能插件自动生成)
<!--根据类型查出它的字典列表-->
<select id="selectDictDdataList" resultMap="dictDataMap">
SELECT *
FROM sys_dict_data d
WHERE d.dict_type = #{dictType}
</select>
我们在前端边可以调取字典List了,(因为内容偏向于记录,所以代码基本都是我稍微优化可以复用的)
//获取字典数组
getDict(type) {
let dict1;
let type1;
this.axios.get("dictdatas?dictType=" + type)
.then(result => {
console.log(result.data)
if (type.includes('_')) {
type1 = type.split('_')[1]
}
dict1 = type1 + "lists";
this[dict1] = result.data.data;
console.log("数组初始化:")
console.log(this[dict1])
this.DictList(this[dict1], type1, type);
})
},
如果使用过map来操作类似字典的方法,大概能清楚
我们需要得到一个键值对的字典,用这个字典来操作某些 数字字符串 如果字典里面有这个键,就把值赋给 被操作的数字或字符串 。如果字典里面没有这个键,就返回它本身。
所以我们要处理集合
DictList(list, type1, type) {
const result = list.reduce((prev, current) => {
let dictType = current.dictType.trim();
if (!prev[dictType]) {
prev[dictType] = {};
}
prev[dictType][current.dictValue] = current.dictLabel;
return prev;
}, {});
console.log("集合为:")
console.log(result)
name = type1 + "dicts";
this[name] = result[type];
console.log("字典为:")
console.log(this[name])
console.log(type)
},
data() {
return {
commonlists: [],//字典的集合
commondicts: [],//字典
}
},
我对这些并不是太熟练,并没有完完全全的动态生成这些东西。调用方法传的值和我们在data里的命名要息息相关。
mounted() {
this.getDict("sys_common_status")
}
"sys_common_status"是我们调取的字典的类型 要加双引号,因为我的方法传参是要操作字符串。common是字典和集合的命名前缀。
完成以上操作我们就加载好了字典
然后就可以使用它了
举例几种使用方法,我并没有在所有地方都用到,所以不能揽括所有的
<p>{{ commondicts[comments.status] }}</p><br>
<el-table-column
label="登录状态"
width="180">
<template slot-scope="scope">
<span v-text="commondicts[scope.row.status]"></span>
</template>
</el-table-column>
<el-select v-model="status" placeholder="登录状态">
<el-option
v-for="(value, key) in commondicts"
:key="key"
:label="value"
:value="key"
></el-option>
</el-select>