Mock模拟数据

知识点总结:

• Mock.mock()

  
  
  image.png
• Mock.random
  pick, integer, image,cword,cparagraph etc..

P.S. 更多使用说明请看官方文档

STAR描述

Task: 前端模拟一个电商平台的数据接口

action: 使用json-server和mock.js实现, 具体步骤如下

一.安装
打开cmd, 运行

npm install mockjs
npm install json-server

二.写js文件
照着京东商城上展示的字段, 打算模拟出这种结构的json数据

image.png

db.js文件代码如下:

let Mock = require('mockjs');
let Random = Mock.Random;

var goods = []
let uniqueTags = ['自营', '京东超市', '淘宝', '天猫']
let commonTags = ['领券110减5', '满200减25', '满300减40']
let goodTags = ['脱脂', '未添加糖', '非有机', '德国', '进口']
for (var i = 0; i < 20; i++) {
    let item = Mock.mock({
        sid: i + 1,
        title: '牛奶' + Random.cword(8, 20),
        goodTags: [],
        uniqueTags: [],
        commonTags: [],
        'price|30-100.2': 1,
        commentCount: Random.integer(100, 20000),
        praiseRate: Random.integer(70, 100),
        shop: Random.cword(2, 5) + '牛奶店',
        images: Random.image('200x200', '#00405d', '#FFF', 'Milk'),
    })
    let max = Random.integer(0, 3)
    for (var j = 0; j < max; j++) {
        item.goodTags.push(Random.pick(goodTags))
    }
    
    max = Random.integer(0, 2)
    for (var j = 0; j < max; j++) {
        item.uniqueTags.push(Random.pick(uniqueTags))
    }
    
    max = Random.integer(0, 2)
    for (var j = 0; j < max; j++) {
        item.commonTags.push(Random.pick(commonTags))
    }

    goods.push(item)
}

module.exports = function() {
    var data = {
        goods: {
            "retCode": "200",
            "rspBody":goods
        }
    };
    return data
}

三. 运行
在js文件所在的文件夹打开命令行

json-server db.js 

这样就可以通过访问localhost:3000 来访问接口了