基于Django 5 + DRF + Vue 3.2 + Element Plus + JWT 的前后端分离权限系统教程

在现代应用开发中，前后端分离的架构越来越受欢迎。今天，我们将一起构建一个简易的权限系统，使用 Django 5 和 Django Rest Framework（DRF）作为后端，Vue 3.2 和 Element Plus 作为前端，再加上 JWT（Json Web Token）进行身份验证。这个项目将帮助你理解如何构建一个完整的前后端分离的系统。

一、项目初始化

1. 后端 - Django 5 + DRF

首先，我们需要创建一个新的 Django 项目并安装必要的库。

安装 Django 和 DRF

pip install django djangorestframework djangorestframework-simplejwt

创建 Django 项目

django-admin startproject myproject
cd myproject
django-admin startapp user

在 settings.py 中添加应用和中间件配置：

INSTALLED_APPS = [
    ...
    'rest_framework',
    'user',
]

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    ),
}

2. 用户模型和序列化

在 user/models.py 中，我们可以定义一个用户模型：

from django.contrib.auth.models import AbstractUser
from django.db import models

class CustomUser(AbstractUser):
    role = models.CharField(max_length=10, choices=[('admin', 'Admin'), ('user', 'User')], default='user')

然后，在 user/serializers.py 创建序列化器：

from rest_framework import serializers
from .models import CustomUser

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = CustomUser
        fields = ('id', 'username', 'password', 'role')

    def create(self, validated_data):
        user = CustomUser(
            username=validated_data['username'],
            role=validated_data['role']
        )
        user.set_password(validated_data['password'])
        user.save()
        return user

3. 视图和路由

在 user/views.py 中，我们实现注册和 JWT 认证的视图：

from rest_framework import generics
from rest_framework_simplejwt.views import TokenObtainPairView
from .serializers import UserSerializer

class RegisterView(generics.CreateAPIView):
    serializer_class = UserSerializer

class CustomTokenObtainPairView(TokenObtainPairView):
    # 自定义JWT响应体（如需要的话）
    pass

然后在 user/urls.py 中加入路由：

from django.urls import path
from .views import RegisterView, CustomTokenObtainPairView

urlpatterns = [
    path('register/', RegisterView.as_view(), name='register'),
    path('login/', CustomTokenObtainPairView.as_view(), name='login'),
]

在 myproject/urls.py 中引入 user.urls：

from django.urls import path, include

urlpatterns = [
    ...
    path('api/user/', include('user.urls')),
]

二、前端 - Vue 3.2 + Element Plus

1. 项目初始化

使用 Vue CLI 创建新项目并安装 Element Plus：

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
npm install element-plus axios

2. 创建注册和登录页面

在 src/components/ 目录下，创建两个组件 Register.vue 和 Login.vue：

Register.vue

<template>
  <el-form @submit.native.prevent="register">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" native-type="submit">注册</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      }
    };
  },
  methods: {
    async register() {
      const response = await axios.post('/api/user/register/', this.form);
      console.log(response.data);
    }
  }
};
</script>

Login.vue

<template>
  <el-form @submit.native.prevent="login">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" native-type="submit">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      }
    };
  },
  methods: {
    async login() {
      const response = await axios.post('/api/user/login/', this.form);
      localStorage.setItem('access_token', response.data.access);
      console.log(response.data);
    }
  }
};
</script>

3. 配置 Axios

设置 Axios 的基础 URL 和请求拦截：

// src/main.js
import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:8000/';

三、总结

通过上述步骤，我们已经构建了一个前后端分离的权限系统，用户可以进行注册和登录。后端用 Django 处理 API 请求并使用 JWT 进行认证，前端使用 Vue 3 和 Element Plus 来构建交互式用户界面。

这个系统可以扩展为更复杂的功能，例如角色权限管理、用户资料更新等。这种设计不仅提升了程序的可维护性和可扩展性，还让开发流程更加高效。希望这个简易教程对你有所帮助，未来可以基于此进行更深入的学习与实践！