目录

 

Django介绍：

开发准备

后端编写Django项目里的app模块

编写models.py文件（写模型）：

 编写序列化文件（serializers.py）

编写视图（Views）

新建urls.py文件，填写路径

​编辑

进行迁移：

前端：

编写接口文件api.js

编写CRUD文件

编写index.vue文件

前端界面使用：

运行项目：

提供给Django初学者的后端CRUD快速开发教程：

点个赞再走吧！这对我真的很重要QAQ

MVC模式

一、Django介绍：

Django是一个开源的Web框架，是用Python编写的。它是基于MVC（Model-View-Controller）架构的，强调快速开发、代码重用和可扩展性。Django提供了丰富的工具和库，可以帮助开发人员构建高质量的Web应用程序。

Django有很多特点，包括以下几点：

  1. 自带管理后台：Django自带了一个管理后台，可以帮助开发人员方便地管理网站内容。

  2. ORM：Django提供了一个强大的ORM（对象关系映射器），可以方便地操作数据库。

  3. URL配置：Django的URL配置非常灵活，可以根据需要进行定制。

  4. 模板系统：Django提供了一个强大的模板系统，可以方便地构建Web页面。

  5. 安全性：Django具有强大的安全性，包括防止跨站点脚本攻击、防止SQL注入等。

  6. 可扩展性：Django的插件系统非常丰富，可以方便地扩展功能。

Django是一个非常强大的Web框架，可以帮助开发者轻松构建高质量的Web应用程序

阅读本文时有任何代码问题可查询Django文档：Django 文档 | Django 文档 | Django

开发准备

进行Django开发的安装步骤如下：

  1. 安装Python环境

Django是基于Python开发的，因此需要先安装Python环境。可以从Python官网（https://www.python.org/downloads/）下载最新版的Python。

  1. 安装pip

pip是Python的包管理工具，可以方便地安装和管理Python的第三方库。安装完成Python后，可以在终端中输入以下命令安装pip：

curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py
python get-pip.py

  1. 安装Django

在安装了pip之后，可以使用以下命令安装Django：

pip install django

可以使用以下命令验证Django是否安装成功：

python -m django --version
  1. 创建Django项目

在安装了Django之后，可以使用以下命令创建Django项目：

django-admin startproject project_name

其中，project_name为项目名称。

  1. 运行Django项目

在成功创建了Django项目之后，使用以下命令进入到项目目录中：

cd project_name

然后，使用以下命令启动Django项目：

python manage.py runserver

在终端中出现如下信息，即代表Django项目已经启动：

Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

说明：1.本教程基于DVAdmin快速开发平台：Django-Vue-Admin

           2.请下载DVAdmin项目并按照配置运行，项目有详细文档说明，能够帮助你快速上手。 

二、后端编写Django项目里的app模块

注意：将Pycharm右上角运行配置更改：

（以建立设备模块device_crud为例）

首先cd到项目下的backend目录（backend目录是由项目创建时自动创建，里面包含后端的各种文件），然后输入指令。

py manage.py startapp device_crud

创建成功后，将app加入到backend/application/setting.py里

找到文件里面的INSTALLED_APPS

                                                               模块app添加完成

2.1 编写models.py文件（写模型）

注意：写任何文件时记得import 包

class Device(CoreModel):
#设备表
    name = models.CharField(max_length=32,verbose_name="设备名称",null=True, blank=True,help_text="设备名称")
    code = models.CharField(max_length=32, verbose_name="设备编码",null=True,blank=True,help_text="设备编码")
    device_code = models.CharField(max_length=32, verbose_name="采集点位编号",null=True,blank=True,help_text="采集点位编号",unique=True)
    active = models.BooleanField(default=True,verbose_name="状态",help_text="状态")
    sort = models.IntegerField(default=0, verbose_name="排序", help_text="排序", blank=True)
    class Meta:
        db_table = "environment_device_info"
        verbose_name='设备表'
        verbose_name_plural = verbose_name
        ordering = ('id',)


