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. sqoop与mysql之间中文乱码

    sudo -u hive sqoop export --connect "jdbc:mysql://192.168.22.201/LauncherDB?useUnicode=true& ...

  2. SQL Case when 的使用方法（转）

    Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END ...

  3. AngularJS 学习之表格

    1.ng-repeat指令可以完美的显示表格: 2.在表格中显示数据: <div ng-app="myApp" ng-controller=""custo ...

  4. Something about "for"

    For语句引导了一个循环语句,格式for(::),例for(int i=0;i<100;i++).类似于if()括号的作用for()括号如同if()括号一样也是一个boolean型.int i= ...

  5. [bzoj1071]组队[单调指针乱搞]

    这道题也很感人,主要改了比较久的时间... bzoj第一页的题,居然只过了五百多个人,(我是第512,orzliyicheng是513) 代码不长,但是细节搞了很久,主要sort写错了,晕... 首先 ...

  6. 【bzoj2440】【bzoj3994】莫比乌斯反演学习

    哇..原来莫比乌斯代码这么短..顿时感觉逼格-- 写了这道题以后,才稍稍对莫比乌斯函数理解了一些 定理:和是定义在非负整数集合上的两个函数,并且满足条件,那么我们得到结论 在上面的公式中有一个函数,它 ...

  7. AC自动机 LA 4670 Dominating Patterns

    题目传送门 题意:训练指南P216 分析:求出现最多次数的字串,那么对每个字串映射id,cnt记录次数求最大就可以了. #include <bits/stdc++.h> using nam ...

  8. oracle sql别名

    为sql的字段起一个别名,常以为是可有可无的,但是有时候是必要的. 例如在ibatis中 <!-- 获取已发或待发送的彩信记录列表 --> <resultMap id="m ...

  9. [转]复制虚拟机后linux中的eth0变成eth1问题

    为什么原来的eth0会变成eth1? 很多Linux distribution使用udev动态管理设备文件,并根据设备的信息对其进行持久化命名.udev会在系统引导的过程中识别网卡,将mac地址和网卡 ...

  10. Java 动态代理

    被代理的接口特点: 1. 不能有重复的接口,以避免动态代理类代码生成时的编译错误. 2. 这些接口对于类装载器必须可见,否则类装载器将无法链接它们,将会导致类定义失败. 3. 需被代理的所有非 pub ...