本帖最后由 AngularBaby 于 2018-4-19 16:45 编辑
官网地址
Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具，可以用来模拟服务器响应。
优点是非常简单方便，无侵入性， 基本覆盖常用的接口数据类型。
前后端分离：让前端攻城师独立于后端进行开发
增加单元测试的真实性：符合直觉的接口
开发无侵入：不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据
用法简单：通过随机数据，模拟各种场景
数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
方便扩展：支持支持扩展更多数据类型，支持自定义函数和正则。
1. 安装
使用npm安装：
[Shell] 纯文本查看 复制代码 npm install mockjs
或者直接引入：
[HTML] 纯文本查看 复制代码 <script src="http://mockjs.com/dist/mock.js"></script>
2. 模拟数据
基本语法：
[JavaScript] 纯文本查看 复制代码
Mock.mock( rurl?, rtype?, template|function( options ) );
// rurl：可选。 表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。
// rtype：可选。 表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
// template：可选。 表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
// function(options)：可选。 表示用于生成响应数据的函数。[/color]
举个例子：
[JavaScript] 纯文本查看 复制代码 var data = Mock.mock('http://test.com', { // 需要拦截的url
'list|10': [{
'id|+1': 1, // id属性值自动加 1，初始值为1
'name': '@cname', // 中文姓名
'age|18-60': 1, // 18-60内随机整数，1只是确定类型
'birthday': '@date("yyyy-MM-dd")', // 日期
'city': '@city(true)', // 中国城市
'gender|1': true, // 布尔值
})
更多参数配置
3. 发送请求
[JavaScript] 纯文本查看 复制代码 $.ajax({
type: "get", // 请求方式
url: 'http://test.com', // 请求地址
dataType: 'json', // 数据格式
success: function (res) { // 成功回调
console.log(res);
}
})
4. 查看结果
demo详见附件
| 
收藏
淘帖
踩
