【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 应用程序。下面是对它们的简要介绍：

  1. Django： Django 是一个使用 Python 编写的高级 Web 框架，它遵循了 MTV（模型-模板-视图）的设计模式。Django 提供了许多内置功能和工具，使开发者能够快速构建安全可靠的 Web 应用程序。
    • ORM：Django 的 ORM（对象关系映射）层可以方便地与数据库交互，支持多种数据库后端。
    • 路由系统：Django 的路由系统可以帮助你管理 URL 映射和请求分发。
    • 表单处理：Django 提供了强大的表单处理功能，包括表单验证、数据处理等。
    • 用户认证和权限管理：Django 提供了用户认证和权限管理的功能，可以轻松处理用户注册、登录、权限控制等需求。
  2. 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.18
django	# 2.0
django-cors-headers		#2.5.3
mysqlclient		#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

  1. 在Django项目中安装django-cors-headers库：

    activate pydjango	#django-cors-headers安装在哪个python环境下
pip install django-cors-headers -i https://pypi.tuna.tsinghua.edu.cn/simple

  2. 在Django项目的设置文件（settings.py）中添加corsheaders到INSTALLED_APPS中：

    INSTALLED_APPS = [# ...'corsheaders',# ...
]

  3. 在设置文件中的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',
]

  4. 可以根据需求进行配置，例如允许的来源域列表、允许的HTTP方法等。以下是一个示例配置，允许所有源（*）的跨域请求：

    CORS_ALLOW_ALL_ORIGINS = True
# 增加跨域忽略
CORS_ALLOW_CREDENTIALS = True
CORS_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 path
from myapp import viewsurlpatterns = [# path('admin/', admin.site.urls),path("index/", views.index),
]

