vue中使用mock

参考自 https://www.jianshu.com/p/c5568910e946

1.安装

npm install mockjs

2.在mock文件夹下新建文件index.js

//index.js

// 首先引入Mock
const Mock = require('mockjs');

// 设置拦截ajax请求的相应时间
Mock.setup({
  timeout: '200-600'
});

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
  if (key === './index.js') return;
  configArray = configArray.concat(files(key).default);
});

// 注册所有的mock服务
configArray.forEach((item) => {
  for (let [path, target] of Object.entries(item)) {
    let protocol = path.split('|');
    Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
  }
});

3.在main.js中引用

//main.js
require('../mock');  //我的mock文件夹在src文件夹外

4.添加需要模拟的数据
mock/demoList.js

let demoList = [
  {
    id: 1,
    name: "zs",
    age: "23",
    job: "前端工程师"
  },
  {
    id: 2,
    name: "ww",
    age: "24",
    job: "后端工程师"
  }
];

export default {
  "get|/parameter/query": option => {
    return {
      status: 200,
      message: "success",
      data: demoList
    };
  }
};

mock/response/user.js

import Mock from "mockjs";

const Random = Mock.Random;

let userInfo = [];
for (let i = 0; i < 10; i++) {
  let template = {
    name: Random.cname(),
    age: Random.natural(22, 40),
    date: Random.date("yyyy-MM-dd"),
    address: Random.county(true)
  };
  userInfo.push(template);
}

export default {
  "get|/getUser": option => {
    return {
      status: 200,
      message: "success",
      data: userInfo
    };
  },

  "get|/getString": option => {
    return {
      status: 200,
      message: "success",
      data: "第二个方法"
    };
  }
};

5.配置访问路径

//src/api/mock.js

import axios from "axios";

export const getUserInfo = () => {
  return axios.request({
    url: "/getUser",
    method: "get"
  });
};

export const getString = () => {
  return axios.request({
    url: "/getString",
    method: "get"
  });
};

export const query = () => {
  return axios.request({
    url: "/parameter/query",
    method: "get"
  });
};

6.引入使用

import { getUserInfo, query, getString } from "../../api/mock.js";

    init() {
      console.log("首页初始化");
      getUserInfo()
        .then(response => {
          console.log("getUserInfo");
          console.log(response);
        })
        .catch(err => {
          console.log(err);
        });

      getString()
        .then(response => {
          console.log("getString");
          console.log(response);
        })
        .catch(err => {
          console.log(err);
        });

      query()
        .then(response => {
          console.log("query");
          console.log(response);
        })
        .catch(err => {
          console.log(err);
        });
    }