2020年06月22日阅读 10

django+react短时间搭建一套增删查改项目思路(一)

背景

对于一个九线城市的外包全干工程师，每天都会碰到很多需求相似，或者某些模块功能相似的项目。比如文章发布，信息展示等等。很多看似不一样的需求实际上就是数据库某张表的crud。
每次有一个新项目，就需要做大量的重复工作，后端的增删查改，还要配套一个相应的管理后台。写这些大量重复的复制粘贴和相似的功能代码简直是浪费生命，所以本人一直想自动化这些过程，解放自己的双手。

不会偷懒的程序员不是好程序员 --鲁迅

涉及到的主要技术

REACT
ANT DESIGN PRO
UMI HOOKS
UFORM
Django
Django REST FRAMEWORK

为什么不使用django自带的admin？

除了这些通用的增删查改，项目还有许多定制化的功能。
一些项目对后台的UI有要求
后台可能有各式各样的权限要求，不同角色能修改的模块不一样
由于项目前后端分离，使用前端框架能让前端工程师进行admin的开发。

思路

后端的增删改查:

设计好model后，对于后端单个model的增删查改，不得不说drf实现起来十分简便，我们只需要几个步骤就能实现。

定义serializer

# app/serializers.py
class ExampleSerializer(serializers.ModelSerializer):
    class Meta:
        model = Example
        exclude = ('updated', 'deleted') # 这个是通用model添加的2个字段 一般不返回
复制代码

定义viewset

# app/viewsets.py
class ExampleViewSet(viewsets.ModelViewSet):
    serializer_class = ExampleSerializer
    queryset = Example.objects.all()
复制代码

注册路由

# app/urls.py
router = DefaultRouter()
router.trailing_slash = '[/]?'

router.register('example', ExampleViewSet, basename="example")

urlpatterns = [
    url('', include(router.urls))
]
复制代码

一般来说还有对列表的查询过滤
这里使用django-filters

# app/filters.py
class ExampleFilter(FilterSet):
    class Meta:
        model = Example
        fields = {}
复制代码

只需要这几个步骤，就能完成一个model的增删改查。
实际上，每一个model的代码除了名字, 路径不同以外都是大同小异，其它都是差不多，而这些model的元数据，都是可以通过model的meta,和模块的config中获得。

前端部分

前端的增删查改，通用的部分为一个展示的表格，和一个新增修改的表单。对于表格的展示，采用了umi/hooks中的useFormTable。umi/hooks。只需要定义展示的columns和查询的表单，就能生成一个table。

const ExampleList = () => {
  const [form] = Form.useForm();
  const getTableData = fetch('/api/v1/example');

  const { tableProps, search } = useFormTable(getTableData, {
    defaultPageSize: 15,
    form,
  });

  const { submit } = search;

  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '描述',
      dataIndex: 'desc',
      key: 'desc',
    },
    {
      title: '创建时间',
      dataIndex: 'created',
      key: 'created',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (val: number): string => (val === 0 ? '正常' : '禁用'),
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      render: (val: number) => (
        <div>
          <Link to={`/example/edit/${val}`}>编辑</Link>
          <Divider type="vertical" />
          <a onClick={() => {}}>删除</a>
        </div>
      ),
    },
  ];

  return (
    <div>
      <SearchForm form={form} submit={submit} />
      <Button type="primary" onClick={() => history.push('/example/create')}>
        新增
      </Button>
      <Table columns={columns} {...tableProps} />
    </div>
  );
};
复制代码

表单的新增与编辑使用的是uform,它提供了通过JSON Schema生成表单的能力。而json数据我们同样可以通过model的元数据来获取到。

const CreateExampleForm = () => {
  const submit = useRequest(apiSubmitExampleForm, {
    manual: true,
    onSuccess: () => message.success('添加成功'),
  });
  const { run } = submit;

  return (
    <PageHeaderWrapper content


    
="请填写详情">
      <Card bordered={false}>
        <SchemaForm
          onSubmit={(val) => run(val)}
          schema={exampleJson}
          labelCol={7}
          wrapperCol={12}
          initialValues={{ status: 0 }}
        >
          <FormButtonGroup offset={10}>
            <Submit />
            <Reset />
            <Button onClick={() => history.goBack()}>返回</Button>
          </FormButtonGroup>
        </SchemaForm>
      </Card>
    </PageHeaderWrapper>
  );
};
复制代码

表单只需要实现submit方法即可

总结

这是一个快速搭建的思路，通过model元数据生成相应的前后端代码。目前搭建一个增删改查的项目只需要：

git clone 初始模版, python manage.py startapp 生成相应app
执行自定义命令python manage.py create_crud 生成后端api
执行自定义命令python manage.py create_model_json 生成表单json文件
根据json编写前端页面及逻辑。

下一篇将记录下实现的细节。