mock生成数据方法 在vue里面的使用 简单版

这篇博客简单的介绍了一下mock在vue里面的运用。不懂得小伙伴们可以参考一下。

第一步：安装

 npm install mockjs -S
 顺便把 需要axios 安装 npm install axios，需要发请求的组件都引一下axios；

第二步：创建mock.js文件，引Mock。。 mock.js文件，用来放数据，放在src下

//引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random;
//使用mockjs模拟数据
Mock.mock('/api/data', (req, res) => {//当post或get请求到/api/data路由时Mock会拦截请求并返回上面的数据
  let list = [];
  for(let i = 0; i < 50; i++) {
    let listObject = {
      id: Random.integer(0, 999999),
      name: Random.csentence(5, 30),//随机生成一段中文文本。
      price: Random.integer(100, 9999),//返回一个随机的整数。
      img: Random.image('80x80', '#8ef2ef', '#FFF')
    }
    list.push(listObject);
  }
  return {
    data: list
  }
})