django-凯发ag旗舰厅登录网址下载

本页面示例中的 project 均为demo名，可替代成自己的项目名

#需求

• 创建一个项目管理app；
• 字段包含：项目名称、项目编码、项目负责人；
• 功能：包含项目管理的增删改查、导出。

#后端

#1. 创建app

• 通过命令创建app python3 manage.py createapp project

#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 project
  • python3 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 文件

• 在目录dvadmin-ui/src/api/project/下创建project.js：

代码如下：

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}) }

• 在目录dvadmin-ui/src/views/project/project/下创建index.vue( 第一个 project 目录类似后端app，第二个 project目录类似后端视图，好处：结构会清晰化)，内容如下：

#2. 添加菜单

• 在前端系统中，权限管理 ———— 菜单管理 ———— 添加菜单

• 添加 项目管理侧边栏

• 添加 项目 二级末级菜单

• 添加 增、删、改、查、导入、导出按钮

• 最终添加完成后如下：

• 刷新后即可看到左侧菜单

#3. vue 中实现增、删、改、查、导入、导出

• 编辑文件 dvadmin-ui/src/views/project/project/index.vue，参数文档说明请参考 通用模型显示组件

#完成

• 刷新页面打开 项目管理——项目，则是一个简单完整的 crud 完成。
• 如有问题可参考：https://gitee.com/liqianglog/django-vue-admin/tree/demo_project 分支代码。

参考连接：https://django-vue-admin.com/document/crud.html

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的django-vue-admin脚手架快速开发crud教程的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。