此文章属于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. Ngnix初步学习

    Nginx下载与安装(Linux) nginx下载 1.root用户下进入/usr/local/src su root cd /usr/local/src 2.下载nginx所需包 # nginx w ...

  2. 【MySQL 8】Generated Invisible Primary Keys(GIPK)

    从MySQL 8.0.30开始,MySQL支持在GIPK模式下运行时生成不可见的主键.在这种模式下运行时,对于任何在没有显式主键的情况下创建的InnoDB表,MySQL服务器会自动将生成的不可见主键 ...

  3. TensorFlow自定义训练函数

    本文记录了在TensorFlow框架中自定义训练函数的模板并简述了使用自定义训练函数的优势与劣势. 首先需要说明的是,本文中所记录的训练函数模板参考自https://stackoverflow.com ...

  4. Docker部署kafka|Go操作实践

    前言 写作本文的背景是由于字节的暑期青训营中,某个项目要求编写一个简易的流处理引擎(flink),开发语言不限,推荐Java,本着好奇心的驱使,我打算使用Go语言进行部分尝试. 既然是流处理引擎,那么 ...

  5. Linux 04 用户文件

    参考源 https://www.bilibili.com/video/BV187411y7hF?spm_id_from=333.999.0.0 版本 本文章基于 CentOS 7.6 概述 完成用户管 ...

  6. Excel 插入嵌入式图表和独立图表的方法

    描述 嵌入式图表:是一种与当前工作表相同位置的图表,且悬浮在表格之上,不受表格限制,因此称之为嵌入式图表. 独立图表:是独立于当前工作表的图表,打印时,需要单独将其打印出来. 插入独立图表的图文教程: ...

  7. 基于 Sequelize.js + Express.js 开发一套 Web 后端服务器

    什么是 Sequelize 我们知道 Web 应用开发中的 Web 后端开发一般都是 Java.Python.ASP.NET 等语言.十年前,Node.js 的出现使得原本仅限于运行在浏览器中的 Ja ...

  8. 计算机的主存储器(RAM)

    主存储器是存放指令和数据的,并能由 CPU 直接随机存取的存储器.主要由存储体.控制线路.地址寄存器.数据寄存器和地址译码电路五部分组成.

  9. SyncFusion安装和使用

    1.Visual Studio 继承 Visual Studio菜单栏 → 扩展 → 扩展管理 → 搜索框中搜索 "Syncfusion Windows",单击 "Win ...

  10. HCNP Routing&Switching之MAC安全

    前文我们了解了GRE over IPSec 相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16601491.html:今天我们来聊一聊mac安全相关话 ...