若依(ruoyi)字典管理插件实现思路探究

这篇具有很好参考价值的文章主要介绍了若依(ruoyi)字典管理插件实现思路探究。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 一个UI表单的构成,避免不了下拉框,多选框等标签,在开发这些标签时,通常会请求后台接口获取字典值进行动态渲染。定制化开发虽然实现简单,但会产生大量重复工作,解决这类问题的思路有哪些?文章对若依字典管理插件实现思路进行了探究,以此来开阔思路。

探究过程如下:

  • 界面设计
  • 数据库设计
  • 开发用例
  • 源码分析

一、界面设计

访问若依管理系统-系统管理-字典管理

界面截图如下:

若依 vue 字典实现,vue.js,elementui,前端

 若依 vue 字典实现,vue.js,elementui,前端

功能提供了字典类型及字典键值的管理

二、数据库设计

SYS_DICT_TYPE

若依 vue 字典实现,vue.js,elementui,前端

SYS_DICT_DATA

若依 vue 字典实现,vue.js,elementui,前端

使用到SYS_DICT_TYPE,SYS_DICT_DATA两张表,定义了字典类型,及对应字典键值,两者是一对多的关系,通过dict_type关联。

三、开发用例

以用户性别为例,

功能配置:

字典名称:用户性别
字典类型:sys_user_sex

字典数据

若依 vue 字典实现,vue.js,elementui,前端

 

页面开发:

  • 引入字典类型
export default {
    name: "User",
    dicts: ['sys_normal_disable', 'sys_user_sex'],
    components: {
      Treeselect
    },
    ......
}
  • 标签使用字典值
          <el-col :span="12">
            <el-form-item label="用户性别">
              <el-select v-model="form.sex" placeholder="请选择性别">
                <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

实现效果:

若依 vue 字典实现,vue.js,elementui,前端

 可以发现,通过灵活的功能配置,vue页面只要引入对应的字典类型,就可以使用字典数据,完成标签的动态渲染,接下来对源码进行分析,探究其实现过程。

四、源码分析

在开发用例中,发现vue自定义属性:dicts: ['sys_user_sex'],申明了vue实例需要引入的字典类型,那问题来了,vue实例是怎么通过这个自定义属性获取对应字典信息呢?

为了回答这个问题,需要先了解一下main.js的使用,参考文章vue项目中main.js使用方法详解,

文中提到“main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件”,根据提示在main.js中找到与字典插件相关的所有代码段:

import { getDicts } from "@/api/system/dict/data";

// 字典标签组件
import DictTag from '@/components/DictTag'

// 字典数据组件
import DictData from '@/components/DictData'


// 全局方法挂载
Vue.prototype.getDicts = getDicts


// 全局组件挂载
Vue.component('DictTag', DictTag)


DictData.install()

按照这些插件加载的先后顺序进行分析

  • import { getDicts } from "@/api/system/dict/data":一个接口方法,根据字典类型查询字典数据信息。
    // 根据字典类型查询字典数据信息
    export function getDicts(dictType) {
      return request({
        url: '/system/dict/data/type/' + dictType,
        method: 'get'
      })
    }
  • import DictTag from '@/components/DictTag':字典标签组件,根据传入标签值,回显其对应的标签中文名,常用于数据列表中,返回的是标签值,通过DictTag组件可以回显对应的中文描述。
    <template>
      <div>
        <template v-for="(item, index) in options">
          <template v-if="values.includes(item.value)">
            <span
              v-if="item.raw.listClass == 'default' || item.raw.listClass == ''"
              :key="item.value"
              :index="index"
              :class="item.raw.cssClass"
              >{{ item.label }}</span
            >
            <el-tag
              v-else
              :disable-transitions="true"
              :key="item.value"
              :index="index"
              :type="item.raw.listClass == 'primary' ? '' : item.raw.listClass"
              :class="item.raw.cssClass"
            >
              {{ item.label }}
            </el-tag>
          </template>
        </template>
      </div>
    </template>
    
    <script>
    export default {
      name: "DictTag",
      props: {
        options: {
          type: Array,
          default: null,
        },
        value: [Number, String, Array],
      },
      computed: {
        values() {
          if (this.value !== null && typeof this.value !== 'undefined') {
            return Array.isArray(this.value) ? this.value : [String(this.value)];
          } else {
            return [];
          }
        },
      },
    };
    </script>
    <style scoped>
    .el-tag + .el-tag {
      margin-left: 10px;
    }
    </style>
  • import DictData from '@/components/DictData':提供了字典数据组件安装方法。
