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 使用 标记数据库存的值是 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. 用反射的方法获取枚举值（数据字典）

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

POSTGRESQL WAL 日志问题合集之WAL 如何解析

POSTGRESQL WAL 日志问题合集之WAL 如何解析

开头还是介绍一下群&#xff0c;如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请加 liuaustin3微信号 &#xff0c;在新加的朋友会分到3群 &#xf…
阅读更多...
最小二乘法处理线性回归

最小二乘法处理线性回归

最小二乘法是一种数学优化技术&#xff0c;用于查找最适合一组数据点的函数。 该方法主要用于线性回归分析&#xff0c;当然&#xff0c;也可用于非线性问题。 开始之前&#xff0c;我们先理解一下什么是回归。 回归&#xff1a;回归是一种监督学习算法&#xff0c;用于建模和…
阅读更多...
MySql时间

MySql时间

一、查询 查询mysql当前时间 SELECT now();查询mysql时区 show variables like%time_zone;二、修改时区 set global time_zone 8:00; &#xff08;修改mysql全局时区为北京时间&#xff0c;也就是我们所在的东8区&#xff0c;需要root权限&#xff09; set time_zone 8:0…
阅读更多...
销量蹭蹭上涨！亚马逊上这几款宿舍神器火爆了！

销量蹭蹭上涨！亚马逊上这几款宿舍神器火爆了！

一、BedShelfie床边置物架 每年返校季&#xff0c;收纳工具都是最畅销的产品。在亚马逊床头柜热销榜单中&#xff0c;这款产品位居第二。过去一个月里&#xff0c;有1000多名用户购买了这件产品。 二、U Brands磁性干擦日历板 目前&#xff0c;亚马逊上这款产品已经卖到断货。…
阅读更多...
自建音乐服务器Navidrome之一

自建音乐服务器Navidrome之一

这里写自定义目录标题 1.1 官方网站 2. Navidrome 简介2.1 简介2.2 特性 3. 准备工作4. 视频教程5. 界面演示5.1 初始化页5.2 专辑页 前言 之前给大家介绍过 Koel 音频流服务&#xff0c;就是为了解决大家的这个问题&#xff1a;下载下来的音乐&#xff0c;只能在本机欣赏&…
阅读更多...
The remote endpoint was in state [TEXT_FULL_WRITING]

The remote endpoint was in state [TEXT_FULL_WRITING]

报这个错是因为在websocket接收与发送消息时&#xff0c;资源互抢造成的&#xff0c;有很多帖子说将session锁住&#xff0c; 但是同一个账号多个客户端登陆的时候&#xff0c;session是不同的&#xff0c;所以只能锁住一个session&#xff0c;还是出现这个问题。 解决办法&a…
阅读更多...
Go 官方标准编译器中所做的优化

Go 官方标准编译器中所做的优化

本文是对#102 Go 官方标准编译器中实现的优化集锦汇总[1] 内容的记录与总结. 优化1-4: 字符串和字节切片之间的转化 1.紧跟range关键字的 从字符串到字节切片的转换&#xff1b; package mainimport ( "fmt" "strings" "testing")var cs10086 s…
阅读更多...
正则表达式练习

正则表达式练习

