使用 axios 访问 API

使用 axios 访问 API

安装 axios

npm install axios

然后在入口文件 main.js中引入

import axios from 'axios'
vue.prototype.$http = axios

在 src 下新建 src\mock文件夹，新建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 接口