import Vue from 'vue'
import DataDict from '@/utils/dict'
import { getDicts as getDicts } from '@/api/system/dict/data'

function install() {
  Vue.use(DataDict, {
    metas: {
      '*': {
        labelField: 'dictLabel',
        valueField: 'dictValue',
        request(dictMeta) {
          return getDicts(dictMeta.type).then(res => res.data)
        },
      },
    },
  })
}

export default {
  install,
}

其中 import DataDict from '@/utils/dict'  引入了字典数据组件,是整个实现的核心,是这次分析的重点,涉及以下插件:

若依 vue 字典实现,vue.js,elementui,前端

其中index.js 是入口程序,实现逻辑如下:

  • 引入了Dict,DictOptions 插件
import Dict from './Dict'
import { mergeOptions } from './DictOptions'
  • 合并配置参数
mergeOptions(options),将DictData的metas 与 DictOptions的metas配置信息进行合并
metas: {
  '*': {
    labelField: 'dictLabel',
    valueField: 'dictValue',
    request(dictMeta) {
      return getDicts(dictMeta.type).then(res => res.data)
    },
  },
}
metas: {
  '*': {
    /**
     * 字典请求,方法签名为function(dictMeta: DictMeta): Promise
     */
    request: (dictMeta) => {
      console.log(`load dict ${dictMeta.type}`)
      return Promise.resolve([])
    },
    /**
     * 字典响应数据转换器,方法签名为function(response: Object, dictMeta: DictMeta): DictData
     */
    responseConverter,
    labelField: 'label',
    valueField: 'value',
  },
},
  • 通过mixin创建混入对象,将Dict组件 “混合”到各个使用组件本身的选项中。

什么是mixin?可查看博文对vue中mixin的理解。

其中data()方法 “const dict = new Dict()” 负责Dict组件创建,created() 方法中“this.dict.init(this.$options.dicts)”,将vue页面上定义的dicts数组传进去,组装数据,请求后端,获取对应字典数据。

import Dict from './Dict'
import { mergeOptions } from './DictOptions'

export default function(Vue, options) {
  mergeOptions(options)
  Vue.mixin({
    data() {
      if (this.$options === undefined || this.$options.dicts === undefined || this.$options.dicts === null) {
        return {}
      }
      const dict = new Dict()
      dict.owner = this
      return {
        dict
      }
    },
    created() {
      if (!(this.dict instanceof Dict)) {
        return
      }
        
      //  options 如果配置onCreated ,则执行options.onCreated
      options.onCreated && options.onCreated(this.dict)
      this.dict.init(this.$options.dicts).then(() => {
        //options 如果配置onReady ,则执行options.onReady方法
        options.onReady && options.onReady(this.dict)
        this.$nextTick(() => {
          this.$emit('dictReady', this.dict)
          if (this.$options.methods && this.$options.methods.onDictReady instanceof Function) {
            this.$options.methods.onDictReady.call(this, this.dict)
          }
        })
      })
    },
  })
}

对this.dict.init(this.$options.dicts)代码进行分析:其根据传入的options配置信息,生成字典元数据配置信息dictMeta,然后创建回调方法执行数组const ps = [],根据dictMeta加入对应字典类型的loadDict方法,通过Promise.all(ps)发送多个请求并根据请求顺序获取和使用字典数据。

import Vue from 'vue'
import { mergeRecursive } from "@/utils/ruoyi";
import DictMeta from './DictMeta'
import DictData from './DictData'

const DEFAULT_DICT_OPTIONS = {
  types: [],
}

/**
 * @classdesc 字典
 * @property {Object} label 标签对象,内部属性名为字典类型名称
 * @property {Object} dict 字段数组,内部属性名为字典类型名称
 * @property {Array.<DictMeta>} _dictMetas 字典元数据数组
 */
export default class Dict {
  constructor() {
    this.owner = null
    this.label = {}
    this.type = {}
  }

  init(options) {
    if (options instanceof Array) {
      options = { types: options }
    }
    const opts = mergeRecursive(DEFAULT_DICT_OPTIONS, options)
    if (opts.types === undefined) {
      throw new Error('need dict types')
    }
    const ps = []
    this._dictMetas = opts.types.map(t => DictMeta.parse(t))
    this._dictMetas.forEach(dictMeta => {
      const type = dictMeta.type
      Vue.set(this.label, type, {})
      Vue.set(this.type, type, [])
      if (dictMeta.lazy) {
        return
      }
      ps.push(loadDict(this, dictMeta))
    })
    return Promise.all(ps)
  }

