使用 mock.js 让前端开发与后端独立

最新推荐文章于 2024-01-29 17:12:43 发布

dicha7140

最新推荐文章于 2024-01-29 17:12:43 发布

阅读量102

点赞数

文章标签：后端前端 json ViewUI

原文链接：http://www.cnblogs.com/CyLee/p/6072399.html

版权

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