class Unit(CoreModel):
    name =models.CharField(max_length=32,verbose_name="单位名称",null=True,blank=True,help_text="单位名称")
    code = models.CharField(max_length=32, verbose_name="单位符号", null=True, blank=True, help_text="单位符号")
    active = models.BooleanField(default=True,verbose_name="状态",help_text="状态")
    sort = models.IntegerField(default=0, verbose_name="排序", help_text="排序", blank=True)
    class Meta:
        db_table = "environment_unit_info"
        verbose_name = '单位表'
        verbose_name_plural = verbose_name
        ordering = ('id',)
class Point(CoreModel):
#点位表
    name = models.CharField(max_length=32, verbose_name="点位名称", null=True, blank=True, help_text="点位名称")
    code = models.CharField(max_length=32, verbose_name="点位内部编号", null=True, blank=True, help_text="点位内部编号")
    point_code = models.CharField(max_length=32, verbose_name='采集点位编号', null=True, blank=True, help_text="采集点位编号")
    device = models.ForeignKey(to=Device, verbose_name='所属设备', on_delete=models.CASCADE(), db_constraint=False, null=True,
                               blank=True, help_text="所属设备")
    current_value = models.CharField(max_length=32, verbose_name="上一次采集值", null=True, blank=True, help_text="上一次采集值")
    unit = models.CharField(to=Unit, verbose_name="单位", to_field='name', null=True, blank=True,
                                help_text="单位")
    last_datatime = models.DateTimeField(auto_now=True, verbose_name='上一次采集时间', help_text='上一次采集时间')
    has_standard = models.BooleanField(default=True, verbose_name='是否达到排放标准', help_text='达标进入报警判断')
    active = models.BooleanField(default=True, verbose_name='状态', help_text="状态")
    sort = models.IntegerField(default=0, verbose_name="排序", help_text="排序", blank=True)
    class Meta:
        db_table = "environment_point_info"
        verbose_name = '点位表'
        verbose_name_plural = verbose_name
        ordering = ('id',)

本文编写模型继承DVAdmin项目编写的基本模型CoreModel。

 2.2 编写序列化文件（serializers.py）

Django 的序列化框架提供了一种将 Django 模型“翻译”为其他格式的机制。通常，这些其他格式将基于文本，并用于在网络上发送 Django 数据，但是序列化程序可以处理任何格式（无论是否基于文本）。

本代码所写序列化继承了DVAdmin框架下的CustomModelSerializer

from device.models import Point,Device,Unit
from dvadmin.utils.serializers import CustomModelSerializer


class PointSerializer(CustomModelSerializer):
    """
    序列化器
    """

    class Meta:
        model = Point
        fields = "__all__"
class UnitSerializer(CustomModelSerializer):
    """
    序列化器
    """

    class Meta:
        model = Unit
        fields = "__all__"
class DeviceSerializer(CustomModelSerializer):
    """
    序列化器
    """

    class Meta:
        model = Device
        fields = "__all__"

class DeviceCreateUpdateSerializer(CustomModelSerializer):
    """
    创建/更新时的列化器
    """

    class Meta:
        model = Device
        fields = '__all__'
class UnitCreateUpdateSerializer(CustomModelSerializer):
    """
    创建/更新时的列化器
    """

    class Meta:
        model = Unit
        fields = '__all__'
class PointCreateUpdateSerializer(CustomModelSerializer):
    """
    创建/更新时的列化器
    """

    class Meta:
        model = Point
        fields = '__all__'

2.3 编写视图（Views）

相当于接口

接口编写继承DVAdmin里的CustomModelViewSet类

三个表【Device，Point，Unit】的增删改查

