vue.js 学习笔记之Vue中的Ajax（四）

Vue中的Ajax

（四）Vue中的ajax一、解决开发环境Ajax跨越问题二、github 用户搜索案例2.1 准备工作2.2 静态页面2.3 实现动态组件2.4 注意细节

三、vue 项目中常用的 2 个 Ajax 库3.1 axios3.2 vue-resource

四、slot插槽

（四）Vue中的ajax

一、解决开发环境Ajax跨越问题

使用代理服务器，vue脚手架配置代理：

使用axios第三方库，配置代理服务器：

安装：npm i axios

（1）方法一：

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

devServer:{

proxy:"http://localhost:5000"

}

说明：

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

（2）方法二：

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

module.exports = {

devServer: {

proxy: {

'/api1': {//匹配所有以 '/apil'开头的请 求路径

target: 'http://localhost:5000',//代理目标的基础路径

changeOrigin: true,

pathRewrite: {'^/api1': ''}

},

'/api2': {//匹配所有以 '/api2'开头的请 求路径

target: 'http://localhost:5001' ,//代理目标的基础路径

changeOrigin: true,

pathRewrite: {'^/api2': ''}

}

}

}

}

/*

changeOrigin设置为true时，服务器收到的请求头中的host为: localhost :5000

changeOrigin设置为false时，服务器收到的请求头中的host为: localhost:8080

change0rigin默认值为true

*/

说明：

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

二、github 用户搜索案例

2.1 准备工作

先对界面进行拆分：

2.2 静态页面

index.html：

We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.

App.vue：

List.vue：

Search.vue：

2.3 实现动态组件

接口地址：https://api.github.com/search/users?q=xxx

Search.vue：

List.vue：

这里只使用数组中的三个属性：login、html_url、avatar_url。

在显示页面的时候，List其实有四种方式的呈现效果：

欢迎界面（welcome）加载界面（loading…）搜索用户数据结果界面错误信息界面

在使用全局事件总线传递数据的时候，使用数据对象dataObj传递，然后在Search.vue中传递一个这样的对象 {isFirst: false,isLoading: true,errMsg: '',users: []}。

2.4 注意细节

（1）bootstrap.css

这里使用了第三方样式bootstrap.css，如个直接放在assets静态资源目录下，然后使用import ’./assets/css/bootstrap.css‘引入，运行会出现解析不到的错误，因为vue会进行非常严格的检测。

为了避免这样的错误，可以在public公共目录下引入样式：

然后在index.html中引入第三方样式，就可以生效了：

（2）全局事件总线传递数据

为了是编码简洁，在接收数据的时候，使用数据对象，在传递数据的时候将对象中的属性写完整即可，因为请求后更新List的数据，不再需要isFirst属性，所以可以不用写：

（3）批量替换

在最终接收数据的时候，需要重新赋值，也就是批量替换；注意vc实例对象this获取不到data，不能直接使用this.data，可以再写一个对象属性info，将所有属性放进去即可：

（4）属性丢失

因为请求后更新List的数据，不再需要isFirst属性，所以对象属性中并没有写：

但是为了防止组件中的属性丢失，使用es6语法，在接收数据时对数据二次赋值覆盖，先将this.info中的属性都赋值进去，然后再将dataObj对于需要改的属性进行重新赋值即可，这样属性就不会丢失：

三、vue 项目中常用的 2 个 Ajax 库

3.1 axios

通用的 Ajax 请求库，官方推荐，使用广泛。

安装：npm i axios

引入：import axios from 'axios'

使用axios.get()进行访问请求。

3.2 vue-resource

vue 插件库，vue1.x 使用广泛，官方已不维护。

安装：npm i vue-resource

引入：在main.js中引入插件并使用插件

//引入插件

import VueResource from 'vue-resource'

//使用插件

Vue.use(VueResource)

只有引入插件并使用插件，vc实例对象中才会出现$http，然后就可以直接使用this.$http.get()进行访问请问。

四、slot插槽

1.作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件。

2.理解：父组件向子组件传递带数据的标签，当一个组件有不确定的结构时, 就需要使用 slot 技术。

注意：插槽内容是在父组件中编译后, 再传递给子组件的。

3.分类：默认插槽、具名插槽、作用域插槽。

4.使用方式：

（1）默认插槽：

父组件中:

子组件中:

在使用插槽的时候，会先在父组件中编译后, 再传递给子组件的，所以对于组件中的样式在哪写都可以，只不过是先编译和后编译的问题：

父组件中编码：

子组件中编码：

运行结果：

（2）具名插槽：

有两种不同的具名插槽方法，在包裹结构的时候，最好使用标签，这样就会在前端页面显示源码的时候就会少一层结构，使结构不会杂乱。

父组件中:

子组件中:

父组件中编码：

子组件中编码：

前端页面显示结果：

（3）作用域插槽：

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

具体编码：

父组件中:

子组件中:

父组件中编码：

子组件中编码：

前端页面显示结果：

文章来源

 您阅读本篇文章共花了：