使用 mock.js 让前端开发与后端独立
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>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()" //模拟文本 } ); //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'}))
