TienChin 渠道管理-字典原理分析

合集 - TienChin(49)

1.TienChin 开篇-运行 RuoYiVue2023-06-112.TienChin 代码格式化-项目结构大改造2023-06-153.TienChin 项目改造完善&项目结构分析2023-06-224.TienChin 验证码响应结果分析&验证码生成接口分析2023-06-225.TienChin 运行 RuoYi-Vue32023-08-126.TienChin-系统功能介绍2023-07-177.TienChin 新建业务菜单2023-08-128.TienChin 创建菜单页面2023-08-159.TienChin 引入 MyBatisPlus2023-08-1510.TienChin 渠道管理-表创建2023-08-1911.TienChin 渠道管理-渠道类型2023-08-2012.TienChin 渠道管理-工程创建2023-08-2213.TienChin 渠道管理-查看渠道接口2023-08-2914.TienChin 渠道管理-前端展示渠道信息2023-09-1715.TienChin 渠道管理-配置字典常量2023-09-17

16.TienChin 渠道管理-字典原理分析2023-09-17

17.TienChin 渠道管理-权限分配2023-09-1718.TienChin 渠道管理-添加渠道2023-09-1719.TienChin 渠道管理-配置校验失败信息2023-09-1720.TienChin 渠道管理-添加渠道页面开发2023-09-1721.TienChin 渠道管理-更新渠道接口开发2023-09-1722.TienChin 渠道管理-删除渠道2023-09-1723.TienChin 渠道管理-渠道搜索2023-09-1724.TienChin 渠道管理-渠道导出2023-09-1725.TienChin 渠道管理-渠道导入2023-09-1726.TienChin 渠道管理-渠道页面完善2023-09-1727.TienChin 活动管理-准备工作2023-09-1728.TienChin 活动管理-工程创建2023-09-2229.TienChin 活动管理-活动列表展示2023-09-2230.TienChin 活动管理-活动状态完善2023-09-2231.TienChin 活动管理-添加活动页面2023-09-2232.TienChin 活动管理-添加活动接口2023-09-2233.TienChin 活动管理-设置活动的默认状态2023-09-2334.TienChin 活动管理-完成添加活动2023-09-2235.TienChin 活动管理-修改活动接口2023-09-2236.TienChin 活动管理-修改活动2023-09-2237.TienChin 活动管理-删除活动2023-09-2238.TienChin 活动管理-搜索活动2023-09-2339.TienChin 活动管理-活动导出2023-09-2340.TienChin-课程管理-数据表创建2023-09-2341.TienChin-课程管理-创建工程2023-09-2342.TienChin-课程管理-配置课程字典2023-09-2343.TienChin-课程管理-展示课程列表2023-09-2444.TienChin-课程管理-添加课程接口2023-09-2445.TienChin-课程管理-添加课程页面2023-09-2446.TienChin-课程管理-课程更新接口2023-09-2447.TienChin-课程管理-删除课程2023-09-2448.TienChin-课程管理-课程搜索2023-09-2549.TienChin-课程管理-课程导出2023-09-25

收起

在上一节当中，我们使用到了字典来进行翻译我们的渠道类型等等字段，那么这一节我们就来分析一下字典的原理。

从代码方面先开始分析，我们先来看一下字典的定义，我们是在如下图当中编写了我们的渠道类型，使用，proxy.useDict 进行的请求数据，proxy 相比之前的 Vue2，其实就是 Vue 本身，相当于 Vue2 当中的 this。

我们继续往下看，查看 proxy.useDict 内部是什么样子的，我们可以看到，其实就是调用了一个方法，在 main.js 中导入了 proxy.useDict （全局挂载到了 Vue.prototype 上面，所以我们在任何一个组件当中都可以使用 this.$useDict 进行调用）

import { useDict } from '@/utils/dict'

可以看到从 utils/dict 导入的一个方法，我们继续往下看，我们可以看到，其实就是调用了一个方法，这个方法是在 utils/dict.js 当中定义的，我们继续往下看。

到了这里就可以完全知道了，其实就是根据我们传入的 dict_type 进行的网络请求，获取对应的字典数据，然后重新组装了一下返回给了我们进行使用。

import { getDicts } from '@/api/system/dict/data'

从 api/system/dict/data 导入了一个方法，我们继续往下看，我们可以看到，其实就是调用了一个方法，这个方法是在 api/system/dict/data.js 当中定义的，我们继续往下看。

上图中就可以完全知道原理了，通过地址就可以找到后台的接口地址，后台的查询我这里就不再带着去查看了，我相信如果是来学习该项目的人大部分应该都是看得懂后台的代码的，这里就不再带着去查看了。

最后修改一下，<script setup name="Channel"> 原先是 <script setup name="Role">。