Java：Springboot和React中枚举值（数据字典）的使用

目录

    • 1、开发中的需求
    • 2、实现效果
    • 3、后端代码
    • 4、前端代码
    • 5、接口数据
    • 6、完整代码
    • 7、参考文章

1、开发中的需求

开发和使用过程中，通常会涉及四个角色：数据库管理员、后端开发人员、前端开发人员、浏览者

  • 数据库使用int类型的数值进行存储（eg: 0、1、2）
  • Java代码使用enum枚举类型的对象进行逻辑判断（eg: SexEnum.UNKOWN SexEnum.MAN、SexEnum.WOMAN）
  • 接口返回枚举值的字符串形式用于必要的逻辑判断（eg: UNKOWN、MAN、WOMAN）
  • 显示给用户查看（eg: 未知、男性、女性）
使用方数值类型用途示例
数据库int数值存储0、1、2
后端代码Enum枚举类逻辑判断SexEnum.UNKOWN SexEnum.MAN、SexEnum.WOMAN
前端代码string常量字符串逻辑判断UNKOWN、MAN、WOMAN
用户视图string字符串查看未知、男性、女性

假设：

1、如果后端返回数字，数字本身没有很直观的意思，不便于前端人员检查问题，如果书写错误，同样会导致不容易发现的问题。

2、如果后端返回用户友好的字符串，前端如果需要做逻辑判断就很不好，毕竟不知道产品经理什么时候会把显示的内容修改掉，比如：男性 改为 男

3、如果后端返回枚举类型的常量字符串，那每次需要显示的时候，都必须做一个映射转换，前端人员也很苦恼

综上：

后端同时返回 枚举字符串 和 用户友好的字符串 比较好，既方便前端人员做逻辑判断，也方便给用户展示；

一般情况下，枚举类型统一在后端维护，如果需要修改，也只需要修改一个地方就可以

如果，前端也需要使用枚举值进行逻辑判断，那么前端也需要和后端约定好的映射关系自己定义好枚举，可以直接使用常量字符串作为枚举，前端显示的值可以和后端约定好，什么数值，显示什么字符串

同时，需要给前端返回一个枚举映射关系表，用于下拉选择等业务

2、实现效果

1、列表页

  1. 顶部筛选类型由接口返回，接口增加类型后，前端代码不用修改，直接生效
  2. 列表性别 列，直接显示后端返回sexLabel的字段
  3. 列表颜色 列，由于前端需要根据不同的值，做一些逻辑判断，所以前端代码也需要做好枚举，做逻辑判断，此时需要注意默认值 ，预防后端增加类型之后，前端代码增加容错

在这里插入图片描述
2、添加页

性别和颜色 都使用后端返回的配置数据即可，后端增加类型数据之后，前端无需修改代码
在这里插入图片描述

3、后端代码

配合MyBatis-Plus使用，可以很容易进行数据库和代码之间的转换

定义3个值，由后端代码统一维护

code  # 用于数据库存储
value # 用于后端和前端的逻辑判断
label # 用户展示给用户

如果有其他属性，也可以增加

先定义一个通用的枚举接口

package com.example.demo.enums;/*** 字典枚举接口*/
public interface IDictEnum {Integer getCode();String getLabel();String name();// @JsonValue // 标记响应json值default String getValue() {return this.name();}
}

定义枚举类

package com.example.demo.enums;import com.baomidou.mybatisplus.annotation.EnumValue;/*** 性别枚举*/
public enum SexEnum implements IDictEnum {/*** 男性*/MAN(1, "男性"),/*** 女性*/WOMEN(2, "女性");/*** 存储值*/@EnumValue // 配置 mybatis-plus 使用 标记数据库存的值是 codeprivate final Integer code;/*** 显示值*/private final String label;SexEnum(Integer code, String label) {this.code = code;this.label = label;}@Overridepublic Integer getCode() {return this.code;}@Overridepublic String getLabel() {return this.label;}
}

自动扫描枚举类