from django.shortcuts import render
from device_crud.models import Device,Point,Unit
from device_crud.serializers import PointSerializer,UnitSerializer,DeviceCreateUpdateSerializer,DeviceSerializer,UnitCreateUpdateSerializer,PointCreateUpdateSerializer
from dvadmin.utils.viewset import CustomModelViewSet
class DeviceViewSet(CustomModelViewSet):
    """
        list:查询
        create:新增
        update:修改
        retrieve:单例
        destroy:删除
        """
    queryset=Device.objects.all()
    serializer_class = DeviceSerializer
    create_serializer_class = DeviceCreateUpdateSerializer
    update_serializer_class = DeviceCreateUpdateSerializer
    filter_fields = ['name', 'code']
    search_fields = ['name']

class UnitViewSet(CustomModelViewSet):
        """
            list:查询
            create:新增
            update:修改
            retrieve:单例
            destroy:删除
            """
        queryset = Unit.objects.all()
        serializer_class = UnitSerializer
        create_serializer_class = UnitCreateUpdateSerializer
        update_serializer_class = UnitCreateUpdateSerializer
        filter_fields = ['name', 'code']
        search_fields = ['name']
class PointViewSet(CustomModelViewSet):
    """
        list:查询
        create:新增
        update:修改
        retrieve:单例
        destroy:删除
        """
    queryset=Point.objects.all()
    serializer_class = PointSerializer
    create_serializer_class = PointCreateUpdateSerializer
    update_serializer_class = PointCreateUpdateSerializer
    filter_fields = ['name', 'code']
    search_fields = ['name']
# Create your views here.

2.4新建urls.py文件，填写路径

from rest_framework.routers import SimpleRouter

from .views import UnitViewSet, PointViewSet, DeviceViewSet

router = SimpleRouter()
router.register("api/device_crud/point", PointViewSet)
router.register("api/device_crud/unit", UnitViewSet)
router.register("api/device_crud/device", DeviceViewSet)

urlpatterns = [
]
urlpatterns += router.urls

router.register("设置的路径"，接口名字)

这是device层的url，然后在application里添加上层url

url解释：底层url是"api/device_crud/device(unit、point)"，即device_crud文件里的urls。上层url是"api/device/"，即写在application里的urls。

若访问接口PointViewSet，需要输入     ip：端口/api/device/api/device_crud/device/

2.5 进行迁移

注意：每次编辑过models文件后都要重新进行迁移。

Django会根据模型搭建创建数据库表

迁移是 Django 将你对模型的修改（例如增加一个字段，删除一个模型）应用至数据库架构中的方式。

基于模型的修改创建迁移指令：

py manage.py makemigrations

 （我的已经迁移好，并未做更改，所以提示No changes）

（这是我更改过模型的迁移，把active注释掉。）

再进行迁移：

负责应用和撤销迁移指令：

 py manage.py migrate

 运行截图：

三、前端：

假设你已经配置好DVAdmin环境，部署好本项目，可开始进行前端页面编写。

在Web目录找到Views目录，创建属于自己的模块文件夹device_crud,创建api.js、crud.js、index.vue文件。

3.1编写接口文件api.js

api文件包含最基本的增删改查接口

import { request } from '@/api/service'
export const urlPrefix = '/api/device/device/'
import XEUtils from 'xe-utils'
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 + obj.id + '/',
    method: 'put',
    data: obj
  })
}

export function DelObj(id) {
  return request({
    url: urlPrefix + id + '/',
    method: 'delete',
    data: { id }
  })
}

3.2编写CRUD文件

代码包括页面数据项显示设置

import { request } from "@/api/service";
import { BUTTON_STATUS_NUMBER } from "@/config/button";
import { urlPrefix as bookPrefix } from "./api";


