Vue3与Django交互实战从零开始构建前后端分离应用掌握API设计数据通信状态管理及安全认证的完整流程

威震华夏关云长

引言

前后端分离是现代Web应用开发的主流架构模式，它将用户界面(UI)与业务逻辑、数据处理分离开来，使得前后端可以独立开发、测试和部署。Vue3作为当前流行的前端框架，以其响应式数据绑定、组件化开发和轻量级特性受到开发者青睐；而Django作为Python生态中成熟的Web框架，以其” batteries-included “的理念和强大的后台管理能力著称。本文将详细介绍如何从零开始使用Vue3和Django构建一个完整的前后端分离应用，涵盖API设计、数据通信、状态管理及安全认证等关键环节。

环境搭建

前端环境准备

首先，确保你的系统已安装Node.js（推荐版本14.x或更高）。然后，使用npm安装Vue CLI：

2. npm install -g @vue/cli

复制代码

检查Vue CLI版本：

2. vue --version

复制代码

后端环境准备

确保你的系统已安装Python（推荐版本3.8或更高）。然后，使用pip安装Django和Django REST framework：

2. pip install django djangorestframework djangorestframework-simplejwt django-cors-headers

复制代码

Django后端开发

项目创建与配置

创建Django项目：

2. django-admin startproject backend
3. cd backend

复制代码

创建一个应用：

2. python manage.py startapp api

复制代码

在backend/settings.py中，添加新创建的应用和必要的库到INSTALLED_APPS：

2. INSTALLED_APPS = [
3.     'django.contrib.admin',
4.     'django.contrib.auth',
5.     'django.contrib.contenttypes',
6.     'django.contrib.sessions',
7.     'django.contrib.messages',
8.     'django.contrib.staticfiles',
9.     'rest_framework',
10.     'rest_framework_simplejwt',
11.     'corsheaders',
12.     'api',
13. ]

复制代码

添加中间件以处理CORS：

2. MIDDLEWARE = [
3.     'corsheaders.middleware.CorsMiddleware',
4.     'django.middleware.security.SecurityMiddleware',
5.     'django.contrib.sessions.middleware.SessionMiddleware',
6.     'django.middleware.common.CommonMiddleware',
7.     'django.middleware.csrf.CsrfViewMiddleware',
8.     'django.contrib.auth.middleware.AuthenticationMiddleware',
9.     'django.contrib.messages.middleware.MessageMiddleware',
10.     'django.middleware.clickjacking.XFrameOptionsMiddleware',
11. ]

复制代码

配置CORS设置：

2. CORS_ALLOWED_ORIGINS = [
3.     "http://localhost:8080",
4.     "http://127.0.0.1:8080",
5. ]
7. CORS_ALLOW_CREDENTIALS = True

复制代码

配置REST framework和JWT认证：

2. REST_FRAMEWORK = {
3.     'DEFAULT_AUTHENTICATION_CLASSES': (
4.         'rest_framework_simplejwt.authentication.JWTAuthentication',
5.     ),
6.     'DEFAULT_PERMISSION_CLASSES': [
7.         'rest_framework.permissions.IsAuthenticated',
8.     ],
9. }
11. from datetime import timedelta
13. SIMPLE_JWT = {
14.     'ACCESS_TOKEN_LIFETIME': timedelta(minutes=60),
15.     'REFRESH_TOKEN_LIFETIME': timedelta(days=1),
16.     'ROTATE_REFRESH_TOKENS': False,
17.     'BLACKLIST_AFTER_ROTATION': True,
18.     'ALGORITHM': 'HS256',
19.     'SIGNING_KEY': 'your-signing-key',
20.     'VERIFYING_KEY': None,
21.     'AUTH_HEADER_TYPES': ('Bearer',),
22.     'USER_ID_FIELD': 'id',
23.     'USER_ID_CLAIM': 'user_id',
24.     'AUTH_TOKEN_CLASSES': ('rest_framework_simplejwt.tokens.AccessToken',),
25.     'TOKEN_TYPE_CLAIM': 'token_type',
26. }

复制代码

模型设计

在api/models.py中定义数据模型。假设我们正在构建一个简单的任务管理系统：

2. from django.db import models
3. from django.contrib.auth.models import User
5. class Task(models.Model):
6.     STATUS_CHOICES = (
7.         ('pending', 'Pending'),
8.         ('in_progress', 'In Progress'),
9.         ('completed', 'Completed'),
10.     )
11.    
12.     PRIORITY_CHOICES = (
13.         ('low', 'Low'),
14.         ('medium', 'Medium'),
15.         ('high', 'High'),
16.     )
17.    
18.     title = models.CharField(max_length=200)
19.     description = models.TextField(blank=True)
20.     status = models.CharField(max_length=20, choices=STATUS_CHOICES, default='pending')
21.     priority = models.CharField(max_length=10, choices=PRIORITY_CHOICES, default='medium')
22.     created_at = models.DateTimeField(auto_now_add=True)
23.     updated_at = models.DateTimeField(auto_now=True)
24.     due_date = models.DateField(null=True, blank=True)
25.     owner = models.ForeignKey(User, on_delete=models.CASCADE, related_name='tasks')
26.    
27.     def __str__(self):
28.         return self.title

复制代码

应用数据库迁移：

2. python manage.py makemigrations
3. python manage.py migrate

复制代码

序列化器

在api/serializers.py中创建序列化器：

2. from rest_framework import serializers
3. from django.contrib.auth.models import User
4. from .models import Task
6. class UserSerializer(serializers.ModelSerializer):
7.     class Meta:
8.         model = User
9.         fields = ('id', 'username', 'email')
11. class TaskSerializer(serializers.ModelSerializer):
12.     owner = UserSerializer(read_only=True)
13.    
14.     class Meta:
15.         model = Task
16.         fields = '__all__'

复制代码

视图和路由

在api/views.py中创建视图：

