4.ajax请求

1. axios

npm i axios  //在终端下载
import axios from 'axios'  //引入
axios.get('地址').then(    //发送get请求
	response => { console.log(response.data) },   //请求成功
    error => { console.log(error.massage) }
)

---

2. 跨域问题

协议，域名，端口不一致会存在跨域问题

1. 通过cors方法解决跨域，需要后端人员在服务器中为响应头添加一定的内容，表示允许跨域传输数据

2. jsonp方式：需前后端配合，只能解决get请求跨域问题

3. 配置代理服务器（常用）：前端人员配置；两台服务器之间不存在同源策略，不会产生跨域问题

---

3.配置代理服务器

详细文档：vue-cli ==> 配置参考 ==> devServer.proxy

在项目根文件目录下新建一个vue.config.js文件

• 方式一

module.exports = {
  devServer: {
    proxy: 'http://localhost:5000'   //表示代理本地对5000端口的请求
  }
}

配置好之后重新启动项目：npm run serve

get请求地址记得改成代理服务器

前端（本地，8080）有对应数据，代理服务器就不会转发请求

• 方式二

  可配置多条代理，且可以灵活控制请求是否走代理

module.exports = {
  devServer: {
    proxy: {
      '/atguigu': {    //	请求前缀，相同就走这条代理，写get请求时需紧跟端口后面
        target: '<url>',
        pathRewrite:{'^/atguigu':''}  //转发请求时，将添加的请求前缀去掉
        ws: true,  //用于支持websocket
        changeOrigin: true  //用于控制请求头中的host值
      },
      '/foo': {
        target: '<other_url>'
      }

---

4.github用户搜索案例

• 使用模板字符串给地址写参数（参数是变量）：

  http://api.github.com/search/users?q=${this.keyWord} 写在axios.get(``)里面，注意是反引号里面，

---

5. slot插槽

• 让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式
  

3. 作用域插槽

   数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定