• 使用 axios 访问 API


    使用 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 接口 

  • 相关阅读:
    Wannafly挑战赛13 C:zzf的好矩阵(思维)
    Wannafly挑战赛13 B:Jxc军训(逆元)
    TZOJ 1221 Tempter of the Bone(回溯+剪枝)
    AtCoder Regular Contest 092 C
    TZOJ 3030 Courses(二分图匹配)
    TOJ 2778 数据结构练习题――分油问题(广搜和哈希)
    PAT L3-001 凑零钱(01背包dp记录路径)
    [HNOI2009]通往城堡之路
    [HNOI2006]潘多拉的宝盒
    [bzoj4361]isn
  • 原文地址:https://www.cnblogs.com/DeryKong/p/13986260.html
Copyright © 2020-2023  润新知