实战演练：Vue3+Django4全栈开发实践

PHP中文网 • 2025年3月6日 18:34:18 • 编程技术 • 阅读 1

实战演练：Vue3+Django4全栈开发实践

随着互联网的迅猛发展，前后端分离的开发模式已经成为现代web开发的主流。Vue和Django作为两个流行的开发框架，在前端和后端开发中扮演着重要的角色。本文将介绍如何通过使用Vue3和Django4进行全栈开发，并通过一个实际的示例来演示其实践过程。

一、项目规划

在开始开发之前，我们首先需要进行项目规划。我们将创建一个简单的任务管理系统，其中用户可以登录、创建任务、查看任务列表和更新任务的状态。该系统将使用Vue3作为前端框架，Django4作为后端框架，并使用API进行前后端的通信。

立即学习“前端免费学习笔记（深入）”；

二、前端开发

创建Vue3项目
首先，我们使用Vue CLI创建一个新的Vue3项目。在终端中执行以下命令：

vue create frontend

登录后复制

按照提示选择需要的配置项，并等待项目创建完成。

设置路由和页面组件
在src目录中创建router.js文件，并设置路由。我们将有三个页面：登录页面、任务列表页面和任务详情页面。在router.js中添加以下代码：

import { createRouter, createWebHistory } from 'vue-router'import Login from './views/Login.vue'import TaskList from './views/TaskList.vue'import TaskDetail from './views/TaskDetail.vue'const routes = [  { path: '/login', name: 'Login', component: Login  },  { path: '/taskList', name: 'TaskList', component: TaskList  },  { path: '/taskDetail/:id', name: 'TaskDetail', component: TaskDetail  }]const router = createRouter({  history: createWebHistory(process.env.BASE_URL),  routes})export default router

登录后复制创建页面组件
在src/views目录下创建Login.vue、TaskList.vue和TaskDetail.vue三个页面组件，并编写相关的HTML和逻辑。这里不再展示具体代码，读者可以根据需要自行创建相关组件。发送API请求
在src目录下创建api.js文件，用于发送API请求。这里我们使用Axios库来发送HTTP请求。具体的API请求代码可以根据后端API的设计来编写。集成Vuex
在src目录下创建store.js文件，并配置Vuex。我们将在store中存储用户信息和任务列表数据，并通过mutations和actions来修改和获取这些数据。

至此，我们的前端开发工作就完成了。可以通过执行npm run serve命令来启动开发服务器，并在浏览器中访问http://localhost:8080来查看页面。

三、后端开发

创建Django4项目
在终端中执行以下命令来创建一个新的Django4项目：

django-admin startproject backend

登录后复制

创建应用
进入项目目录，并执行以下命令来创建一个新的应用：

cd backendpython manage.py startapp tasks

登录后复制

设置数据库和模型
在项目的settings.py中配置数据库信息，并在tasks应用的models.py中创建所需的模型。例如，任务模型可以定义如下：

from django.db import modelsclass Task(models.Model): title = models.CharField(max_length=200) description = models.TextField() status = models.CharField(max_length=20) created_at = models.DateTimeField(auto_now_add=True) updated_at = models.DateTimeField(auto_now=True)

登录后复制创建API视图
在tasks应用的views.py中创建API视图，并定义相关的路由。使用Django的Rest Framework可以更便捷地创建API视图和路由。配置CORS
由于前端和后端分别运行在不同的域名或端口上，我们需要进行跨域资源共享（CORS）的配置。通过在settings.py中进行配置即可实现跨域请求。

四、前后端集成

运行后端服务器
在终端中执行以下命令来启动Django的开发服务器：