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

时间 2019-11-12

标签使用 mock.js mock 前端开发后端独立栏目 JavaScript 繁體版

原文原文链接

github:javascript

https://github.com/nuysoft/Mock

官方网站：css

http://mockjs.com/

开发手册与使用指南：html

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规范java

// 加载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'})) // 这种@的方式叫"占位符"。它能够用来直接生成各类数据jquery

Mock.Random 提供的完整方法（占位符）以下：git

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