2. from rest_framework import viewsets, permissions, status
3. from rest_framework.decorators import action
4. from rest_framework.response import Response
5. from rest_framework_simplejwt.tokens import RefreshToken
6. from django.contrib.auth import authenticate
7. from .models import Task
8. from .serializers import TaskSerializer, UserSerializer
10. class TaskViewSet(viewsets.ModelViewSet):
11.     queryset = Task.objects.all()
12.     serializer_class = TaskSerializer
13.     permission_classes = [permissions.IsAuthenticated]
14.    
15.     def get_queryset(self):
16.         return Task.objects.filter(owner=self.request.user)
17.    
18.     def perform_create(self, serializer):
19.         serializer.save(owner=self.request.user)
21. class AuthViewSet(viewsets.ViewSet):
22.     permission_classes = [permissions.AllowAny]
23.    
24.     @action(detail=False, methods=['post'])
25.     def register(self, request):
26.         username = request.data.get('username')
27.         password = request.data.get('password')
28.         email = request.data.get('email', '')
29.         
30.         if not username or not password:
31.             return Response({'error': 'Username and password are required'},
32.                            status=status.HTTP_400_BAD_REQUEST)
33.         
34.         if User.objects.filter(username=username).exists():
35.             return Response({'error': 'Username already exists'},
36.                            status=status.HTTP_400_BAD_REQUEST)
37.         
38.         user = User.objects.create_user(username=username, password=password, email=email)
39.         refresh = RefreshToken.for_user(user)
40.         
41.         return Response({
42.             'user': UserSerializer(user).data,
43.             'tokens': {
44.                 'refresh': str(refresh),
45.                 'access': str(refresh.access_token),
46.             }
47.         }, status=status.HTTP_201_CREATED)
48.    
49.     @action(detail=False, methods=['post'])
50.     def login(self, request):
51.         username = request.data.get('username')
52.         password = request.data.get('password')
53.         
54.         user = authenticate(username=username, password=password)
55.         
56.         if user:
57.             refresh = RefreshToken.for_user(user)
58.             return Response({
59.                 'user': UserSerializer(user).data,
60.                 'tokens': {
61.                     'refresh': str(refresh),
62.                     'access': str(refresh.access_token),
63.                 }
64.             })
65.         
66.         return Response({'error': 'Invalid credentials'},
67.                        status=status.HTTP_401_UNAUTHORIZED)
68.    
69.     @action(detail=False, methods=['post'])
70.     def refresh(self, request):
71.         refresh_token = request.data.get('refresh')
72.         
73.         if not refresh_token:
74.             return Response({'error': 'Refresh token is required'},
75.                            status=status.HTTP_400_BAD_REQUEST)
76.         
77.         try:
78.             refresh = RefreshToken(refresh_token)
79.             access_token = str(refresh.access_token)
80.             return Response({
81.                 'access': access_token,
82.             })
83.         except Exception as e:
84.             return Response({'error': 'Invalid refresh token'},
85.                            status=status.HTTP_401_UNAUTHORIZED)

复制代码

在backend/urls.py中配置路由：

2. from django.contrib import admin
3. from django.urls import path, include
4. from rest_framework.routers import DefaultRouter
5. from api.views import TaskViewSet, AuthViewSet
7. router = DefaultRouter()
8. router.register(r'tasks', TaskViewSet, basename='task')
9. router.register(r'auth', AuthViewSet, basename='auth', basename_prefix='auth')
11. urlpatterns = [
12.     path('admin/', admin.site.urls),
13.     path('api/', include(router.urls)),
14. ]

复制代码

运行Django开发服务器：

2. python manage.py runserver

复制代码

Vue3前端开发

项目创建与配置

创建Vue3项目：

2. vue create frontend

复制代码

在创建过程中，选择Vue 3预设。进入项目目录：

2. cd frontend

复制代码

安装必要的依赖：

2. npm install axios pinia vue-router

复制代码

项目结构

创建以下目录结构：

2. frontend/
3. ├── public/
4. ├── src/
5. │   ├── assets/
6. │   ├── components/
7. │   ├── views/
8. │   ├── stores/
9. │   ├── router/
10. │   ├── api/
11. │   ├── App.vue
12. │   └── main.js

复制代码

API请求封装

在src/api/index.js中封装API请求：

2. import axios from 'axios';
4. const apiClient = axios.create({
5.   baseURL: 'http://localhost:8000/api',
6.   headers: {
7.     'Content-Type': 'application/json',
8.   },
9.   withCredentials: true,
10. });
12. // 请求拦截器
13. apiClient.interceptors.request.use(
14.   (config) => {
15.     const token = localStorage.getItem('access_token');
16.     if (token) {
17.       config.headers.Authorization = `Bearer ${token}`;
18.     }
19.     return config;
20.   },
21.   (error) => {
22.     return Promise.reject(error);
23.   }
24. );
26. // 响应拦截器
27. apiClient.interceptors.response.use(
28.   (response) => response,
29.   async (error) => {
30.     const originalRequest = error.config;
31.    
32.     // 如果是401错误且不是刷新令牌的请求
33.     if (error.response.status === 401 && !originalRequest._retry) {
34.       originalRequest._retry = true;
35.       
36.       try {
37.         const refreshToken = localStorage.getItem('refresh_token');
38.         const response = await apiClient.post('/auth/refresh/', {
39.           refresh: refreshToken,
40.         });
41.         
42.         const { access } = response.data;
43.         localStorage.setItem('access_token', access);
44.         
45.         // 更新原始请求的Authorization头
46.         originalRequest.headers.Authorization = `Bearer ${access}`;
47.         
48.         // 重新发送原始请求
49.         return apiClient(originalRequest);
50.       } catch (refreshError) {
51.         // 刷新令牌失败，清除本地存储并重定向到登录页
52.         localStorage.removeItem('access_token');
53.         localStorage.removeItem('refresh_token');
54.         window.location.href = '/login';
55.         return Promise.reject(refreshError);
56.       }
57.     }
58.    
59.     return Promise.reject(error);
60.   }
61. );
63. export default apiClient;

复制代码

在src/api/auth.js中创建认证相关的API函数：

2. import apiClient from './index';
4. export const authAPI = {
5.   register: (userData) => apiClient.post('/auth/register/', userData),
6.   login: (credentials) => apiClient.post('/auth/login/', credentials),
7.   refreshToken: () => apiClient.post('/auth/refresh/', {
8.     refresh: localStorage.getItem('refresh_token'),
9.   }),
10. };
12. export const taskAPI = {
13.   getAll: () => apiClient.get('/tasks/'),
14.   get: (id) => apiClient.get(`/tasks/${id}/`),
15.   create: (taskData) => apiClient.post('/tasks/', taskData),
16.   update: (id, taskData) => apiClient.put(`/tasks/${id}/`, taskData),
17.   delete: (id) => apiClient.delete(`/tasks/${id}/`),
18. };

复制代码

状态管理（Pinia）

在src/stores/auth.js中创建认证状态管理：

