本頁面示例中的 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，參數文檔說明請參考 通用模型顯示組件

<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教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。