Crear una aplicación Django
Agregue nuestra aplicación en setting.py
escribir modelos
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',)
复制代码
Cree un nuevo serializers.py y escriba nuestro serializador
'''
@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__'
复制代码
escribir vistas
# 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']
复制代码
Cree un nuevo urls.py y agregue una ruta
'''
@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
复制代码
Importar nuestra aplicación en las URL de la aplicación
path('',include('crud_demo.urls'))
复制代码
Migrar nuestra aplicación
Ejecute el proyecto y vea la interfaz.
Abra swgger para ver que la interfaz que configuramos ha hecho efecto
Escribir página de cuajada de front-end
El front-end de dvadmin es un sistema de gestión basado en d2admin, que integra las funciones del ecosistema d2admin como d2-crud-plus.d2-crud-plus es una extensión de d2-crud basada en d2-admin.función crud
Abra web/src/views/ y cree un nuevo directorio llamado crud_demo, y cree tres archivos: crud.js, index.vue y api.js
Estructura de directorios
views
|--crud_demo
|--api.js //定义api接口
|--crud.js //配置crud界面
|--index.vue //vue文件
复制代码
api.js
/*
* @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.view
<!--
* @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>
复制代码
Agregar un menú al frente
Actualice la página de inicio para ver nuestro menú
Agregar datos de prueba
Documentación de d2-crud-plus La configuración de crud predeterminada puede consultar la documentación según sus necesidades
ok, ahora podemos ver nuestros datos
También vemos nuestros datos en la base de datos.