手机设计企业网站,网站设计大公司,网站素材包括哪些,wordpress教程网页修改目录 1、开发中的需求2、实现效果3、后端代码4、前端代码5、接口数据6、完整代码7、参考文章 1、开发中的需求
开发和使用过程中#xff0c;通常会涉及四个角色#xff1a;数据库管理员、后端开发人员、前端开发人员、浏览者
数据库使用int类型的数值进行存储#xff08;e… 目录 1、开发中的需求2、实现效果3、后端代码4、前端代码5、接口数据6、完整代码7、参考文章 1、开发中的需求
开发和使用过程中通常会涉及四个角色数据库管理员、后端开发人员、前端开发人员、浏览者
数据库使用int类型的数值进行存储eg: 0、1、2Java代码使用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、列表页
顶部筛选类型由接口返回接口增加类型后前端代码不用修改直接生效列表性别 列直接显示后端返回sexLabel的字段列表颜色 列由于前端需要根据不同的值做一些逻辑判断所以前端代码也需要做好枚举做逻辑判断此时需要注意默认值 预防后端增加类型之后前端代码增加容错 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 MapString, ListEnumVO enumConfig() {MapString, ListEnumVO 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 ListEnumVO enumToList(Class? dictEnum) throws NoSuchMethodException, InvocationTargetException, IllegalAccessException {ListEnumVO 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、参考文章
看看人家在接口中使用枚举类型的方式那叫一个优雅Spring IoC资源管理之ResourceLoader通过Spring包扫描的形式将枚举以字典的形式返回MyBatis-Plus通用枚举用反射的方法获取枚举值数据字典
