创建django app
在setting.py里添加我们的app
编写models
from django.db import models
# Create your models here.
from dvadmin.utils.models import CoreModel
class CrudDemoModel(CoreModel):
goods = models.CharField(max_length=255, verbose_name="商品")
inventory = models.IntegerField(verbose_name="库存量")
goods_price = models.FloatField(verbose_name="商品定价")
purchase_goods_date = models.DateField(verbose_name="进货时间")
class Meta:
db_table = "goods"
verbose_name = '商品表'
verbose_name_plural = verbose_name
ordering = ('-create_datetime',)
复制代码
新建serializers.py,编写我们的序列化器
'''
@author: hongzai
@contact: [email protected]
@file: serializers.py
@time: 2022/4/8 11:12
@desc:
'''
from crud_demo.models import CrudDemoModel
from dvadmin.utils.serializers import CustomModelSerializer
class CrudDemoModelSerializer(CustomModelSerializer):
"""
序列化器
"""
class Meta:
model = CrudDemoModel
fields = "__all__"
class CrudDemoModelCreateUpdateSerializer(CustomModelSerializer):
"""
创建/更新时的列化器
"""
class Meta:
model = CrudDemoModel
fields = '__all__'
复制代码
编写视图views
# Create your views here.
from crud_demo.models import CrudDemoModel
from crud_demo.serializers import CrudDemoModelSerializer, CrudDemoModelCreateUpdateSerializer
from dvadmin.utils.viewset import CustomModelViewSet
class CrudDemoModelViewSet(CustomModelViewSet):
"""
list:查询
create:新增
update:修改
retrieve:单例
destroy:删除
"""
queryset = CrudDemoModel.objects.all()
serializer_class = CrudDemoModelSerializer
create_serializer_class = CrudDemoModelCreateUpdateSerializer
update_serializer_class = CrudDemoModelCreateUpdateSerializer
filter_fields = ['goods', 'goods_price']
search_fields = ['goods']
复制代码
新建urls.py并添加路由
'''
@author: hongzai
@contact: [email protected]
@file: urls.py
@time: 2022/4/8 12:23
@desc:
'''
from rest_framework.routers import SimpleRouter
from .views import CrudDemoModelViewSet
router = SimpleRouter()
router.register("api/crud_demo", CrudDemoModelViewSet)
urlpatterns = [
]
urlpatterns += router.urls
复制代码
在application的urls里导入我们的app
path('',include('crud_demo.urls'))
复制代码
迁徙我们的app
运行项目并查看接口
打开swgger可以看到我们配置的接口已经生效了
编写前端curd页面
dvadmin的前端是基于d2admin的管理系统,集成了d2-crud-plus等d2admin生态圈的功能 d2-crud-plus 是基于 d2-admin 的 d2-crud 的扩展,旨在简化 d2-crud 配置,快速开发crud功能
打开web/src/views/新建一个目录为crud_demo,并新建crud.js,index.vue,api.js三个文件
目录结构
views
|--crud_demo
|--api.js //定义api接口
|--crud.js //配置crud界面
|--index.vue //vue文件
复制代码
api.js
扫描二维码关注公众号,回复:
13775799 查看本文章
/*
* @Description:
* @Author: hongzai
* @version:
* @Date: 2022-04-08 12:44:55
* @LastEditors: hongzai
* @LastEditTime: 2022-04-08 12:44:55
*/
import { request } from '@/api/service'
export const urlPrefix = '/api/crud_demo/'
export function GetList(query) {
return request({
url: urlPrefix,
method: 'get',
params: query
})
}
export function AddObj(obj) {
return request({
url: urlPrefix,
method: 'post',
data: obj
})
}
export function UpdateObj(obj) {
return request({
url: urlPrefix,
method: 'post',
data: obj
})
}
export function DelObj(id) {
return request({
url: urlPrefix,
method: 'post',
params: { id }
})
}
复制代码
crud.js
复制代码
index.vue
<!--
* @Description:
* @Author: hongzai
* @version:
* @Date: 2022-04-08 12:44:41
* @LastEditors: hongzai
* @LastEditTime: 2022-04-08 12:54:31
-->
<template>
<d2-container :class="{ 'page-compact': crud.pageOptions.compact }">
<template slot="header">测试页面</template>
<d2-crud-x ref="d2Crud" v-bind="_crudProps" v-on="_crudListeners">
<!-- 自动绑定参数与事件 -->
<!-- 包含详细参数见:https://gitee.com/greper/d2-crud-plus/blob/master/packages/d2-crud-plus/src/lib/mixins/crud.js#L164-->
<div slot="header">
<crud-search
ref="search"
:options="crud.searchOptions"
@submit="handleSearch"
/>
<el-button-group>
<el-button size="small" type="primary" @click="addRow"
><i class="el-icon-plus" /> 新增</el-button
>
</el-button-group>
<crud-toolbar v-bind="_crudToolbarProps" v-on="_crudToolbarListeners" />
</div>
</d2-crud-x>
</d2-container>
</template>
<script>
import { crudOptions } from './crud' // 上文的crudOptions配置
import { d2CrudPlus } from 'd2-crud-plus'
import { AddObj, GetList, UpdateObj, DelObj } from './api' // 查询添加修改删除的http请求接口
export default {
name: 'curd_demo',
mixins: [d2CrudPlus.crud], // 最核心部分,继承d2CrudPlus.crud
methods: {
getCrudOptions () {
return crudOptions(this)
},
pageRequest (query) {
return GetList(query)
}, // 数据请求
addRequest (row) {
return AddObj(row)
}, // 添加请求
updateRequest (row) {
return UpdateObj(row)
}, // 修改请求
delRequest (row) {
return DelObj(row.id)
} // 删除请求
}
}
</script>
复制代码
在前端添加菜单
刷新前端页面就可以看到我们的菜单
添加测试数据
d2-crud-plus文档 默认crud的配置可以参考文档根据你的需求
ok,现在可以看到我们的数据了
数据库里也看到了我们的数据