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

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 提供的完整方法(占位符)如下:

TypeMethod
Basicboolean, natural, integer, float, character, string, range, date, time, datetime, now
Imageimage, dataImage
Colorcolor
Textparagraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Namefirst, last, name, cfirst, clast, cname
Weburl, domain, email, ip, tld
Addressarea, region
Helpercapitalize, upper, lower, pick, shuffle
Miscellaneousguid, 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'}))

 

转载于:https://www.cnblogs.com/CyLee/p/6072399.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值