Mock.js 是一款模拟数据生成器,旨在帮助前端工程师独立于后端进行开发,帮助编写单元测试。
提供了以下模拟功能:
- 根据数据模板生成模拟数据
- 模拟 Ajax 请求,生成并返回模拟数据
- 基于 HTML 模板生成模拟数据
下载地址https://github.com/nuysoft/Mock/edit/refactoring/dist/mock.js,官方网址http://mockjs.com/
本文从brower端和项目应用两个方面来介绍mock.js的使用。
浏览器端的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1.引文件-->
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/plugin/mock.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button id="btn">获取数据</button>
<ul></ul>
</body>
<script type="text/javascript">
//4.mock的extend方法
var Random=Mock.Random;
Random.extend({
'xingzuo': function(date) {
var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
return this.pick(constellations)
}
})
//3.调用Mock的方法
Mock.mock("http://www.baidu.com/q",{
"user|5-8":[
//保证数据的真实性
{
"name":"@cname",
"pid|+1":0,
"text":"@cparagraph",
"time":"@datetime()",
"img":"@image",
"email":"@email",
"address":"@county(true)",
"youbian":"@zip",
"sfz":"@id",
"xz":"@xingzuo"
}
]
})
//2.请求数据
$("#btn").click(function(){
$.ajax({
type:"get",
url:"http://www.baidu.com/q",
dataType:"json",
//字符串转json数据
success:function(data){
// console.log(data)
data.user.map(function(item){
// $("ul").append("<li><p>"+item.name+"</p><p>"+item.address+"</p><p>"+item.sfz+"</p><p>"+item.email+'</p><img src="'+item.img+'" /></li>')
$("ul").append("<li><p>"+item.xz+"</p><p>"+item.address+"</p><p>"+item.sfz+"</p><p>"+item.email+'</p><img src="'+item.img+'" /></li>')
})
}
})
})
</script>
</html>
注:post传数据的方式,根据请求不同,返回不同数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1.引文件-->
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/plugin/mock.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button id="btn">获取数据</button>
<ul></ul>
</body>
<script type="text/javascript">
//3.mock的extend
var Random=Mock.Random;
Random.extend({
'xingzuo': function(date) {
var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
return this.pick(constellations)
}
})
//4.定义数据
var data=Mock.mock({
"user|5-8":[
{
"name":"@cname",
"pid|+1":0,
"text":"@cparagraph",
"time":"@datetime()",
"img":"@image",
"email":"@email",
"address":"@county(true)",
"youbian":"@zip",
"sfz":"@id",
"xz":"@xingzuo"
}
]
})
var data1=Mock.mock({
"user|3":[
{
"name":"@cname",
"pid|+1":0,
"xz":"@xingzuo"
}
]
})
//5.调用Mock的方法,默认是get
Mock.mock("http://www.baidu.com/q","post",function(req){
//将id=1转成1,不是标准的数据用eval()
var cs=eval(req.body)
if(cs==1){
return data
}else{
return data1
}
})
//2.请求数据
$("#btn").click(function(){
$.ajax({
type:"post",
url:"http://www.baidu.com/q",
dataType:"json",
data:{id:1},
success:function(data){
console.log(data)
}
})
})
</script>
</html>
项目工程化应用
1.安装依赖 yarn add mockjs 或者 npm i mockjs -D
2.启动项目 npm start
3. 新建data目录与components同级,定义个data.js用来模拟mock生成数据,随机生成数据,要暴露出去。如果数据比较多,可以在data目录下面定义多个js文件用来模拟数据,暴露出去即可。
//data/data.js
import Mock from "mockjs"
var data=Mock.mock({
"user|5-8":[
{
"name":"@cname",
"pid|+1":0,
"text":"@cparagraph",
"time":"@datetime()",
"img":"@image",
"email":"@email",
"address":"@county(true)",
"youbian":"@zip",
"sfz":"@id"
}
]
})
export default data;
4.在other.js页面发起ajax请求,导入数据
import React from 'react';
//1.导入相关模块
import Mock from "mockjs"
import data from "../data/data"
import $ from "jquery"
//2.mock调用,准备好数据
Mock.mock("http://www.jd.com",function(){
return data
})
//可写成
//Mock.mock("http://www.jd.com",data)
class Other extends React.Component{
constructor(props){
super(props)
}
//3.请求数据
tap(){
$.ajax({
type:"get",
url:"http://www.jd.com",
dataType:"json",
success:function(data){
console.log(data.user)
}
});
}
render(){
return(
<div>
<h1> Other </h1>
<button onClick={this.tap.bind(this)}>获取数据</button>
</div>
)
}
}
export default Other;
总结:
mock作用:模拟数据,模拟后台接口(拦截ajax请求)
用mock的原因:后台接口没有准备好,用json的话是本地的,没法模拟接口地址;用node的话,有点大才小用,而且它是localhost,也没法模拟接口地址。
mock的特点:
- 前后端分离:让前端攻城师独立于后端进行开发。
- 开发无侵入:不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
-
数据类型丰富:支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
-
增加单元测试的真实性:通过随机数据,模拟各种场景。
-
用法简单:符合直觉的接口。
-
方便扩展:支持支持扩展更多数据类型,支持自定义函数和正则。