当前位置： 首页 > news >正文

第三章Vue中的Ajax

news 2025/7/12 12:56:08

文章目录

  • Vue脚手架配置代理
    • 为什么要配置代理服务器
      • 什么是跨域？
      • 代理跨域
      • CORS跨域
    • 利用Vue-CLI配置代理服务器
  • GitHub用户搜索案例

本案例需要下载axios库： npm install axios

Vue脚手架配置代理

为什么要配置代理服务器

什么是跨域？

跨域资源共享（英语：Cross-origin resource sharing，缩写：CORS），用于让网页的受限资源能够被其他域名的页面访问的一种机制。 --摘自维基百科
跨域的基本三要素:

  • 同域名
  • 同端口
  • 同协议

通俗理解:
我们从站点A对其他站点进行网络请求时，浏览器端和服务端需要对这个请求进行处理，保证这个请求是安全的。 这个处理就是跨域

为什么需要跨域

跨域是为了保证请求的安全作出的策略。

  • 浏览器请求必须遵循同源策略: 同一域名、同一端口、同一协议

跨域方案

  • JSONP跨域
  • CORS跨域
  • 代理跨域

代理跨域

我们的客户端想访问A服务器，但是A服务器存在跨域问题，我们就再开一个同源的代理服务器B，我们把请求给B服务，然后B服务器去访问A服务器，A处理好信息返回给B，B再将数据返回给客户端

跨域问题是前端存在的问题，而我们服务器之间传递信息直接是用http，是不存在什么跨域问题的

接口代理跨域特点

  • 服务端、客户端均不需要配置
  • 通过中间服务器(代理服务器)的配置实现(如Nginx、IIS、Apache)
  • 我们这里使用的Vue-CLI也能帮我们实现跨域处理

image-20230328111418284

CORS跨域

  • CORS跨域个人是最常用的(多亏.NET Core对跨域策略的支持非常好用)。
  • CORS跨域是由服务端应用设置的一个跨域策略，比如开放指定的HTTP Method、指定请求方Url、指定请求携带的Headers必须包含的字段等等~。
  • CORS这种方式简单高效，合理的使用它的策略可以保证服务器的安全的同时也提升了前后端的开发体验~；

CORS跨域特点

  • 后端配置，前端直接请求;
  • 策略丰富，可支持多种策略，如HTTP方法、URL等;
  • 前后端交互方式非常规范；
  • 除了常用的GET、POST、HEAD 其他方法进行请求则需要发起OPTIONS请求对服务器端进行跨域允许的许可请求

利用Vue-CLI配置代理服务器

App.vue

<template><div id="root"><button @click="getStudents">获取学生信息</button><br/><button @click="getCars">获取汽车信息</button></div>
</template><script>import axios from 'axios'export default {name:'App',methods: {getStudents(){axios.get('http://localhost:8080/lscStudent/students').then(response => {console.log('请求成功了',response.data)},error => {console.log('请求失败了',error.message)})},getCars(){axios.get('http://localhost:8080/lscCar/cars').then(response => {console.log('请求成功了',response.data)},error => {console.log('请求失败了',error.message)})}}}
</script>

vue.config.js:

