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'}))

使用 mock.js 让前端开发与后端独立的更多相关文章

  1. Mock.js简易教程，脱离后端独立开发，实现增删改查功能（转）

    在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢, ...

  2. JS高级前端开发群加群说明及如何晋级

    JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明:   一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...

  3. 前端进阶试题css（来自js高级前端开发---豪情）既然被发现了HOHO，那我就置顶了嘿嘿！觉得自己技术OK的可以把这套题目做完哦，然后加入高级前端的社区咯

    http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...

  4. HTML、CSS、JS在前端开发中都扮演怎样的角色

    前端开发,需要经常接触 HTML.DOM.CSS.JS等,那么HTML.CSS.JS在前端开发中究竟扮演怎样的角色呢?以下是个人的一些观点... HTML:超文本标记语言 (Hyper Text Ma ...

  5. JS高级前端开发群加群说明

    JS高级前端开发群加群说明 *一.文章背景: *二. 高级群: *三. 加入方式: *四. 说明: 一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在"前端开发"关键字搜 ...

  6. 【Mock.js】前端模拟假数据，不用在手拼了

    [Mock.js]前端模拟假数据,不用在手拼了:https://www.jianshu.com/p/8579b703a4c1

  7. Vue.js高效前端开发知识 • 【目录】

    持续更新中- 章节 内容 实践练习 Vue.js高效前端开发 • (实践练习) 第1章 Vue.js高效前端开发 • [ 一.初识Vue.js ] 第2章 Vue.js高效前端开发 • [ 二.Vue ...

  8. axios + mock.js模拟数据实现前后端分离开发的实例代码

    首先就是必须安装axios和mock.js npm install axios npm install mockjs 1. 然后在文档src中新建一个mock.js文件,如图 2. 在main.js中 ...

  9. 使用node.js + json-server + mock.js 搭建本地开发mock数据服务

    在开发过程中,前后端不论是否分离,接口多半是滞后于页面开发的.所以建立一个REST风格的API接口,给前端页面提供虚拟的数据,是非常有必要的.对比过多种mock工具后,我最终选择了使用 json se ...

随机推荐

  1. ubuntu安装中文支持

    sudo apt-get install language-pack-zh-hant language-pack-zh-hans

  2. 新的开始—js客户端onlick无法响应

    第一次写博客,也是为了以后遇到同样的问题时可以找到,onlick无法响应在百度一些都有解释,这只是一个个人记录而已 问题: function change_tp(ProInfo_id, color_i ...

  3. hdu3448 01背包+dfs

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=3448 Description 0/1 bag problem should sound f ...

  4. SU sunmo命令学习

  5. js整理1

    数组 比较时的隐式转化 var a = [1,2,3]; var b = [1,2,3]; a == b; //false a == '1,2,3'; //true; // var c = []; B ...

  6. js 的一点用法

     js 中的json对象,ajax返回数据dataType为json否则无法将数据转换成json对象 也就无法通过json字符串转换成对象object,那么他将始终是个字符串,也就无法进行 对象操作. ...

  7. 为什么模板函数的声明和实现都放在.h文件中

    当你不使用这个模板函数或模板类,编译器并不实例化它,当你使用时,编译器需要实例化它,因为编译器是一次只能处理一个编译单元,也就是一次处理一个cpp文件,所以实例化时需要看到该模板的完整定义.所以都放在 ...

  8. Redis Tools

    1. Resources Redis Desktop Manager http://redisdesktop.com/ Redis命令的中文文档 http://redisdoc.com/ Redis安 ...

  9. BZOJ2652 : 三角板

    首先旋转坐标系,假设$(x,y)$被$(X,Y)$遮挡等价于$X\leq x$且$Y\leq y$. 对于每种坐标系建立两棵线段树: 第一棵按$x$维护已经加入的点的$y$的最小值: 第二棵按$x$维 ...

  10. Recurrent Neural Network(循环神经网络)

    Reference:   Alex Graves的[Supervised Sequence Labelling with RecurrentNeural Networks] Alex是RNN最著名变种 ...