github:
https://github.com/nuysoft/Mock
官方网站：
http://mockjs.com/
开发手册与使用指南：
https://github.com/nuysoft/Mock/wiki/Getting-Started
直接上代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js">script>
<script src="http://mockjs.com/dist/mock.js">script>
head>
<body>
<div>
<h1 id="mockjs">mockjsh1>
div>
<script type="text/javascript">
//调用mock方法模拟数据
Mock.mock(
'http://mockjs', {
"userName" : '@name', //模拟名称
"age|1-100":100, //模拟年龄(1-100)
"color" : "@color", //模拟色值
"date" : "@date('yyyy-MM-dd')", //模拟时间
"url" : "@url()", //模拟url
"content" : "@cparagraph()" //模拟文本
}
);
//ajax请求
$("#mockjs").click(function(){
$.ajax({
url : "http://mockjs", //请求的url地址
dataType : "json", //返回格式为json
async : true, //请求是否异步，默认为异步，这也是ajax重要特性
data : {}, //参数值
type : "GET", //请求方式
beforeSend : function() {
//请求前的处理
},
success: function(req) {
//请求成功时处理
console.log(req);
},
complete: function() {
//请求完成的处理
},
error: function() {
//请求出错处理
}
});
});
script>
body>
html>
CommonJs规范
// 加载Mock.js插件，让前端开发与后端独立 window.Mock = require('mockjs') // 加载Mock.mock方法 window.M = window.Mock.mock; // 加载mock.Random方法 window.R = window.Mock.Random;
console.log(R.email())
console.log(M({email:'@email'})) // 这种@的方式叫"占位符"。它可以用来直接生成各种数据
Mock.Random 提供的完整方法（占位符）如下：
| Type | Method |
|---|---|
| Basic | boolean, natural, integer, float, character, string, range, date, time, datetime, now |
| Image | image, dataImage |
| Color | color |
| Text | paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle |
| Name | first, last, name, cfirst, clast, cname |
| Web | url, domain, email, ip, tld |
| Address | area, region |
| Helper | capitalize, upper, lower, pick, shuffle |
| Miscellaneous | guid, id |
// 所有@占位符，都是R对象的演变,比如@email就是如下： console.log(R.email()) // basic：https://github.com/nuysoft/Mock/wiki/Basic console.log(M({boolean:'@boolean'})) console.log(M({natural:'@natural'})) console.log(M({integer:'@integer'})) console.log(M({float:'@float'})) console.log(M({character:'@character'})) console.log(M({range:'@range'})) // date:https://github.com/nuysoft/Mock/wiki/Date console.log(M({date:'@date'})) console.log(M({time:'@time'})) console.log(M({datetime:'@datetime'})) console.log(M({now:'@now'})) // Image：https://github.com/nuysoft/Mock/wiki/Image console.log(M({image:"@image()"})) console.log(M({image:"@image(60x60)"})) console.log(M({image:"@image(60x60,#000000)"})) console.log(M({image:"@image('200x100', '#00405d', '#FFF', 'Mock.js')"})) console.log(M({dataImage:'@dataImage'})) console.log(M({dataImage:"@dataImage('200x100')"})) console.log(M({dataImage:"@dataImage('200x100', 'Hello Mock.js!')"})) // color : https://github.com/nuysoft/Mock/wiki/Color console.log(M({color:'@color'})) console.log(M({hex:'@hex'})) console.log(M({rgb:'@rgb'})) console.log(M({rgba:'@rgba'})) console.log(M({hsl:'@hsl'})) // text : https://github.com/nuysoft/Mock/wiki/Text console.log(M({paragraph:'@paragraph'})) console.log(M({sentence:'@sentence'})) console.log(M({title:'@title'})) console.log(M({cparagraph:'@cparagraph'})) console.log(M({csentence:'@csentence'})) console.log(M({cword:'@cword'})) console.log(M({ctitle:'@ctitle'})) // name : https://github.com/nuysoft/Mock/wiki/Name console.log(M({first:'@first'})) console.log(M({last:'@last'})) console.log(M({name:'@name'})) console.log(M({cfirst:'@cfirst'})) console.log(M({clast:'@clast'})) console.log(M({cname:'@cname'})) // Web ： https://github.com/nuysoft/Mock/wiki/Name console.log(M({url:'@url'})) console.log(M({domain:'@domain'})) console.log(M({email:'@email'})) console.log(M({ip:'@ip'})) console.log(M({tld:'@tld'})) // address: https://github.com/nuysoft/Mock/wiki/Name console.log(M({region:'@region'})) console.log(M({province:'@province'})) console.log(M({city:'@city'})) console.log(M({county:'@county'})) console.log(M({zip:'@zip'})) // helper Methods : https://github.com/nuysoft/Mock/wiki/Helper console.log(M({capitalize:'@capitalize(`hello`)'})) console.log(M({upper:'@upper(`hello`)'})) console.log(M({lower:'@lower(`HELLO`)'})) console.log(M({pick:"@pick(['a', 'e', 'i', 'o', 'u'])"})) console.log(M({shuffle:"@shuffle(['a', 'e', 'i', 'o', 'u'])"})) // Miscellaneous: https://github.com/nuysoft/Mock/wiki/Miscellaneous console.log(M({guid:'@guid'})) console.log(M({id:'@id'})) console.log(M({increment:'@increment'}))