module.exports = {pages: {index: {entry: 'src/main.js',},},lintOnSave:false,// 开启代理服务器（方式一）// devServer: {//     proxy:'http://localhost:5000'// }//开启代理服务器（方式二）
devServer: {proxy: {'/lscStudent': {target: 'http://localhost:5000',pathRewrite:{'^/lscStudent':''},// ws: true, //用于支持websocket,默认值为true// changeOrigin: true //用于控制请求头中的host值,默认值为true},'/lscCar': {target: 'http://localhost:5001',pathRewrite:{'^/lscCar':''},// ws: true, //用于支持websocket,默认值为true// changeOrigin: true //用于控制请求头中的host值,默认值为true}}}
}

总结

方法一：在vue.config.js中添加如下配置：

devServer:{proxy:"http://localhost:5000"
}

  • 优点：配置简单，请求资源时直接发给前端即可

  • 缺点：不能配置多个代理，不能灵活的控制请求是否走代理

    • 如果我们请求的数据再8080中存在，那么就直接用代理服务器的，不能访问目标服务器

    • 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

方法二：

devServer: {proxy: {'/api1': { // 匹配所有以 '/api1'开头的请求路径target: 'http://localhost:5000',// 代理目标的基础路径changeOrigin: true,pathRewrite: {'^/api1': ''}// changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000// changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080},'/api2': { // 匹配所有以 '/api2'开头的请求路径target: 'http://localhost:5001',// 代理目标的基础路径changeOrigin: true,pathRewrite: {'^/api2': ''}}}
}

说明：

  • 优点：可以配置多个代理，且可以灵活的控制请求是否走代理
  • 缺点：配置略微繁琐，请求资源时必须加前缀

GitHub用户搜索案例

public/index.html

<!DOCTYPE html>
<html lang=""><head><meta charset="UTF-8"><!-- 针对IE浏览器的特殊配置，含义是让IE浏览器以最高渲染级别渲染页面 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 开启移动端的理想端口 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 配置页签图标 --><link rel="icon" href="<%= BASE_URL %>favicon.ico"><!-- 引入bootstrap样式 --><link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css"><!-- 配置网页标题 --><title><%= htmlWebpackPlugin.options.title %></title></head><body><!-- 容器 --><div id="app"></div></body>
</html>
  • 在这引入bootstrap样式，如果对应的一些样式没有，不会报错，比如字体什么的，如果在main.js中引入，会进行严格的检查，因为是ES6语法

main.js

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({el:"#app",render: h => h(App),beforeCreate(){Vue.prototype.$bus = this}
})

App.vue

<template><div class="container"><Search/><List/></div>
</template><script>import Search from './components/Search.vue'import List from './components/List.vue'export default {name:'App',components:{Search,List},}
</script>

search.vue

<template><section class="jumbotron"><h3 class="jumbotron-heading">Search Github Users</h3><div><input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;<button @click="getUsers">Search</button></div></section>
</template><script>import axios from 'axios'export default {name:'Search',data() {return {keyWord:''}},methods: {getUsers(){//请求前更新List的数据this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response => {console.log('请求成功了')//请求成功后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})},error => {//请求后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})})}}}
</script>

List.vue

<template><div class="row"><!-- 展示用户列表 --><div class="card" v-show="info.users.length" v-for="user in info.users" :key="user.id"><a :href="user.html_url" target="_blank"><img :src="user.avatar_url" style='width: 100px'/></a><h4 class="card-title">{{user.login}}</h4></div><!-- 展示欢迎词 --><h1 v-show="info.isFirst">欢迎使用！</h1><!-- 展示加载中 --><h1 v-show="info.isLoading">加载中...</h1><!-- 展示错误信息 --><h1 v-show="info.errMsg">{{errMsg}}</h1></div>
</template><script>export default {name:'List',data() {return {info:{isFirst:true,isLoading:false,errMsg:'',users:[]}}},mounted(){this.$bus.$on('updateListData',(dataObj)=>{//动态合并两个对象的属性this.info = {...this.info,...dataObj}})},beforeDestroy(){this.$bus.$off('updateListData')}}
</script><style scoped>.album {min-height: 50rem; /* Can be removed; just added for demo purposes */padding-top: 3rem;padding-bottom: 3rem;background-color: #f7f7f7;}.card {float: left;width: 33.333%;padding: .75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;}.card > img {margin-bottom: .75rem;border-radius: 100px;}.card-text {font-size: 85%;}
</style>

img

总结：

vue项目常用的两个Ajax库：

  1. axios：通用的Ajax请求库，官方推荐，效率高
  2. vue-resource：vue插件库，vue 1.x使用广泛，官方已不维护

相关文章：

第三章Vue中的Ajax

文章目录Vue脚手架配置代理为什么要配置代理服务器什么是跨域&#xff1f;代理跨域CORS跨域利用Vue-CLI配置代理服务器GitHub用户搜索案例本案例需要下载axios库&#xff1a; npm install axiosVue脚手架配置代理 为什么要配置代理服务器 什么是跨域&#xff1f; 跨域资源共…...

编程日记 2023/4/26 5:44:50

在 Python3 中使用 JSON

在 Python3版本中使用 JSON 本教程将会教我们如何使用 Python 编程语言编码和解码 JSON。 环境 在python3中&#xff08;以及python2.6版本后的python2版本&#xff09;内置了JSON模块&#xff0c;无需额外安装另外的JSON模块。 简介 JSON模块是python内置的用来进行pytho…...

编程日记 2023/5/17 12:15:11

图神经网络GNN介绍

目录标题图神经网络基础图基本模块定义图的邻接矩阵点特征的更新&#xff08;重构&#xff09;多层GNN图卷积GCN模型GCN基本思想网络层数&#xff1a;基本计算图注意力机制graph attention networkT-GCN序列图神经网络图相似度图神经网络基础 图基本模块定义 三个特征&#x…...

编程日记 2023/4/29 7:52:00

【面试】TCP、UDP、Socket、HTTP网络编程面试题

文章目录什么是网络编程网络编程中两个主要的问题网络协议是什么为什么要对网络协议分层计算机网络体系结构1 TCP / UDP1.1 什么是TCP/IP和UDP1.2 TCP与UDP区别&#xff1a;1.3 TCP和UDP的应用场景&#xff1a;1.4 形容一下TCP和UDP1.5 运行在TCP 或UDP的应用层协议分析。什么是…...

编程日记 2023/5/17 12:16:43

Python语言的文件读写

&#x1f951;高级语言有很多共同之处&#xff0c;在文件读写这一部分我们就可以类比着之前我们过的C语言的文件读写的操作进行处理。 &#x1f951;还记得我们C语言当中的文件进行操作时所需要的哪些步骤吗?文件打开&#xff0c;文件读/写操作&#xff0c;文件关闭。我们的Py…...

编程日记 2023/5/18 10:34:55

面向对象 ( 上 )

Java面向对象 ( 上 ) 观看b站尚硅谷视频做的笔记 1、 面向过程 (POP) 与面向对象 (OOP) 2、类和对象 2.1、Java 类及类的成员 属性&#xff1a;对应类中的成员变量 行为&#xff1a;对应类中的成员方法。 2.2、类与对象的创建及使用 一、设计类&#xff0c;就是设计类的…...

编程日记 2023/4/27 21:14:08

Node.js学习笔记——会话控制

一、介绍 所谓会话控制就是对会话进行控制 HTTP 是一种无状态的协议&#xff0c;它没有办法区分多次的请求是否来自于同一个客户端&#xff0c; 无法区分用户 而产品中又大量存在的这样的需求&#xff0c;所以我们需要通过 会话控制 来解决该问题 常见的会话控制技术有三种&a…...

编程日记 2023/5/18 10:36:40

tsconfig.json参数详解

tsconfig.json是ts编译器的配置文件&#xff0c;ts编译器可以根据他的信息来对代码进行编译。 想要学习这篇文章小伙伴&#xff0c;可以先去看看下面文章&#xff0c;可以明白tsconfig.json的由来以及如何编译&#xff1a; 在vscode中使用Typescript并运行_typescript vscode…...

编程日记 2023/4/27 4:26:08

Pyecharts Geo绘制可视化地图并展示坐标位置

文章目录 Pyecharts Geo绘制可视化地图安装需要的模块绘制出地图生成空白地图修改参数，调整地图输出格式地图上展示坐标位置输入坐标点将坐标点添加入系列并配置系列完整代码参考文献Pyecharts Geo绘制可视化地图 安装需要的模块 pip install pyecharts绘制出地图 生成空白…...

编程日记 2023/4/26 6:38:40

什么是Hbuilder？--前端工具IDE

一&#xff0c;简介HBuilder 1.1HBuilder HBuilder是DCloud&#xff08;数字天堂&#xff09;推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。它基于Eclipse&#xff0c;所以顺其自然地兼容了Eclipse的插件从Fron…...

编程日记 2023/5/2 3:34:48

07-centos-更改数据源、打补丁、查看内核

本文主要是介绍linux-centos的常用操作 更改数据源 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-6.repo 查看内核 [rootcentos02 ~]# uname -a Linux centos02 2.6.32-642.el6.x86_64 #1 SMP Tue May 10 17:27:01 UTC 2016 x86_64 …...

编程日记 2023/4/26 17:41:34

flac格式如何转mp3，3种简单方法值得收藏

flac格式如何转mp3&#xff1f;mp3是小伙伴们所熟知的音频格式&#xff0c;相信flac格式也一定有小伙伴知道&#xff0c;它是一种无损音频压缩格式&#xff0c;是目前流行的数字音乐文件格式之一。那么为什么要将flac格式转换成mp3格式呢&#xff0c;这里小编就给大家讲一讲fla…...

编程日记 2023/4/29 21:50:48

停车位 蓝桥杯模拟

【问题描述】 小蓝要在路边划分停车位。 他将路边可停车的区域划分为L个整数小块&#xff0c;编号1至L。一个车位需要连续的K 个小块&#xff0c;停车位不能重 叠。有的小块属于井盖、消防通道等区域&#xff0c;不能停车。 请问小蓝最多划分出多少个停车位&#xff1f; 【输入…...

编程日记 2023/5/18 10:56:35

ftrace使用实战

诉求&#xff1a;遇到一个问题 echo blocked > /sys/class/block/sdb/device/state 报非法参数&#xff0c;想要知道根因&#xff0c;但是对这块内核代码不熟悉&#xff0c;不知道从哪里下手&#xff0c;那就先用ftrace看看内核调用栈&#xff0c;如下所示。 rootrlk:/home…...

编程日记 2023/4/27 14:13:23

【C#进阶】C# 不安全代码

序号系列文章20【C#进阶】C# 泛型21【C#进阶】C# 匿名方法22【C#进阶】C# 多线程文章目录前言1、什么是不安全代码&#xff1f;2、如何编译不安全代码&#xff1f;3、指针类型4、指针执行的运算符和语句5、固定大小的缓冲区6、函数指针7、不安全代码的总结结语前言 &#x1f4d…...

编程日记 2023/4/26 14:55:39

Docker安装部署ElasticSearch

1.部署单点ElasticSearch 1.1.创建网络 因为我们还需要部署kibana容器&#xff0c;因此需要让ElasticSearch和kibana容器互联。这里先创建一个网络&#xff1a; docker network create es-net1.2.拉取镜像 考虑到ElasticSearch的兼容性&#xff0c;这里ElasticSearch、kiba…...

编程日记 2023/4/29 5:58:12

【新2023Q2模拟题JAVA】华为OD机试 - 快递业务站

最近更新的博客 华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为od机试，独家整理 已参加机试人员的实战技巧本篇题解：快递业务站 题目 快递业务范…...

编程日记 2023/4/27 2:41:05

OpenCV入门（二十四）快速学会OpenCV 23 傅里叶变换

OpenCV入门&#xff08;二十四&#xff09;快速学会OpenCV 23 傅里叶变换1.傅里叶变换理论概述2.Numpy实现傅里叶变换2.1 傅里叶变换2.2 傅里叶逆变换2.3 高通滤波3.OpenCV实现傅里叶变换3.1 实现傅里叶变换3.2 实现傅里叶逆变换3.3 低通滤波作者&#xff1a;Xiou 1.傅里叶变换…...

编程日记 2023/4/28 20:42:25

线段树合并

前置知识&#xff1a;权值线段树&#xff0c;动态开点。 引入 我们先来看一道题&#xff1a; 永无乡包含 nnn 座岛&#xff0c;给出每座岛的重要度的排名&#xff0c;名次用 111 到 nnn 来表示。一开始有 mmm 条边连接&#xff0c;接下来有 qqq 次操作。操作分两种&#xff…...

编程日记 2023/4/29 0:19:16

研发效能 | DevOps如何改变游戏公司工作方式？

如果你是游戏开发者&#xff0c;那么在过去几年里&#xff0c;你可能会觉得有人给了你一把双刃剑。 整个行业不断蓬勃发展&#xff0c;但玩家的预期值也越来越高。玩家们总是希望游戏体验能够更快、更真实、更具创造性。此外&#xff0c;他们还希望能够定期推出新的游戏和更新…...

编程日记 2023/5/17 12:18:00

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/7/7 5:55:02

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2025/7/10 5:45:43

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/7/8 16:00:54

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/7/5 20:12:33

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/7/7 17:01:50

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程新知 2025/7/12 4:16:16

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

编程新知 2025/7/10 22:21:09

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

编程新知 2025/7/5 14:21:20

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

编程新知 2025/7/11 15:44:23

java高级——高阶函数、如何定义一个函数式接口类似stream流的filter

java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用&#xff08;Math::max&#xff09; 2 函数接口…...

编程新知 2025/7/11 16:54:10