2. import { defineStore } from 'pinia';
3. import { authAPI } from '@/api/auth';
5. export const useAuthStore = defineStore('auth', {
6.   state: () => ({
7.     user: null,
8.     accessToken: localStorage.getItem('access_token') || null,
9.     refreshToken: localStorage.getItem('refresh_token') || null,
10.     isAuthenticated: !!localStorage.getItem('access_token'),
11.   }),
12.   
13.   getters: {
14.     getUser: (state) => state.user,
15.     isLoggedIn: (state) => state.isAuthenticated,
16.   },
17.   
18.   actions: {
19.     setAuth(user, tokens) {
20.       this.user = user;
21.       this.accessToken = tokens.access;
22.       this.refreshToken = tokens.refresh;
23.       this.isAuthenticated = true;
24.       
25.       localStorage.setItem('access_token', tokens.access);
26.       localStorage.setItem('refresh_token', tokens.refresh);
27.     },
28.    
29.     clearAuth() {
30.       this.user = null;
31.       this.accessToken = null;
32.       this.refreshToken = null;
33.       this.isAuthenticated = false;
34.       
35.       localStorage.removeItem('access_token');
36.       localStorage.removeItem('refresh_token');
37.     },
38.    
39.     async register(userData) {
40.       try {
41.         const response = await authAPI.register(userData);
42.         this.setAuth(response.data.user, response.data.tokens);
43.         return response;
44.       } catch (error) {
45.         throw error;
46.       }
47.     },
48.    
49.     async login(credentials) {
50.       try {
51.         const response = await authAPI.login(credentials);
52.         this.setAuth(response.data.user, response.data.tokens);
53.         return response;
54.       } catch (error) {
55.         throw error;
56.       }
57.     },
58.    
59.     async logout() {
60.       this.clearAuth();
61.     },
62.   },
63. });

复制代码

在src/stores/task.js中创建任务状态管理：

2. import { defineStore } from 'pinia';
3. import { taskAPI } from '@/api/task';
5. export const useTaskStore = defineStore('task', {
6.   state: () => ({
7.     tasks: [],
8.     currentTask: null,
9.     loading: false,
10.     error: null,
11.   }),
12.   
13.   getters: {
14.     getAllTasks: (state) => state.tasks,
15.     getTaskById: (state) => (id) => state.tasks.find(task => task.id === id),
16.     isLoading: (state) => state.loading,
17.     getError: (state) => state.error,
18.   },
19.   
20.   actions: {
21.     setTasks(tasks) {
22.       this.tasks = tasks;
23.     },
24.    
25.     addTask(task) {
26.       this.tasks.push(task);
27.     },
28.    
29.     updateTask(updatedTask) {
30.       const index = this.tasks.findIndex(task => task.id === updatedTask.id);
31.       if (index !== -1) {
32.         this.tasks[index] = updatedTask;
33.       }
34.     },
35.    
36.     removeTask(taskId) {
37.       this.tasks = this.tasks.filter(task => task.id !== taskId);
38.     },
39.    
40.     setLoading(loading) {
41.       this.loading = loading;
42.     },
43.    
44.     setError(error) {
45.       this.error = error;
46.     },
47.    
48.     async fetchTasks() {
49.       this.setLoading(true);
50.       this.setError(null);
51.       
52.       try {
53.         const response = await taskAPI.getAll();
54.         this.setTasks(response.data.results);
55.         return response;
56.       } catch (error) {
57.         this.setError(error.message || 'Failed to fetch tasks');
58.         throw error;
59.       } finally {
60.         this.setLoading(false);
61.       }
62.     },
63.    
64.     async fetchTask(id) {
65.       this.setLoading(true);
66.       this.setError(null);
67.       
68.       try {
69.         const response = await taskAPI.get(id);
70.         this.currentTask = response.data;
71.         return response;
72.       } catch (error) {
73.         this.setError(error.message || 'Failed to fetch task');
74.         throw error;
75.       } finally {
76.         this.setLoading(false);
77.       }
78.     },
79.    
80.     async createTask(taskData) {
81.       this.setLoading(true);
82.       this.setError(null);
83.       
84.       try {
85.         const response = await taskAPI.create(taskData);
86.         this.addTask(response.data);
87.         return response;
88.       } catch (error) {
89.         this.setError(error.message || 'Failed to create task');
90.         throw error;
91.       } finally {
92.         this.setLoading(false);
93.       }
94.     },
95.    
96.     async updateTask(id, taskData) {
97.       this.setLoading(true);
98.       this.setError(null);
99.       
100.       try {
101.         const response = await taskAPI.update(id, taskData);
102.         this.updateTask(response.data);
103.         return response;
104.       } catch (error) {
105.         this.setError(error.message || 'Failed to update task');
106.         throw error;
107.       } finally {
108.         this.setLoading(false);
109.       }
110.     },
111.    
112.     async deleteTask(id) {
113.       this.setLoading(true);
114.       this.setError(null);
115.       
116.       try {
117.         const response = await taskAPI.delete(id);
118.         this.removeTask(id);
119.         return response;
120.       } catch (error) {
121.         this.setError(error.message || 'Failed to delete task');
122.         throw error;
123.       } finally {
124.         this.setLoading(false);
125.       }
126.     },
127.   },
128. });

复制代码

路由管理

在src/router/index.js中配置路由：

2. import { createRouter, createWebHistory } from 'vue-router';
3. import { useAuthStore } from '@/stores/auth';
5. const routes = [
6.   {
7.     path: '/',
8.     name: 'Home',
9.     component: () => import('@/views/Home.vue'),
10.     meta: { requiresAuth: true },
11.   },
12.   {
13.     path: '/login',
14.     name: 'Login',
15.     component: () => import('@/views/Login.vue'),
16.     meta: { guest: true },
17.   },
18.   {
19.     path: '/register',
20.     name: 'Register',
21.     component: () => import('@/views/Register.vue'),
22.     meta: { guest: true },
23.   },
24.   {
25.     path: '/tasks',
26.     name: 'Tasks',
27.     component: () => import('@/views/Tasks.vue'),
28.     meta: { requiresAuth: true },
29.   },
30.   {
31.     path: '/tasks/:id',
32.     name: 'TaskDetail',
33.     component: () => import('@/views/TaskDetail.vue'),
34.     meta: { requiresAuth: true },
35.   },
36.   {
37.     path: '/tasks/create',
38.     name: 'CreateTask',
39.     component: () => import('@/views/CreateTask.vue'),
40.     meta: { requiresAuth: true },
41.   },
42.   {
43.     path: '/tasks/:id/edit',
44.     name: 'EditTask',
45.     component: () => import('@/views/EditTask.vue'),
46.     meta: { requiresAuth: true },
47.   },
48.   {
49.     path: '/:pathMatch(.*)*',
50.     name: 'NotFound',
51.     component: () => import('@/views/NotFound.vue'),
52.   },
53. ];
55. const router = createRouter({
56.   history: createWebHistory(),
57.   routes,
58. });
60. // 导航守卫
61. router.beforeEach((to, from, next) => {
62.   const authStore = useAuthStore();
63.   const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
64.   const isGuest = to.matched.some(record => record.meta.guest);
65.   
66.   if (requiresAuth && !authStore.isAuthenticated) {
67.     next('/login');
68.   } else if (isGuest && authStore.isAuthenticated) {
69.     next('/');
70.   } else {
71.     next();
72.   }
73. });
75. export default router;

复制代码

视图组件

在src/views/Login.vue中创建登录页面：

