项目中通常使用枚举类型来表示状态值和类型值。主要有两种常见做法:数字型枚举(如 1、2、3 分别代表有效、无效、冻结等状态)和字符串类型枚举(如 "normal"、"closed"、"banned" 等)。相比之下,数字类型枚举虽然性能较高,但在可扩展性、可读性和可维护性方面都较差。因此,尽管会牺牲一些性能,我更推荐使用字符串类型的枚举。
下面,介绍枚举的最佳实践使用方法。
首先,后端定义枚举,以 Java 为例。
@Getter
public enum Status {
NORMAL("normal", "正常"),
DISABLED("disabled", "已禁用"),
DELETED("deleted", "已删除");
@EnumValue
private final String value;
private final String desc;
DatasetStatus(String value, String desc) {
this.value = value;
this.desc = desc;
}
@JsonValue
public String getValue() {
return this.value;
}
}
需要注意的是,在定义业务实体的枚举属性时,我们通过指定 value 属性并使用 @EnumValue 注解,可以轻松地将 value 值映射到数据库字段。这种方式与 MyBatis 框架完全兼容,能够实现自动映射,使用起来十分便捷。
相应地,前端部分的实现方案如下。
第一步,定义枚举映射(只定义枚举值,不包含文本)
export const StatusEnum = {
NORMAL: "normal",
DISABLED: "disabled",
DELETED: "deleted"
} as const;
export type StatusType = typeof StatusEnum[keyof typeof StatusEnum];
第二步,枚举的文本展示,我们使用国际化资源文件定义:
// en.json
{
"status": {
"normal": "Normal",
"disabled": "Disabled",
"deleted": "Deleted"
}
}
// zh.json
{
"status": {
"normal": "正常",
"disabled": "已禁用",
"deleted": "已删除"
}
}
这样我们就可以定义一个枚举类型的国际化展示组件了。
import React from 'react';
import { useTranslation } from 'react-i18next';
import { StatusType } from './StatusEnum';
interface Props {
status: StatusType;
}
const StatusDisplay: React.FC<Props> = ({ plan }) => {
const { t } = useTranslation();
// 通过i18n根据plan值获取对应的国际化文本
return <span>{t(`status.${status}`)}</span>;
};
export default StatusDisplay;
最后,枚举组件使用示例如下。
// 假设从后端接口获取数据
const user = {
status: "normal" // 后端返回的字符串
};
<StatusDisplay status={user.status} />
如果你用的是 Vue 或其他框架,思路类似:后端返回字符串,前端用映射表和 i18n 资源文件做显示转换。
对于不使用国际化的项目,枚举的定义会更简单。下面展示一个不使用国际化时的前端枚举定义示例。
完成第一步枚举映射后,只需要定义一个对应的文本映射:
export const SatusDesc: Record<StatusType, string> = {
free: "免费",
basic: "基础版",
pro: "专业版",
};
使用时:
<span>{StatusDesc[status]}</span>
通过这种设计,枚举类型能在开发阶段实现自动映射转换,大大提升了开发效率。前后端的映射转换机制使枚举值能够灵活地进行国际化展示,同时字符串类型的枚举也为后期维护提供了优秀的可读性和可维护性。
以上就是前后端使用枚举的最佳实践方案。
云行 AI 开源地址
Github:github.com/boyazuo/yun…
Gitee:gitee.com/yxboot/yunx…
欢迎关注。