vue字典配置_打造⼀款适合⾃⼰的快速开发框架-前端篇之字
典组件设计与实现__
前⾔
后端篇的时候已经对字典模块进⾏了设计，相应的接⼝也已经完成。在前后端未分离的情况下，因为页⾯是由服务端渲染的，所以⼀般都会⾃定义⼀个字典标签⽤于对字典数据的取值、渲染。该种情况下，服务端很⽅便地对字典做缓存处理。前后端分离后，前端与后端都是通过接⼝进⾏交互的，所以维护字典的⽅式也会有所区别。
字典组件设计
我们简单的分析⼀下字典组件应该具备的功能。
先分析使⽤场景
在后台管理中，常见的使⽤字典的场景有三个：
添加/修改表单，下拉选择
列表页，由值转为显⽰名称
搜索表单，下拉选择
使⽤场景不同，对于前端来说，其实就是呈现⽅式的不同。所以我们在做组件的时候，可以先默认按场景分三种布局。
关于缓存的思路
缓存的思路有很多种，这⾥简单讲⼀下：
系统登录后，⼀次性返回所有的字典数据，缓存在本地的cookies或vuex上；
优点：减轻服务器压⼒
缺点：⼀次性返回，字典量多的话，可能会影响体验
不进⾏缓存，每次都调⽤接⼝获取数据；
优点：⽆
缺点：频繁请求，页⾯中字典多的话，影响体验
使⽤vuex，基于dictKey进⾏缓存，保证在同⼀个vue实例下，同⼀个key，只调⽤⼀次接⼝。
⽅案三是本框架采⽤的⽅式，也不能说是最优的。但是相对⽽已，可能会⽐前两个⽅案会好⼀些。当然，除了这三个⽅案，肯定还有别的⽅案，这⾥就不讨论了。
组件参数说明
暂时定⼏个常⽤的参数，后续可能还会有追加
参数名
类型
默认值
说明
dictKey
String
undefined
字典唯⼀编码(表名_字段名)
type
String
enum
字典类型(enum->枚举类字典类型,db->数据库字典类型,local->本地字典类型) value
String, Number
undefined
绑定的值
size
String
medium
对应el-select的size，medium/small/mini
mode
String
form
form->普通表单,list->列表页,searchForm->搜索表单
接⼝说明
先简单说⼀下后端提供的接⼝
请求地址：
{{api_base_url}}/sys/dict/getByDictKey
数据类型：
application/json
请求⽰例：
{
"dictKey": "sys_role_role_type",
"type": "enum"
}
响应⽰例：
{
"code": 0, // 返回状态码0，成功
"msg": "通过字典唯⼀编码查询成功",// 消息描述
"data": {
"name": "⾓⾊类型",
"dictKey": "sys_role_role_type",// 字典唯⼀编码"items": [{
"name": "管理员",
"dictItemValue": 10
}, {
"name": "流程审核员",
"dictItemValue": 20
}]
}
}
开始编码
⽬录结构
├── src
├──components/m
├──Dict
└── index.vue
├── store
├── modules
└── dict.js
├── getters.js
└── index.js
├── views
├──dashboard
└── index.vue
└── main.js
⽂件详解
src/components/m/Dict/index.vue
字典组件
v-for="item in dict.items"
:key="item.dictItemValue"
:label="item.name"
:value="item.dictItemValue">
好用的前端框架
{{ item.name }}
v-for="item in dict.items"
:
key="item.dictItemValue"
:label="item.name"
:value="item.dictItemValue">
import { mapGetters } from 'vuex'
export default {
name: 'MDict',
props: {
// 字典唯⼀编码(表名_字段名)
dictKey: {
type: String,
default: undefined
},
// 字典类型(enum->枚举类字典类型,db->数据库字典类型,local->本地字典类型) // 不传的话，后端先查enum，再查db
type: {
type: String,
default: 'enum'
},
// 绑定的值
value: {
type: [String, Number],
default: undefined
},
size: { // medium/small/mini
type: String,
default: 'medium'
},
mode: { // form->普通表单,list->列表页,searchForm->搜索表单
type: String,
default: 'form'
}
},
data() {
return {
mValue: this.value
}
},
computed: {
...mapGetters([
'dictMap'
]),
// 当前字典
dict() {
return this.dictMap[this.dictKey] || {}
}
},
watch: {
value(n) { // 监听⽗组件值变动，⼦组件也要变动
this.mValue = n
}
},
created() {
if (!this.dictMap[this.dictKey]) {
// 这⾥调⽤store/modules/dict.js/action->getByDictKey this.$store.dispatch('dict/getByDictKey', {
dictKey: this.dictKey,
type: pe
})
}
},
methods: {
// ⼦组件值变化要通知⽗组件
handleChange(value) {
this.$emit('input', value)
}
}
}
src/store/modules/dict.js

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。