歡迎了解Mock.js
標簽:
JavaScript
特性
前后端分离
让前端攻城师独立于后端进行开发
增加但愿测试的真实性
通过随机数据,模拟各种场景。
开发无入侵
不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
用法简单
符合直觉的接口。
数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
方便扩展
支持支持扩展更多数据类型,支持自定义函数和正则。
开始安装
Node(CommonJS)
# 安装npm install mockjs
// 使用 Mockvar Mock = require('mockjs')var data = Mock.mock({ // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
'list|1-10': [{ // 属性 id 是一个自增数,起始值为 1,每次增 1
'id|+1': 1
}]
})// 输出结果console.log(JSON.stringify(data, null, 4))Bower
# 安装npm install -g bower bower install --save mockjs
RequireJS (AMD)
// 配置 Mock 路径require.config({ paths: { mock: 'http://mockjs.com/dist/mock'
}
})// 加载 Mockrequire(['mock'], function(Mock){ // 使用 Mock
var data = Mock.mock({ 'list|1-10': [{ 'id|+1': 1
}]
}) // 输出结果
document.body.innerHTML += '<pre>' + JSON.stringify(data, null, 4) + '</pre>'})// ==>{ "list": [
{ "id": 1
},
{ "id": 2
},
{ "id": 3
}
]
}Sea.js (CMD)
因为 Sea.js 社区尚未提供 webpack 插件,所以 Mock.js 暂不完整支持通过 Sea.js 加载。
一种变通的方式是,依然通过 Sea.js 配置和加载 Mock.js,然后访问全局变量 Mock。
// 配置 Mock 路径seajs.config({ alias: { mock: 'http://mockjs.com/dist/mock.js'
}
})// 加载 Mockseajs.use('mock', function(__PLACEHOLDER) { // 使用 Mock(全局变量)
var data = Mock.mock({ 'list|1-10': [{ 'id|+1': 1
}]
}); document.body.innerHTML += '<pre>' + JSON.stringify(data, null, 4) + '</pre>'})Random CLI
# 全局安装$ npm install mockjs -g# 执行$ random url# => http://rmcpx.org/funzwc# 帮助random -h
作者:茹茹茹茹茹茹欧尼_
链接:https://www.jianshu.com/p/7cbf83eff644
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習,寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