MarsMgn

外观

字典管理 ​

使用说明 ​

主界面 ​

  • 字典名称：字典类型的中文名称

image-20250621074915055

  • 字典类型：字典类型的英文名称，与前端src\utils\dict.ts中的定义相对应

image-20250621074959383

  • 数据：点击字典类型后面的“数据”，跳转到相应的字典数据
    • 字典标签：前端显示的内容
    • 字典键值：后端数据库存储的值

image-20250621075405066

新增 ​

新增字典步骤：

  • 新增字典类型：点击新增，填写字典名称和字典类型，状态选择开启。

image-20250621080412219

  • 新增字典数据：点击上面新增的字典类型的数据按钮，进入字典数据管理界面，逐个新增字典数据

image-20250621080927165

  • 打开前端文件src\utils\dict.ts，在DICT_TYPE中添加字典类型

image-20250621074959383

后端实现 ​

目录 ​

代码目录：

  • mysite\myapp_system\dict_type 对应字典类型的增删改查
  • mysite\myapp_system\dict_data 对应字典数据的增删改查

实现步骤 ​

后端实现字典数据步骤：

  • 设计字典类型和字典数据，定义为一个Python的枚举类型，放到后端文件mysite\mars_framework\db\enums.py中。例如
python
class SexEnum(Enum):
    """性别的枚举值"""

    MALE = 1  # 男
    FEMALE = 2  # 女
    UNKNOWN = 0  # 未知
  • 定义模型字段时，使用SmallIntegerField字段类型，并添加choices参数。例如
python
    sex = models.SmallIntegerField(
        blank=True,
        null=True,
        default=0,
        choices=[(item.value, item.name) for item in SexEnum],
        db_comment="用户性别",
        help_text="用户性别",
    )
  • 在视图等地方，也可以引用这些定义好的Python的枚举类型。例如

image-20250621094010053

前端实现 ​

目录 ​

代码目录：src\views\system\dict

sh
dict
|-- DictTypeForm.vue # 字典类型新增/编辑界面
|-- data
|   |`-- DictDataForm.vue # 字典数据新增/编辑界面
|    `-- index.vue # 字典数据主界面
`-- index.vue # 字典类型主界面

实现步骤 ​

前端实现字典数据步骤：

  • 打开前端src\utils\dict.ts文件，向DICT_TYPE添加一个记录。例如

image-20250621101122360

  • 在前端组件中，引用字典类型并进行转换。例如src\views\system\loginlog\index.vue

image-20250621101333954

前端缓存策略 ​

用户登录成功后，前端会从后端获取到全量的字典数据，默认缓存在sessionStorage中。

image-20250621094658528

TIP

当字典类型或字典数据发生变更后，用户需求刷新浏览器才能看到效果。