package com.example.demo.config;import com.example.demo.vo.EnumVO;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.BeanUtils;
import org.springframework.context.annotation.Bean;
import org.springframework.core.io.Resource;
import org.springframework.core.io.support.PathMatchingResourcePatternResolver;
import org.springframework.core.io.support.ResourcePatternResolver;
import org.springframework.core.type.classreading.CachingMetadataReaderFactory;
import org.springframework.core.type.classreading.MetadataReader;
import org.springframework.core.type.classreading.MetadataReaderFactory;
import org.springframework.stereotype.Component;
import org.springframework.util.ClassUtils;import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;/*** 枚举配置类*/
@Slf4j
@Component
public class DictEnumConfig {// 通同匹配private static final String RESOURCE_PATTERN = "/**/*Enum.class";// 扫描的包名private static final String BASE_PACKAGES = "com.example.demo.enums";private ResourcePatternResolver resourcePatternResolver = new PathMatchingResourcePatternResolver();@Bean(name = "enumConfig")public Map<String, List<EnumVO>> enumConfig() {Map<String, List<EnumVO>> enumMap = new HashMap<>();try {// 根据classname生成class对应的资源路径,需要扫描的包路径//ResourcePatternResolver.CLASSPATH_ALL_URL_PREFIX +String pattern = ClassUtils.convertClassNameToResourcePath(BASE_PACKAGES) + RESOURCE_PATTERN;// 获取classname的IO流资源Resource[] resources = resourcePatternResolver.getResources(pattern);// MetadataReaderFactory接口 ，MetadataReader的工厂接口。允许缓存每个MetadataReader的元数据集MetadataReaderFactory readerFactory = new CachingMetadataReaderFactory(this.resourcePatternResolver);for (Resource resource : resources) {if (resource.isReadable()) {// 通过class资源（resource）生成MetadataReaderMetadataReader reader = readerFactory.getMetadataReader(resource);// 获取class名String className = reader.getClassMetadata().getClassName();Class<?> clz = Class.forName(className);if (!clz.isEnum()) {continue;}// 将枚举类名首字母转小写，去掉末尾的EnumenumMap.put(clz.getSimpleName(), this.enumToList(clz));}}} catch (IOException e) {e.printStackTrace();} catch (ClassNotFoundException e) {e.printStackTrace();} catch (NoSuchMethodException e) {e.printStackTrace();} catch (IllegalAccessException e) {e.printStackTrace();} catch (InvocationTargetException e) {e.printStackTrace();}return enumMap;}public List<EnumVO> enumToList(Class<?> dictEnum) throws NoSuchMethodException, InvocationTargetException, IllegalAccessException {List<EnumVO> list = new ArrayList<>();Method valuesMethod = dictEnum.getMethod("values");Object[] values = (Object[]) valuesMethod.invoke(null);for (Object obj : values) {EnumVO enumVO = new EnumVO();BeanUtils.copyProperties(obj, enumVO);list.add(enumVO);}return list;}
}

4、前端代码

前端定义一个全局的变量，来存储数据字典，可以在应用初始化前就请求接口获取数据，确保后续组件中正常使用

import http from "../api/index.js";/*** 全局静态数据*/
export const globalData = {SexEnum: [],ColorEnum: [],
};// 初始化
export async function initGlobalData() {const res = await http.get("/getEnumConfig");for (const key in globalData) {globalData[key] = res[key];}
}// === getter ===
export function getSexEnumFilterOptions() {console.log(globalData);return [{ value: "", label: "全部" }, ...globalData.SexEnum];
}export function getSexEnumOptions() {return globalData.SexEnum;
}export function getColorEnumOptions() {return globalData.ColorEnum;
}

前端需要进行逻辑判断，可自行枚举

/*** 颜色枚举，前端代码需要逻辑判断*/
export const ColorEnum = {// 红色RED: 'RED',// 绿色GREEN: 'GREEN',// 蓝色BLUE: 'BLUE',
};export const ColorEnumOptions = [{// 红色value: ColorEnum.RED,color: 'error',},{// 绿色value: ColorEnum.GREEN,color: 'success',},{// 蓝色value: ColorEnum.BLUE,color: 'processing',},
];export function getColorEnumColor(value) {return (ColorEnumOptions.find((item) => item.value === value)?.color || 'default');
}

5、接口数据

直接返回value和label字段，便于直接对接element和antd UI组件库，不需要再进行数据转换

获取枚举配置

GET http://localhost:8080/getEnumConfig{"ColorEnum": [{"value": "RED","label": "红色"},{"value": "GREEN","label": "绿色"},{"value": "BLUE","label": "蓝色"}],"SexEnum": [{"value": "MAN","label": "男性"},{"value": "WOMEN","label": "女性"}]
}

前端提交数据

POST http://localhost:8080/addUser
Content-Type: application/json{"name": "Steve","sex": "WOMEN"
}

前端获取数据

GET http://localhost:8080/getUserList[{"id": 21,"name": "Steve","sex": "WOMEN","color": null,"sexLabel": "女性","colorLabel": ""}
]

sexLabel 为方便前端显示数据而增加的字段

6、完整代码

后端代码：https://github.com/mouday/spring-boot-demo/SpringBoot-Enum
前端代码：https://gitee.com/mouday/react-enum

7、参考文章

  1. 看看人家在接口中使用枚举类型的方式，那叫一个优雅！
  2. Spring IoC资源管理之ResourceLoader
  3. 通过Spring包扫描的形式将枚举以字典的形式返回
  4. MyBatis-Plus：通用枚举
  5. 用反射的方法获取枚举值（数据字典）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/106034.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

蓝桥杯打卡Day6

蓝桥杯打卡Day6

文章目录 N的阶乘基本算术整数查询 一、N的阶乘OI链接 本题思路&#xff1a;本题是关于高精度的模板题。 #pragma GCC optimize(3) #include <bits/stdc.h>constexpr int N1010;std::vector<int> a; std::vector<int> f[N];std::vector<int> mul(in…
阅读更多...
JavaWeb_LeadNews_Day11-KafkaStream实现实时计算文章分数

