第 4 章：Vue 中的 ajax

news2024/10/21 1:37:03

1. 解决开发环境 Ajax 跨域问题

vue脚手架配置代理

  • 原理图：
    在这里插入图片描述

1.1 方法一

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

devServer:{
  proxy:"http://localhost:5000"  // 这个5000 是请求目标的端口号
}

说明：

  1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
  2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
  3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源（本地资源））

1.2 方法二

编写vue.config.js配置具体代理规则：

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}

其中changeOrigin：

  • changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000（告诉目标服务器我和你端口号一样，更加可能被同意请求，不老实）
  • changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080（告诉你我是和你不一样的端口号的请求，可能会被拒绝，虽然都是服务器，诚实）
  • changeOrigin默认值为true

说明：

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

1.3 配置代理服务器 案例

App.vue
<template>
	<div>
		<button @click="getStudents">获取学生信息</button>
		<button @click="getCars">获取汽车信息</button>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name:'App',
		methods: {
			getStudents(){
				axios.get('http://localhost:8080/students').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			},
			getCars(){
				axios.get('http://localhost:8080/demo/cars').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			}
		},
	}
</script>
main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})
vue.config.js
module.exports = {
  pages: {
    index: {
      //入口
      entry: 'src/main.js',
    },
  },
	lintOnSave:false, //关闭语法检查
	//开启代理服务器（方式一）
	/* devServer: {
    proxy: 'http://localhost:5000'
  }, */
	//开启代理服务器（方式二）
	devServer: {
    proxy: {
      '/atguigu': {
        target: 'http://localhost:5000', // 5000 目标端口号
				pathRewrite:{'^/atguigu':''},
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      },
      '/demo': {
        target: 'http://localhost:5001', // 5001 目标端口号

				pathRewrite:{'^/demo':''},
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      }
    }
  }
}
目标服务器一：5000
const express = require('express')
const app = express()

app.use((request,response,next)=>{
	console.log('有人请求服务器1了');
	// console.log('请求来自于',request.get('Host'));
	// console.log('请求的地址',request.url);
	next()
})

app.get('/students',(request,response)=>{
	const students = [
		{id:'001',name:'tom',age:18},
		{id:'002',name:'jerry',age:19},
		{id:'003',name:'tony',age:120},
	]
	response.send(students)
})

app.listen(5000,(err)=>{
	if(!err) console.log('服务器1启动成功了,请求学生信息地址为：http://localhost:5000/students');
})
目标服务器二：5001
const express = require('express')
const app = express()

app.use((request,response,next)=>{
	console.log('有人请求服务器2了');
	next()
})

app.get('/cars',(request,response)=>{
	const cars = [
		{id:'001',name:'奔驰',price:199},
		{id:'002',name:'马自达',price:109},
		{id:'003',name:'捷达',price:120},
	]
	response.send(cars)
})

app.listen(5001,(err)=>{
	if(!err) console.log('服务器2启动成功了,请求汽车信息地址为：http://localhost:5001/cars');
})

2. github 用户搜索案例

  • 功能：输入关键字，根据输入的内容匹配对应的item

  • 接口用的是github提供的免费测试接口：https://api.github.com/search/users?q=xxx

  • 效果
    在这里插入图片描述

  • vue 项目中常用的 2 个 Ajax 库

    • axios：通用的 Ajax 请求库, 官方推荐，使用广泛

2.1 main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})

2.2 App.vue

<template>
	<div class="container">
		<Search/>
		<List/>
	</div>
</template>

<script>
	import Search from './components/Search'
	import List from './components/List'
	export default {
		name:'App',
		components:{Search,List}
	}
</script>

2.3 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="searchUsers">Search</button>
		</div>
	</section>
</template>

<script>
	import axios from 'axios'
	export default {
		name:'Search',
		data() {
			return {
				keyWord:''
			}
		},
		methods: {
			searchUsers(){
				//请求前更新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>

2.4 List.vue

<template>
	<div class="row">
		<!-- 展示用户列表 -->
		<div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.login">
			<a :href="user.html_url" target="_blank">
				<img :src="user.avatar_url" style='width: 100px'/>
			</a>
			<p class="card-text">{{user.login}}</p>
		</div>
		<!-- 展示欢迎词 -->
		<h1 v-show="info.isFirst">欢迎使用！</h1>
		<!-- 展示加载中 -->
		<h1 v-show="info.isLoading">加载中....</h1>
		<!-- 展示错误信息 -->
		<h1 v-show="info.errMsg">{{info.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}
			})
		},
	}