export const crudOptions = vm => {
    return {
        pageOptions: {
            compact: true
        },
        options: {
            tableType: "vxe-table",
            rowKey: true, // 必须设置，true or false
            rowId: "id",
            height: "100%", // 表格高度100%, 使用toolbar必须设置
            highlightCurrentRow: false
        },
        rowHandle: {
            width: 140,
            view: {
                thin: true,
                text: "",
                disabled() {
                    return !vm.hasPermissions("Retrieve");
                }
            },
            edit: {
                thin: true,
                text: "",
                disabled() {
                    return !vm.hasPermissions("Update");
                }
            },
            remove: {
                thin: true,
                text: "",
                disabled() {
                    return !vm.hasPermissions("Delete");
                }
            }
        },
        indexRow: {
            // 或者直接传true,不显示title，不居中
            title: "序号",
            align: "center",
            width: 100
        },
        viewOptions: {
            componentType: "form"
        },
        formOptions: {
            defaultSpan: 24, // 默认的表单 span
            width: "35%"
        },
        columns: [
          {
                title: "ID",
                key: "id",
                show: false,
                disabled: true,
                width: 90,
                form: {
                    disabled: true
                }
            },
            {
                title: "设备名称",
                key: "name",
                sortable: true,
                treeNode: true,
                search: {
                    component: {
                        props: {
                            clearable: true
                        }
                    }
                },
                type: "input",
                form: {
                    editDisabled: false,
                    rules: [
                        // 表单校验规则
                        { required: true, message: "设备名称必填" }
                    ],
                    component: {
                        props: {
                            clearable: true
                        },
                        placeholder: "请输入设备名称"
                    },
                    itemProps: {
                        class: { yxtInput: true }
                    }
                }
            },
            {
                title: "设备编码",
                key: "code",
                sortable: true,
                form: {
                    editDisabled: false,
                    rules: [
                        // 表单校验规则
                        { required: true, message: "设备编码必填" }
                    ],
                    component: {
                        props: {
                            clearable: true
                        },
                        placeholder: "请输入设备编码"
                    },
                    itemProps: {
                        class: { yxtInput: true }
                    }
                }
            },
            {
                title: "设备类型",
                key: "device_type",
                sortable: true,




                form: {
                    editDisabled: false,
                    rules: [
                        // 表单校验规则
                        { required: true, message: "设备类型必填" }
                    ],
                    component: {
                        props: {
                            clearable: true
                        },
                        placeholder: "请输入设备类型"
                    },
                    itemProps: {
                        class: { yxtInput: true }
                    }
                }
            },
            {
                title: "设备状态",
                key: "status",
                sortable: true,
                form: {
                    rules: [
                        { required: true, message: "设备状态必填" }
                    ],
                    component: {
                        props: {
                            clearable: true,
                        },
                        placeholder: "请输入设备状态"
                    },
                    itemProps: {
                        class: { yxtInput: true }
                    }
                }
            }
        ].concat(vm.commonEndColumns())
    };
};

3.3编写index.vue文件

这是基于vue编写的主页，主要是前端发力，DVAdmin有具体的前端搭建使用手册链接。

<!--
 * @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: 'device_crud',
  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>

 所有的前端文件编写完毕。

四丶前端界面使用：

运行项目：

后端服务启动，cd到你的backend目录下输入指令

py manage.py runserver

 前端服务启动：cd到你的web目录

输入指令

npm run dev

 启动成功后：

点击链接进入登录页面，登录DVAdmin默认账户：

 添加菜单：

填写菜单url信息

 注意正确填写你的路由地址、组件地址和组件名称

成功的界面：

我只举了device表的例子，其实在编写models和序列化文件中一共给了Device、Point、Unit三个，可继续在菜单添加页面。

页面可进行简单的增删改查，管理后台数据，增加数据后可在数据库中查看所得到的数据，我用的是MySQL：

# python # django # 数据库
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

cover

GitTalk | 使用面向业务的狮偶编程语言提升开发效率

avatar GitCode 开源社区
cover

GitTalk | DevUI Suits 场景解决方案

avatar GitCode 开源社区
cover

GitTalk | DevUI Admin 前端项目构建

avatar GitCode 开源社区