mockjs模拟假数据

有的时候前端写好了页面,但是此时后台接口还没有提供过来,我们经常会使用假数据来测试一下。刚开始我会在一个文件夹下如:utils新建一个fakeData.js的文件,专门来用来存放假数据。
后来才发现,原来有个mock.js的东西,专门用来帮助我们完成这件事。

官网

mock.js的官网: mockjs.
还是要先看看官网的。这篇只是提取官网中我需要的来当做自用文档。

安装

npm install mockjs -D

由于生产环境上都是真实数据了,所以我选择了-D的模式。
这里选择了node安装方式,其他方式详见官网。

使用

由于目前在用vue进行开发,所以搭配的是vue-cli的环境
同时还在使用axios。
新建一个mock文件夹,然后新建一个mock.js文件。
需求:想要一个sheetList的数据。

//mock.js
const Mock = require('mockjs');
const Random = Mock.Random;

const sheetListData = function() {
  let sheetList = [];
  for(let i = 0; i < 30; i++) {
    let sheetObj = {
      id: Random.guid(), //随机生成一个GUID。
      title: Random.ctitle(), //随机生成一句中文标题。(默认3-7个字符)
      time: Random.datetime(), //随机生成指定日期和时间格式的字符串,默认yyyy-MM-dd HH:mm:ss
      createName: Random.cname(), //随机生成一个常见的中文姓名
      status: Random.pick(['进行中', '已关闭', '草稿', '已作废']) //从数组随机选取一个元素,并返回。
    }
    sheetList.push(sheetObj);
  }
  return sheetList;
}
Mock.mock('/mock/sheetList', sheetListData);

在main.js中引入mock.js

//mian.js
require('./mock/mock.js');

在Test.vue中发送数据

//这个mockSheetList是在mockapi.js中封装好的请求方法。
import { mockSheetList } from '@/api/mockapi'
// ...
// ...
created() {
  this.getMockData();
}
methods: {
    async getMockData() {
      try {
        this.fakeData = await mockSheetList();
        console.log(this.fakeData);
      } catch {
        console.log('failed')
      }
    }
  }

至此,可以在控制台看到请求的数据。
至于mockjs其他的用法,可见官网。
另外还看到这篇文章,其中有添加或者删除数据: vue-vue项目中mock.js的使用.

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读