2. <template>
3.   <div class="login-container">
4.     <div class="login-form">
5.       <h1>Login</h1>
6.       <form @submit.prevent="handleLogin">
7.         <div class="form-group">
8.           <label for="username">Username</label>
9.           <input
10.             type="text"
11.             id="username"
12.             v-model="credentials.username"
13.             required
14.           />
15.         </div>
16.         <div class="form-group">
17.           <label for="password">Password</label>
18.           <input
19.             type="password"
20.             id="password"
21.             v-model="credentials.password"
22.             required
23.           />
24.         </div>
25.         <div v-if="error" class="error-message">{{ error }}</div>
26.         <button type="submit" :disabled="loading">
27.           {{ loading ? 'Logging in...' : 'Login' }}
28.         </button>
29.       </form>
30.       <p class="register-link">
31.         Don't have an account? <router-link to="/register">Register</router-link>
32.       </p>
33.     </div>
34.   </div>
35. </template>
37. <script>
38. import { ref } from 'vue';
39. import { useRouter } from 'vue-router';
40. import { useAuthStore } from '@/stores/auth';
42. export default {
43.   name: 'Login',
44.   setup() {
45.     const router = useRouter();
46.     const authStore = useAuthStore();
47.    
48.     const credentials = ref({
49.       username: '',
50.       password: '',
51.     });
52.    
53.     const loading = ref(false);
54.     const error = ref(null);
55.    
56.     const handleLogin = async () => {
57.       loading.value = true;
58.       error.value = null;
59.       
60.       try {
61.         await authStore.login(credentials.value);
62.         router.push('/');
63.       } catch (err) {
64.         error.value = err.response?.data?.error || 'Login failed';
65.       } finally {
66.         loading.value = false;
67.       }
68.     };
69.    
70.     return {
71.       credentials,
72.       loading,
73.       error,
74.       handleLogin,
75.     };
76.   },
77. };
78. </script>
80. <style scoped>
81. .login-container {
82.   display: flex;
83.   justify-content: center;
84.   align-items: center;
85.   min-height: 100vh;
86.   background-color: #f5f5f5;
87. }
89. .login-form {
90.   width: 100%;
91.   max-width: 400px;
92.   padding: 2rem;
93.   background-color: white;
94.   border-radius: 8px;
95.   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
96. }
98. h1 {
99.   text-align: center;
100.   margin-bottom: 1.5rem;
101. }
103. .form-group {
104.   margin-bottom: 1rem;
105. }
107. label {
108.   display: block;
109.   margin-bottom: 0.5rem;
110.   font-weight: bold;
111. }
113. input {
114.   width: 100%;
115.   padding: 0.75rem;
116.   border: 1px solid #ddd;
117.   border-radius: 4px;
118.   font-size: 1rem;
119. }
121. button {
122.   width: 100%;
123.   padding: 0.75rem;
124.   background-color: #4caf50;
125.   color: white;
126.   border: none;
127.   border-radius: 4px;
128.   font-size: 1rem;
129.   cursor: pointer;
130.   transition: background-color 0.3s;
131. }
133. button:hover {
134.   background-color: #45a049;
135. }
137. button:disabled {
138.   background-color: #cccccc;
139.   cursor: not-allowed;
140. }
142. .error-message {
143.   color: #f44336;
144.   margin-bottom: 1rem;
145.   text-align: center;
146. }
148. .register-link {
149.   text-align: center;
150.   margin-top: 1rem;
151. }
153. a {
154.   color: #2196f3;
155.   text-decoration: none;
156. }
158. a:hover {
159.   text-decoration: underline;
160. }
161. </style>

复制代码

在src/views/Tasks.vue中创建任务列表页面：

