在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