</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>

3. vue-resource

  • vue 插件库, vue1.x 使用广泛，官方已不维护。
  • 参数类型和个数与axios一致，所以就是axios的写法，换个apiName即可

3.1 使用步骤

  1. 因为是插件，所以需要使用：Vue.use(vueResource)
  2. 把axios换成this.$http

3.2 main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件，因为是插件，所以需要use一下
Vue.use(vueResource)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})

3.3 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="searchUsers">Search</button>
		</div>
	</section>
</template>

<script>
	export default {
		name:'Search',
		data() {
			return {
				keyWord:''
			}
		},
		methods: {
			searchUsers(){
				//请求前更新List的数据
				this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})
				// 这里的 this.$http 替换了 axios
				this.$http.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>

4. slot 插槽

  1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件
  2. 分类：默认插槽、具名插槽、作用域插槽
  3. 理解：父组件向子组件传递带数据的标签，当一个组件有不确定的结构时, 就需要使用slot 技术，注意：插槽内容是在父组件中编译后, 再传递给子组件的。

4.1 效果

  • 效果一（不使用插槽）：
    在这里插入图片描述
  • 效果二（默认插槽）：
    在这里插入图片描述
  • 效果三（具名插槽）：
    在这里插入图片描述
  • 效果四（作用域插槽）：
    在这里插入图片描述

4.2 默认插槽

父组件中：
<Category>
   <div>html结构1</div>
</Category>
子组件中：
<template>
    <div>
       <!-- 定义插槽 -->
       <slot>插槽默认内容...</slot>
    </div>
</template>

4.3 具名插槽

父组件中：
<Category>
    <template slot="center">
      <div>html结构1</div>
    </template>

    <template v-slot:footer>
       <div>html结构2</div>
    </template>
</Category>
子组件中：
<template>
    <div>
       <!-- 定义插槽 -->
       <slot name="center">插槽默认内容...</slot>
       <slot name="footer">插槽默认内容...</slot>
    </div>
</template>

4.4 作用域插槽

  • 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
父组件中：
<Category>
	<template scope="scopeData">
		<!-- 生成的是ul列表 -->
		<ul>
			<li v-for="g in scopeData.games" :key="g">{{g}}</li>
		</ul>
	</template>
</Category>

<Category>
	<template slot-scope="scopeData">
		<!-- 生成的是h4标题 -->
		<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
	</template>
</Category>
子组件中：
<template>
    <div>
        <slot :games="games"></slot>
    </div>
</template>

<script>
    export default {
        name:'Category',
        props:['title'],
        //数据在子组件自身
        data() {
            return {
                games:['红色警戒','穿越火线','劲舞团','超级玛丽']
            }
        },
    }
</script>

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

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

相关文章

杰理AC632N---发射功率问题

杰理AC632N---发射功率问题

AC632N的发射功率SDK默认0dbm左右&#xff0c;在实际做产品时&#xff0c;如果使用SDK默认的发射功率&#xff0c;则测试到的发射功率达不到规格书上面的8dbm. 查看代码流程发现SDK中修改发射功率的文职如下&#xff1a; 修改到level 10 则是最大功率8dbm , 使用频谱仪可以测得…
阅读更多...
OpenAI 最新发布的 o1 模型在 ARC-AGI-Pub 数据集上的测试结果与分析

OpenAI 最新发布的 o1 模型在 ARC-AGI-Pub 数据集上的测试结果与分析

在过去的24小时内&#xff0c;我们有幸获得了 OpenAI 新发布的 o1-preview 和 o1-mini 模型的使用权限。这些模型经过特别训练&#xff0c;旨在模拟推理过程&#xff0c;并在给出最终答案之前给予更多时间生成和修正推理步骤。 成百上千的人都在问&#xff0c;o1 在 ARC 奖项上…
阅读更多...
linux线程 | 线程的控制(一）

linux线程 | 线程的控制(一）

前言&#xff1a;本节内容为线程的控制。在本篇文章中&#xff0c; 博主不仅将会带友友们认识接口&#xff0c; 使用接口。 而且也会剖析底层&#xff0c;带领友友们理解线程的底层原理。 相信友友们学完本节内容&#xff0c; 一定会对线程的控制有一个很好的把握。 那么&#…
阅读更多...
Gin框架官方文档详解03：HTML渲染

Gin框架官方文档详解03：HTML渲染

官方文档&#xff1a;https://gin-gonic.com/zh-cn/docs/ 注&#xff1a;强烈建议没用过Gin的读者先阅读第一节&#xff1a;第一个Gin应用。 目录 一、简单渲染二、使用不同目录下名称相同的模板三、自定义模板渲染器四、自定义分隔符五、自定义模板函数六、总结 一、简单渲染 …
阅读更多...
数通--5

数通--5

一、链路聚合 背景&#xff1a;带宽不够&#xff0c;加线&#xff0c;但是stp判断是环路&#xff0c;阻塞&#xff0c;等于没加线。通过链路聚合解决&#xff08;如果我把千兆换成万兆&#xff0c;老子有钱任性的话&#xff0c;没得说&#xff09; 现在我要的不是备份而是带宽…
阅读更多...
电能表预付费系统-标准传输规范(STS)（4）

电能表预付费系统-标准传输规范(STS)（4）

5.4 TokenCarrier 到 MeterApplicationProcess 的数据流 The flow of data from the TokenCarrier to the MeterApplicationProcess is shown in Figure 4.此数据流见图 4。 图 4 TokenCarrier 到 MeterApplicationProcess 的数据 The token entry process from the TokenCarr…
阅读更多...
抢单超卖? 并发问题解决思路

抢单超卖? 并发问题解决思路

1. 问题介绍 在用户抢单或者商品售卖的过程中&#xff0c;正常情况下是一人一件&#xff0c;但是当网络流量剧增时多个用户同时抢到一个商品应该如何分配&#xff1f;假设这样一个场景A商品库存是100个&#xff0c;但是秒杀的过程中&#xff0c;一共卖出去500个A商品。对于卖家…
阅读更多...
AXI GPIO按键控制——ZYNQ学习笔记4

AXI GPIO按键控制——ZYNQ学习笔记4

一、AXI GPIO接口简介 是什么&#xff1f;是PL部分的一个IP软核&#xff0c;实现通用输入输出接口的功能&#xff0c;并通过AXI协议实现与处理系统通信&#xff0c;方便控制与拓展GPIO接口。 AXI GPIO IP 核为 AXI 接口提供了一个通用的输入/输出接口。 与 PS 端的 GPIO 不同&…
阅读更多...
【YOLO系列】YOLO11原理和深入解析——待完善

【YOLO系列】YOLO11原理和深入解析——待完善

文章目录 前言一、主要新增特性二、主要改进2.1 C3K2网络结构2.2 C2PSA网络结构2.3 Head部分 三、对比与性能优势四、X-AnyLabeling4.1 目标检测&#xff1a;4.2 实例分割&#xff1a;4.3 图像分类&#xff1a;4.4 姿态估计&#xff1a;4.5 旋转目标检测&#xff1a; 五、总结 …
阅读更多...
Vue+Vant实现7天日历展示，并在切换日期时实时变换

Vue+Vant实现7天日历展示，并在切换日期时实时变换

效果图&#xff1a; 主要使用 moment.js 插件完成 HTML部分 <div class"day-content"><div class"day-content-t"><div>{{ monthVal }}</div><div click"onCalendar()">更多>></div></div><…
阅读更多...
HTTP vs WebSocket

HTTP vs WebSocket

本文将对比介绍HTTP 和 WebSocket &#xff01; 相关文章&#xff1a; 1.HTTP 详解 2.WebSocket 详解 一、HTTP&#xff1a;请求/响应的主流协议 HTTP&#xff08;超文本传输协议&#xff09;是用于发送和接收网页数据的标准协议。它最早于1991年由Tim Berners-Lee提出来&…
阅读更多...
【C++】二叉搜索树的概念与实现

【C++】二叉搜索树的概念与实现

目录 二叉搜索树 概念 key类型 概念 代码实现 key_value类型 概念 代码实现 二叉搜索树 概念 ⼆叉搜索树⼜称⼆叉排序树&#xff0c;它或者是⼀棵空树&#xff0c;或者是具有以下性质的⼆叉树: 左子树的值默认小于根节点&#xff0c;右子树的值默认大于根节点 。 ⼆…
阅读更多...
具备技术三：通用类型any实现

具备技术三：通用类型any实现

一、背景 一个连接必须拥有请求接收与解析的上下文。 上下文的结构不能固定&#xff0c;因为服务器支持的协议很多&#xff0c;不同协议有不同的上下文结构&#xff0c;所以必须拥有一个容器保存不同的类型结构数据。 二、设计思路 目标&#xff1a;一个容器保存各种不同数…
阅读更多...
opencv学习：CascadeClassifier和detectMultiScale算法进行人脸识别

opencv学习：CascadeClassifier和detectMultiScale算法进行人脸识别

CascadeClassifier CascadeClassifier 是 OpenCV 提供的一个用于对象检测的类&#xff0c;它基于Haar特征和AdaBoost算法。它能够识别图像中的特定对象&#xff0c;比如人脸、眼睛、微笑等。CascadeClassifier 需要一个预训练的XML分类器文件&#xff0c;该文件包含了用于检测…
阅读更多...
SHA1算法学习

SHA1算法学习

SHA-1&#xff08;安全哈希算法1&#xff09;是一种加密哈希函数&#xff0c;它接受一个输入并生成一个160位&#xff08;20字节&#xff09;的哈希值&#xff0c;通常表示为一个40位的十六进制数。 SHA1的特点 输入与输出&#xff1a;SHA-1可以接受几乎任意大小的输入&#…
阅读更多...
21世纪20年代最伟大的情侣：泰勒斯威夫特和特拉维斯凯尔西每张照片都在秀恩爱

21世纪20年代最伟大的情侣：泰勒斯威夫特和特拉维斯凯尔西每张照片都在秀恩爱

在时代的长河中&#xff0c;每一代都毫无例外地拥有属于自己的 it couple&#xff08;当红情侣&#xff09;&#xff0c;他们成为了那个特定时期大众瞩目的焦点和津津乐道的话题。 千禧年间&#xff0c;确实涌现出了诸多令人瞩目的情侣组合。就像汤姆克鲁斯和凯蒂霍尔姆斯&…
阅读更多...
【H2O2|全栈】更多关于HTML（2）HTML5新增内容

【H2O2|全栈】更多关于HTML（2）HTML5新增内容

目录 HTML5新特性 前言 准备工作 语义化标签 概念 新内容 案例 多媒体标签 音频标签audio 视频标签 video 新增部分input表单属性 预告和回顾 后话 HTML5新特性 前言 本系列博客是对入门专栏的HTML知识的补充&#xff0c;并伴随一些补充案例。 这一期主要介绍H…
阅读更多...
从源码上剖析AQS的方方面面（超详细版）

从源码上剖析AQS的方方面面（超详细版）

AQS在 ReentrantLock 的使用方式&#xff08;非公平锁&#xff09; 我们之前学习过 ReentrantLock 非公平锁与公平锁的区别在于&#xff0c;非公平锁不会强行按照任务等待队列去等待任务&#xff0c;而是在获取锁的时候先去尝试使用 CAS 改变一下 State&#xff0c;如果改变成…
阅读更多...
架构设计笔记-18-安全架构设计理论与实践

架构设计笔记-18-安全架构设计理论与实践

知识要点 常见的安全威胁&#xff1a; 信息泄露&#xff1a;信息被泄露或透露给某个非授权的实体。破坏信息的完整性&#xff1a;数据被非授权地进行增删、修改或破坏而受到损失。拒绝服务&#xff1a;对信息或其他资源的合法访问被无条件地阻止。攻击者向服务器发送大量垃圾…
阅读更多...
多选框的单选操作 Element ui

多选框的单选操作 Element ui

文章目录 样式预览Q&#xff1a;为什么要这么做&#xff1f;实现原理探索路程 样式预览 Q&#xff1a;为什么要这么做&#xff1f; 单选框的样式不够好看单选框因为框架等原因&#xff0c;无法取消选择 实现原理 判断多选框绑定的 value&#xff0c;如果长度为2&#xff0c;那…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023