第 4 章：Vue 中的 ajax

学习资料来自尚硅谷VUE教学视频

csdn：课程代码、vue3笔记、课件

gitee：课件、代码、资料

其他：vscode插件推荐、第三方库网站、npmjs库

工具库推荐：
moment.js 时间处理工具，很强很大。还有个轻量的叫dayjs
生成全球唯一id工具：uuid，但是很大，有个精简版：nanoid

章节导航：

第 1 章：Vue 核心（上）

第 1 章：Vue 核心（下）

第 2 章：Vue 组件化编程

第 3 章：使用 Vue 脚手架

第 4 章：Vue 中的 ajax

第 5 章：vuex

第 6 章：vue-router（Vue路由）

第 7 章：Vue UI 组件库

第 7 章：Vue3

第 4 章：Vue 中的 ajax

4.1. vue脚手架配置代理
- 4.1.1 方法一
- 4.1.2 方法二
4.2. vue 项目中常用的 2 个 Ajax 库：axios
4.3. vue 项目中常用的 2 个 Ajax 库：vue-resource
4.4. 插槽

4.1. vue脚手架配置代理

跨域：
同源策略：所谓同源是指域名（127.0.0.1），协议（http），端口（8080）相同。

解决跨域：
1.cors
2.jsonp 巧妙的方式，借助script标签里的src属性在引入外部资源的时候不受同源策略限制的特点，且只能 get请求
3.配置代理服务器，代理服务器和前端请求同源，但是他是服务器，服务器和服务器之间通信不用ajax，ajax是前端技术，得有浏览器，有Window，才有xhr、fetch这些东西，在node.js里写new XMLHttpRequest()是会报错的，两台服务器之间打交道用的是最传统的http请求，所以同源策略管不到代理服务器，跨域问题就解决了。

怎么开启代理服务器：
1.Nginx
2.vue-cli

4.1.1 方法一

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

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

说明：

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

4.1.2 方法二

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

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

说明：

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

引入成型的第三方资源（样式等）：
1.可以放在：src/assets/css/下，在app组件里引入
import ‘./assets/css/bootstrap.css’
如果通过import形式引入样式，脚手架会做一个非常严格的检查，你这个.css里面只要用到了不存在的资源那就会报错
2.放在public/css/下，在index.html里引入<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">

4.2. vue 项目中常用的 2 个 Ajax 库：axios

发送请求的几种方法：
1.xhr new XMLHttpRequest() xhr.open() xhr.send()
2.jQuery $.get $.post
3.axios 尤雨溪推荐是promise风格
4.fetch 是promise风格，和xhr一样是js内置的，但是ie不兼容

安装axios：npm i axios

