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

news2025/1/18 11:45:56

目录

    • 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 使用 标记数据库存的值是 code
    private final Integer code;

    /**
     * 显示值
     */
    private final String label;

    SexEnum(Integer code, String label) {
        this.code = code;
        this.label = label;
    }

    @Override
    public Integer getCode() {
        return this.code;
    }

    @Override
    public 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）生成MetadataReader
                    MetadataReader reader = readerFactory.getMetadataReader(resource);
                    // 获取class名
                    String className = reader.getClassMetadata().getClassName();
                    Class<?> clz = Class.forName(className);

                    if (!clz.isEnum()) {
                        continue;
                    }

                    // 将枚举类名首字母转小写，去掉末尾的Enum
                    enumMap.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.coloradmin.cn/o/967369.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

PMD代码检查：属性应该在类的最顶部声明（FieldDeclarationsShouldBeAtStartOfClass）

PMD代码检查：属性应该在类的最顶部声明（FieldDeclarationsShouldBeAtStartOfClass）

https://docs.pmd-code.org/pmd-doc-6.55.0/pmd_rules_java_codestyle.html#fielddeclarationsshouldbeatstartofclass 属性的声明应该在类的最顶部&#xff0c;即在方法声明、构造器、初始化、内部类的前面。默认允许枚举声明、匿名类的声明放在属性的前面。 将下面语句放在…
阅读更多...
Linux服务——nginx重写功能与反向代理

Linux服务——nginx重写功能与反向代理

目录 一、nginx重写功能 if指令 return指令 set指令 break指令 rewrite指令 防盗链 二、反向代理 反向代理参数 反向代理——缓存功能 反向代理——ip穿透 反向代理——动静分离 反向代理——负载均衡 一、nginx重写功能 Nginx服务器利用 ngx_http_rewrite_module…
阅读更多...
选择 Guava EventBus 还是 Spring Framework ApplicationEvent

选择 Guava EventBus 还是 Spring Framework ApplicationEvent

文章首发地址 Spring Framework ApplicationEvent Spring Framework 的 ApplicationEvent 是 Spring 框架提供的一种事件机制&#xff0c;用于实现发布和订阅事件的功能。它基于观察者模式&#xff0c;允许应用程序内的组件之间进行松耦合的通信。 下面是关于 Spring Frame…
阅读更多...
Linux开源防病毒引擎ClamAV

Linux开源防病毒引擎ClamAV

ClamAV官方地址&#xff1a;https://www.clamav.net 它支持Linux、BSD、windows、Mac OS X等系统。 在CentOS 8&#xff08;Tencent OS 3.1&#xff09;安装非常便利&#xff0c;可以使用yum。 yum install clamav 安装成功&#xff0c;就可以使用它进行病毒扫描检查了。 c…
阅读更多...
设计模式系列-创建者模式

设计模式系列-创建者模式

一、上篇回顾 上篇我们主要讲述了抽象工厂模式和工厂模式。并且分析了该模式的应用场景和一些优缺点&#xff0c;并且给出了一些实现的思路和方案,我们现在来回顾一下&#xff1a; 抽象工厂模式&#xff1a;一个工厂负责所有类型对象的创建&#xff0c;支持无缝的新增新的类型对…
阅读更多...
2.5 关系查询优化

2.5 关系查询优化

这段话主要讨论了关系模型在数据库领域中的查询优化问题。以下是对这段文字的简要解释&#xff1a; 1. **关系模型的优缺点**&#xff1a;虽然关系模型有许多优点&#xff0c;但它也有一些缺点&#xff0c;最主要的缺点是查询效率。如果没有适当的优化&#xff0c;查询的速度可…
阅读更多...
git在linux情况下设置git 命令高亮

git在linux情况下设置git 命令高亮

只需要执行下面这个命令&#xff0c;这样就可以在查看git status明亮的时候高亮显示。 git config --global color.status auto未设置前 谁知之后
阅读更多...
【leetcode 力扣刷题】字符串匹配之经典的KMP！！！

【leetcode 力扣刷题】字符串匹配之经典的KMP！！！

字符串子串匹配相关 28. 找出字符串中第一个匹配项的下标暴力求解KMP 459. 重复的子字符串暴力求解在SS中找S 以下是能用KMP求解的算法题&#xff0c;KMP是用于字符串匹配的经典算法【至今没学懂………啊啊啊】 28. 找出字符串中第一个匹配项的下标 题目链接&#xff1a;28. 找…
阅读更多...
Vue学习（三）

Vue学习（三）

一、列表渲染 v-for指令 用于展示列表数据 语法<li v-for"(item, index) in items" :key"index"></li>key可以是index,最好是遍历对象的唯一标识 可遍历&#xff1a;数组、对象 <!DOCTYPE html> <html lang"en">&l…
阅读更多...
探究Vue3中的Composition API:优化组件逻辑的新利器

探究Vue3中的Composition API:优化组件逻辑的新利器

一、toRef函数 在 Vue 3.0 中&#xff0c;引入了一种新的响应式 API,即 toRef。toRef 函数可以将一个普通值转换为响应式引用类型&#xff0c;这样就可以在模板中直接使用这个响应式引用类型的属性&#xff0c;并且当该属性发生变化时&#xff0c;视图会自动更新。 <templat…
阅读更多...
【C++代码】用栈实现队列，用队列实现栈--代码随想录

