mockjs

Mock.js 是一款模拟数据生成器，旨在帮助前端工程师独立于后端进行开发，帮助编写单元测试。

提供了以下模拟功能：

• 根据数据模板生成模拟数据
• 模拟 Ajax 请求，生成并返回模拟数据
• 基于 HTML 模板生成模拟数据

下载地址https://github.com/nuysoft/Mock/edit/refactoring/dist/mock.js，官方网址http://mockjs.com/

本文从brower端和项目应用两个方面来介绍mock.js的使用。

浏览器端的使用

	
		
		
		
		
		
	
	
		获取数据
		

	
	

注：post传数据的方式，根据请求不同，返回不同数据

	
		
		
		
		
		
	
	
		获取数据
		

	
	

项目工程化应用

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(
			

				
 Other 
				获取数据
			
		)
	}
}

export default Other;

总结：

mock作用：模拟数据，模拟后台接口（拦截ajax请求）

用mock的原因：后台接口没有准备好，用json的话是本地的，没法模拟接口地址；用node的话，有点大才小用，而且它是localhost，也没法模拟接口地址。

mock的特点：

• 前后端分离：让前端攻城师独立于后端进行开发。
• 开发无侵入：不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。

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

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

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

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