前后端字典类枚举使用方案

在web开发中，常常涉及到一些字典类的信息编号存储和展示。由于规则比较单一，常常会抽象和封装为一个公共的方法和组件。为了保证前后端的定义统一，且考虑到易于维护和扩展。一般都采用后端定义和维护枚举常量，暴露接口给前端，前端可以进行一定封装。后端也会采用一些方式保证容易使用和增改字典类数据。

字段类枚举的使用

字典类枚举

字典类的枚举，通常是编码和名称，比如性别：

0 -> 女
1 -> 男

或者：

F -> 女
M -> 男

在前端展示的时候会转为名称，而存储到数据库通常存储为编码；

前端使用

前端会在展示和操作中使用常量数组和对象来维护。

// dict list json
{
   
  "level":[
    {
   "code": "high", "name": "高"},
    {
   "code": "middle", "name": "中"},
    {
   "code": "low", "name": "低"}
  ],
  "sex": [
    {
   "code": "0", "name": "女"},
    {
   "code": "1", "name": "男"}
  ]
  //...
}

在展示时，会从code转化为name，在一些编辑操作时，需要转化为下拉列表select来进行选择。

<select name="level">
	<option value="high">高</option>
  <option value="middle">中</option>
  <option value="low">低</option>
</select>

在使用vue2.x的时候，通定义全局变量和初始接口来加载系统的所有字典类枚举。

后端使用

后端开发目前一般习惯使用枚举类enum来维护和使用

@AllArgsConstructor
@Getter
public enum LevelEnum {
   

    HIGH("high", "高"),
    MIDDLE("middle", "中"),
    LOW("low", "低");

    private String code;
    private String name;
}

前端使用后端提供的接口来统一使用

通常前后端会约定接口返回这些字典类枚举：

返回指定类型的枚举
GET /getDict?type=level

返回所有枚举
GET /getAllDict

格式同前述的dict list json

这样可以保证前后端对枚举是统一的，便于维护和管理。

后端接口通常是这么定义的：

@RestController
public class DictController {
   

    @GetMapping("/getAllDict")
    public Map<String, List<CodeNameDTO>> getAllDict() {
   
        return DictUtils.getAllDict();
    }

    @GetMapping("/getDict")
    public List<CodeNameDTO> getAllDict(@RequestParam String type) {
   
        return DictUtils.getAllDict().get(type);
    }
}

实体类CodeNameDTO的定义：

@Getter
@Setter
public clas