【C++代码】用栈实现队列，用队列实现栈--代码随想录

队列是先进先出&#xff0c;栈是先进后出。卡哥给了关于C方向关于栈和队列的4个问题&#xff1a; C中stack 是容器么&#xff1f; 使用的stack是属于哪个版本的STL&#xff1f; 使用的STL中stack是如何实现的&#xff1f; stack 提供迭代器来遍历stack空间么&#xff1f; …
阅读更多...
测试开发【Mock平台】09开发：项目管理（五）搜索、删除和Table优化

测试开发【Mock平台】09开发：项目管理（五）搜索、删除和Table优化

【Mock平台】为系列测试开发教程&#xff0c;从0到1编码带你一步步使用Spring Boot 和 Antd React框架完成搭建一个测试工具平台&#xff0c;希望作为一个实战项目对各位的测试开发学习之路有帮助&#xff0c;大奇一个专注测试技术干货原创与分享的家伙。 Mock平台系统项目基本…
阅读更多...
【大数据实训】基于Hive的北京市天气系统分析报告(二)

【大数据实训】基于Hive的北京市天气系统分析报告(二)

博主介绍&#xff1a;✌全网粉丝6W,csdn特邀作者、博客专家、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于大数据技术领域和毕业项目实战✌ &#x1f345;文末获取项目联系&#x1f345; 目录 1. 引言 1.1 项目背景 1 1.2 项目意义 1 2.…
阅读更多...
蓝队追踪者工具TrackAttacker，以及免杀马生成工具

蓝队追踪者工具TrackAttacker，以及免杀马生成工具

蓝队追踪者工具TrackAttacker&#xff0c;以及免杀马生成工具。 做过防守的都知道大HW时的攻击IP量&#xff0c;那么对于这些攻击IP若一个个去溯源则显得效率低下&#xff0c;如果有个工具可以对这些IP做批量初筛是不是更好&#xff1f; 0x2 TrackAttacker获取 https://githu…
阅读更多...
[管理与领导-67]：IT基层管理者 - 辅助技能 - 4- 职业发展规划 - 评估你与公司的八字是否相合

[管理与领导-67]：IT基层管理者 - 辅助技能 - 4- 职业发展规划 - 评估你与公司的八字是否相合

目录 前言&#xff1a; 一、概述 二、八字相合的步骤 2.1 企业文化是否相合 2.2.1 企业文化对职业选择的意义 2.2.2 个人与企业三观不合的结果 2.2.3 什么样的企业文化的公司不能加入 2.2 公司的发展前景 2.3 公司所处行业发展 2.4 创始人的三观 2.5 创始人与上司的…
阅读更多...
HDMI 输出实验

HDMI 输出实验

FPGA教程学习 第十四章 HDMI 输出实验 文章目录 FPGA教程学习前言实验原理实验过程程序设计时钟模块&#xff08;video_pll&#xff09;彩条产生模块&#xff08;color_bar)配置数据查找表模块&#xff08;lut_adv7511&#xff09;I2C Master 寄存器配置模块&#xff08;i2c_c…
阅读更多...
692. 前K个高频单词

692. 前K个高频单词

题目来源&#xff1a;力扣 题目描述&#xff1a; 给定一个单词列表 words 和一个整数 k &#xff0c;返回前 k 个出现次数最多的单词。 返回的答案应该按单词出现频率由高到低排序。如果不同的单词有相同出现频率&#xff0c; 按字典顺序 排序。 示例 1&#xff1a; 输入:…
阅读更多...
css transition 指南

css transition 指南

css transition 指南 在本文中&#xff0c;我们将深入了解 CSS transition&#xff0c;以及如何使用它们来创建丰富、精美的动画。 基本原理 我们创建动画时通常需要一些动画相关的 CSS。 下面是一个按钮在悬停时移动但没有动画的示例&#xff1a; <button class"…
阅读更多...
【斗罗Ⅱ】最强武魂揭秘，98级玄老、95级言少哲神兽级武魂曝光

【斗罗Ⅱ】最强武魂揭秘，98级玄老、95级言少哲神兽级武魂曝光

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析【绝世唐门】 在斗罗大陆动画绝世唐门中&#xff0c;98级玄老已经登场&#xff0c;他是一个很随意的老人&#xff0c;乍眼一看&#xff0c;似乎是一个邋里邋遢、好吃懒做的人&#xff0c;但是实际上他却是史莱克学院重量级…
阅读更多...
精心整理了优秀的GitHub开源项目，包含前端、后端、AI人工智能、游戏、黑客工具、网络工具、AI医疗等等，空闲的时候方便看看提高自己的视野

精心整理了优秀的GitHub开源项目，包含前端、后端、AI人工智能、游戏、黑客工具、网络工具、AI医疗等等，空闲的时候方便看看提高自己的视野

精心整理了优秀的GitHub开源项目&#xff0c;包含前端、后端、AI人工智能、游戏、黑客工具、网络工具、AI医疗等等&#xff0c;空闲的时候方便看看提高自己的视野。 刚开源就变成新星的 igl&#xff0c;不仅获得了 2k star&#xff0c;也能提高你开发游戏的效率&#xff0c;摆…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023