mockjs的使用

参考文献 https://github.com/nuysoft/Mock/wiki

mock.js 的用处

• 前后端分离 ：让前端攻城师独立于后端进行开发。
• 增加单元测试的真实性 ：通过随机数据，模拟各种场景。
• 开发无侵入 ：不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
• 用法简单 ：符合直觉的接口。
• 数据类型丰富 ：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
• 方便扩展 ：支持支持扩展更多数据类型，支持自定义函数和正则。

mock.js 语法

Mock.js 的语法规范包括两部分：

1. 数据模板定义规范（Data Template Definition，DTD）
2. 数据占位符定义规范（Data Placeholder Definition，DPD）

数据模板定义规范 DTD

数据模板中的每个属性由 3 部分构成：** 属性名、生成规则、属性值：**

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

Mock.Random

方法

Mock.Random 提供的完整方法（占位符）如下：

** Type **	** Method**
Basic	boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image	image, dataImage
Color	color
Text	paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name	first, last, name, cfirst, clast, cname
Web	url, domain, email, ip, tld
Address	area, region
Helper	capitalize, upper, lower, pick, shuffle
Miscellaneous	guid, id

 

安装

npm install mockjs -S

引入mockjs

在src文件夹新建一个文件  mock.js

// 引入mockjs

const Mock = require('mockjs');

// 获取 mock.Random 对象

const Random = Mock.Random;

main.js

// 引入mockjs

require('./mock.js')

模拟get、post请求

// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const data1 = function () {
    let articles = [];
    for (let i = 0; i < 3; i++) {
        let newArticleObject = {
            timestamp: Random.id(), //  指示生成的id字符串
            shop: Random.cword(5, 10), // Random.cword() 指示生成的长度5到10个字的文字
            image: Random.image('454x340', 'Demo'), //Random.image(size,text )生成一张图片
            result: Random.cword(3, 8) // Random.cword()指示生成的长度3到8个字的文字
        }
        articles.push(newArticleObject);
    }
    return {
        result: articles
    }
}

// 输出结果
// Mock.mock( url, post/get , 返回的数据)

//get请求
Mock.mock('/result', 'get', data1);

//有参数的get请求
Mock.mock(RegExp('/result/' + '.*'), 'get', data1);

//post请求
Mock.mock('/result', /\.json/, 'post',data1 )