2. <template>
3.   <div class="tasks-container">
4.     <div class="tasks-header">
5.       <h1>Tasks</h1>
6.       <router-link to="/tasks/create" class="btn-create">Create Task</router-link>
7.     </div>
8.    
9.     <div v-if="loading" class="loading">Loading tasks...</div>
10.    
11.     <div v-else-if="error" class="error">{{ error }}</div>
12.    
13.     <div v-else-if="tasks.length === 0" class="empty-state">
14.       <p>No tasks found. Create your first task!</p>
15.       <router-link to="/tasks/create" class="btn-create">Create Task</router-link>
16.     </div>
17.    
18.     <div v-else class="tasks-list">
19.       <div v-for="task in tasks" :key="task.id" class="task-card">
20.         <div class="task-header">
21.           <h3>{{ task.title }}</h3>
22.           <span :class="['priority', task.priority]">{{ task.priority }}</span>
23.         </div>
24.         <p class="task-description">{{ task.description || 'No description' }}</p>
25.         <div class="task-meta">
26.           <span :class="['status', task.status]">{{ task.status }}</span>
27.           <span class="due-date" v-if="task.due_date">
28.             Due: {{ formatDate(task.due_date) }}
29.           </span>
30.         </div>
31.         <div class="task-actions">
32.           <router-link :to="`/tasks/${task.id}`" class="btn-view">View</router-link>
33.           <router-link :to="`/tasks/${task.id}/edit`" class="btn-edit">Edit</router-link>
34.           <button @click="confirmDelete(task)" class="btn-delete">Delete</button>
35.         </div>
36.       </div>
37.     </div>
38.    
39.     <div v-if="showDeleteModal" class="modal">
40.       <div class="modal-content">
41.         <h3>Confirm Delete</h3>
42.         <p>Are you sure you want to delete "{{ taskToDelete?.title }}"?</p>
43.         <div class="modal-actions">
44.           <button @click="cancelDelete" class="btn-cancel">Cancel</button>
45.           <button @click="deleteTask" class="btn-confirm" :disabled="deleting">
46.             {{ deleting ? 'Deleting...' : 'Delete' }}
47.           </button>
48.         </div>
49.       </div>
50.     </div>
51.   </div>
52. </template>
54. <script>
55. import { ref, onMounted } from 'vue';
56. import { useRouter } from 'vue-router';
57. import { useTaskStore } from '@/stores/task';
59. export default {
60.   name: 'Tasks',
61.   setup() {
62.     const router = useRouter();
63.     const taskStore = useTaskStore();
64.    
65.     const tasks = ref([]);
66.     const loading = ref(false);
67.     const error = ref(null);
68.    
69.     const showDeleteModal = ref(false);
70.     const taskToDelete = ref(null);
71.     const deleting = ref(false);
72.    
73.     const loadTasks = async () => {
74.       loading.value = true;
75.       error.value = null;
76.       
77.       try {
78.         await taskStore.fetchTasks();
79.         tasks.value = taskStore.getAllTasks;
80.       } catch (err) {
81.         error.value = err.message || 'Failed to load tasks';
82.       } finally {
83.         loading.value = false;
84.       }
85.     };
86.    
87.     const formatDate = (dateString) => {
88.       const options = { year: 'numeric', month: 'short', day: 'numeric' };
89.       return new Date(dateString).toLocaleDateString(undefined, options);
90.     };
91.    
92.     const confirmDelete = (task) => {
93.       taskToDelete.value = task;
94.       showDeleteModal.value = true;
95.     };
96.    
97.     const cancelDelete = () => {
98.       showDeleteModal.value = false;
99.       taskToDelete.value = null;
100.     };
101.    
102.     const deleteTask = async () => {
103.       if (!taskToDelete.value) return;
104.       
105.       deleting.value = true;
106.       
107.       try {
108.         await taskStore.deleteTask(taskToDelete.value.id);
109.         tasks.value = taskStore.getAllTasks;
110.         showDeleteModal.value = false;
111.         taskToDelete.value = null;
112.       } catch (err) {
113.         error.value = err.message || 'Failed to delete task';
114.       } finally {
115.         deleting.value = false;
116.       }
117.     };
118.    
119.     onMounted(() => {
120.       loadTasks();
121.     });
122.    
123.     return {
124.       tasks,
125.       loading,
126.       error,
127.       showDeleteModal,
128.       taskToDelete,
129.       deleting,
130.       formatDate,
131.       confirmDelete,
132.       cancelDelete,
133.       deleteTask,
134.     };
135.   },
136. };
137. </script>
139. <style scoped>
140. .tasks-container {
141.   max-width: 1200px;
142.   margin: 0 auto;
143.   padding: 2rem;
144. }
146. .tasks-header {
147.   display: flex;
148.   justify-content: space-between;
149.   align-items: center;
150.   margin-bottom: 2rem;
151. }
153. .btn-create {
154.   display: inline-block;
155.   padding: 0.75rem 1.5rem;
156.   background-color: #4caf50;
157.   color: white;
158.   text-decoration: none;
159.   border-radius: 4px;
160.   font-weight: bold;
161.   transition: background-color 0.3s;
162. }
164. .btn-create:hover {
165.   background-color: #45a049;
166. }
168. .loading, .error, .empty-state {
169.   text-align: center;
170.   padding: 2rem;
171.   font-size: 1.2rem;
172. }
174. .error {
175.   color: #f44336;
176. }
178. .tasks-list {
179.   display: grid;
180.   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
181.   gap: 1.5rem;
182. }
184. .task-card {
185.   background-color: white;
186.   border-radius: 8px;
187.   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
188.   padding: 1.5rem;
189.   display: flex;
190.   flex-direction: column;
191. }
193. .task-header {
194.   display: flex;
195.   justify-content: space-between;
196.   align-items: center;
197.   margin-bottom: 1rem;
198. }
200. .task-header h3 {
201.   margin: 0;
202.   font-size: 1.25rem;
203. }
205. .priority {
206.   padding: 0.25rem 0.5rem;
207.   border-radius: 4px;
208.   font-size: 0.75rem;
209.   font-weight: bold;
210.   text-transform: uppercase;
211. }
213. .priority.low {
214.   background-color: #e8f5e9;
215.   color: #2e7d32;
216. }
218. .priority.medium {
219.   background-color: #fff8e1;
220.   color: #ff8f00;
221. }
223. .priority.high {
224.   background-color: #ffebee;
225.   color: #c62828;
226. }
228. .task-description {
229.   color: #666;
230.   margin-bottom: 1rem;
231.   flex-grow: 1;
232. }
234. .task-meta {
235.   display: flex;
236.   justify-content: space-between;
237.   margin-bottom: 1rem;
238.   font-size: 0.875rem;
239. }
241. .status {
242.   padding: 0.25rem 0.5rem;
243.   border-radius: 4px;
244.   font-weight: bold;
245.   text-transform: capitalize;
246. }
248. .status.pending {
249.   background-color: #e3f2fd;
250.   color: #1565c0;
251. }
253. .status.in_progress {
254.   background-color: #fff8e1;
255.   color: #ff8f00;
256. }
258. .status.completed {
259.   background-color: #e8f5e9;
260.   color: #2e7d32;
261. }
263. .due-date {
264.   color: #666;
265. }
267. .task-actions {
268.   display: flex;
269.   gap: 0.5rem;
270. }
272. .btn-view, .btn-edit {
273.   display: inline-block;
274.   padding: 0.5rem 1rem;
275.   text-decoration: none;
276.   border-radius: 4px;
277.   font-size: 0.875rem;
278.   transition: background-color 0.3s;
279. }
281. .btn-view {
282.   background-color: #e3f2fd;
283.   color: #1565c0;
284. }
286. .btn-view:hover {
287.   background-color: #bbdefb;
288. }
290. .btn-edit {
291.   background-color: #fff8e1;
292.   color: #ff8f00;
293. }
295. .btn-edit:hover {
296.   background-color: #ffecb3;
297. }
299. .btn-delete {
300.   padding: 0.5rem 1rem;
301.   background-color: #ffebee;
302.   color: #c62828;
303.   border: none;
304.   border-radius: 4px;
305.   font-size: 0.875rem;
306.   cursor: pointer;
307.   transition: background-color 0.3s;
308. }
310. .btn-delete:hover {
311.   background-color: #ffcdd2;
312. }
314. .btn-delete:disabled {
315.   background-color: #f5f5f5;
316.   color: #999;
317.   cursor: not-allowed;
318. }
320. .modal {
321.   position: fixed;
322.   top: 0;
323.   left: 0;
324.   right: 0;
325.   bottom: 0;
326.   background-color: rgba(0, 0, 0, 0.5);
327.   display: flex;
328.   justify-content: center;
329.   align-items: center;
330.   z-index: 1000;
331. }
333. .modal-content {
334.   background-color: white;
335.   padding: 2rem;
336.   border-radius: 8px;
337.   max-width: 500px;
338.   width: 100%;
339. }
341. .modal-content h3 {
342.   margin-top: 0;
343.   margin-bottom: 1rem;
344. }
346. .modal-actions {
347.   display: flex;
348.   justify-content: flex-end;
349.   gap: 1rem;
350.   margin-top: 1.5rem;
351. }
353. .btn-cancel, .btn-confirm {
354.   padding: 0.75rem 1.5rem;
355.   border: none;
356.   border-radius: 4px;
357.   font-weight: bold;
358.   cursor: pointer;
359.   transition: background-color 0.3s;
360. }
362. .btn-cancel {
363.   background-color: #f5f5f5;
364.   color: #333;
365. }
367. .btn-cancel:hover {
368.   background-color: #e0e0e0;
369. }
371. .btn-confirm {
372.   background-color: #f44336;
373.   color: white;
374. }
376. .btn-confirm:hover {
377.   background-color: #d32f2f;
378. }
380. .btn-confirm:disabled {
381.   background-color: #ffcdd2;
382.   color: white;
383.   cursor: not-allowed;
384. }
385. </style>

复制代码

在src/views/CreateTask.vue中创建任务创建页面：

