<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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">mockjs</h1>
</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()", //模拟文本
???????????"image":"@image()",
???????????"images":"@image(‘200x100‘, ‘#00405d‘, ‘#FFF‘, ‘Mock.js‘)",
???????????"dataImage":"@dataImage",
???????????dataImage:"@dataImage(‘200x100‘)",
???????????dataImage:"@dataImage(‘200x100‘, ‘Hello Mock.js!‘)"
???????}
???);
???//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() {
???????????????//请求出错处理
???????????}
???????});
???});
???var M=Mock.mock;
???var R=R = window.Mock.Random;
???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‘}))
</script>
</body>
</html>
mock js使用方法简单记录
原文地址：https://www.cnblogs.com/zzh965390267/p/9767961.html