  /**
   * 重新加载字典
   * @param {String} type 字典类型
   */
  reloadDict(type) {
    const dictMeta = this._dictMetas.find(e => e.type === type)
    if (dictMeta === undefined) {
      return Promise.reject(`the dict meta of ${type} was not found`)
    }
    return loadDict(this, dictMeta)
  }
}

/**
 * 加载字典
 * @param {Dict} dict 字典
 * @param {DictMeta} dictMeta 字典元数据
 * @returns {Promise}
 */
function loadDict(dict, dictMeta) {
  return dictMeta.request(dictMeta)
    .then(response => {
      const type = dictMeta.type
      let dicts = dictMeta.responseConverter(response, dictMeta)
      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 = []
      }
      dict.type[type].splice(0, Number.MAX_SAFE_INTEGER, ...dicts)
      dicts.forEach(d => {
        Vue.set(dict.label[type], d.value, d.label)
      })
      return dicts
    })
}

这样字典管理插件实现思路就基本清楚了,希望对你有所帮助。文章来源地址https://www.toymoban.com/news/detail-800793.html

到了这里,关于若依(ruoyi)字典管理插件实现思路探究的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 若依管理系统RuoYi-Vue(前后端分离版)项目启动教程

    RuoYi-Vue  是一个 Java EE 企业级快速开发平台,基于经典技术组合(Spring Boot、Spring Security、MyBatis、Jwt、Vue),内置模块如:部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置;支持集群,支持多数据源,支持分布式事务

    2024年02月06日
    浏览(56)
  • vue 前端 + 若依(ruoyi)后端 实现国际化

    记录一下,前端使用vue,后端使用若依(ruoyi,基于spring-boot)实现页面,后端返回提示信息国际化 vue:2.6.12 vue-i18n:^8.27.2 安装vue-i18n,注:最新的交于该版本有差异,所以指定使用版本:8.27.2 添加国际化js文件:language.en_US.js 添加国际化js文件:language.zh_CN.js 添加i18n.js ma

    2024年02月12日
    浏览(51)
  • 基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(四)

    更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码: https://gitee.com/nbacheng/nbcio-boot 前端代码:https://gitee.com/nbacheng/nbcio-vue.git 在线演示(包括H

    2024年01月23日
    浏览(52)
  • 基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(三)

    更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码: https://gitee.com/nbacheng/nbcio-boot 前端代码:https://gitee.com/nbacheng/nbcio-vue.git 在线演示(包括H

    2024年01月24日
    浏览(64)
  • 基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(二)

    更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码: https://gitee.com/nbacheng/nbcio-boot 前端代码:https://gitee.com/nbacheng/nbcio-vue.git 在线演示(包括H

    2024年01月25日
    浏览(51)
  • 基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(五)

    更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码: https://gitee.com/nbacheng/nbcio-boot 前端代码:https://gitee.com/nbacheng/nbcio-vue.git 在线演示(包括H

    2024年01月24日
    浏览(49)
  • 基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(一)

    更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码: https://gitee.com/nbacheng/nbcio-boot 前端代码:https://gitee.com/nbacheng/nbcio-vue.git 在线演示(包括H

    2024年01月20日
    浏览(43)
  • ruoyi若依 组织架构设计--[ 菜单管理 ]

    1.部门表 ancestors 字段。 添加这个字段, 方便列举所有子部门 2.用户信息表 添加dept_id。用于根据 部门树 ,查询所有的用户。另一方面,也是可以做 数据权限 3.岗位表 4.角色表 5.菜单表 6.用户角色关联表 7.角色菜单关联表 8.角色部门关联表 9.用户岗位关联表 需求是 超级管理

    2024年02月12日
    浏览(45)
  • 若依Ruoyi-Vue生成代码使用

    目录 一、效果一览: 二、详细步骤: ①登录若依----点击系统工具--点击代码生成模块 ②使用Navicat在若依数据库里面新建一张表单,我这示例创建了my_students表单 并为表设计字段添加数据  ③在代码生成栏导入刚才创建的my_students表 并编辑这张表  ④完成这些操作之后,点

    2024年02月05日
    浏览(46)
  • RuoYi-Vue-Plus搭建(若依)

     项目简介 业务功能 拉取代码 建库建表 修改配置 后端启动 前端启动 项目访问(http://localhost:81) ​​ ​ ​ ​

    2024年02月11日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包