day05-vue-ajax请求

ajax

1. axios：内部实现通过ajax
2. 下载：yarn add axios
3. 引入：import axios from 'axios'
4. 使用：

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then((res)=>{
})

axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  //数据
  params:{},
  responseType: 'stream'
}).then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

传送数据：
1. 数据放在请求头里面的，用params传送，数据放在请求体里面的，用data传
2. 当传输的数据类型是数据的时候：https://blog.youkuaiyun.com/sunrj_niu/article/details/106804840?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_aggregation-1-106804840.pc_agg_rank_aggregation&utm_term=axios%E4%BC%A0%E9%80%92%E6%95%B0%E7%BB%84+vue&spm=1000.2123.3001.4430

跨域：协议+ip+端口有一个不一样就是跨域

解决跨域：
- jsonp：前后台配合，第三方接口
- cors：只需要后台
- 代理：只需要前台

1. 代理
   - devServer.proxy
   - 在根目录新建一个vue.config.js文件
   - proxy：后台地址——http://后台ip:端口号
   - 重新启动项目：yarn serve

访问单一服务器的简写

多个配置：

changeOrigin：是否跨域
pathRewrite：把请求替换为空

2. 设置请求头：
   hesfers:{
   ‘context-type’:‘application/json’
   ‘context-type’:‘application/x-www-form-urlencoded’

}
写在全局：main.js

使用：
加一个this:this指的是vue实例

elementUI

1. 安装：npm i element-ui -S||yarn add element-ui
2. 引入
   
3. 使用：Vue.use(ElementUI)
4. 组件

layout布局

Container布局容器