（四）Vue 中的 ajax

4.1 解决开发环境 Ajax 跨域问题

使用代理服务器

👉请求跨域问题

解决办法：

1.后端cors,2.jsonp前后端一块（script标签中的src),只能解决get请求,3.配置代理服务器

粉色为代理服务器，服务器和服务器不用ajax，两台服务器间通信使用http

如何开启代理服务器？

1. 使用nginx

2. 借助vue-cli

❤️Vue脚手架配置代理

方法一：

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

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}
1
2
3
4
5

说明：

​ 1.优点：配置简单，请求资源时直接发给起前端（8080）即可。

​ 2.缺点：不能配置多个代理，不能灵活的控制请求是否走代理（当前端的public中有相同的资源时，先走前端）

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

方法二

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

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: ''
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

说明：

​ 1.优点：可以配置多个代理，且可以灵活的控制请求是否走代理。

​ 2.缺点:配置略微繁琐，请求资源时必须加前缀。

例如：

devServer: {
    proxy: {
      '/api': {
        target:'http://localhost:5000',
        pathRewrite:{'^/api':''},
        ws: true, //用于支持webscoket 
        changeOrigin: true  //说谎 用于控制请求头中的host值
      },
       '/demo': {
        target:'http://localhost:5001',
        pathRewrite:{'^/demo':''},
        ws: true, //用于支持webscoket 
        changeOrigin: true  //说谎 用于控制请求头中的host值
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4.2 github 用户搜索案例

4.2.2 接口地址

https://api.github.com/search/users?q=xxx

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

4.3.1 axios

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

4.3.2 vue-resource

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

4.4 slot 插槽

4.4.1 效果

效果一（不使用插槽）：

效果二（默认插槽）：

效果三（具名插槽）：

效果三（作用域插槽）：

👉插槽

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

2.分类：默认插槽，具名插槽、作用域插槽

3.使用方式：

​ 1.默认插槽：

2.具名插槽：

​ 3.作用域插槽：

​ 1.理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。

4.4.1 理解

父组件向子组件传递带数据的标签，当一个组件有不确定的结构时, 就需要使用slot 技术，注意：插槽内容是在父组件中编译后, 再传递给子组件的。

4.4.2 分类

1. 默认插槽

2. 命名插槽

3. 作用域插槽