基于React与Django的重复CRUD操作设计方案咨询

1. 现成React类库选择 #

直接使用支持Schema驱动的CRUD组件库即可适配你的需求，这类库都可以对接DRF的标准REST接口：

• 常用中后台组件库的动态组合方案：主流React中后台组件库都支持通过配置生成列表、筛选、表单组件，无需为每个数据模型单独开发完整页面，仅需要针对不同模型调整字段顺序、校验规则、自定义个别字段的渲染逻辑即可。
• 专用动态CRUD库：专门用于生成后台管理页面的CRUD库，支持直接传入模型字段定义，自动生成包含列表查询、分页、新增、编辑、删除的完整功能页面，原生支持自定义表单布局、操作权限、字段渲染逻辑，完全匹配你的使用场景。

2. 自定义动态CRUD组件实现方案 #

如果不想引入额外重度依赖，自行封装的成本也很低，整体思路如下：

• 第一步统一后端接口规范：所有DRF Viewset保持标准RESTful接口格式，额外新增schema查询接口，返回当前模型的字段属性：包括字段名、数据类型、是否必填、校验规则、枚举值/外键关联选项等信息。你可以直接用DRF生态的Schema生成工具自动生成这部分内容，不需要手动编码。
• 第二步封装三层通用组件：
  • 通用列表组件：传入接口地址、字段配置即可自动渲染表格、分页、筛选栏、操作按钮，支持自定义列渲染、筛选条件配置
  • 通用表单组件：传入字段配置、操作类型（新增/编辑）、数据ID即可自动生成表单，支持按配置调整字段排序、分组布局、自定义字段组件
  • 通用CRUD容器：将上述两个组件整合，仅需要传入模型标识、自定义配置即可生成完整的CRUD页面
• 第三步特殊场景微调：针对有定制需求的模型，只需要在配置项中覆盖对应字段的逻辑即可，不需要重写整套组件代码。

3. 对接注意事项 #

DRF本身自带完整的Schema生成能力，可以直接输出符合OpenAPI规范的模型定义，前端可以直接解析该定义生成配置，不需要手动维护每个模型的字段信息，完全可以做到后端新增模型后，前端仅需几行配置就生成完整的管理页面。

内容的提问来源于stack exchange，提问作者Mark Barrett