第 4 章：Vue 中的 ajax

news/2024/10/22 22:27:00/

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 替换了 axiosthis.$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.ppmy.cn/news/1541168.html

相关文章

已发布金融国家标准目录（截止2024年3月）

已发布金融国家标准目录（截止2024年3月）

已发布金融国家标准目录2024年3月序号标准编号标准名称
阅读更多...
pikachu靶场CSRF-get测试报告

pikachu靶场CSRF-get测试报告

目录 一、测试环境 1、系统环境 2、使用工具/软件 二、测试目的 三、操作过程 1、抓包使用burp生成csrf脚本 四、源代码分析 五、结论 一、测试环境 1、系统环境 渗透机&#xff1a;本机(127.0.0.1) 靶 机&#xff1a;本机(127.0.0.1) 2、使用工具/软件 Burp sui…
阅读更多...
Unity开发Hololens项目

Unity开发Hololens项目

Unity打包Hololens设备 目录Visual Studio2019 / Visual Studio2022 远端部署设置Visual Studio2019 / Visual Studio2022 USB部署设置Hololens设备如何查找自身IPHololens设备门户Unity工程内的打包设置 目录 记录下自己做MR相关&#xff1a;Unity和HoloLens设备的历程。 Vi…
阅读更多...
请求的crossDomain和withCredentials字段

请求的crossDomain和withCredentials字段

场景 axios请求头种不携带withCredentials字段会出现跨域错误。 分析 1. crossDomain: true crossDomain 是一个配置选项&#xff0c;用来表示即将发出的请求是否是一个跨域请求。 当 crossDomain 设置为 true 时&#xff0c;axios 会使用 XMLHttpRequest 的 withCredentials …
阅读更多...
【v5.3.0】修复订单批量发货提示 isPicUpload is not defined

【v5.3.0】修复订单批量发货提示 isPicUpload is not defined

使用订单批量发货的时候&#xff0c;没有反应&#xff0c;控制台提示 ReferenceError: isPicUpload is not defined 修改文件src/pages/order/orderList/components/tableList.vue 把isPicUpload改成isFileUpload&#xff0c;然后重新打包admin后台上传即可
阅读更多...
Oracle里面，with ... as 用法介绍

Oracle里面，with ... as 用法介绍

在Oracle数据库中&#xff0c;WITH AS 子句&#xff08;也称为公用表表达式&#xff0c;CTE, Common Table Expression&#xff09;是一种在查询中定义临时结果集的方法。这个临时结果集可以在后续的查询中被引用&#xff0c;就像是一个临时的表或视图一样。使用 WITH AS 子句可…
阅读更多...
【C#】在 WinForms 中使用 MVVM（Model-View-ViewModel） 设计模式

【C#】在 WinForms 中使用 MVVM（Model-View-ViewModel） 设计模式

结合当前的 DevExpress 项目&#xff0c;在 WinForms 中使用 MVVM&#xff08;Model-View-ViewModel&#xff09; 设计模式。这个例子将通过数据绑定、命令绑定来展示 MVVM 模式的运用。 1. 项目结构 假设我们要实现一个简单的应用程序&#xff0c;它有一个文本框和一个按钮&…
阅读更多...
15分钟学Go 第7天：控制结构 - 条件语句

15分钟学Go 第7天：控制结构 - 条件语句

第7天&#xff1a;控制结构 - 条件语句 在Go语言中&#xff0c;控制结构是程序逻辑的重要组成部分。通过条件语句&#xff0c;我们可以根据不同的条件采取不同的行动。今天我们将详细探讨Go语言中的两种主要条件结构&#xff1a;if语句和switch语句。理解这些控制结构对于编写…
阅读更多...
最新文章

Copyright @ 2022~2023