使用：
发送方：

 import axios from 'axios'searchUsers(){//请求前更新List的数据this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})//ES6模板字符串，用``代替""，在${} 里面写表达式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:[]})})}

接收方：

 this.$bus.$on('updateListData',(dataObj)=>{//es6的拷贝对象方法this.info = {...this.info,...dataObj}})

4.3. vue 项目中常用的 2 个 Ajax 库：vue-resource

vue 插件库, vue1.x 使用广泛，官方已不维护。交给别的团队维护了。

安装vue-resource：npm i vue-resource

//引入插件
import vueResource from 'vue-resource'
//使用插件，这样vm和vc身上都会有$http
Vue.use(vueResource)

具体使用方式和axios区别就是把上面的axios.get改成this.$http.get，其他都一样，也是promise风格的。

4.4. 插槽

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。
分类：默认插槽、具名插槽、作用域插槽
使用方式：
1. 默认插槽：

插槽中的元素是在父组件完成解析之后塞到子组件的，所以样式写在父组件或子组件都行，如果写在父组件会把样式带好传过去，如果写在子组件样式也能控制

父组件中：

      <Category><html结构>xxxx</html结构></Category>

子组件中：

         <template><div><!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） --><slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot></div></template>

具名插槽：

vue2.6新提出了一个 slot="center" 新写法： v-slot:footer ，但只能在 template 用

父组件中：

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

作用域插槽：

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

父组件中：

<template><div class="container"><Category title="游戏"><!-- 注意属性名叫scope，没有d，引号内的名字可以随意定 --><template scope="atguigu"><ul><!-- scopeData里是键值对的对象，键就是子组件的定义的名字，可以传多个 --><li v-for="(g, index) in atguigu.games" :key="index">{{ g }}</li></ul></template></Category><Category title="游戏"><!-- {games} es6的结构赋值 --><template scope="{games , msg}"><ol><li style="color: red" v-for="(g, index) in games" :key="index">{{ g }}</li></ol><h4>{{ msg }}</h4></template></Category><Category title="游戏"><template slot-scope="{ games }"><h4 v-for="(g, index) in games" :key="index">{{ g }}</h4></template></Category></div>
</template>

子组件中：

<template><div class="category"><h3>{{title}}分类</h3><slot :games="games" msg="hello">我是默认的一些内容</slot></div>
</template><script>export default {name:'Category',props:['title'],//数据在子组件自身data() {return {games:['红色警戒','穿越火线','劲舞团','超级玛丽']}},}
</script>

第 4 章：Vue 中的 ajax相关推荐

vue定时ajax获取数据,vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
第六章 jQuery中的Ajax应用
第六章 jQuery中的Ajax应用 1.Ajax:客户端javascript所发起的http请求的代号,无刷新的数据更新. 2.编程模型: (1).同步代码:按钮按下执行耗时操作等待执行返回 ...
4 Vue中的Ajax
4 Vue中的Ajax 4.1 配置代理服务器 1.原生 xhr newXMLHttpRequest() xhr.open() xhr.send() 2.jQuery $.get $.post 80% ...
Vue学习（四）—— vue中的ajax
文章目录第四部分 vue中的ajax 一.axios 1.安装 2.引入二.vue脚手架配置代理 1.方法一 2.方法二三.github用户搜索案例 1.接口地址 2.vue 项目中常用的 2 ...
Vue中使用ajax技术
Vue 在Vue中使用ajax技术第一种代理方法第二种代理方法 pathRewrite配置项 ws配置项 changeOrigin配置项 github案例第三方库发送ajax 封装axios 默 ...
vue可以用ajax,Vue 中使用Ajax请求
Vue 项目中常用的 2 个 ajax 库 (一)vue-resource vue 插件, 非官方库,vue1.x 使用广泛 vue-resource 的使用下载 npm install vue-r ...
vue使用ajax库,Vue 中使用Ajax请求
Vue 项目中常用的 2 个 ajax 库 (一)vue-resource vue 插件, 非官方库,vue1.x 使用广泛 vue-resource 的使用在线文档 https://githu ...
vue使用ajax提交数据,vue中使用ajax请求 data的数据问题
问题描述 v件览客需和下于有快都业视的事一房望站是有ue中使用ajax请求 data的数据抖要支圈者器说是事天开的.年后编定功口小发还问题问题出现的朋不功事做时次功好来多这开制的请一例农在环境背景及 ...
vue中封装ajax请求方法,Vue如何封装ajax
Vue如何封装ajax 发布时间:2020-12-07 11:09:07 来源:亿速云阅读:123 作者:小新这篇文章主要介绍Vue如何封装ajax,文中介绍的非常详细,具有一定的参考价值,感兴趣 ...

第 4 章：Vue 中的 ajax

第 4 章：Vue 中的 ajax

4.1. vue脚手架配置代理

4.1.1 方法一

4.1.2 方法二

4.2. vue 项目中常用的 2 个 Ajax 库：axios

4.3. vue 项目中常用的 2 个 Ajax 库：vue-resource

4.4. 插槽

第 4 章：Vue 中的 ajax相关推荐

最新文章

热门文章