vue 字典配置_打造一款适合自己的快速开发框架-前端篇之字典组件设计与实现__Vue.js...

前言

后端篇的时候已经对字典模块进行了设计，相应的接口也已经完成。在前后端未分离的情况下，因为页面是由服务端渲染的，所以一般都会自定义一个字典标签用于对字典数据的取值、渲染。该种情况下，服务端很方便地对字典做缓存处理。前后端分离后，前端与后端都是通过接口进行交互的，所以维护字典的方式也会有所区别。

字典组件设计

我们简单的分析一下字典组件应该具备的功能。

先分析使用场景

在后台管理中，常见的使用字典的场景有三个：

添加/修改表单，下拉选择

列表页，由值转为显示名称

搜索表单，下拉选择

使用场景不同，对于前端来说，其实就是呈现方式的不同。所以我们在做组件的时候，可以先默认按场景分三种布局。

关于缓存的思路

缓存的思路有很多种，这里简单讲一下：

系统登录后，一次性返回所有的字典数据，缓存在本地的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"

}

响应示例：

{