(function() {//#region 定义正则表达式// const reg /前端/g;// ------------test-------------// const res reg.test("学java,找黑马");// console.log(res)// ------------exec--------------// const res reg.exec("学好前端&#xff0c;找黑马"…
阅读更多...
【调试经验】Ubuntu22.04 安装和配置MySQL 8.0.34

【调试经验】Ubuntu22.04 安装和配置MySQL 8.0.34

本文共计1469字&#xff0c;预计阅读时间5分钟 在安装新版本的MySQL到电脑时&#xff0c;按着网上一些教程执行发现错误繁多&#xff0c;最后索性自己摸索并把服务装好了。自己也整理了一下在操作时的笔记&#xff0c;上传上来希望能帮助到大家。 目录 正文 安装MySQL 配置…
阅读更多...
串口接收数据-控制LED灯

串口接收数据-控制LED灯

目标 通过串口接收数据&#xff0c;对数据分析&#xff0c;控制8个LED灯按照设定时间闪烁。 8个LED灯可以任意设计&#xff0c;是否闪烁。闪烁时间按ms计算&#xff0c;通过串口发送&#xff0c;可设置1~4,294,967,296ms&#xff0c;也就是4字节数据协议自拟&#xff0c;有数…
阅读更多...
Oracle21C--Windows卸载与安装

Oracle21C--Windows卸载与安装

卸载方法&#xff1a; &#xff08;1&#xff09;WinR&#xff0c;输入services.msc,打开服务&#xff0c;把Oracle相关的服务全部停止运行&#xff08;重要&#xff09; &#xff08;2&#xff09;WinR&#xff0c;输入regedit&#xff0c;打开注册表&#xff0c;删除Oracle开…
阅读更多...
MATLAB中circshift函数转化为C语言

MATLAB中circshift函数转化为C语言

背景 有项目算法使用matlab中circshift函数进行运算&#xff0c;这里需要将转化为C语言&#xff0c;从而模拟算法运行&#xff0c;将算法移植到qt。 MATLAB中circshift简单介绍 circshift是循环移位函数。可以使用于数组和矩阵元素的循环移位。 当A是数组 Bcircshift(A,p);如果…
阅读更多...
虚拟世界指南：从零开始，一步步教你安装、配置和使用VMware，镜像ISO文件！

虚拟世界指南：从零开始，一步步教你安装、配置和使用VMware，镜像ISO文件！

本章目录 CentOS简介镜像下载一、新建虚拟机&#xff08;自定义&#xff09;1、进入主页&#xff0c;在主页中点击“创建新的虚拟机”2、点击创建虚拟机创建自己的虚拟机。可以选择自定义3、在“硬件兼容性(H)中选择&#xff1a;Workststion 15.x” ->下一步4、选择“稍后安…
阅读更多...
浅析Linux虚拟网络技术

浅析Linux虚拟网络技术

文章目录 概述Tap/tun设备tun/tap的工作机制 Bridge网桥Bridge的工作机制Bridge IP 相关参考 概述 在传统的网络环境中&#xff0c;一台物理主机包含一张或多张网卡&#xff0c;要实现与其它物理主机之间的通信&#xff0c;需要将自身的网卡通过路由器或者交换机连接到外部的物…
阅读更多...
Flutter 状态管理引子

Flutter 状态管理引子

1、为了更好地了解状态管理&#xff0c;先看看什么是状态。 在类似Flutter这样的响应式编程框架中&#xff0c;我们可以认为U相关的开发就是对数据进行封装&#xff0c;将之转换为具体的U1布局或者组件。借用Flutter官网的一张图&#xff0c;可以把我们在第二部分做的所有开发…
阅读更多...
CSS流光按钮-圆形

CSS流光按钮-圆形

主要思路 仅保留一条边框 border-radius 50%drop-shadow动画 animation keyframes 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, …
阅读更多...
【MySQL】用户管理

【MySQL】用户管理

之前我们一直都使用root身份来对mysql进行操作&#xff0c;但这样存在安全隐患。这时&#xff0c;就需要使用MySQL的用户管理 目录 一、用户 1.1 用户信息 1.2 添加用户 1.3 删除用户 1.4 修改用户密码 二、用户权限 2.1 赋予授权 2.2 回收权限 一、用户 1.1 用户信息…
阅读更多...
2023数学建模国赛四天速成计划来啦！（内含大量资料）

2023数学建模国赛四天速成计划来啦！（内含大量资料）

大家好呀。高教社杯全国大学生数学建模竞赛&#xff08;下称国赛&#xff09;9.7日下午6点就正式开始了&#xff1a; 在这里给大家带来一个五天的速成计划啦&#xff01;大家可以收藏本文章或者转发到你们队友群哈&#xff0c;此外我还会发放很多资料给大家&#xff0c;注意&am…
阅读更多...
12. 自动化项目实战

12. 自动化项目实战

目录 1. 登录测试 2. 测试首页的帖子列表数不为0 3. 帖子详情页校验 4. 发布帖子 5. 退出登录 自动化项目实施的基本流程如下图所示&#xff1a; 手工测试用例、自动化测试用例。 1. 登录测试 校验登录后主页显示的用户名称和登录时输入的用户名是否相等。 public class…
阅读更多...
机器学习——手写数字识别

机器学习——手写数字识别

0、&#xff1a;前言 这篇文章能够帮助你从数据到模型的整个过程实现不过至于安装第三方库等基础问题&#xff0c;本文不涉及&#xff0c;因为确实不难&#xff0c;搜一搜一大把本此实验运行环境为jupyter&#xff0c;当然通过pycharm也是可行的 1、数据&#xff1a; 手写数字…
阅读更多...
最新文章

Copyright @ 2022~2023