# views.pyfrom django.http import HttpResponse
from 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'
// 导入router
import router from './router.js';
// 导入axios
import axios from 'axios';// 设置 axios 的全局配置
axios.defaults.baseURL = 'http://127.0.0.1:8000'; // 设置基础 URL
axios.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-router
import { 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。它是一个容器组件，用于承载整个应用的内容，并作为其他组件的父组件。

通过使用 <router-view>，可以根据不同的 URL 路径，动态地加载不同的组件内容到 App.vue 中。可以实现单页应用的多页面切换效果。

<!-- </App.vue> --><template><div id="app"><router-view></router-view></div>
</template><script>
export default {name: 'App'
}
</script><style></style>

Vue 本身并不提供内置的 HTTP 客户端功能。通常情况下，这段代码应该依赖于一个名为 $http 的插件或库，比如 Axios。如果这里使用的是 Axios，那么 this.$http.get('/index') 就是通过 Axios 发起一个 GET 请求，请求的 URL 是 ‘/index’。这个请求会返回一个 Promise 对象，可以通过 .then() 方法处理请求成功的结果，或者通过 .catch() 方法处理请求失败的情况。

<!-- </HelloWorld.vue> -->
<template><el-row class="mb-4"><el-button @click="test">测试</el-button></el-row>
</template><script>
export default {created() {this.test();  // 组件挂载时},methods: {test () {this.$http.get('/index').then(response => {// 请求成功，处理响应数据console.log(response.data);}).catch(error => {// 请求失败，处理错误信息console.error(error);});},}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

前端启动：进行跨域访问测试
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/151066.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

day29_Servlet

day29_Servlet

今日内容 零、 复习昨日 一、Servlet 零、 复习昨日 一、Servlet 1.1 Servlet介绍 javaweb开发,就是需要服务器接收前端发送的请求,以及请求中的数据,经过处理(jdbc操作),然后向浏览器做出响应. 我们要想在服务器中写java代码来接收请求,做出响应,我们的java代码就得遵循tomca…
阅读更多...
k8s ingress高级用法一

k8s ingress高级用法一

前面的文章中&#xff0c;我们讲述了ingress的基础应用&#xff0c;接下来继续讲解ingress的一些高级用法 一、ingress限流 在实际的生产环境中&#xff0c;有时间我们需要对服务进行限流&#xff0c;避免单位时间内访问次数过多&#xff0c;常用的一些限流的参数如下&#x…
阅读更多...
工作电压范围，转换速率高，相位补偿等特性的双运算放大器芯片D4510的描述

工作电压范围，转换速率高，相位补偿等特性的双运算放大器芯片D4510的描述

D4510是一块双运算放大器&#xff0c;具有较宽的工作电压范围&#xff0c;转换速率高&#xff0c;相位补偿等特性。电路能在低电源电压下:工作,电源电压范围:双电源为1V-3.5V和单电源电压为2V~7V。 主要特点&#xff1a; ● 低电压工作 ● 转换速率高 ● 动态输…
阅读更多...
docker中怎么启动容器

docker中怎么启动容器

1、首先在linux中使用以下命令来启动 Docker 服务&#xff1a; sudo systemctl start docker2、然后下面的命令显示所有的容器列表&#xff0c;包括正在运行和已停止的容器。 docker ps -a然后找到容器ID 3、使用 docker start 启动一个已停止的容器&#xff1a; docker s…
阅读更多...
简单模拟 Spring 创建的动态代理类（解释一种@Transactional事务失效的场景）

简单模拟 Spring 创建的动态代理类（解释一种@Transactional事务失效的场景）

模拟 Spring 创建的动态代理类 本文主要目的是从父类和子类继承的角度去分析为什么在 Service 标注的业务类中使用 this 调用方法会造成事务失效。解释在这种情况下 this 为什么是原始类对象而不是代理类对象。 问题描述 在 Service 标注的业务类中&#xff0c;如果调用本类…
阅读更多...
YOLOv8 加持 MobileNetv3，目标检测新篇章

YOLOv8 加持 MobileNetv3，目标检测新篇章

🗝️YOLOv8实战宝典--星级指南：从入门到精通，您不可错过的技巧   -- 聚焦于YOLO的 最新版本， 对颈部网络改进、添加局部注意力、增加检测头部，实测涨点 💡 深入浅出YOLOv8：我的专业笔记与技术总结   -- YOLOv8轻松上手， 适用技术小白，文章代码齐全，仅需 …
阅读更多...
【狂神说Java】redis入门

【狂神说Java】redis入门

✅作者简介&#xff1a;CSDN内容合伙人、信息安全专业在校大学生&#x1f3c6; &#x1f525;系列专栏 &#xff1a;【狂神说Java】 &#x1f4c3;新人博主 &#xff1a;欢迎点赞收藏关注&#xff0c;会回访&#xff01; &#x1f4ac;舞台再大&#xff0c;你不上台&#xff0c…
阅读更多...
卷？中学生开始学习人工智能和大模型，附课件！

卷？中学生开始学习人工智能和大模型，附课件！

卷&#xff1f;中学生开始学习人工智能和大模型&#xff0c;附课件&#xff01; 大家好&#xff0c;我是老章 发现一个面向11-14岁人群的AI课程&#xff0c;还附加了大模型内容&#xff0c;浏览了一遍它们的课件&#xff08;还有面向教师的资源&#xff09;&#xff0c;感觉非…
阅读更多...
Linux——编译器gcc/g++、调试器gdb以及自动化构建工具makefilemake详解

Linux——编译器gcc/g++、调试器gdb以及自动化构建工具makefilemake详解

编译器—gcc/g、调试器—gdb以及自动化构建工具—makefile&&make 文章目录 编译器—gcc/g、调试器—gdb以及自动化构建工具—makefile&&make1. 编译器——gcc/g1.1 生成可执行文件与修改默认可执行文件1.2 程序的翻译过程以及对应的gcc选项1.2.1 预处理 gcc -E…
阅读更多...
【cpolar】TortoiseSVN如何安装并实现公网提交文件到本地SVN服务器

【cpolar】TortoiseSVN如何安装并实现公网提交文件到本地SVN服务器

&#x1f3a5; 个人主页&#xff1a;深鱼~ &#x1f525;收录专栏&#xff1a;cpolar &#x1f304;欢迎 &#x1f44d;点赞✍评论⭐收藏 文章目录 前言1. TortoiseSVN 客户端下载安装2. 创建检出文件夹3. 创建与提交文件4. 公网访问测试 前言 TortoiseSVN是一个开源的版本控…
阅读更多...
RabbitMQ 部署及配置详解(集群部署)

RabbitMQ 部署及配置详解(集群部署)

单机部署请移步&#xff1a; RabbitMQ 部署及配置详解 (单机) RabbitMQ 集群是一个或 多个节点&#xff0c;每个节点共享用户、虚拟主机、 队列、交换、绑定、运行时参数和其他分布式状态。 一、RabbitMQ 集群可以通过多种方式形成&#xff1a; 通过在配置文件中列出群集节点以…
阅读更多...
JVM的运行时数据区

JVM的运行时数据区

Java虚拟机&#xff08;JVM&#xff09;的运行时数据区是程序在运行过程中使用的内存区域&#xff0c;主要包括以下几个部分&#xff1a; 程序计数器虚拟机栈本地方法栈堆方法区运行时常量池直接内存 不同的虚拟机实现可能会略有差异。这些区域协同工作&#xff0c;支持Java…
阅读更多...
（七）什么是Vite——vite优劣势、命令

（七）什么是Vite——vite优劣势、命令

vite分享ppt&#xff0c;感兴趣的可以下载&#xff1a; ​​​​​​​Vite分享、原理介绍ppt 什么是vite系列目录&#xff1a; &#xff08;一&#xff09;什么是Vite——vite介绍与使用-CSDN博客 &#xff08;二&#xff09;什么是Vite——Vite 和 Webpack 区别&#xff0…
阅读更多...
计算机毕业设计 基于SpringBoot的健身房管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解目录

计算机毕业设计 基于SpringBoot的健身房管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解目录

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…
阅读更多...
CrossEntropyLoss计算损失的时候可以传3维或者更高维的变量

CrossEntropyLoss计算损失的时候可以传3维或者更高维的变量

CrossEntropyLoss计算损失的时候可以传3维或者更高维的变量&#xff1a; 从CrossEntropyLoss的源码的描述中可以看到答案&#xff1a; 红框中的minibatch表示batch_size&#xff0c; C表示class_num&#xff0c;后面可以跟着其他维度。 这样就可以使用3维或者更高维的变量&am…
阅读更多...
基于nbiot的矿车追踪定位系统（论文+源码）

基于nbiot的矿车追踪定位系统（论文+源码）

1.系统设计 鉴于智能物联网的大趋势&#xff0c;本次基于窄带物联网的矿车追踪定位系统应具备以下功能&#xff1a; &#xff08;1&#xff09;实现实时定位&#xff0c;真正实现矿车随时随地定位; &#xff08;2&#xff09;定位精度高&#xff0c;采用该系统可以实现矿车在…
阅读更多...
Diagrams——制作短小精悍的流程图

Diagrams——制作短小精悍的流程图

今天为大家分享的是一款轻量级的流程图绘制软件——Diagrams。 以特定的图形符号加上说明&#xff0c;表示算法的图&#xff0c;称为流程图或框图。流程图是流经一个系统的信息流、观点流或部件流的图形代表。我们常用流程图来说明某一过程。 流程图使用一些标准符号代表某些类…
阅读更多...
[C语言 数据结构] 栈

[C语言 数据结构] 栈

1.什么是栈&#xff1f; 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端 称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压…
阅读更多...
合并两个有序链表(冒泡排序实现)

合并两个有序链表(冒泡排序实现)

实例要求&#xff1a;将两个升序链表合并为一个新的 升序 链表并返回&#xff1b;新链表是通过拼接给定的两个链表的所有节点组成的&#xff1b;实例分析&#xff1a;先拼接两个链表&#xff0c;在使用冒泡排序即可&#xff1b;示例代码&#xff1a; struct ListNode* mergeTwo…
阅读更多...
vs2017 编译Qt 5.11.2 源码

vs2017 编译Qt 5.11.2 源码

SDK 10.0.22000.194 有 2种编译方式 &#xff0c;第二种 看下面 方式一: 1、问题描述&#xff1a; 使用VS编译程序时&#xff0c;运行库选择多线程&#xff08;/MT&#xff09;&#xff0c;表示采用多线程静态release的方式进行编译。 但是&#xff0c;发现编译是不能通过的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023