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. RobotFramework自动化测试之环境搭建安装教程（一）

    RobotFramework是基于Python语言的工具,所以装RF之前要先安装Python: Python现在有2.7跟3.5两个版本,如果是先装了3.5的话,是装不了2.7的.只有先装2.7的 才 ...

  2. Intent界面跳转与传递数据

    Activity跳转与传值,主要是通过Intent类,Intent的作用是激活组件和附带数据. intent可以激活Activity,服务,广播三类组件. 本博文讲的是显示意图激活Activity组件 ...

  3. MySQL主从复制（Master-Slave）与读写分离（MySQL-Proxy）实践

    主服务器上(注:应该是允许从机访问)  GRANT REPLICATION SLAVE ON *.* to ‘rep1’@’192.168.10.131’ identified by ‘passwor ...

  4. Class.forName()的作用与使用总结

    1.Class类简介: Java程序在运行时,Java运行时系统一直对所有的对象进行所谓的运行时类型标识.这项信息纪录了每个对象所属的类.虚拟机通常使用运行时类型信息选准正确方法去执行,用来保存这些类 ...

  5. Coursera课程下载和存档计划[转载]

    上周三收到Coursera平台的群发邮件,大意是Coursera将在6月30号彻底关闭旧的课程平台,全面升级到新的课程平台上,一些旧的课程资源(课程视频.课程资料)将不再保存,如果你之前学习过相关的课 ...

  6. Java命令行输入求和的简单学习

    思想:命令行输入的参数,必须先转换为数字才能进行加法计算,这就需要引用java.util.Scanner; 流程框图: 源代码: //实现几个整数相加的程序 //高开拓,2015.9.26 packa ...

  7. c#静态构造函数

    作用是初始化一些类的静态成员 1.在实例化类的对象,或者引用任何的静态成员之前,.Net自动调用此构造函数,而且只调用一次 2.没有任何修饰符,也没有参数 3.一个类只能有一个静态构造函数 4.无参的 ...

  8. HDU4871 Shortest-path tree（最短路径树 + 树的点分治）

    题目大概要先求一张边有权的图的根为1的最短路径树,要满足根到各点路径序列的字典序最小:然后求这棵最短路径树包含k个结点的最长路径的长度和个数. 首先先构造出这棵字典序最小的最短路径树..好吧,我太傻逼 ...

  9. Shell 编程基础之括号的作用

    一.小括号() 单小括号 命令组.括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用.括号中多个命令之间用分号隔开,最后一个命令可以没有分号,各命令和括号之间不必 ...

  10. pointers on c (day 1,chapter1)

    c语言的优先级 优先级 运算符 名称或含义 使用形式 结合方向 说明 1 [] 数组下标 数组名[常量表达式] 左到右 () 圆括号 (表达式)/函数名(形参表) . 成员选择(对象) 对象.成员名 ...