2. <template>
3.   <div class="create-task-container">
4.     <h1>Create Task</h1>
5.     <form @submit.prevent="handleSubmit" class="task-form">
6.       <div class="form-group">
7.         <label for="title">Title *</label>
8.         <input
9.           type="text"
10.           id="title"
11.           v-model="task.title"
12.           required
13.         />
14.       </div>
15.       
16.       <div class="form-group">
17.         <label for="description">Description</label>
18.         <textarea
19.           id="description"
20.           v-model="task.description"
21.           rows="4"
22.         ></textarea>
23.       </div>
24.       
25.       <div class="form-group">
26.         <label for="status">Status</label>
27.         <select id="status" v-model="task.status">
28.           <option value="pending">Pending</option>
29.           <option value="in_progress">In Progress</option>
30.           <option value="completed">Completed</option>
31.         </select>
32.       </div>
33.       
34.       <div class="form-group">
35.         <label for="priority">Priority</label>
36.         <select id="priority" v-model="task.priority">
37.           <option value="low">Low</option>
38.           <option value="medium">Medium</option>
39.           <option value="high">High</option>
40.         </select>
41.       </div>
42.       
43.       <div class="form-group">
44.         <label for="due_date">Due Date</label>
45.         <input
46.           type="date"
47.           id="due_date"
48.           v-model="task.due_date"
49.         />
50.       </div>
51.       
52.       <div v-if="error" class="error-message">{{ error }}</div>
53.       
54.       <div class="form-actions">
55.         <button type="button" @click="goBack" class="btn-cancel">Cancel</button>
56.         <button type="submit" class="btn-submit" :disabled="loading">
57.           {{ loading ? 'Creating...' : 'Create Task' }}
58.         </button>
59.       </div>
60.     </form>
61.   </div>
62. </template>
64. <script>
65. import { ref, reactive } from 'vue';
66. import { useRouter } from 'vue-router';
67. import { useTaskStore } from '@/stores/task';
69. export default {
70.   name: 'CreateTask',
71.   setup() {
72.     const router = useRouter();
73.     const taskStore = useTaskStore();
74.    
75.     const task = reactive({
76.       title: '',
77.       description: '',
78.       status: 'pending',
79.       priority: 'medium',
80.       due_date: '',
81.     });
82.    
83.     const loading = ref(false);
84.     const error = ref(null);
85.    
86.     const handleSubmit = async () => {
87.       loading.value = true;
88.       error.value = null;
89.       
90.       try {
91.         await taskStore.createTask(task);
92.         router.push('/tasks');
93.       } catch (err) {
94.         error.value = err.message || 'Failed to create task';
95.       } finally {
96.         loading.value = false;
97.       }
98.     };
99.    
100.     const goBack = () => {
101.       router.push('/tasks');
102.     };
103.    
104.     return {
105.       task,
106.       loading,
107.       error,
108.       handleSubmit,
109.       goBack,
110.     };
111.   },
112. };
113. </script>
115. <style scoped>
116. .create-task-container {
117.   max-width: 800px;
118.   margin: 0 auto;
119.   padding: 2rem;
120. }
122. h1 {
123.   margin-bottom: 2rem;
124. }
126. .task-form {
127.   background-color: white;
128.   padding: 2rem;
129.   border-radius: 8px;
130.   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
131. }
133. .form-group {
134.   margin-bottom: 1.5rem;
135. }
137. label {
138.   display: block;
139.   margin-bottom: 0.5rem;
140.   font-weight: bold;
141. }
143. input[type="text"],
144. input[type="date"],
145. textarea,
146. select {
147.   width: 100%;
148.   padding: 0.75rem;
149.   border: 1px solid #ddd;
150.   border-radius: 4px;
151.   font-size: 1rem;
152. }
154. textarea {
155.   resize: vertical;
156. }
158. .error-message {
159.   color: #f44336;
160.   margin-bottom: 1rem;
161. }
163. .form-actions {
164.   display: flex;
165.   justify-content: flex-end;
166.   gap: 1rem;
167. }
169. .btn-cancel, .btn-submit {
170.   padding: 0.75rem 1.5rem;
171.   border: none;
172.   border-radius: 4px;
173.   font-weight: bold;
174.   cursor: pointer;
175.   transition: background-color 0.3s;
176. }
178. .btn-cancel {
179.   background-color: #f5f5f5;
180.   color: #333;
181. }
183. .btn-cancel:hover {
184.   background-color: #e0e0e0;
185. }
187. .btn-submit {
188.   background-color: #4caf50;
189.   color: white;
190. }
192. .btn-submit:hover {
193.   background-color: #45a049;
194. }
196. .btn-submit:disabled {
197.   background-color: #cccccc;
198.   cursor: not-allowed;
199. }
200. </style>

复制代码

主应用文件

在src/App.vue中：

2. <template>
3.   <div id="app">
4.     <nav class="navbar" v-if="authStore.isAuthenticated">
5.       <div class="nav-container">
6.         <router-link to="/" class="nav-logo">Task Manager</router-link>
7.         <div class="nav-menu">
8.           <router-link to="/" class="nav-link">Home</router-link>
9.           <router-link to="/tasks" class="nav-link">Tasks</router-link>
10.           <a @click="handleLogout" class="nav-link logout">Logout</a>
11.         </div>
12.       </div>
13.     </nav>
14.    
15.     <main class="main-content">
16.       <router-view />
17.     </main>
18.    
19.     <footer class="footer">
20.       <p>&copy; {{ currentYear }} Task Manager. All rights reserved.</p>
21.     </footer>
22.   </div>
23. </template>
25. <script>
26. import { computed } from 'vue';
27. import { useRouter } from 'vue-router';
28. import { useAuthStore } from '@/stores/auth';
30. export default {
31.   name: 'App',
32.   setup() {
33.     const router = useRouter();
34.     const authStore = useAuthStore();
35.    
36.     const currentYear = computed(() => new Date().getFullYear());
37.    
38.     const handleLogout = async () => {
39.       await authStore.logout();
40.       router.push('/login');
41.     };
42.    
43.     return {
44.       authStore,
45.       currentYear,
46.       handleLogout,
47.     };
48.   },
49. };
50. </script>
52. <style>
53. * {
54.   margin: 0;
55.   padding: 0;
56.   box-sizing: border-box;
57. }
59. body {
60.   font-family: 'Arial', sans-serif;
61.   line-height: 1.6;
62.   color: #333;
63.   background-color: #f5f5f5;
64. }
66. #app {
67.   display: flex;
68.   flex-direction: column;
69.   min-height: 100vh;
70. }
72. .navbar {
73.   background-color: #2c3e50;
74.   color: white;
75.   padding: 1rem 0;
76.   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
77. }
79. .nav-container {
80.   max-width: 1200px;
81.   margin: 0 auto;
82.   padding: 0 2rem;
83.   display: flex;
84.   justify-content: space-between;
85.   align-items: center;
86. }
88. .nav-logo {
89.   font-size: 1.5rem;
90.   font-weight: bold;
91.   color: white;
92.   text-decoration: none;
93. }
95. .nav-menu {
96.   display: flex;
97.   gap: 1.5rem;
98. }
100. .nav-link {
101.   color: white;
102.   text-decoration: none;
103.   font-weight: 500;
104.   transition: color 0.3s;
105. }
107. .nav-link:hover {
108.   color: #3498db;
109. }
111. .logout {
112.   cursor: pointer;
113. }
115. .main-content {
116.   flex: 1;
117.   padding: 2rem 0;
118. }
120. .footer {
121.   background-color: #2c3e50;
122.   color: white;
123.   text-align: center;
124.   padding: 1rem 0;
125.   margin-top: auto;
126. }
127. </style>

