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