共计 3472 个字符，预计需要花费 9 分钟才能阅读完成。
目录
一、Django+VUE 前后端分离的意义
二、环境配置（前提条件）
三、创建项目
3.1 创建 Django 项目
3.2 创建 VUE 项目
四、前后端分离 启动项目
4.1 VUE 配置
4.1.1 App.vue 配置
4.1.2 main.js 配置
4.1.3 IndexPage.vue
4.1.4 index.js 配置
4.2 Django 配置
4.2.2 settings.py 配置（解决跨域请求问题）
4.3 views.py
4.4 urls.py
4.3 启动前后端
五、说明
一、Django+VUE 前后端分离的意义
前后端分离 是一种现代 Web 开发的架构设计模式，其中前端和后端的代码分别独立运行并通过 API 进行通信。这种架构的主要好处包括：
- 开发效率提高：前端和后端的开发可以并行进行，前后端团队能够独立开发和测试，减少开发周期。
- 技术栈的独立性：前后端可以选择不同的技术栈，前端可以使用现代化的框架如 Vue.js，React，Angular 等，而后端则可以使用 Django、Flask 等不同的框架。
- 可维护性和扩展性：前后端代码解耦，维护和扩展变得更加容易，前端和后端的更新和升级可以独立进行。
- 用户体验提升：前端页面由 Vue.js 动态渲染，用户体验更流畅，交互性更强。
二、环境配置（前提条件）
在开始之前，确保你已经安装了以下工具：
- Python (建议安装 Django 框架)
- Node.js 和 npm (用于 Vue.js 的安装和管理)
- Django (使用
pip install django安装) - Vue CLI (使用 npm install -g @vue/cli 安装)
关于 Node.js 和 npm 的安装，以及 VUE 的环境配置在我的另一篇博客中有详细的介绍，此处不做说明。
三、创建项目
3.1 创建 Django 项目
选择一个位置，建立一个新文件夹，打开 cmd，进入到此文件夹中，输入以下命令行，创建后端 Django 项目，然后进入此创建的文件夹中
django-admin startproject backend
cd backend
运行 Django 服务器，进入此网页，保证项目正常运行
python manage.py runserver
3.2 创建 VUE 项目
1. 打开一个新终端，在 ad_test 文件夹下，使用 VUE CLI 创建一个 VUE 项目：
vue create frontend
cd frontend
npm run build
点击链接，能够成功打开 VUE 界面，就是成功创建了项目
四、前后端分离 启动项目
打开两个 VSCode，分别打开 backend 和 frontend 项目。
4.1 VUE 配置
项目结构：与之前的项目结构相比，我在此中新建了
router/index.js：Vue Router 的配置文件，主要负责定义应用中的路由（URL 路径）与对应的组件之间的关系。
views/index/IndexPage.vue：Vue 组件，它展示了与路由关联的页面内容。当用户访问 /IndexPage 路径时，这个组件会被渲染到页面中。
4.1.1 App.vue 配置
4.1.2 main.js 配置
import {createApp} from 'vue'
import App from './App.vue'
import router from './router/index.js';
const app = createApp(App);
app.use(router);
app.mount('#app');4.1.3 IndexPage.vue
安装Axios：
npm install axios
更新 Vue 组件：
此项目中，使用 axios 请求 Django 后端数据并展示在页面上。
IndexPage.vue
{{message}}
4.1.4 index.js 配置
安装 Vue3 兼容的 vue-router 4.x 版本：
import {createRouter, createWebHistory} from 'vue-router';
import IndexPage from '../views/index/IndexPage.vue';
const routes = [
{
path: '/IndexPage',
name: 'IndexPage',
component: IndexPage,
},
];
const router = createRouter({history: createWebHistory(),
routes,
});
export default router;4.2 Django 配置
文件结构，添加了 views.py
，这是一个用于处理 CORS 的 Django 库。
在 Django 项目的根目录下运行：
pip install django-cors-headers
4.2.2 settings.py 配置（解决跨域请求问题）
在 setting.py 文件中添加以下配置：
1. 将 corsheaders 添加到 INSTALLED_APPS 列表：
INSTALLED_APPS = [
...
'corsheaders',
'rest_framework',
]
2. 将 corsheaders.middleware.CorsMiddleware 添加到 MIDDLEWARE 中，放在 CommonMiddleware 之前：
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
...
]
3. 允许跨域请求：
如果想允许所有域名访问：
CORS_ALLOW_ALL_ORIGINS = True
如果只想允许特定域名访问：
CORS_ALLOWED_ORIGINS = ['http://localhost:8080',]
4.3 views.py
from rest_framework.decorators import api_view
from rest_framework.response import Response
@api_view(['GET'])
def get_data(request):
data = {'message': 'Hello from Django!'}
return Response(data)
4.4 urls.py
from django.urls import path
from .views import get_data
urlpatterns = [path('api/data/', get_data, name='get_data'),
]
4.3 启动前后端
启动 Django 后端：
python manage.py runserver
启动 VUE 前端：
npm run serve
在页面中打开浏览器，注意网址，localhost:8080/IndexPage，展示出从后端传来的参数：“Hello from Django！”，表明前后端连接成功。
五、说明
网上查阅了好多资料，并没有系统的阐述如何一步一步进行前后端分离项目的前后端连接，本篇 blog 介绍了如何从零开始搭建 Django 和 Vue 前后端分离的项目并成功实现数据交互，关于具体如何进行内容编辑，需要读者自己探索。
额外说明：
-
跨域问题：当前后端分别在不同的端口运行时（如 Vue 在 8080，Django 在
8000），会遇到跨域问题，这需要通过 django-cors-headers 来处理。 -
Axios：这是一个用于发送 HTTP 请求的 JavaScript 库，常用于从后端 API 获取数据并更新前端页面。
原文地址: 详解 Django VUE 前后端分离项目的搭建（VSCode）
