使用 axios 访问 API
安装 axios
npm install axios
然后在入口文件 main.js中引入
import axios from 'axios' vue.prototype.$http = axios
在 src 下新建 srcmock文件夹,新建mock.js
// 创建要模拟的数据集
const Mock = require('mockjs')
const Random = Mock.Random
const newsData = function () {
let articles = []
for (let i = 0; i < 10; i++) {
let newsObj = {
date: Random.date(), //年月日
longDate:Random.datetime(), //精确到时分秒
number:Random.natural(201,205), //数字
image:Random.image(), //图片
flag:Random.boolean(), // true-false
name:Random.cname(), //姓名
url:Random.url(), //url地址
province:Random.province(), //省
city:Random.city(), //市
county:Random.county() //区
}
articles.push(newsObj)
}
return {
code: 0,
msg: "操作成功",
data: articles,
}
}
// 返回时间控制
Mock.setup({
timeout: 3000
})
// ``请严格注意get请求的地址``
Mock.mock('/api/login', 'post',newsData ) //post请求
Mock.mock(RegExp("/api/user/myTranferRecord"+".*"), 'get', newsData) //get请求
修改login.vue文件的methods方法:
methods: {
submitForm(form) {
this.$refs[form].validate(valid =>{
if (valid){
// 需要与 vue.prototype.$http = axios 的 $http 对应
this.$http.post('/api/login').then(res=>{
console.log(res) //这里返回的就是我们在mock中自定义的数据
})
} else {
console.log("验证失败");
alert("验证失败");
return false;
}
});
}
}
执行 npm run serve 启动服务,出发请求 api/login 接口