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. Android Studio在导入eclipse的项目时一直卡在gradle:Configure project

    学Java的时候用的是eclipse,写android代码的时候用了疯狂android讲义推荐的AS.在用AS的时候出了很多问题,比如我想从别人那里拷贝eclipse写的工程的时候就遇到了Gradle ...

  2. 用div，ul，input模拟select下拉框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. AngularJS学习之模块

    1.模块定义了一个应用程序:模块是应用程序中不同部分的容器:模块是应用控制器的容器:控制器通常属于一个模块 2.创建模块:你可以通过AngularJS的angular.module函数来创建模块: & ...

  4. BestCoder Round #72 (div.2)

    后面的题目补不懂了 暴力 1001 Clarke and chemistry 这题也把我搞死了..枚举系数判断就行了 #include <cstdio> #include <algo ...

  5. STL(multiset) UVA 11020 Efficient Solutions

    题目传送门 题意:训练指南P228 分析:照着书上的做法,把点插入后把它后面不占优势的点删除,S.size ()就是优势的人数,时间复杂度O (nlogn) #include <bits/std ...

  6. CodeForceS#276-A

    A. Factory   One industrial factory is reforming working plan. The director suggested to set a mythi ...

  7. linux查看硬件以及系统信息

    http://tech.idv2.com/2008/01/11/linux-sysinfo-cmds/ /proc目录的内容:   /proc/cpuinfo 关于处理器的信息,如类型.厂家.型号和性 ...

  8. mybatis 查询缓存问题

    <settings> <setting name="localCacheScope" value="STATEMENT" /> < ...

  9. Oracle中Cursor的用法

    关键字 概念 类型 异常处理 一 概念 游标是SQL的一个内存工作区,由系统或用户以变量的形式定义.游标的作用就是用于临时存储从数据库中提取的数据块.在某些情况下,需要把数据从存放在磁 盘的表中 ...

  10. 理解钩子Hook以及在Thinkphp下利用钩子使用行为扩展

    什么是钩子函数 个人理解:钩子就像一个”陷阱”.”监听器”,当A发送一个消息到B时,当消息还未到达目的地B时,被钩子拦截调出一部分代码做处理,这部分代码也叫钩子函数或者回调函数 参考网上说法 譬如我们 ...