VUE+ElementUI+SpringBoot前后端交互实现动态字典列表

实战说明：动态从后端获取不同字段数据，并作为各个下拉列表中的可选数据，介绍了前端VUE界面如何引用字段，JS脚本如何循环获取不同字段，java代码中如何实现查询接口，mybatis中如何进行参数切换。

前端：VUE页面设计

 dictObject:{}，定义了空的字典参数列表，并调用getDictList(this.dictObject)函数，请求返回需要的字段值列表。

dictObject.schemaOptions引用post请求后返回的字段值列表。

 字典键值：dict.dictValue，一般是写入数据库的值。
 字典标签值：ict.dictLabel，一般是前端展示给用户的值。

上文引入的脚本函数：import { getDictList} from "@/api/smart/smartschema";

vue界面调用getDictList(this.dictObject)函数，JS中发起请求返回响应结果给到obj，即传递给了：obj。

import request from '@/utils/request'

//获取词典列表
export function getDictList(obj) {
  const dictList = {
    //温度范围数据
    rangeOptions: [],
    //目标温度值数据
    tempOptions: [],
    //模式分类数据
    schemaOptions: [],
    //功能字段数据
    functionOptions: [],
  }

  for (let k in dictList) {
    request({
      url: '/smart/smartSchema/getDictList',
      method: 'post',
      params: {dictType: `${k}`}
    }).then(response => {
      obj[k] = response.data
    });
  }
}

controller层的代码：

接受前端的post的请求，每次请求调用getDictList()函数返回字典列表。

/**
 * 查询当前所有名称
 */
@PostMapping(value = "/getDictList")
public AjaxResult getDictList(@RequestParam("dictType") String dictType) {
    List data = bizSmartSchemaService.getDictList(dictType);
    if (StringUtils.isNull(data)) {
        data = new ArrayList();
    }
    return AjaxResult.success(data);
}

service层代码：

List getDictList(String dictType);

serviceImpl层代码：

为保障字典键值跟字典标签值一样，将库中返回结果同时封装为键值跟标签值。

@Override
public List getDictList(String dictType) {
    List templist = new ArrayList();
    List list = bizSmartSchemaMapper.getDictList(dictType);
    list.forEach(str -> {
        BizDictData temp = new BizDictData();
        temp.setDictValue(str);
        temp.setDictLabel(str);
        templist.add(temp);
    });
    return templist;    
}

mapper层代码：

List getDictList(String dictType);

mapper.xml代码：

加if判断，区分需要查询哪个字段值。

    select distinct
    
        target_temperature
    
    
        forecast_range
    
    
        model_name
    
    
        functional_directive_en
    
    from conventional_bigdata.app_electricheater_zero_tb_adaptive_model_detail