JavaWeb_LeadNews_Day11-KafkaStream实现实时计算文章分数

JavaWeb_LeadNews_Day11-KafkaStream实现实时计算文章分数 KafkaStream概述案例-统计单词个数SpringBoot集成 实时计算文章分值来源Gitee KafkaStream 概述 Kafka Stream: 提供了对存储与Kafka内的数据进行流式处理和分析的功能特点: Kafka Stream提供了一个非常简单而轻量的…
阅读更多...
AggregateFunction结合自定义触发器实现点击率计算

AggregateFunction结合自定义触发器实现点击率计算

背景&#xff1a; 接上一篇文章&#xff0c;ProcessWindowFunction 结合自定义触发器会有状态过大的问题&#xff0c;本文就使用AggregateFunction结合自定义触发器来实现&#xff0c;这样就不会导致状态过大的问题了 AggregateFunction结合自定义触发器实现 flink对于每个窗…
阅读更多...
如何实现MongoDB数据的快速迁移？

如何实现MongoDB数据的快速迁移？

作为一种Schema Free文档数据库&#xff0c;MongoDB因其灵活的数据模型&#xff0c;支撑业务快速迭代研发&#xff0c;广受开发者欢迎并被广泛使用。在企业使用MongoDB承载应用的过程中&#xff0c;会因为业务上云/跨云/下云/跨机房迁移/跨地域迁移、或数据库版本升级、数据库整…
阅读更多...
【DockerCE】Docker-CE 24.0.6正式版发布

【DockerCE】Docker-CE 24.0.6正式版发布

官网下载地址&#xff08;For RHEL/CentOS 7.9&#xff09;&#xff1a; https://download.docker.com/linux/centos/7/x86_64/stable/Packages/ 相对于24.0.5版本&#xff0c;本次24.0.6版本更新的rpm包有 5 个&#xff0c;使用目录对比软件对比的结果如下&#xff1a; 在Lin…
阅读更多...
（Note）中文EI检索期刊目录

（Note）中文EI检索期刊目录

ei和sci、ssci一样是国际知名的期刊数据库&#xff0c;ei不仅收录国际知名的刊物&#xff0c;也收录了一些国内期刊&#xff0c;为方便投稿选刊&#xff0c;Elsevier官网更新了的EI Compendex期刊目录&#xff0c;那么 国内ei期刊有哪些? 经查询共有250余种期刊&#xff0c;新…
阅读更多...
什么是Docker和Docker-Compose?

什么是Docker和Docker-Compose?

Docker的构成 Docker仓库&#xff1a;https://hub.docker.com Docker自身组件 Docker Client&#xff1a;Docker的客户端 Docker Server&#xff1a;Docker daemon的主要组成部分&#xff0c;接受用户通过Docker Client发出的请求&#xff0c;并按照相应的路由规则实现路由分发…
阅读更多...
Qt包含文件不存在问题解决 QNetworkAccessManager

Qt包含文件不存在问题解决 QNetworkAccessManager

这里用到了Qt的网络模块&#xff0c;在.pro中添加了 QT network 但是添加 #include <QNetworkAccessManager> 会报错说找不到&#xff0c;可以通过在项目上右键执行qmake后&#xff0c;直接#include <QNetworkAccessManager>就不会报错了&#xff1a;
阅读更多...
20230911 Shell指令数组以及函数值传递，值返回

20230911 Shell指令数组以及函数值传递，值返回

实现一个对数组求和的函数&#xff0c;数组通过实参传递给函数 #!/bin/bashfunction fun() {sum0for ((i0;i<$var;i))do(( sumarr[i] ))doneecho $sum } read -p "输入该数组个数: " var for((j0;j<$var;j)) doread -p "输入数组第$j个值: " arr[j] …
阅读更多...
【ARM CoreLink 系列 2 -- CCI-400 控制器简介】

【ARM CoreLink 系列 2 -- CCI-400 控制器简介】

文章目录 CCI-400 介绍DVM 机制介绍DVM 消息传输过程TOKEN 机制介绍 下篇文章&#xff1a;ARM CoreLink 系列 3 – CCI-550 控制器介绍 CCI-400 介绍 CCI&#xff08;Cache Coherent Interconnect&#xff09;是ARM 中 的Cache一致性控制器。 CCI-400 将 Interconnect 和coh…
阅读更多...
Ubuntu下Python3与Python2相互切换

Ubuntu下Python3与Python2相互切换

参考文章&#xff1a;https://blog.csdn.net/Nicolas_shen/article/details/124144931 设置优先级 sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 100 sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 200
阅读更多...
npm版本升级报错

npm版本升级报错

解决方法&#xff1a; 执行npm install --legacy-peer-deps依赖对等 npm install xxx --legacy-peer-deps命令用于绕过peerDependency里依赖的自动安装&#xff1b;它告诉npm忽略项目中引入的各个依赖模块之间依赖相同但版本不同的问题&#xff0c;以npm v4-v6的方式去继续执行…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023