复制代码

在src/main.js中：

2. import { createApp } from 'vue';
3. import { createPinia } from 'pinia';
4. import App from './App.vue';
5. import router from './router';
7. const app = createApp(App);
9. app.use(createPinia());
10. app.use(router);
12. app.mount('#app');

复制代码

前后端交互实战

用户认证流程

我们已经实现了完整的用户认证流程，包括注册、登录和令牌刷新。以下是认证流程的工作原理：

1. 注册：用户提交注册表单后，前端将用户数据发送到Django的/api/auth/register/端点。Django创建新用户并返回访问令牌和刷新令牌。前端将这些令牌存储在localStorage中，并更新Pinia store中的认证状态。
2. 登录：用户提交登录表单后，前端将凭据发送到Django的/api/auth/login/端点。Django验证凭据并返回访问令牌和刷新令牌。前端同样将这些令牌存储在localStorage中，并更新认证状态。
3. 令牌刷新：访问令牌通常有较短的过期时间（在我们的示例中为60分钟），而刷新令牌有较长的过期时间（1天）。当访问令牌过期时，前端会自动使用刷新令牌请求新的访问令牌。如果刷新令牌也过期或无效，用户将被重定向到登录页面。
4. 请求拦截：所有API请求都会通过axios拦截器自动添加Authorization头，包含访问令牌。如果请求返回401未授权错误，拦截器会尝试使用刷新令牌获取新的访问令牌，然后重新发送原始请求。
5. 路由守卫：Vue Router的导航守卫检查用户是否已认证，并根据路由的meta信息决定是否允许访问需要认证的页面或重定向到登录页面。

注册：用户提交注册表单后，前端将用户数据发送到Django的/api/auth/register/端点。Django创建新用户并返回访问令牌和刷新令牌。前端将这些令牌存储在localStorage中，并更新Pinia store中的认证状态。

登录：用户提交登录表单后，前端将凭据发送到Django的/api/auth/login/端点。Django验证凭据并返回访问令牌和刷新令牌。前端同样将这些令牌存储在localStorage中，并更新认证状态。

令牌刷新：访问令牌通常有较短的过期时间（在我们的示例中为60分钟），而刷新令牌有较长的过期时间（1天）。当访问令牌过期时，前端会自动使用刷新令牌请求新的访问令牌。如果刷新令牌也过期或无效，用户将被重定向到登录页面。

请求拦截：所有API请求都会通过axios拦截器自动添加Authorization头，包含访问令牌。如果请求返回401未授权错误，拦截器会尝试使用刷新令牌获取新的访问令牌，然后重新发送原始请求。

路由守卫：Vue Router的导航守卫检查用户是否已认证，并根据路由的meta信息决定是否允许访问需要认证的页面或重定向到登录页面。

CRUD操作示例

我们的任务管理系统实现了完整的CRUD（创建、读取、更新、删除）操作：

1. 创建任务：用户可以通过”Create Task”页面创建新任务。表单数据被发送到Django的/api/tasks/端点，Django创建新任务并返回任务数据。前端将新任务添加到任务列表中。
2. 读取任务：任务列表页面从Django的/api/tasks/端点获取所有任务。用户可以点击任务查看详细信息，这会从/api/tasks/{id}/端点获取特定任务的数据。
3. 更新任务：用户可以通过”Edit Task”页面编辑现有任务。更新后的数据被发送到Django的/api/tasks/{id}/端点，Django更新任务并返回更新后的数据。前端更新任务列表中的相应任务。
4. 删除任务：用户可以删除任务，这会向Django的/api/tasks/{id}/端点发送DELETE请求。Django删除任务并返回成功响应。前端从任务列表中移除已删除的任务。

创建任务：用户可以通过”Create Task”页面创建新任务。表单数据被发送到Django的/api/tasks/端点，Django创建新任务并返回任务数据。前端将新任务添加到任务列表中。

读取任务：任务列表页面从Django的/api/tasks/端点获取所有任务。用户可以点击任务查看详细信息，这会从/api/tasks/{id}/端点获取特定任务的数据。

更新任务：用户可以通过”Edit Task”页面编辑现有任务。更新后的数据被发送到Django的/api/tasks/{id}/端点，Django更新任务并返回更新后的数据。前端更新任务列表中的相应任务。

删除任务：用户可以删除任务，这会向Django的/api/tasks/{id}/端点发送DELETE请求。Django删除任务并返回成功响应。前端从任务列表中移除已删除的任务。

数据状态同步

我们的应用使用Pinia进行状态管理，确保前后端数据同步：

1. 任务状态：useTaskStore管理所有任务的状态，包括任务列表、当前任务、加载状态和错误信息。当执行CRUD操作时，store会自动更新，确保UI与后端数据保持同步。
2. 认证状态：useAuthStore管理用户认证状态，包括用户信息、访问令牌、刷新令牌和认证状态。当用户登录或注销时，store会更新，并相应地更新localStorage和UI。
3. 响应式更新：由于Pinia的响应式特性，当store中的状态发生变化时，所有依赖这些状态的组件都会自动更新，确保UI始终反映最新的数据状态。
4. 错误处理：store中的错误处理机制确保当API请求失败时，错误信息能够正确显示给用户，同时不会破坏应用的状态。

任务状态：useTaskStore管理所有任务的状态，包括任务列表、当前任务、加载状态和错误信息。当执行CRUD操作时，store会自动更新，确保UI与后端数据保持同步。

认证状态：useAuthStore管理用户认证状态，包括用户信息、访问令牌、刷新令牌和认证状态。当用户登录或注销时，store会更新，并相应地更新localStorage和UI。

响应式更新：由于Pinia的响应式特性，当store中的状态发生变化时，所有依赖这些状态的组件都会自动更新，确保UI始终反映最新的数据状态。

错误处理：store中的错误处理机制确保当API请求失败时，错误信息能够正确显示给用户，同时不会破坏应用的状态。

安全最佳实践

在构建前后端分离应用时，安全性是至关重要的。以下是我们实现的一些安全最佳实践：

后端安全措施

