在vue页面中，从后端获取字典List转换成对应的Dict并使用

  在之前对数据库 某些状态码转文字 比如 1 => 成功 我都是在查询数据库的时候对字段进行，判断并返回，结果在发现类型不匹配的时候，我开始反思自己的操作。
  因为我之前为了方便，喜欢字段尽可能都用字符串，所以之前没有出现问题。后面我了解到了字典，便开始学习使用了，我没有找到太多字典的使用方法，就自己试了一下。
 首先是数据库的表结构
 

CREATE TABLE `sys_dict_data` (
  `dict_code` bigint NOT NULL AUTO_INCREMENT COMMENT '字典编码',
  `dict_sort` int DEFAULT '0' COMMENT '字典排序',
  `dict_label` varchar(100) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT '' COMMENT '字典标签',
  `dict_value` varchar(100) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT '' COMMENT '字典键值',
  `dict_type` varchar(100) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT '' COMMENT '字典类型',
  `css_class` varchar(100) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT NULL COMMENT '样式属性（其他样式扩展）',
  `list_class` varchar(100) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT NULL COMMENT '表格回显样式',
  `is_default` char(1) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT 'N' COMMENT '是否默认（Y是 N否）',
  `status` char(1) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT '0' COMMENT '状态（0正常 1停用）',
  `create_by` varchar(64) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT '' COMMENT '创建者',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  `update_by` varchar(64) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT '' COMMENT '更新者',
  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
  `remark` varchar(500) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT NULL COMMENT '备注',
  PRIMARY KEY (`dict_code`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=42 DEFAULT CHARSET=utf8mb3 ROW_FORMAT=DYNAMIC COMMENT='字典数据表';

我们主要使用类型dict_type 来获取对应的字典List
控制器层我是这样写的

    @GetMapping
    public ResponseResult<List<DictData>> getByDictType(String dictType){
        List<DictData> list = dictDataService.getDictDdataList(dictType);
        return ResponseResult.ok(list);
    }

mapper.xml如下 （映射什么的我没有写下来，有数据库就能插件自动生成）

<!--根据类型查出它的字典列表-->
    <select id="selectDictDdataList" resultMap="dictDataMap">
        SELECT *
        FROM sys_dict_data d
        WHERE d.dict_type = #{dictType}
    </select>

我们在前端边可以调取字典List了,（因为内容偏向于记录，所以代码基本都是我稍微优化可以复用的）

    //获取字典数组
    getDict(type) {
      let dict1;
      let type1;
      this.axios.get("dictdatas?dictType=" + type)
          .then(result => {
            console.log(result.data)
            if (type.includes('_')) {
              type1 = type.split('_')[1]
            }
            dict1 = type1 + "lists";
            this[dict1] = result.data.data;
            console.log("数组初始化:")
            console.log(this[dict1])

            this.DictList(this[dict1], type1, type);
          })
    },

如果使用过map来操作类似字典的方法，大概能清楚
我们需要得到一个键值对的字典，用这个字典来操作某些 数字字符串 如果字典里面有这个键，就把值赋给 被操作的数字或字符串 。如果字典里面没有这个键，就返回它本身。
所以我们要处理集合

    DictList(list, type1, type) {
      const result = list.reduce((prev, current) => {
        let dictType = current.dictType.trim();
        if (!prev[dictType]) {
          prev[dictType] = {};
        }
        prev[dictType][current.dictValue] = current.dictLabel;
        return prev;
      }, {});
      console.log("集合为：")
      console.log(result)
      name = type1 + "dicts";
      this[name] = result[type];
      console.log("字典为：")
      console.log(this[name])
      console.log(type)
    },

  data() {
    return {

      commonlists: [],//字典的集合
      commondicts: [],//字典


    }
  },

我对这些并不是太熟练，并没有完完全全的动态生成这些东西。调用方法传的值和我们在data里的命名要息息相关。
 

  mounted() {
    this.getDict("sys_common_status")
  }

"sys_common_status"是我们调取的字典的类型  要加双引号，因为我的方法传参是要操作字符串。common是字典和集合的命名前缀。
完成以上操作我们就加载好了字典
然后就可以使用它了
举例几种使用方法，我并没有在所有地方都用到，所以不能揽括所有的

<p>{{ commondicts[comments.status] }}</p><br>

      <el-table-column
          label="登录状态"
          width="180">
        <template slot-scope="scope">
          <span v-text="commondicts[scope.row.status]"></span>
        </template>
      </el-table-column>

          <el-select v-model="status" placeholder="登录状态">
            <el-option
                v-for="(value, key) in commondicts"
                :key="key"
                :label="value"
                :value="key"
            ></el-option>
          </el-select>