【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.2

npm -v	# 9.8.1

vue --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环境准备

python --version	# Python 3.9.18
django	# 4.2.7
django-cors-headers		#4.3.1
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.py

INSTALLED_APPS = [
	...
    'corsheaders',  #跨域add
    'myapp.apps.MyappConfig'    #注册app
]

# urls.py

from django.urls import path
from myapp import views

urlpatterns = [
    # path('admin/', admin.site.urls),
    path("index/", views.index),
]

# views.py

from 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.js

import { 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>

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

算法通关村第十关-白银挑战数组最大K数

算法通关村第十关-白银挑战数组最大K数

大家好我是苏麟 , 今天带来一道应用快排的题 . 数组中的第K个最大元素 描述 : 给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。 题目 : Le…
阅读更多...
【MyBatisPlus】快速入门

【MyBatisPlus】快速入门

文章目录 1. 简单使用2. 条件构造器 —— 针对于复杂查询3. 自定义SQL4. IService4.1 基本接口方法4.1.1 新增4.1.2 删除4.1.3 修改4.1.4 查找 4.2 开发基础业务接口4.3 开发复杂业务接口4.4 Lambda方法4.5 批量新增 5. 代码生成6. 分页功能6.1 分页插件基本使用6.1 通用分页实…
阅读更多...
U-boot(二):主Makefile

U-boot(二):主Makefile

本文主要探讨210的主Makefile。 Makefile uboot版本号&#xff1a; VERSION&#xff1a;主板本号 PATCHLEVEL&#xff1a;次版本号 SUBLEVEL&#xff1a;再次版本号 EXTRAVERSION:附加信息 VERSION 1 PATC…
阅读更多...
Leetcode—876.链表的中间结点【简单】

Leetcode—876.链表的中间结点【简单】

2023每日刷题&#xff08;三十三&#xff09; Leetcode—876.链表的中间结点 实现代码 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNode* middleNode(struct ListNode* head) {struct ListNod…
阅读更多...
sqli-labs关卡19(基于http头部报错盲注)通关思路

sqli-labs关卡19(基于http头部报错盲注)通关思路

文章目录 前言一、回顾上一关知识点二、靶场第十九关通关思路1、判断注入点2、爆数据库名3、爆数据库表4、爆数据库列5、爆数据库关键信息 总结 前言 此文章只用于学习和反思巩固sql注入知识&#xff0c;禁止用于做非法攻击。注意靶场是可以练习的平台&#xff0c;不能随意去尚…
阅读更多...
​分享mfc140u.dll丢失的解决方法，针对原因解决mfc140u.dll丢失的问题

​分享mfc140u.dll丢失的解决方法，针对原因解决mfc140u.dll丢失的问题

作为电脑小白&#xff0c;如果电脑中出现了mfc140u.dll丢失的问题&#xff0c;肯定会比较的慌乱。但是出现mfc140u.dll丢失的问题&#xff0c;其实也有很简单的办法&#xff0c;所以大家不用慌张&#xff0c;接下来就教大家解决办法&#xff0c;能够有效的解决mfc140u.dll丢失的…
阅读更多...
Zabbix Proxy分布式监控

Zabbix Proxy分布式监控

目录 Zabbix Proxy简介 实验环境 proxy端配置 1.安装仓库 2.安装zabbix-proxy 3.创建初始数据库 4.导入初始架构和数据&#xff0c;系统将提示您输入新创建的密码 5.编辑配置文件 /etc/zabbix/zabbix_proxy.conf&#xff0c;配置完成后要重启。 agent客户端配置 zabbix…
阅读更多...
Failed to execute org.scala-tools:maven-scala-plugin:2.15.2解决

Failed to execute org.scala-tools:maven-scala-plugin:2.15.2解决

原因也不是很清楚&#xff0c;查看一个博主文章(net.alchim31.maven:scala-maven-plugin&#xff1a;maven依赖无法下载或无法编译)得到的解决方案&#xff1a; 在idea的terminal执行以下语句即可实现maven对scala代码的编译&#xff1a; mvn clean scala:compile compile pac…
阅读更多...
【Proteus仿真】【51单片机】防火防盗GSM智能家居设计

【Proteus仿真】【51单片机】防火防盗GSM智能家居设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真51单片机控制器&#xff0c;使用声光报警模块、LCD1602显示模块、DS18B20温度、烟雾传感器模块、按键模块、PCF8591 ADC模块、红外检测模块等。 主要功能&#xff1a; 系统运行后…
阅读更多...
【C++】模板初阶 【 深入浅出理解 模板 】

【C++】模板初阶 【 深入浅出理解 模板 】

模板初阶 前言&#xff1a;泛型编程一、函数模板&#xff08;一&#xff09;函数模板概念&#xff08;二&#xff09;函数模板格式&#xff08;三&#xff09;函数模板的原理&#xff08;四&#xff09;函数模板的实例化&#xff08;五&#xff09;模板参数的匹配原则 三、类模…
阅读更多...
C++各种字符转换

C++各种字符转换

C各种字符转换 一.如何将char数组转化为string类型二. string转char数组&#xff1a;参考 一.如何将char数组转化为string类型 在C中&#xff0c;可以使用string的构造函数或者赋值操作符来将char数组转换为string类型。 方法1&#xff1a;使用string的构造函数 const char* c…
阅读更多...
【论文精读3】CasMVSNet

【论文精读3】CasMVSNet

模型处理过程&#xff1a; 一. 问题引入 基于学习的MVS算法因为受到显存的限制&#xff0c;输出的深度图的空间分辨率只有输入图像的1/16大小&#xff08;长宽均为输入图像的1/4大小&#xff09;。以MVSNet为例&#xff0c;对于16001184大小的输入图像&#xff0c;需要构建hwD…
阅读更多...
shopee跨境选品工具——知虾，助您精准选品和科学运营

shopee跨境选品工具——知虾，助您精准选品和科学运营

在如今的电商时代&#xff0c;shopee跨境选品是每个卖家都面临的重要任务。而Shopee作为一家知名的跨境电商平台&#xff0c;为卖家提供了一系列有用的工具和功能来帮助他们进行精准选品和科学运营。其中&#xff0c;知虾作为Shopee的大数据采集及分析平台&#xff0c;为卖家提…
阅读更多...
二叉树的遍历(非递归版)

二叉树的遍历(非递归版)

文章目录 二叉树的前序遍历二叉树的中序遍历二叉树的后序遍历 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的 人工智能学习网站&#xff0c; 通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。 点击跳转到网站。 二叉树的前序遍历 用递归实…
阅读更多...
栈与队列：用栈实现队列

栈与队列：用栈实现队列

目录 题目&#xff1a; 栈与队列的数据模型对比&#xff1a; 思路分析&#x1f387;&#xff1a; 代码分析&#xff1a; 一、定义队列 二、初始化队列 三、入队 四、出队⭐ 代码解析&#xff1a; 五、获取队头元素 六、查看队列是否为空 七、销毁队列 完整代码 …
阅读更多...
竞赛 题目：基于深度学习卷积神经网络的花卉识别 - 深度学习 机器视觉

竞赛 题目：基于深度学习卷积神经网络的花卉识别 - 深度学习 机器视觉

文章目录 0 前言1 项目背景2 花卉识别的基本原理3 算法实现3.1 预处理3.2 特征提取和选择3.3 分类器设计和决策3.4 卷积神经网络基本原理 4 算法实现4.1 花卉图像数据4.2 模块组成 5 项目执行结果6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基…
阅读更多...
ROSCon 2023 大会回顾

ROSCon 2023 大会回顾

系列文章目录 文章目录 系列文章目录前言一、会议内容二、其他活动 前言 我们与 ROSCon 2023 全体 700 多名与会者的合影。 视频回放链接 一、会议内容 ROSCon 2023 是我们第十二届年度 ROS 开发者大会&#xff0c;于 2023 年 10 月 18 日至 20 日在路易斯安那州新奥尔良举行。…
阅读更多...
原型网络Prototypical Network的python代码逐行解释，新手小白也可学会！！由于工作量大，准备整8个系列完事，-----系列5

原型网络Prototypical Network的python代码逐行解释，新手小白也可学会！！由于工作量大，准备整8个系列完事，-----系列5

文章目录 前言一、原始程序---计算原型&#xff0c;开始训练&#xff0c;计算损失二、每一行代码的详细解释2.1 粗略分析2.2 每一行代码详细分析 前言 承接系列4&#xff0c;此部分属于原型类中的计算原型&#xff0c;开始训练&#xff0c;计算损失函数。 一、原始程序—计算原…
阅读更多...
Redis持久化机制详解

Redis持久化机制详解

使用缓存的时候&#xff0c;我们经常需要对内存中的数据进行持久化也就是将内存中的数据写入到硬盘中。大部分原因是为了之后重用数据&#xff08;比如重启机器、机器故障之后恢复数据&#xff09;&#xff0c;或者是为了做数据同步&#xff08;比如 Redis 集群的主从节点通过 …
阅读更多...
链式队列的基本操作与实现(数据结构与算法)

链式队列的基本操作与实现(数据结构与算法)

链队列的表示与实现如下图&#xff1a; 代码如下&#xff1a; #include<iostream> using namespace std;#define MAXQSIZE 100 //最大队列长度 typedef int QElemType; //typedef struct Qnode {QElemType data;struct Qnode* next; }QNode, *QueuePtr; //队列结点类型…
阅读更多...
最新文章

Copyright @ 2022~2023