啥也不会的实习生：以字典方式给前后端项目添加下拉框查询

目录

前言

场景

实现

 后端接口：调用的方法getDicts是外部引用的公共方法，数据来自当前的接口，接口功能：根据类型，找到目标数据。

接下来是对数据库的操作：

---

前言

这次的任务给还是给项目添加一个如图所示的下拉搜索框实现筛选功能，不用用户自己去输入。

左边的车辆状态是已经完成的项目中原有的，右边的是我需要做的省份，我要做的说实在点其实也就是照着原来的代码找不同，修改后添加上去，结合数据库添加一些字段来实现功能。真让我现在自己去实现搭建一个前后端项目难度还是太大了。

这次的功能实现也是很多看了很多其他博客才实现，我的这次功能实现也有很大一部分看了这篇才完成的。这篇

ElementUI中el-select请求springboot后台数据显示下拉项并在el-table中格式化显示_BADAO_LIUMANG_QIZHI的博客-CSDN博客

场景

我目前拿到的项目是一个基于Vue+ElementUI+axios+SpringBoot前后端分离的数据分析系统。需要我做的东西很多也就是添加一些简单的功能，前端的偏多一点，后端和数据库增删改查较少。

实现

首先实现前端页面下拉框赋值，依旧照葫芦画瓢，添加如下代码：

主要控件部分：

 <el-form-item label="省份" prop="province">
         <el-select v-model="queryParams.province" placeholder="请选择省份" clearable size="small">
          <el-option
            v-for="dict in provinceOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
      </el-select>
      </el-form-item>

通过学习了解这里绑定的下拉框的数据源是一个provinceOption这个对象数组，这是一个请求后台数据返回的键值对的数组。 

这个对象数组需要声明

  data() {
    return {
      // 添加省份状态字典
      provinceOptions: [],

 蓝色部分是我添加的。

然后在页面的created函数中请求后台获取字典数据，这样在页面加载完就能获取数据

指定前端获取数据  从哪个方法

this.getDicts("car_province")

created{ 
this.getDicts("car_province").then(response => {
      this.provinceOptions = response.data;
    });
}

 

调用的方法getDicts是外部引用的公共方法（设置的系统api里），能根据字典类型获取字典数据.

// 根据字典类型查询字典数据信息
export function getDicts(dictType) {
  return request({
    url: '/system/dict/data/type/' + dictType,
    method: 'get'
  })
}

 后端接口：调用的方法getDicts是外部引用的公共方法，数据来自当前的接口，接口功能：根据类型，找到目标数据。

 /**
     * 根据字典类型查询字典数据信息
     */
    @GetMapping(value = "/type/{dictType}")
    public AjaxResult dictType(@PathVariable String dictType)
    {
        List<SysDictData> data = dictTypeService.selectDictDataByType(dictType);
        if (StringUtils.isNull(data))
        {
            data = new ArrayList<SysDictData>();
        }
        return AjaxResult.success(data);
    }

 在Controller层调用servive

  /**
     * 根据字典类型查询字典数据
     * 
     * @param dictType 字典类型
     * @return 字典数据集合信息
     */
    public List<SysDictData> selectDictDataByType(String dictType);

 在ServiceImpl

 /**
     * 根据字典类型查询字典数据
     * 
     * @param dictType 字典类型
     * @return 字典数据集合信息
     */
    @Override
    public List<SysDictData> selectDictDataByType(String dictType)
    {
        List<SysDictData> dictDatas = DictUtils.getDictCache(dictType);
        if (StringUtils.isNotEmpty(dictDatas))
        {
            return dictDatas;
        }
        dictDatas = dictDataMapper.selectDictDataByType(dictType);
        if (StringUtils.isNotEmpty(dictDatas))
        {
            DictUtils.setDictCache(dictType, dictDatas);
            return dictDatas;
        }
        return null;
    }

mapper层

    /**
     * 根据字典类型查询字典数据
     * 
     * @param dictType 字典类型
     * @return 字典数据集合信息
     */
    public List<SysDictData> selectDictDataByType(String dictType);

 对应的xml代码：

	<select id="selectDictDataByType" parameterType="SysDictData" resultMap="SysDictDataResult">
		<include refid="selectDictDataVo"/>
		where status = '0' and dict_type = #{dictType} order by dict_sort asc
	</select>

 上述实现的功能就是对数据库中的字典表根据type类型进行查询。

接下来是对数据库的操作：

字典类型上添加新的省份这个字典car_province

 字典数据添加需要显示的内容字段

请求完字典数据并通过

 给下拉框进行赋值后，然后就是对查询数据的格式化显示。

使用字典的目的就是在数据中存储的是键，即1,2,3这种数据。而在页面上显示的是要对应的值，即中文名 。除了可以在后台进行查询时关联建立的字典表进行查询，然后直接将查询结果返回给前端，还可以直接查询的就是表中存储的1,2,3这种数据，返回给前端，由前端进行格式化显示。

来到对应的状态列

     <el-table-column label="省份" align="center" prop="province" width="120"/>

添加省份属性字典翻译

  // 省份属性字典翻译
    provinceFormat(row, column) {
      return this.selectDictLabel(this.provinceOptions, row.province);
    },

传递的row是当前行对象，column是当前列对象 

到这里我要实现的功能已经差不多实现了，在提交查询的参数上再加一个参数province就能实现功能了。

 实现如图：

 我有继续探究它整个实现的流程，但发现后续涉及到很多以我目前的技术根本看不懂的东西，例如封装axios。加上领导又分配了我新的任务，只能先写到这了。

参考博文：vue获取字典分析，后端在原有的接口上加一层装饰，提供一个新接口_wenxi2367的博客-CSDN博客_vue字典接口

ElementUI中el-select请求springboot后台数据显示下拉项并在el-table中格式化显示_BADAO_LIUMANG_QIZHI的博客-CSDN博客