此文章属于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.<DictData>')
    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,

    <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable>
    <el-option
    v-for="dict in dict.type.sys_job_status"
    :key="dict.value"
    :label="dict.label"
    :value="dict.value"
    />
    </el-select> export default{
    dicts:['sys_job_group','sys_job_status'],
    //dict:{'sys_job_group':[data1,data2],'sys_job_status':[data1,data2]} 通过上文的代码全局混入得到
    }

Ruoyi字典源码学习的更多相关文章

  1. Aspects 源码学习

    AOP 面向切面编程,在对于埋点.日志记录等操作来说是一个很好的解决方案.而 Aspects 是一个对于AOP编程的一个优雅的实现,也可以直接借助这个库来使用AOP思想.需要值得注意的是,Aspect ...

  2. Redis源码学习:Lua脚本

    Redis源码学习:Lua脚本 1.Sublime Text配置 我是在Win7下,用Sublime Text + Cygwin开发的,配置方法请参考<Sublime Text 3下C/C++开 ...

  3. threadpool源码学习

    threadpool源码学习 __all__ = [ 'makeRequests', 'NoResultsPending', 'NoWorkersAvailable', 'ThreadPool', ' ...

  4. Asp.NetCore源码学习[2-1]:配置[Configuration]

    Asp.NetCore源码学习[2-1]:配置[Configuration] 在Asp. NetCore中,配置系统支持不同的配置源(文件.环境变量等),虽然有多种的配置源,但是最终提供给系统使用的只 ...

  5. Asp.NetCore源码学习[2-1]:日志

    Asp.NetCore源码学习[2-1]:日志 在一个系统中,日志是不可或缺的部分.对于.net而言有许多成熟的日志框架,包括Log4Net.NLog.Serilog 等等.你可以在系统中直接使用这些 ...

  6. [阿里DIN]从论文源码学习 之 embedding_lookup

    [阿里DIN]从论文源码学习 之 embedding_lookup 目录 [阿里DIN]从论文源码学习 之 embedding_lookup 0x00 摘要 0x01 DIN代码 1.1 Embedd ...

  7. [阿里DIN] 从论文源码学习 之 embedding层如何自动更新

    [阿里DIN] 从论文源码学习 之 embedding层如何自动更新 目录 [阿里DIN] 从论文源码学习 之 embedding层如何自动更新 0x00 摘要 0x01 DIN源码 1.1 问题 1 ...

  8. [数据结构1.2-线性表] 动态数组ArrayList(.NET源码学习)

    [数据结构1.2-线性表] 动态数组ArrayList(.NET源码学习) 在C#中,存在常见的九种集合类型:动态数组ArrayList.列表List.排序列表SortedList.哈希表HashTa ...

  9. [算法2-数组与字符串的查找与匹配] (.NET源码学习)

    [算法2-数组与字符串的查找与匹配] (.NET源码学习) 关键词:1. 数组查找(算法)   2. 字符串查找(算法)   3. C#中的String(源码)   4. 特性Attribute 与内 ...

随机推荐

  1. SQL Server、MySQL主从搭建,EF Core读写分离代码实现

    一.SQL Server的主从复制搭建 1.1.SQL Server主从复制结构图 SQL Server的主从通过发布订阅来实现 1.2.基于SQL Server2016实现主从 新建一个主库&quo ...

  2. Veux mapState、mapGetters、mapActions、mapMutations && Vuex命名空间

    1 # 一.四个map方法的使用 2 # 1.mapState方法:用于帮助我们映射state中的数据为计算属性 3 computed:{ 4 // sum(){ 5 // return this.$ ...

  3. Apache DolphinScheduler 社区呼唤志愿者

    DolphinScheduler是什么? Apache DolphinScheduler 是一个分布式.易扩展并带有强大的可视化界面的大数据工作流调度系统. 2021 年 03 月 18 日正式成为 ...

  4. Apache DolphinScheduler 1.2.0 使用文档(1/8):架构及名词解释

    本文章经授权转载,原文链接: https://blog.csdn.net/MiaoSO/article/details/104770720 目录 1. 架构及名词解释 1.1 DolphinSched ...

  5. ApacheCon 2020 参会指南

    每年一度的 Apache 北美大会因为疫情的原因转到线上来举行了, 这次会议的主题是 ApacheCon@Home, 也就是说借助网络我们可以足不出户就可以参加 Apache 大会了.今年的会议为了针 ...

  6. 羽夏看Linux内核——引导启动(上)

    写在前面   此系列是本人一个字一个字码出来的,包括示例和实验截图.如有好的建议,欢迎反馈.码字不易,如果本篇文章有帮助你的,如有闲钱,可以打赏支持我的创作.如想转载,请把我的转载信息附在文章后面,并 ...

  7. suse 11 sp3编译报错问题

    suse安装,默认是不安装gcc的,今天安装gcc之后,编译suse11 sp3,报错如下: scripts/basic/fixdep.c:106:23: fatal error: sys/types ...

  8. docker的volume和bind mount究竟有什么区别?

    不知道你在使用docker的时候,有没有注意到volume mount和bind mount的使用? 进一步说,他们之间的区别到底是什么? 接下来的内容,我们就为你揭开他们的神秘面纱. 相同之处 首先 ...

  9. [CTSC2007]数据备份Backup (贪心)

    题面 Description 你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份.然而数据备份的工作是枯燥乏味的,因此你想设计一个系统让不同的办公楼彼此之间互相备份,而你则坐 ...

  10. Atcoder Beginner Contest 200 E. Minflip Summation(概率数论)

    题面 一个字符串 T T T 是由一个包含 0.1.? 的字符串 S S S 循环连接 K K K 次获得的. 字符串 T T T 中的每个 ? 都可以换成 0 或 1 ,假设 T T T 中一共有 ...