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. 【转】Java时间日期包 JodaTime

    maven: http://mvnrepository.com/artifact/joda-time/joda-time 1, 获取每天的零点 DateTime dt=new DateTime().w ...

  2. [转]Tangram框架应用开发的一般模式

    //转的,怕想百度博客一样搬家,赶紧先复制下来. 框架其实就是一种开发模式,用tangram框架开发应用程序意味着选择一种面向接口.模块化的开发方式.这和传统的Delphi应用程序开发方式有一定区别, ...

  3. ural 1251. Cemetery Manager

    1251. Cemetery Manager Time limit: 1.0 secondMemory limit: 64 MB There is a tradition at the USU cha ...

  4. iOS学习37数据处理之CoreData

    1. CoreData数据库框架的优势 1> CoreData历史 CoreData数据持久化框架是Cocoa API 的一部分,首次在iOS5版本的系统中出现,它允许按照实体-属性-值模型组织 ...

  5. Hadoop维护IPC链接

    IPC链接上长时间没有发生远程调用,客户端会发送一个心跳消息给服务器端,用于维护链接. Connection的lastActivity用来记录上次发生IPC通信的时间. Connection.touc ...

  6. Jaxb 解析 带有继承关系的bean与xml

    具体方法: 1. 在jaxb的setClasstobebounds中,只需要子类的class,无需父类. 2. 父类的前面加如下声明: @XmlAccessorType(XmlAccessType.F ...

  7. Human and AI's future (reverie)

    However, I do notice that to make the dark situation happen, it doesn't require the topleft matrix t ...

  8. 【POJ】3207 Ikki's Story IV - Panda's Trick

    http://poj.org/problem?id=3207 题意:一个圆上顺时针依次排列着标号为1-n的点,这些点之间共有m条边相连,每两个点只能在圆内或者圆外连边.问是否存在这些边不相交的方案.( ...

  9. 【HDU】4336 Card Collector

    http://acm.hdu.edu.cn/showproblem.php?pid=4336 题意:n张卡片,每一次取一个盒子,盒子里装有卡片i的概率是p[i],求得到所有卡片所需要开的盒子的期望数( ...

  10. C语言（4）

    C语言(4)--数据类型 C语言在用“/”是,注意左右两边都是整数时,商也是只有整数部分. 下面介绍一下C语言常用的数据类型:  注意: 1.char类型数据范围:256中字符. 2.float和do ...