Create a django app

Add our app in setting.py

write 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',)
复制代码

Create a new serializers.py and write our serializer

'''
  @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__'
复制代码

write 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']
复制代码

Create a new urls.py and add a route

'''
  @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
复制代码

Import our app in the application's urls

path('',include('crud_demo.urls'))
复制代码

Migrate our app

Run the project and view the interface

Open swgger to see that the interface we configured has taken effect

Write front-end curd pages

The front end of dvadmin is a management system based on d2admin, which integrates the functions of d2admin ecosystem such as d2-crud-plus. d2-crud-plus is an extension of d2-crud based on d2-admin. crud function

d2-crud-plus

Open web/src/views/ and create a new directory called crud_demo, and create three files: crud.js, index.vue, and api.js

Directory Structure

    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>

复制代码