Django + Vue3 开发后台管理系统，这些关键问题得搞清楚！

terry 2小时前阅读数 37 #Vue

文章标签 Django Vue3

为啥选Django和Vue3搭后台管理系统？优势能打在哪？

先聊聊传统后台管理的痛点,早年用Django自带的Admin，虽然能快速生成增删改查页面，但界面死板、交互僵硬——想改个弹窗表单或动态表格，得在模板里反复折腾，还容易和后端逻辑耦合。

换成 Django + Vue3 前后端分离 后，优势一下就显出来了：

前端自由度拉满：Vue3的组合式API让页面开发更灵活，Element Plus这类UI库现成的表格、表单组件直接用，做个带搜索、筛选、批量操作的表格页面，几天能完成传统方式几周的工作量；用户操作时不用整页刷新，体验丝滑。
后端专注核心逻辑：Django本来就擅长处理业务逻辑、权限管理、数据库ORM，现在专心输出API，不用操心前端模板渲染，开发时前后端各司其职，团队协作更顺，比如产品要加数据统计页，前端用ECharts画图、调Django统计接口就行，后端不用动模板，效率翻倍。
生态兜底不踩坑：Django有DRF（Django REST framework）快速搞API，Vue3有Element Plus、Pinia这些成熟库，社区资料一堆，遇到问题不愁没人解答。

Django咋给Vue3喂数据？接口和跨域咋处理？

核心逻辑是 Django输出RESTful API，Vue3用axios请求数据，具体落地得这么做：

用DRF快速搞API

比如做图书管理模块,先定义Book模型，再用DRF的Serializer把模型转成JSON：

# serializers.py
from rest_framework import serializers
from .models import Book
class BookSerializer(serializers.ModelSerializer):
    class Meta:
        model = Book
        fields = "__all__"

接着写ViewSet处理增删改查：

# views.py
from rest_framework import viewsets
from .models import Book
from .serializers import BookSerializer
class BookViewSet(viewsets.ModelViewSet):
    queryset = Book.objects.all()
    serializer_class = BookSerializer

最后配路由,让Django识别API地址：

# urls.py
from rest_framework.routers import DefaultRouter
from .views import BookViewSet
router = DefaultRouter()
router.register(r'books', BookViewSet)
urlpatterns = [
    # 其他路由...
    path('api/', include(router.urls)),
]

解决跨域问题

前端请求时（比如前端跑localhost:8080，后端是localhost:8000），浏览器会因“域名不同”拦截请求，解决方法很直接：装django-cors-headers包，在Django的settings.py里配置：

INSTALLED_APPS = [
    # ...
    'corsheaders',
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # 注意顺序，放中间件最前面
    # ...其他中间件
]
CORS_ALLOWED_ORIGINS = [
    "http://localhost:8080",  # 前端开发时的地址
    "http://127.0.0.1:8080",
]

这样前端用axios请求http://localhost:8000/api/books/，就能拿到数据啦。

Vue3做Admin页面，组件化咋玩才高效？

Admin系统绕不开重复模块（侧边栏、顶栏、表格、表单…），把这些拆成复用组件，能少写无数重复代码。

布局组件先搞定

写个<LayoutMain>组件，包含侧边栏（<SideMenu>）、顶栏（<TopBar>区（<router-view>），侧边栏的数据从Pinia里拿（用户权限对应的菜单列表），顶栏处理用户头像、退出登录，所有页面套这个布局，不用重复写结构。

业务组件复用为王

很多页面需要“搜索框+表格+分页”，可以封装成<TableContainer>组件，父组件传columns（表格列配置）、data（表格数据）、searchForm（搜索表单配置），子组件自己处理搜索和分页逻辑，调用时像这样：

<template>
  <TableContainer 
    :columns="columns" 
    :data="tableData" 
    :search-form="searchForm"
    @on-search="handleSearch"
    @on-page-change="handlePageChange"
  />
</template>

用户管理、订单管理页面都能复用这个组件，改需求时只动一处，效率飞起。

状态管理靠Pinia

Admin里的用户信息、菜单权限、全局加载状态，用Pinia存最方便，比如useUserStore存用户角色、权限编码，侧边栏根据权限过滤菜单；useLoadingStore控制全局加载动画，axios请求时自动开启/关闭，体验更专业。

权限管理在Django+Vue3里咋落地？前后端得配合好

权限必须“前后端双校验”——前端藏了按钮，后端没拦，别人改个请求就能越权操作，风险极大。

Django后端：权限分层控制

用DRF的权限系统,比如普通用户只能看自己的数据，管理员能删改所有数据，自定义权限类：

from rest_framework.permissions import BasePermission
class IsAdminOrOwner(BasePermission):
    def has_object_permission(self, request, view, obj):
        # 管理员能操作所有，普通用户只能操作自己的对象
        return request.user.is_staff or obj.user == request.user

然后在ViewSet里配置：

class OrderViewSet(viewsets.ModelViewSet):
    permission_classes = [IsAdminOrOwner]
    # ...其他配置

用户权限用Django自带的auth系统扩展，给用户加“菜单权限”“按钮权限”，后端登录后返回用户的权限列表（比如{"permissions": ["order_view", "order_edit"]}）。

Vue3前端：权限动态控制

路由权限：用导航守卫（router.beforeEach），判断用户角色/权限是否能进某个路由，比如管理员才能进/admin-dashboard，普通用户跳转403页面。

按钮权限：自定义指令v-permission，按钮需要"order_edit"权限时，指令里检查Pinia存的用户权限列表——没有就隐藏按钮：

// 自定义指令
export const permissionDirective = {
  mounted(el, binding) {
    const { permission } = binding.value
    const userStore = useUserStore()
    if (!userStore.permissions.includes(permission)) {
      el.parentNode?.removeChild(el)
    }
  }
}
// 使用时
<el-button v-permission="{ permission: 'order_edit' }">编辑订单</el-button>

开发联调、部署上线，这些坑得绕开！

联调阶段：前后端协作要顺

前端跑npm run dev（比如地址http://localhost:8080），后端跑python manage.py runserver（http://localhost:8000），这时候注意两点：

axios的baseURL得配后端地址，比如axios.defaults.baseURL = 'http://localhost:8000/api/'。
跨域问题必须解决（前面讲的cors-headers），否则控制台一堆报错，请求发不出去。

部署阶段：前后端资源分治

让前端静态文件和后端API共存,常用方案是 Nginx代理+Django跑API：

前端打包托管：执行npm run build生成dist目录，用Nginx托管静态资源，Nginx配置示例：

server {
    listen 80;
    server_name your_domain.com;
    # 前端静态资源
    location / {
        root /path/to/frontend/dist;
        try_files $uri $uri/ /index.html;
    }
    # 后端API
    location /api/ {
        proxy_pass http://127.0.0.1:8000/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

后端生产部署：用Gunicorn或uWSGI跑服务（别用runserver，性能差），比如Gunicorn启动：
gunicorn your_project.wsgi:application -w 4 -b 127.0.0.1:8000（4个工作进程，绑定8000端口）。
细节兜底：生产环境关DEBUG=False，配好SECRET_KEY（用环境变量，别放代码里），数据库换成PostgreSQL/MySQL（别用sqlite）。