目录
一、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.1 安装 django-cors-headers
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配置
<router-view></router-view> 是 Vue Router 中的一个核心组件，它的作用是 动态渲染当前路由对应的组件。当用户访问不同的 URL 时，<router-view> 会根据当前的路由配置，渲染与该路由匹配的组件
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>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
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
message: ''
}
},
mounted() {
this.fetchData()
},
methods: {
async fetchData() {
try {
const response = await axios.get('http://127.0.0.1:8000/api/data/')
this.message = response.data.message
} catch (error) {
console.error('Error fetching data:', error)
}
}
}
}
</script>
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
4.2.1 安装 django-cors-headers
，这是一个用于处理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 获取数据并更新前端页面。