1. JWT认证：使用JSON Web Tokens (JWT)进行用户认证，而不是传统的会话认证。这使得我们的API可以无状态地工作，更适合前后端分离的架构。
2. CORS配置：正确配置跨域资源共享(CORS)，只允许来自我们前端域名的请求，防止跨站请求伪造(CSRF)攻击。
3. 令牌过期：设置合理的令牌过期时间，访问令牌设置为60分钟，刷新令牌设置为1天，以减少令牌被滥用的风险。
4. HTTPS：在生产环境中，确保使用HTTPS协议加密所有通信，防止中间人攻击。
5. 数据验证：在Django中使用序列化器进行数据验证，确保所有输入数据都符合预期格式，防止注入攻击。
6. 权限控制：使用Django REST framework的权限系统，确保用户只能访问和修改自己的任务数据。

JWT认证：使用JSON Web Tokens (JWT)进行用户认证，而不是传统的会话认证。这使得我们的API可以无状态地工作，更适合前后端分离的架构。

CORS配置：正确配置跨域资源共享(CORS)，只允许来自我们前端域名的请求，防止跨站请求伪造(CSRF)攻击。

令牌过期：设置合理的令牌过期时间，访问令牌设置为60分钟，刷新令牌设置为1天，以减少令牌被滥用的风险。

HTTPS：在生产环境中，确保使用HTTPS协议加密所有通信，防止中间人攻击。

数据验证：在Django中使用序列化器进行数据验证，确保所有输入数据都符合预期格式，防止注入攻击。

权限控制：使用Django REST framework的权限系统，确保用户只能访问和修改自己的任务数据。

前端安全措施

1. 令牌存储：将JWT令牌存储在localStorage中，而不是cookie中，以防止跨站脚本攻击(XSS)窃取令牌。注意：这种方法也有其自身的安全考虑，在生产环境中可能需要更安全的解决方案，如使用HttpOnly cookie。
2. 路由守卫：使用Vue Router的导航守卫保护需要认证的路由，防止未认证用户访问受限页面。
3. 请求拦截：使用axios拦截器自动添加认证头，确保所有API请求都包含有效的访问令牌。
4. 输入验证：在前端表单中进行基本的输入验证，提供即时反馈，但记住前端验证不能替代后端验证。
5. 错误处理：妥善处理API错误，避免在UI中暴露敏感信息。

令牌存储：将JWT令牌存储在localStorage中，而不是cookie中，以防止跨站脚本攻击(XSS)窃取令牌。注意：这种方法也有其自身的安全考虑，在生产环境中可能需要更安全的解决方案，如使用HttpOnly cookie。

路由守卫：使用Vue Router的导航守卫保护需要认证的路由，防止未认证用户访问受限页面。

请求拦截：使用axios拦截器自动添加认证头，确保所有API请求都包含有效的访问令牌。

输入验证：在前端表单中进行基本的输入验证，提供即时反馈，但记住前端验证不能替代后端验证。

错误处理：妥善处理API错误，避免在UI中暴露敏感信息。

部署考虑

虽然本文主要关注开发过程，但了解部署考虑也很重要：

后端部署

1. 生产环境设置：在Django的settings.py中设置DEBUG = False，并配置ALLOWED_HOSTS。
2. 数据库：使用生产级数据库如PostgreSQL或MySQL，而不是开发用的SQLite。
3. 静态文件：配置静态文件服务，使用WhiteNoise或类似服务，或使用CDN。
4. WSGI服务器：使用Gunicorn或uWSGI作为应用服务器，而不是Django的开发服务器。
5. 反向代理：使用Nginx或Apache作为反向代理，处理静态文件、SSL终止和请求转发。

生产环境设置：在Django的settings.py中设置DEBUG = False，并配置ALLOWED_HOSTS。

数据库：使用生产级数据库如PostgreSQL或MySQL，而不是开发用的SQLite。

静态文件：配置静态文件服务，使用WhiteNoise或类似服务，或使用CDN。

WSGI服务器：使用Gunicorn或uWSGI作为应用服务器，而不是Django的开发服务器。

反向代理：使用Nginx或Apache作为反向代理，处理静态文件、SSL终止和请求转发。

前端部署

1. 构建优化：使用Vue CLI的构建命令生成优化后的生产版本代码：

2. npm run build

复制代码

1. 静态文件服务：将构建后的静态文件部署到Web服务器或CDN。
2. 环境变量：使用环境变量配置API基础URL等设置，避免硬编码。
3. 缓存策略：配置适当的缓存策略，平衡性能和更新需求。

静态文件服务：将构建后的静态文件部署到Web服务器或CDN。

环境变量：使用环境变量配置API基础URL等设置，避免硬编码。

缓存策略：配置适当的缓存策略，平衡性能和更新需求。

CI/CD

考虑设置持续集成/持续部署(CI/CD)流程，自动化测试和部署过程，确保代码质量和部署可靠性。

总结与展望

本文详细介绍了如何使用Vue3和Django构建一个完整的前后端分离应用，涵盖了从环境搭建、API设计、数据通信、状态管理到安全认证的完整流程。通过这个实战项目，我们学习了：

1. Django REST framework的使用，包括序列化器、视图集和路由器的配置。
2. JWT认证的实现，包括令牌生成、验证和刷新。
3. Vue3组件化开发，使用Composition API构建响应式UI。
4. Pinia状态管理，实现前后端数据同步。
5. Vue Router路由管理，包括导航守卫和路由参数。
6. Axios封装，实现请求拦截和错误处理。
7. 前后端交互的最佳实践，包括CORS配置和安全考虑。

这个项目可以作为更复杂应用的基础，你可以根据需要扩展功能，例如：

1. 添加实时通知功能，使用WebSocket或Server-Sent Events。
2. 实现更复杂的权限系统，如基于角色的访问控制。
3. 添加文件上传功能，允许用户为任务添加附件。
4. 实现任务搜索和过滤功能。
5. 添加数据可视化，使用图表库展示任务统计信息。
6. 实现国际化支持，使应用支持多语言。

随着Web技术的不断发展，前后端分离架构将继续演进，新的工具和框架也会不断涌现。但无论技术如何变化，理解基本原理和最佳实践将帮助你构建更安全、更可靠、更易维护的Web应用。

希望本文能为你在Vue3和Django前后端分离开发之旅中提供有价值的指导和参考。祝你编码愉快！

版权声明

1、转载或引用本网站内容(Vue3与Django交互实战从零开始构建前后端分离应用掌握API设计数据通信状态管理及安全认证的完整流程)须注明原网址及作者(威震华夏关云长)，并标明本网站网址(https://www.pixtech.cc/)。

2、对于不当转载或引用本网站内容而引起的民事纷争、行政处理或其他损失，本网站不承担责任。

3、对不遵守本声明或其他违法、恶意使用本网站内容者，本网站保留追究其法律责任的权利。

本文地址: https://www.pixtech.cc/thread-36785-1-1.html