Ruoyi字典源码学习
此文章属于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 = 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(....)里的方法个人认为是为了拓展性,因为我全局查找也没有看到任何地方用到。)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.<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
})
}
具体页面应用
例如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字典源码学习的更多相关文章
- Aspects 源码学习
AOP 面向切面编程,在对于埋点.日志记录等操作来说是一个很好的解决方案.而 Aspects 是一个对于AOP编程的一个优雅的实现,也可以直接借助这个库来使用AOP思想.需要值得注意的是,Aspect ...
- Redis源码学习:Lua脚本
Redis源码学习:Lua脚本 1.Sublime Text配置 我是在Win7下,用Sublime Text + Cygwin开发的,配置方法请参考<Sublime Text 3下C/C++开 ...
- threadpool源码学习
threadpool源码学习 __all__ = [ 'makeRequests', 'NoResultsPending', 'NoWorkersAvailable', 'ThreadPool', ' ...
- Asp.NetCore源码学习[2-1]:配置[Configuration]
Asp.NetCore源码学习[2-1]:配置[Configuration] 在Asp. NetCore中,配置系统支持不同的配置源(文件.环境变量等),虽然有多种的配置源,但是最终提供给系统使用的只 ...
- Asp.NetCore源码学习[2-1]:日志
Asp.NetCore源码学习[2-1]:日志 在一个系统中,日志是不可或缺的部分.对于.net而言有许多成熟的日志框架,包括Log4Net.NLog.Serilog 等等.你可以在系统中直接使用这些 ...
- [阿里DIN]从论文源码学习 之 embedding_lookup
[阿里DIN]从论文源码学习 之 embedding_lookup 目录 [阿里DIN]从论文源码学习 之 embedding_lookup 0x00 摘要 0x01 DIN代码 1.1 Embedd ...
- [阿里DIN] 从论文源码学习 之 embedding层如何自动更新
[阿里DIN] 从论文源码学习 之 embedding层如何自动更新 目录 [阿里DIN] 从论文源码学习 之 embedding层如何自动更新 0x00 摘要 0x01 DIN源码 1.1 问题 1 ...
- [数据结构1.2-线性表] 动态数组ArrayList(.NET源码学习)
[数据结构1.2-线性表] 动态数组ArrayList(.NET源码学习) 在C#中,存在常见的九种集合类型:动态数组ArrayList.列表List.排序列表SortedList.哈希表HashTa ...
- [算法2-数组与字符串的查找与匹配] (.NET源码学习)
[算法2-数组与字符串的查找与匹配] (.NET源码学习) 关键词:1. 数组查找(算法) 2. 字符串查找(算法) 3. C#中的String(源码) 4. 特性Attribute 与内 ...
随机推荐
- SQL Server、MySQL主从搭建,EF Core读写分离代码实现
一.SQL Server的主从复制搭建 1.1.SQL Server主从复制结构图 SQL Server的主从通过发布订阅来实现 1.2.基于SQL Server2016实现主从 新建一个主库&quo ...
- Veux mapState、mapGetters、mapActions、mapMutations && Vuex命名空间
1 # 一.四个map方法的使用 2 # 1.mapState方法:用于帮助我们映射state中的数据为计算属性 3 computed:{ 4 // sum(){ 5 // return this.$ ...
- Apache DolphinScheduler 社区呼唤志愿者
DolphinScheduler是什么? Apache DolphinScheduler 是一个分布式.易扩展并带有强大的可视化界面的大数据工作流调度系统. 2021 年 03 月 18 日正式成为 ...
- Apache DolphinScheduler 1.2.0 使用文档(1/8):架构及名词解释
本文章经授权转载,原文链接: https://blog.csdn.net/MiaoSO/article/details/104770720 目录 1. 架构及名词解释 1.1 DolphinSched ...
- ApacheCon 2020 参会指南
每年一度的 Apache 北美大会因为疫情的原因转到线上来举行了, 这次会议的主题是 ApacheCon@Home, 也就是说借助网络我们可以足不出户就可以参加 Apache 大会了.今年的会议为了针 ...
- 羽夏看Linux内核——引导启动(上)
写在前面 此系列是本人一个字一个字码出来的,包括示例和实验截图.如有好的建议,欢迎反馈.码字不易,如果本篇文章有帮助你的,如有闲钱,可以打赏支持我的创作.如想转载,请把我的转载信息附在文章后面,并 ...
- suse 11 sp3编译报错问题
suse安装,默认是不安装gcc的,今天安装gcc之后,编译suse11 sp3,报错如下: scripts/basic/fixdep.c:106:23: fatal error: sys/types ...
- docker的volume和bind mount究竟有什么区别?
不知道你在使用docker的时候,有没有注意到volume mount和bind mount的使用? 进一步说,他们之间的区别到底是什么? 接下来的内容,我们就为你揭开他们的神秘面纱. 相同之处 首先 ...
- [CTSC2007]数据备份Backup (贪心)
题面 Description 你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份.然而数据备份的工作是枯燥乏味的,因此你想设计一个系统让不同的办公楼彼此之间互相备份,而你则坐 ...
- 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 中一共有 ...