django-vue-admin脚手架快速开发CRUD教程
2024-05-15 12:31:49
本页面示例中的 project 均为demo名，可替代成自己的项目名
#需求
#后端
#1. 创建App
#2. 创建 models 模型
- 在
dvadmin-backend/apps/project/models/目录下，创建project.py文件(models目录下可创建多个模型文件，建议一个.py 文件为一个models模型)
- 在
- 编写项目管理模型内容
dvadmin-backend/apps/project/models/project.py，如下：
- 编写项目管理模型内容
from django.conf import settings
from django.db.models import CharField, ForeignKey, CASCADE, SET_NULLfrom vadmin.op_drf.models import CoreModel# 继承框架封装的 模型类 CoreModel
class Project(CoreModel):name = CharField(max_length=8, verbose_name='项目名称')code = CharField(max_length=8, verbose_name='项目编码')# 在关联用户时，建议使用 to=settings.AUTH_USER_MODEL 进行关联person = ForeignKey(to=settings.AUTH_USER_MODEL, null=True, verbose_name='项目负责人', related_name='project_person',on_delete=SET_NULL, db_constraint=False)# 在普通一多一、一对多、多对多时，to='App名.模块名' 进行关联dept = ForeignKey(to='permission.dept', on_delete=CASCADE, verbose_name="项目所属部门", related_name='project_dept',db_constraint=False)class Meta:verbose_name = '项目管理'verbose_name_plural = verbose_namedef __str__(self):return f"{self.name} 项目"- 在
dvadmin-backend/apps/project/models/__init__.py中导入模型
- 在
from .project import Project#3. 迁移数据库文件
- 执行迁移命令：
python3 manage.py makemigrations projectpython3 manage.py migrate project
- 迁移成功后，通过数据库可查看到
- 可看到字段比模型中多出几个，是因为继承了框架封装的
CoreModel所带的。
#4. 创建过滤器、序列化器、视图、路由接口
- 创建过滤器，通过
dvadmin-backend/apps/project/filters.py文件中，添加过滤器内容：
- 创建过滤器，通过
import django_filtersfrom .models.project import Projectclass ProjectFilter(django_filters.rest_framework.FilterSet):"""项目管理 简单序过滤器"""# 通过 lookup_expr 可进行模糊查询，其他配置可自行百度name = django_filters.CharFilter(lookup_expr='icontains')class Meta:model = Projectexclude = ('description', 'creator', 'modifier')- 2) 创建序列化器
from rest_framework import serializersfrom .models.project import Project
from vadmin.op_drf.serializers import CustomModelSerializer# ================================================= #
# ************** 项目管理 序列化器 ************** #
# ================================================= #
class ProjectSerializer(CustomModelSerializer):"""项目管理 简单序列化器"""class Meta:model = Projectfields = '__all__'class ProjectCreateUpdateSerializer(CustomModelSerializer):"""项目管理 创建/更新时的列化器"""# 此处可写定制的 创建/更新 内容def validate(self, attrs: dict):return super().validate(attrs)class Meta:model = Projectfields = '__all__'class ExportProjectSerializer(CustomModelSerializer):"""导出 项目管理 简单序列化器"""person__username = serializers.SerializerMethodField(read_only=False)dept__deptName = serializers.SerializerMethodField(read_only=False)def get_person__username(self, obj):return "" if not hasattr(obj, 'person') else obj.person.usernamedef get_dept__deptName(self, obj):return "" if not hasattr(obj, 'dept') else obj.dept.deptNameclass Meta:model = Projectfields = ('id', 'name', 'code', 'person', 'person__username', 'dept', 'dept__deptName', 'creator', 'modifier','description')- 创建视图
from .filters import ProjectFilter
from .models.project import Project
from .serializers import ProjectSerializer, ProjectCreateUpdateSerializer, ExportProjectSerializer
from apps.vadmin.op_drf.filters import DataLevelPermissionsFilter
from apps.vadmin.op_drf.viewsets import CustomModelViewSet
from apps.vadmin.permission.permissions import CommonPermissionclass ProjectModelViewSet(CustomModelViewSet):"""项目管理 的CRUD视图"""queryset = Project.objects.all()serializer_class = ProjectSerializer # 序列化器create_serializer_class = ProjectCreateUpdateSerializer # 创建/更新时的列化器update_serializer_class = ProjectCreateUpdateSerializer # 创建/更新时的列化器filter_class = ProjectFilter # 过滤器extra_filter_backends = [DataLevelPermissionsFilter] # 数据权限类，不需要可注释掉update_extra_permission_classes = (CommonPermission,) # 判断用户是否有这条数据的权限destroy_extra_permission_classes = (CommonPermission,) # 判断用户是否有这条数据的权限create_extra_permission_classes = (CommonPermission,) # 判断用户是否有这条数据的权限search_fields = ('name',) # 搜索ordering = ['create_datetime'] # 默认排序# 导出export_field_data = ['项目序号', '项目名称', '项目编码', '项目负责人', '项目所属部门', '创建者', '修改者', '备注'] # 导出export_serializer_class = ExportProjectSerializer # 导出序列化器# 导入import_field_data = {'name': '项目名称', 'code': '项目编码', 'person': '项目负责人ID', 'dept': '部门ID'}import_serializer_class = ExportProjectSerializer- 创建路由接口
from django.urls import re_path
from rest_framework.routers import DefaultRouterfrom project.views import ProjectModelViewSetrouter = DefaultRouter()
router.register(r'project', ProjectModelViewSet)urlpatterns = [# 导出项目re_path('project/export/', ProjectModelViewSet.as_view({'get': 'export', })),# 项目导入模板下载及导入re_path('project/importTemplate/',ProjectModelViewSet.as_view({'get': 'importTemplate', 'post': 'importTemplate'})),
]urlpatterns += router.urls- 功能接口已完成，请求地址即可： http://127.0.0.1:8000/project/project/(opens new window)
#前端
#1. 创建 .vue 文件和 api 文件
import request from '@/utils/request'// 查询项目列表
export function listProject(query) {return request({url: '/project/project/',method: 'get',params: query})
}// 查询项目详细
export function getProject(projectId) {return request({url: '/project/project/' + projectId + '/',method: 'get'})
}// 新增项目
export function addProject(data) {return request({url: '/project/project/',method: 'post',data: data})
}// 修改项目
export function updateProject(data) {return request({url: '/project/project/' + data.id + '/',method: 'put',data: data})
}// 删除项目
export function delProject(projectId) {return request({url: '/project/project/' + projectId + '/',method: 'delete'})
}// 导出项目
export function exportProject(query) {return request({url: '/project/project/export/',method: 'get',params: query})
}// 下载项目导入模板
export function importTemplate() {return request({url: '/project/project/importTemplate/',method: 'get'})
}// 项目导入
export function importsProject(data) {return request({url: '/project/project/importTemplate/',method: 'post',data: data})
}
#2. 添加菜单
#3. vue 中实现增、删、改、查、导入、导出
<template><div><model-display :listApi="listApi" :fields="fields" :funcs="funcs"></model-display></div>
</template><script>import * as Project from '../../../api/project/project';export default {name: "project",data() {return {listApi: Project.listProject,fields: [{prop: 'id', label: 'ID', show: false, unique: true, required: false},{prop: 'name', label: '项目名称', show: true, search: true, form: true, required: true,},{prop: 'code', label: '项目编码', show: true, search: true, form: true, required: true,},{prop: 'person', label: '项目负责人', show: true, search: true, sortable: true, type: 'users', form:true,required: true,},{prop: 'dept', label: '部门', show: true, search: true, type: 'depts', form:true,required: true},{prop: 'create_datetime', label: '创建时间', show: true, search: true, type: 'date'},{prop: 'creator_name', label: '创建者', show: true, search: false},{prop: 'description', label: '描述', show: true, search: false, form:true}],funcs: [{type: 'add', label: '新增', permis: ['project:project:post'], 'icon': 'el-icon-plus', api:Project.addProject},{type: 'update', label: '修改', permis: ['project:project:{id}:put'], api: Project.updateProject},{type: 'delete', label: '删除', permis: ['project:project:{id}:delete'], api: Project.delProject},{type: 'export', label: '导出', permis: ['project:project:export:get'], api: Project.exportProject},{type: 'import', label: '导入', permis: ['project:project:importTemplate:get','project:project:importTemplate:post'], api: Project.importsProject, template_api:Project.importTemplate},{type: 'select', label: '详情', permis: ['project:project:get'], api: Project.getProject},],}},created() {},mounted() {},methods: {}}
</script>#完成
- 刷新页面打开 项目管理——项目，则是一个简单完整的 CRUD 完成。
- 如有问题可参考：
https://gitee.com/liqianglog/django-vue-admin/tree/demo_project分支代码。
参考连接：https://django-vue-admin.com/document/crud.html
django-vue-admin脚手架快速开发CRUD教程相关推荐
- VUE-CLI脚手架快速开发外卖订餐APP
VUE-CLI脚手架快速开发外卖订餐APP 内容简介 VUE-CLI脚手架快速开发外卖订餐APP项目实战课程视频教程下载.本次课程为系列课程,最终成果将还原饿了么订餐APP的主要功能.该课程是系列课程 ...
- html5快速开发模板生成器,推荐一个基于Vue 的 H5 快速开发模板
本项目以基于 vue-cli4 和 Vant-ui 搭建的,进行移动端开发中的一些最佳实践方案 模板地址 动动你的小手点颗star 样式适配 在移动端网页开发时,样式适配始终是一个绕不开的问题.对此目 ...
- Vue全家桶快速开发指南
Vue全家桶快速开发指南着手与项目 环境配置 安装npm 安装vuecli4.x 构建项目 图形化构建 命令行配置 代码目录 vue-router 定义组件 组件的作用 如何定义组件 在需要他显示的h ...
- NC65【新】功能快速开发详细教程（yyds神）
Hello大家好,我是信息课的IT施sir,我是java开发工程师小施. 下面由我出具一份NC65版本最新的新功能快速开发详细教程文档. 一.准备条件: 有一个UAP STUDIO集成开发平台,PL/ ...
- WordPress 百度熊掌号快速开发改造教程
WordPress 百度熊掌号快速开发改造教程 百度熊掌号的接入方式有两种,一种是 H5 页面改造,一种是 MIP 页面改造.其中 H5 页面并非只是 html5 页面,而是指移动端页面,简而言之就是 ...
- 手把手Django+Vue前后端分离开发入门(附demo)
前言 众所周知,Django对于网站快速开发非常友好,这得益于框架为我们做了很多事情,让我们只需要做一些简单的配置和逻辑即可把网站的功能开发出来.但是,在使用Django的过程中,有一个地方一直是比较 ...
- vue.cli脚手架初次使用图文教程
vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...
- vue lang_推荐一个基于Vue 的 H5 快速开发模板
关注 Vue社区,回复"加群" 加入我们一起学习,天天进步 praise juejin.im/post/5e612534e51d4527017971a2 模板基于 vue-cli4 ...
- 用vue(element ui)快速开发后台管理
平时我们在用vue开发网站后台管理的时候.比如说要写管理文章的功能,要先去写列表页面,编辑页面,添加页面.另外还需要程序提供对应的增删改查接口 图片上传接口等等,那么有没有一种快速的方法.可以用程序来 ...
最新文章
- 在AMD GPU上搞深度学习——一次将错就错的冒险
- pytorch之卷积模块、池化、激活函数（可视化）
- matlab中矩阵的累加,累加和与累乘积在matlab中-read.ppt
- TF学习——TF之Tensorboard：Tensorflow之Tensorboard可视化简介、入门、使用方法之详细攻略
- idc网站html源码,40个网页常用小代码
- 1704班3组—高级软件测试作业—如何计算团队成员贡献分
- Eclipse安装zylin[转]
- Linux 搭建Zookeeper集群
- java配置lib_Java环境配置
- Itsdangerous应用
- Selenium WebDriver架构
- yum 安装rabbitMQ
- 从零基础入门Tensorflow2.0 ----一、3.3 实战深度神经网络（激活函数）
- linux红帽认证考试费,红帽rhce认证考试费用是多少？
- 分享8年开发经验，浅谈程序员职业规划
- 3.7V锂电池升压到5V1A，FS2114升压转换芯片设计布局
- 什么是自然语言处理，自然语言处理的技术优势和应用领域
- 关于计算机的好处的英语作文,关于电脑好处的英语作文
- 推荐｜10 款好用的远程管理工具
- AddressBook、AddressBookUI、Contacts、ContactsUI 通讯录操作