行业知识
【django+vue】项目搭建、解决跨域访问
笔记为自我总结整理的学习笔记，若有错误欢迎指出哟~
【django+vue】项目搭建、解决跨域访问
- django+vue介绍
- vue环境准备
- vue框架搭建
- 1.创建vue项目
- 2.配置vue项目
- 3.进入项目目录
- 4.运行项目
- 5.项目文件讲解
- 6.vue的扩展库或者插件
- django环境准备
- django框架搭建
- 1.使用conda虚拟环境pydjango
- 2.创建django项目
- 3.创建应用：
- 4.配置python解释器
- 5.启动项目
- 解决vue、django跨域问题
- 1.CORS
- 2.django-cors-headers
- 3.django代码
- 4.vue进行跨域请求
- axios
- 5.vue代码
django+vue介绍
django 和 Vue.js 是一对非常强大的技术组合，可以用于构建现代化的 Web 应用程序。下面是对它们的简要介绍：
- Django： Django 是一个使用 Python 编写的高级 Web 框架，它遵循了 MTV（模型-模板-视图）的设计模式。Django 提供了许多内置功能和工具，使开发者能够快速构建安全可靠的 Web 应用程序。
- ORM：Django 的 ORM（对象关系映射）层可以方便地与数据库交互，支持多种数据库后端。
- 路由系统：Django 的路由系统可以帮助你管理 URL 映射和请求分发。
- 表单处理：Django 提供了强大的表单处理功能，包括表单验证、数据处理等。
- 用户认证和权限管理：Django 提供了用户认证和权限管理的功能，可以轻松处理用户注册、登录、权限控制等需求。
- Vue.js： Vue.js 是一个流行的 JavaScript 前端框架，用于构建用户界面。Vue.js 采用组件化开发的方式，提供了响应式的数据绑定和组件系统，使开发者能够构建交互性强、可重用的 UI 组件。
- 响应式数据绑定：Vue.js 使用双向绑定的方式，将数据与视图进行关联，使得数据的变化能够实时反映在视图中。
- 组件化开发：Vue.js 的组件系统允许开发者将 UI 拆分成独立、可复用的组件，提高了代码的可维护性和可重用性。
- 虚拟 DOM：Vue.js 使用虚拟 DOM 技术，通过比较虚拟 DOM 的差异，最小化了对实际 DOM 的操作，提高了性能。
使用 Django 和 Vue.js 可以实现前后端分离的开发模式，使前端和后端的开发团队可以并行工作。你可以将 Django 用作后端 API 服务器，负责处理数据存储、用户认证等功能，而 Vue.js 则负责构建用户界面，并通过 AJAX 请求与后端 API 进行数据交互。
vue环境准备
node -v# v18.18.2npm -v# 9.8.1vue --version# @vue/cli 4.5.13
vue框架搭建
1.创建vue项目
vue create frontend (frontend 是项目名)
2.配置vue项目
选择自定义：Manually select features
选择配置项：通过键盘上下键移动，使用空格键勾选，然后回车
( ) Babel // 代码编译 ( ) TypeScript // ts ( ) Progressive Web App (PWA) Support // 支持渐进式网页应用程序 ( ) Router // vue路由 ( ) Vuex // 状态管理模式 ( ) CSS Pre-processors // css预处理 ( ) Linter / Formatter // 代码风格、格式校验 ( ) Unit Testing // 单元测试 ( ) E2E Testing // 端对端测试
如果想要模板简洁，可以不添加Linter/Formatter和Unit Testing
选择VUE版本：3.x
第三方配置文件存在的方式：In dedicated config files
是否保存本次配置为预设项目模板：选择N
3.进入项目目录
cd frontend
4.运行项目
npm run serve
5.项目文件讲解
6.vue的扩展库或者插件
- Element Plus
Element Plus是一套基于Vue 3.0的桌面端UI组件库，提供了丰富的UI组件和交互效果，使开发者能够更便捷地构建各种类型的Web应用程序。 Element Plus 是对 Element UI 的升级版本，在功能和性能上做了一些改进，并且支持 Vue 3.0。
npm install element-plus --save
报错则用：npm install element-plus --save -legacy-peer-deps
npm list element-plus 查看版本
element-plus@2.4.2
- vue-router@4
vue-router是Vue.js官方的路由管理器，它与Vue.js深度集成，用于构建单页面应用程序。通过vue-router，您可以实现页面之间的切换、导航以及路由参数的传递等功能。
npm install vue-router@4
npm list vue-router 查看版本
vue-router@4
- axios
axios是一个基于Promise的HTTP客户端，可以用在浏览器和Node.js环境中，它是Vue.js中常用的发送网络请求的工具。
npm install axios
npm list axios 查看版本
axios@1.6.2
django环境准备
pip install django== 2.0 -i https://pypi.tuna.tsinghua.edu.cn/simple
pip install django-cors-headers== 2.5.3 -i https://pypi.tuna.tsinghua.edu.cn/simple
pip install mysqlclient== 2.2.0 -i https://pypi.tuna.tsinghua.edu.cn/simple
python --version# Python 3.9.18django# 2.0django-cors-headers#2.5.3mysqlclient#2.2.0
django框架搭建
1.使用conda虚拟环境pydjango
activate pydjango
2.创建django项目
django-admin startproject backend
3.创建应用：
cd backend
python manage.py startapp myapp
4.配置python解释器
conda虚拟环境pydjango
5.启动项目
python manage.py runserver
解决vue、django跨域问题
1.CORS
CORS是Cross-Origin Resource Sharing（跨域资源共享）的缩写，是一种用于在Web应用程序中处理跨域请求的标准机制。当一个Web页面通过JavaScript发起对不同域（域名、端口或协议）的服务器资源的请求时，就会涉及到跨域请求。
当您的Vue.js前端应用程序请求访问Django后端时，如果二者位于不同的域名或端口上，就会触发跨域请求，此时可能会被浏览器拦截。
2.django-cors-headers
-
在Django项目中安装django-cors-headers库：
activate pydjango#django-cors-headers安装在哪个python环境下pip install django-cors-headers -i https://pypi.tuna.tsinghua.edu.cn/simple
-
在Django项目的设置文件（settings.py）中添加corsheaders到INSTALLED_APPS中：
INSTALLED_APPS = [ # ... 'corsheaders', # ...]
-
在设置文件中的MIDDLEWARE列表中添加CorsMiddleware：
MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'corsheaders.middleware.CorsMiddleware', # 添加这一行 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware',]
-
可以根据需求进行配置，例如允许的来源域列表、允许的HTTP方法等。以下是一个示例配置，允许所有源（*）的跨域请求：
CORS_ALLOW_ALL_ORIGINS = True# 增加跨域忽略CORS_ALLOW_CREDENTIALS = TrueCORS_ORIGIN_ALLOW_ALL = True# 允许所有方法CORS_ALLOW_METHODS = ('*')# 允许所有请求头CORS_ALLOW_HEADERS = ('*')或者，您可以设置允许的特定来源域列表：（我使用这个）
CORS_ALLOWED_ORIGINS = [ 'http://localhost:8080', # Vue.js前端应用的地址 'http://example.com', # 其他允许的域名]
通过以上配置，django-cors-headers将会在Django后端中处理跨域请求，允许Vue.js前端应用程序与Django后端进行跨域通信。这样，您就可以在Vue.js应用中使用axios或其他HTTP客户端库发送请求到Django后端，并成功获取响应数据。
3.django代码
# setting.pyINSTALLED_APPS = [... 'corsheaders', #跨域add 'myapp.apps.MyappConfig' #注册app]
# urls.pyfrom django.urls import pathfrom myapp import viewsurlpatterns = [ # path('admin/', admin.site.urls), path("index/", views.index),]# views.pyfrom django.http import HttpResponsefrom django.shortcuts import render# Create your views here.def index(request): return HttpResponse("欢迎使用！")启动项目进行测试：
4.vue进行跨域请求
axios
axios是一个基于Promise的HTTP客户端，可以用在浏览器和Node.js环境中，它是Vue.js中常用的发送网络请求的工具。
npm install axios
npm list axios 查看版本
axios@1.6.2
5.vue代码
main.js 是 Vue.js 项目的主入口文件，负责创建 Vue 应用实例、设置全局配置，并将应用挂载到页面的特定元素上。同时也用于导入并配置其他必要的模块和库。
//main.jsimport { createApp } from 'vue'import App from './App.vue'// 导入routerimport router from './router.js';// 导入axiosimport axios from 'axios';// 设置 axios 的全局配置axios.defaults.baseURL = 'http://127.0.0.1:8000'; // 设置基础 URLaxios.defaults.headers.common['Authorization'] = 'Bearer token'; // 设置公共请求头// createApp(App).mount('#app')const app = createApp(App)app.use(router)// 将 axios 实例挂载到全局属性中app.config.globalProperties.$http = axios;app.mount('#app')router.js 是 Vue Router 的配置文件，用于定义和配置应用的路由信息。导入了 vue-router 模块，定义了路由配置数组 routes，然后通过 createRouter 创建了路由实例，并最终导出该实例供其他地方使用。
//router.js// 导入vue-routerimport { createRouter, createWebHistory } from 'vue-router';// 导入你的组件import HelloWorld from './components/HelloWorld.vue';const routes = [ { path: '/', component: HelloWorld }, { path: '/hello', component: HelloWorld } // 其他路由...];const router = createRouter({ history: createWebHistory(), routes});export default router;根组件App.vue。它是一个容器组件，用于承载整个应用的内容，并作为其他组件的父组件。
通过使用 ，可以根据不同的 URL 路径，动态地加载不同的组件内容到 App.vue 中。可以实现单页应用的多页面切换效果。
export default { name: 'App'}Vue 本身并不提供内置的 HTTP 客户端功能。通常情况下，这段代码应该依赖于一个名为 $http 的插件或库，比如 Axios。如果这里使用的是 Axios，那么 this.$http.get('/index') 就是通过 Axios 发起一个 GET 请求，请求的 URL 是 ‘/index’。这个请求会返回一个 Promise 对象，可以通过 .then() 方法处理请求成功的结果，或者通过 .catch() 方法处理请求失败的情况。
测试 export default { created() { this.test(); // 组件挂载时 }, methods: { test () { this.$http.get('/index') .then(response => { // 请求成功，处理响应数据 console.log(response.data); }) .catch(error => { // 请求失败，处理错误信息 console.error(error); }); }, }}前端启动：进行跨域访问测试
-
- axios
- vue-router@4
- Django： Django 是一个使用 Python 编写的高级 Web 框架，它遵循了 MTV（模型-模板-视图）的设计模式。Django 提供了许多内置功能和工具，使开发者能够快速构建安全可靠的 Web 应用程序。
