当前位置: 萬仟网 > IT编程>开发语言>Jquery > Vue Axios前后端数据交互(三)

Vue Axios前后端数据交互(三)

2018年10月30日  | 萬仟网IT编程  | 我要评论
Axios 中文:https://www.kancloud.cn/yunye/axios/234845 github:https://github.com/axios/axios 1.安装 npm install axios 2.引入加载 import Axios from "axios" Vue. ...

axios
中文:https://www.kancloud.cn/yunye/axios/234845
github:https://github.com/axios/axios
1.安装
npm install axios
2.引入加载
import axios from "axios"
vue.prototype.\(axios = axios 3.请求 get请求: this.\)axios("http://www.wwtliu.com/sxtstu/news/juhenews.php",{
params:{
type:"junshi",
count:30
}
})
.then(res => {
this.newsdata = res.data;
console.log(res.data);
})
.catch(error => {
console.log(error);
})
post请求:
form-data:?name=iwen&age=20
x-www-form-urlencoded:{name:"iwen",age:20}
注意:axios接受的post请求参数的格式是form-data格式
this.$axios.post("http://www.wwtliu.com/sxtstu/blueberrypai/login.php", qs.stringify({
user_id:"iwen@qq.com",
password:"iwen123",
verification_code:"crfvw"
}))
.then(res => {
console.log(res.data)
})
.catch(error => {
console.log(error);
})
4.全局的 axios 默认值
axios.defaults.baseurl = 'https://api.example.com';
axios.defaults.headers.common['authorization'] = auth_token;
axios.defaults.headers.post['content-type'] = 'application/x-www-form-urlencoded';
5.拦截器

6.跨域处理:
    修改config index.js文件
        proxytable: {
            "/api": {
                target: "http://localhost:3000",
                changeorigin: true,
                pathrewrite: {
                    '^/api': ''
                }
            }
        }
    添加host
        vue.prototype.host = '/api'
    注意:此种跨域解决方案,只能适用于测试阶段,打包的时候,不会具备服务器
          不能跨域了,后端解决。
    

mock:数据模拟
1.自己创建json文件。使用get请求形式访问数据
优点:方便,快捷
缺点:只能存在get请求
2.项目中集成服务器,模拟各种接口
优点:模拟真实线上环境
缺点:增加开发成本
3.直接使用线上数据
优点:真实
缺点:不一定每个项目都存在
4.数据模拟库
http://mockjs.com/

mockjs:
语法:
'list|1-10': [{
'id|+1': 1
}]

    1.'name|1': array

    从属性值 array 中随机选取 1 个元素,作为最终值。

    2.'name|+1': array

    从属性值 array 中顺序选取 1 个元素,作为最终值。

    3.'name|min-max': array

    通过重复属性值 array 生成一个新数组,重复次数大于等于 min,小于等于 max。

    4.'name|count': array

    通过重复属性值 array 生成一个新数组,重复次数为 count。

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2020  萬仟网 保留所有权利. 粤ICP备17035492号-1