mockjs

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 请求，返回模拟的响应数据。

• 数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

• 增加单元测试的真实性：通过随机数据，模拟各种场景。

• 用法简单：符合直觉的接口。

• 方便扩展：支持支持扩展更多数据类型，支持自定义函数和正则。