本頁面示例中的 project 均為demo名，可替代成自己的項目名
#需求
- 創(chuàng)建一個項目管理app；
- 字段包含：項目名稱、項目編碼、項目負責人；
- 功能：包含項目管理的增刪改查、導出。
#后端
#1. 創(chuàng)建App
- 通過命令創(chuàng)建App python3 manage.py createapp project
#2. 創(chuàng)建 models 模型
-
- 在dvadmin-backend/apps/project/models/ 目錄下，創(chuàng)建 project.py 文件(models目錄下可創(chuàng)建多個模型文件，建議一個.py 文件為一個models模型)
-
- 編寫項目管理模型內(nèi)容 dvadmin-backend/apps/project/models/project.py，如下：
from django
.conf
import settings
from django
.db
.models
import CharField
, ForeignKey
, CASCADE
, SET_NULL
from vadmin
.op_drf
.models
import CoreModel
class Project(CoreModel
):name
= CharField
(max_length
=8, verbose_name
='項目名稱')code
= CharField
(max_length
=8, verbose_name
='項目編碼')person
= ForeignKey
(to
=settings
.AUTH_USER_MODEL
, null
=True, verbose_name
='項目負責人', related_name
='project_person',on_delete
=SET_NULL
, db_constraint
=False)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_name
def __str__(self
):return f"{self.name} 項目"
-
- 在dvadmin-backend/apps/project/models/__init__.py 中導入模型
from .project
import Project
#3. 遷移數(shù)據(jù)庫文件
- 執(zhí)行遷移命令：
- python3 manage.py makemigrations project
- python3 manage.py migrate project
- 遷移成功后，通過數(shù)據(jù)庫可查看到
- 可看到字段比模型中多出幾個，是因為繼承了框架封裝的 CoreModel 所帶的。
#4. 創(chuàng)建過濾器、序列化器、視圖、路由接口
-
- 創(chuàng)建過濾器，通過 dvadmin-backend/apps/project/filters.py 文件中，添加過濾器內(nèi)容：
import django_filters
from .models
.project
import Project
class ProjectFilter(django_filters
.rest_framework
.FilterSet
):"""項目管理 簡單序過濾器"""name
= django_filters
.CharFilter
(lookup_expr
='icontains')class Meta:model
= Projectexclude
= ('description', 'creator', 'modifier')
from rest_framework
import serializers
from .models
.project
import Project
from vadmin
.op_drf
.serializers
import CustomModelSerializer
class ProjectSerializer(CustomModelSerializer
):"""項目管理 簡單序列化器"""class Meta:model
= Projectfields
= '__all__'class ProjectCreateUpdateSerializer(CustomModelSerializer
):"""項目管理 創(chuàng)建/更新時的列化器"""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
.username
def get_dept__deptName(self
, obj
):return "" if not hasattr(obj
, 'dept') else obj
.dept
.deptName
class 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 CommonPermission
class 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
= ['項目序號', '項目名稱', '項目編碼', '項目負責人', '項目所屬部門', '創(chuàng)建者', '修改者', '備注'] 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 DefaultRouter
from 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. 創(chuàng)建 .vue 文件和 api 文件
- 在目錄dvadmin-ui/src/api/project/下創(chuàng)建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/下創(chuàng)建index.vue( 第一個 project 目錄類似后端app，第二個 project目錄類似后端視圖，好處：結(jié)構(gòu)會清晰化)，內(nèi)容如下：
#2. 添加菜單
- 在前端系統(tǒng)中，權(quán)限管理 ———— 菜單管理 ———— 添加菜單
#3. vue 中實現(xiàn)增、刪、改、查、導入、導出
- 編輯文件 dvadmin-ui/src/views/project/project/index.vue，參數(shù)文檔說明請參考 通用模型顯示組件
<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: '創(chuàng)建時間', show: true, search: true, type: 'date'},{prop: 'creator_name', label: '創(chuàng)建者', 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
總結(jié)
以上是生活随笔為你收集整理的django-vue-admin脚手架快速开发CRUD教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
