此文章属于ruoyi项目实战系列
使用目的
- 什么是字典数据:具体的值(0,1,”Y”,”N”),对应具体的业务逻辑(”男”,”女”,”是”,”否”)。
- 字典数据不应该只写死在代码中,还应存入数据库,通过管理系统来增删改查。
源码分析
ruoyi项目在低于3.7.0的版本中,前端字典功能实现比较简单,每个index.vue页面都请求dict的api,获取数据再加工显示即可。3.7.0之后的版本使用了混入,所以复杂了一些。
分析
入口:查看全局入口文件
main.js
,DictData.install()
是字典功能的入口位置。function install() { Vue.use(DataDict, {//额外参数 metas: { '*': { labelField: 'dictLabel', valueField: 'dictValue', request(dictMeta) { return getDicts(dictMeta.type).then(res => res.data) }, }, }, })}
install全局注册了一个插件
DataDict
,同时传入了额外参数{meta:xxx}
,目的是将DataDict插件对应的参数进行赋值。DataDict插件:因为该插件本身是个function,所以Vue.use会直接将function视为
install()
方法执行。export default function (Vue, options) {mergeOptions(options)Vue.mixin({...})}
首先执行
mergeOptions(options)
,目的是将传入的额外参数与DictOptions合并。具体实现是通过递归调用mergeRecursive(source,target)
,将DictOptions的属性覆盖或者添加。其次注册全局混入
Vue.mixin
,给所有 Vue 实例添加了data()
和created()
方法。Vue.mixin({data(){const dict = new Dict()dict.owner = thisreturn {dict}},created(){....this.dict.init(this.$options.dicts).then(()=>{...})}})
data (): 每个 Vue 页面创建一个 Dict。
created(): 调用Dict.init(dicts)方法,传入每个vue页面声明的dicts数组(例如
dicts['sys_normal_disable']
)。(额外补充:init().then(….)里的方法个人认为是为了拓展性,因为我全局查找也没有看到任何地方用到。)Dict. init () : 看注释即可
init(options) { if (options instanceof Array) { //此处传进来的是每个index.vue的dicts属性,基本上是['dictName1','dictName2']之类的。 options = {types: options} } const opts = mergeRecursive(DEFAULT_DICT_OPTIONS, options)//options与DEFAULT合并,并且将合并结果赋值给opts if (opts.types === undefined) { throw new Error('need dict types') } const ps = [] this._dictMetas = opts.types.map(t => DictMeta.parse(t)) //调用parse,将数组中的字符串转换为DictMeta对象返回。 this._dictMetas.forEach(dictMeta => { const type = dictMeta.type Vue.set(this.label, type, {})//dict.label添加属性 dictName:{} Vue.set(this.type, type, [])//dict.type 添加属性 dictName[] if (dictMeta.lazy) { return } ps.push(loadDict(this, dictMeta)) })loadDict:请求后端api,将数据组装进dict return Promise.all(ps) }
简单通过注释解释一下init里的一些调用函数源码
DictMeta.parse
DictMeta.parse= function(options) { let opts = null if (typeof options === 'string') { opts = DictOptions.metas[options] || {} opts.type = options//opt{type:'字典名称'} } else if (typeof options === 'object') { opts = options } //创建{type:'字典名称"}并且赋值给DictOptions.meta属性 opts = mergeRecursive(DictOptions.metas['*'], opts) //构造dictmeta原数据 return new DictMeta(opts) }
主要将vue页面的dicts数组以及DictOption的meta数据在整合赋值到DictMeta对象,方便后续调用。
loadDict(dict,dictMeta)
function loadDict(dict, dictMeta) { return dictMeta.request(dictMeta)//请求后端api,获取字典数据 .then(response => { const type = dictMeta.type let dicts = dictMeta.responseConverter(response, dictMeta)//将response转换成DictData if (!(dicts instanceof Array)) { console.error('the return of responseConverter must be Array.') dicts = [] } else if (dicts.filter(d => d instanceof DictData).length !== dicts.length) { console.error('the type of elements in dicts must be DictData') dicts = [] } //将response的数据插入到dict.type['dictName']的数组中 //splice实现了响应式改变数组元素,所以这里不用vue.set dict.type[type].splice(0, Number.MAX_SAFE_INTEGER, ...dicts) //将dicts(也就是dictData)赋值给dict.type[type] dicts.forEach(d => { Vue.set(dict.label[type], d.value, d.label) //dict.label{'dictName':{}}添加属性d.value:d.label }) return dicts }) }
具体页面应用
例如job/index.vue,export default{dicts:['sys_job_group','sys_job_status'],//dict:{'sys_job_group':[data1,data2],'sys_job_status':[data1,data2]} 通过上文的代码全局混入得到}