Ruoyi字典源码学习

此文章属于ruoyi项目实战系列

使用目的

  1. 什么是字典数据:具体的值(0,1,"Y","N"),对应具体的业务逻辑("男","女","是","否")。
  2. 字典数据不应该只写死在代码中,还应存入数据库,通过管理系统来增删改查。

源码分析

ruoyi项目在低于3.7.0的版本中,前端字典功能实现比较简单,每个index.vue页面都请求dict的api,获取数据再加工显示即可。3.7.0之后的版本使用了混入,所以复杂了一些。

分析

  1. 入口:查看全局入口文件main.jsDictData.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插件对应的参数进行赋值。

  2. 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 = this
    		return {dict}
    	},
    	created(){
    	....
    	this.dict.init(this.$options.dicts).then(()=>{...})
    	}
    	
    })
    

    data (): 每个 Vue 页面创建一个 Dict。

    created(): 调用Dict.init(dicts)方法,传入每个vue页面声明的dicts数组(例如 dicts['sys_normal_disable'])。(额外补充:init().then(....)里的方法个人认为是为了拓展性,因为我全局查找也没有看到任何地方用到。)

  3. 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里的一些调用函数源码

  1. 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对象,方便后续调用。

  2. 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  
        })  
    }	
    
  3. 具体页面应用
    例如job/index.vue,

      
        
    	
    
    export default{
    dicts:['sys_job_group','sys_job_status'],
    //dict:{'sys_job_group':[data1,data2],'sys_job_status':[data1,data2]} 通过上文的代码全局混入得到
    }
    
原文链接:,转发请注明来源!