1. axios
npm i axios //在终端下载
import axios from 'axios' //引入
axios.get('地址').then( //发送get请求
response => { console.log(response.data) }, //请求成功
error => { console.log(error.massage) }
)
2. 跨域问题
协议,域名,端口不一致会存在跨域问题
-
通过cors方法解决跨域,需要后端人员在服务器中为响应头添加一定的内容,表示允许跨域传输数据
-
jsonp方式:需前后端配合,只能解决get请求跨域问题
-
配置代理服务器(常用):前端人员配置;两台服务器之间不存在同源策略,不会产生跨域问题
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结构,也是一种组件间通信的方式
-
作用域插槽
数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定