Django-Vue3-Admin开发者指南：自定义接口与前端组件开发

Django-Vue3-Admin开发者指南：自定义接口与前端组件开发

【免费下载链接】django-vue3-adminDjango-Vue3-Admin is a comprehensive basic development platform based on the RBAC (Role-Based Access Control) model for permission control, with column-level granularity. It follows a frontend-backend separation architecture, with项目地址: https://gitcode.com/gh_mirrors/dj/django-vue3-admin

Django-Vue3-Admin是一个基于RBAC权限模型的综合性基础开发平台，支持列级粒度的权限控制，采用前后端分离架构。本指南将详细介绍如何在该平台中进行自定义接口开发和前端组件开发，帮助开发者快速扩展系统功能。

自定义接口开发：从模型到API的完整流程

接口开发基础架构

Django-Vue3-Admin的后端接口遵循Django REST Framework规范，主要通过ViewSet实现CRUD操作。所有业务接口集中在backend/dvadmin/system/views/目录下，例如用户管理接口user.py。

三步创建自定义接口

1. 定义数据模型：在对应模块的models.py中创建数据模型，继承基础模型类
2. 编写序列化器：创建CustomModelSerializer子类，定义字段映射和验证规则
3. 实现ViewSet：继承CustomModelViewSet，配置查询集、序列化器和权限控制

# 示例：用户管理接口核心代码 class UserViewSet(CustomModelViewSet): queryset = Users.objects.exclude(is_superuser=1).all() serializer_class = UserSerializer create_serializer_class = UserCreateSerializer update_serializer_class = UserUpdateSerializer filter_fields = ["name", "username", "gender", "is_active", "dept", "user_type"] search_fields = ["username", "name", "dept__name", "role__name"] @action(methods=["GET"], detail=False, permission_classes=[IsAuthenticated]) def user_info(self, request): """获取当前用户信息""" # 实现逻辑... return DetailResponse(data=result, msg="获取成功")

接口注册与访问

完成接口开发后，需在模块的urls.py中注册ViewSet：

# 在 backend/dvadmin/system/urls.py 中添加 router.register(r'user', UserViewSet)

接口将自动生成RESTful风格的访问路径，如/api/system/user/

前端组件开发：构建可复用的UI元素

组件开发规范

前端组件采用Vue3 + TypeScript开发，存放在web/src/components/目录下。每个组件应遵循单一职责原则，推荐使用组合式API（setup语法糖）实现。

权限控制组件实例

以下是一个基于RBAC权限模型的按钮权限控制组件auth.vue：

<template> <slot v-if="getUserAuthBtnList" /> </template> <script setup lang="ts" name="auth"> import { computed } from 'vue'; import { storeToRefs } from 'pinia'; import { useUserInfo } from '/@/stores/userInfo'; const props = defineProps({ value: { type: String, default: () => '', }, }); const stores = useUserInfo(); const { userInfos } = storeToRefs(stores); const getUserAuthBtnList = computed(() => { return userInfos.value.authBtnList.some((v: string) => v === props.value); }); </script>

组件使用方法

在页面中引入并使用自定义组件：

<template> <auth value="user:add"> <el-button type="primary" @click="handleAdd">新增用户</el-button> </auth> </template> <script setup lang="ts"> import Auth from '/@/components/auth/auth.vue'; // 组件逻辑... </script>

前后端联调：实现数据交互

API请求封装

前端通过web/src/api/目录下的文件统一管理API请求，例如用户相关接口web/src/api/login/index.ts：

import { request } from '/@/utils/request'; export function login(data: any) { return request({ url: '/api/login/', method: 'post', data, }); } export function getUserInfo() { return request({ url: '/api/system/user/user_info/', method: 'get', }); }

状态管理与数据流转

使用Pinia进行状态管理，在web/src/stores/目录下定义全局状态，如用户信息web/src/stores/userInfo.ts，实现组件间数据共享。

开发最佳实践

目录结构推荐

backend/ └── dvadmin/ └── system/ ├── views/ # 接口视图 ├── models.py # 数据模型 ├── serializers.py # 序列化器 └── urls.py # 路由配置 web/ └── src/ ├── components/ # 公共组件 ├── api/ # API请求 ├── views/ # 页面视图 └── stores/ # 状态管理

权限控制要点

1. 后端使用@action装饰器定义自定义接口，设置permission_classes
2. 前端通过auth组件控制按钮显示，基于用户权限动态渲染
3. 列级权限控制可参考web/src/utils/columnPermission.ts实现

性能优化建议

1. 接口实现分页查询，使用filter_fields和search_fields优化查询效率
2. 前端组件使用defineAsyncComponent实现懒加载
3. 大型表单采用分步骤提交，减少一次性数据处理压力

通过以上步骤，开发者可以快速在Django-Vue3-Admin平台上扩展自定义功能。无论是业务接口开发还是UI组件实现，都能遵循平台的设计规范，确保系统的可维护性和扩展性。

要开始使用Django-Vue3-Admin进行开发，请先克隆仓库：

git clone https://gitcode.com/gh_mirrors/dj/django-vue3-admin

然后参考项目文档进行环境配置和基础搭建。

【免费下载链接】django-vue3-adminDjango-Vue3-Admin is a comprehensive basic development platform based on the RBAC (Role-Based Access Control) model for permission control, with column-level granularity. It follows a frontend-backend separation architecture, with项目地址: https://gitcode.com/gh_mirrors/dj/django-vue3-admin