背景
对于一个九线城市的外包全干工程师,每天都会碰到很多需求相似,或者某些模块功能相似的项目。比如文章发布,信息展示等等。很多看似不一样的需求实际上就是数据库某张表的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编写前端页面及逻辑。
下一篇将记录下实现的细节。