Django连接vue

### Django 后端连接 Vue 前端实现前后端分离 #### 1. 搭建环境 为了使 Django 和 Vue 实现前后端分离，需要分别设置独立的开发服务器。通常情况下，Django 运行在 `localhost:8000` 上，而 Vue 则运行在 `localhost:8080` 或其他指定端口上。 - **安装依赖** 需要确保已安装 Node.js 和 Python 的开发环境。通过 npm 安装 Vue CLI 工具来初始化前端项目[^2]。 ```bash npm install -g @vue/cli ``` #### 2. 创建 Django 项目和应用 按照标准流程创建 Django 项目并配置必要的 URL 路由： - 使用以下命令创建一个新的 Django 应用： ```bash django-admin startproject my_django_project cd my_django_project python manage.py startapp api ``` - 在 `settings.py` 中注册新创建的应用程序 `api` 并启用 CORS 支持以便允许跨域请求[^4]: ```python INSTALLED_APPS += ['corsheaders', 'api'] MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware'] + MIDDLEWARE CORS_ALLOWED_ORIGINS = [ "http://localhost:8080", # Vue 开发服务器地址 ] ``` #### 3. 设置 API 接口 定义一个简单的视图函数用于测试数据传递功能，在 `views.py` 文件中编写如下代码[^3]: ```python from django.http import JsonResponse def index_page(request): data = {"message": "Hello from Django!"} return JsonResponse(data) ``` 接着更新 `urls.py` 来映射该路径到对应的视图方法: ```python from django.urls import path from .views import index_page urlpatterns = [ path('IndexPage/', index_page, name='index-page'), ] ``` #### 4. 构建 Vue 前端部分 利用 Vue CLI 初始化新的前端工程，并引入 Bootstrap 提升界面美观度: ```bash vue create vue_frontend cd vue_frontend npm install bootstrap --save ``` 编辑入口组件文件 (如 App.vue)，调用 Axios 请求后端服务获取消息显示给用户: ```javascript <template> <div id="app"> {{ message }} </div> </template> <script> import axios from 'axios'; export default { data() { return { message: '' }; }, mounted() { this.fetchData(); }, methods: { fetchData() { const url = 'http://localhost:8000/IndexPage/'; axios.get(url).then(response => { this.message = response.data.message; }).catch(error => console.error(error)); } } }; </script> ``` 最后启动两个不同的本地服务器验证效果——先执行 Django server (`python manage.py runserver`) ，再单独开启 Vue development mode(`npm run serve`) 。当访问 http://localhost:8080/ 页面时应该能看到来自后台的消息 “Hello from Django!” 显示出来[^1]. #### 5. 生产部署注意事项 实际生产环境中可能还需要考虑静态资源管理、安全性加固等问题。可以借助 Nginx 反向代理统一处理 HTTP 流量以及 SSL 加密传输等内容. ---