介紹

mockjs 是一個強(qiáng)大的東西，根據(jù)官網(wǎng)上的一句話來描述：生成隨機(jī)數(shù)據(jù)，攔截 Ajax 請求

具體的作用有：

• 基于 數(shù)據(jù)模板 生成模擬數(shù)據(jù)
• 基于 HTML模板 生成模擬數(shù)據(jù)
• 攔截并模擬 ajax 請求

解決問題

開發(fā)過程中，后端還沒有寫好接口，前端只能擱置任務(wù)或者手寫模擬數(shù)據(jù)，然而這種數(shù)據(jù)往往有幾個特點(diǎn)：

• 真實性較低
• 重復(fù)率過高
• 數(shù)據(jù)格式單一
• 以犧牲時間為代價改善以上幾點(diǎn)

在開發(fā)過程中，花費(fèi)大量的時間去寫模擬數(shù)據(jù)是得不償失的，這里 mockjs 就體現(xiàn)了它強(qiáng)大的地方。

它可以（官網(wǎng)上寫的。。。）

• 讓前端攻城師獨(dú)立于后端進(jìn)行開發(fā)
• 不需要修改既有代碼，就可以攔截 Ajax 請求，返回模擬的響應(yīng)數(shù)據(jù)
• 支持生成隨機(jī)的文本、數(shù)字、布爾值、日期、郵箱、鏈接、圖片、顏色等
• 通過隨機(jī)數(shù)據(jù)，模擬各種場景
• 符合直覺的接口
• 支持?jǐn)U展更多數(shù)據(jù)類型，支持自定義函數(shù)和正則

項目中使用

本篇文章介紹的是 mockjs 結(jié)合 gulp 的實例，其中使用了 browser-sync 作為靜態(tài)服務(wù)器，主要的 js 文件有 gulpfile.js 與 mock.js。

/**
 * gulpfile.js
 */

// 這里省略了其他插件的定義
var browserSync = require('browser-sync').create();
var mock = require('./mock/mock.js');

gulp.task('server', ['build', 'watch'], function () {
    browserSync.init({
        server: {
            middleware: mock.api() // 這里配置中間件
        }
    })
})

/**
 * mock.js
 */


var Mock = require('mockjs');
var url = require('url');

exports.api = function () {
    return [
        {
            route: '/api',
            handle: function (req, res, next) {

                var urlObj = url.parse(req.url, true),
                    method = req.method;
                res.setHeader('Content-Type', 'application/json');
                switch (urlObj.pathname) {
                    case '/data':
                        if (method === "GET") {
                            res.end(JSON.stringify(
                                {
                                    "status": "GET data"
                                }
                            ));
                            return;
                        } else if (method === "POST") {
                            res.end(JSON.stringify(
                                {
                                    "status": "POST data"
                                }
                            ));
                            return;
                        } else {
                            res.end(JSON.stringify(
                                {
                                    "status": "error"
                                }
                            ));
                            return;
                        }
                    default:
                        res.end(JSON.stringify(
                                Mock.mock(
                                    {
                                        "items|6": [{
                                            'title': '@cword(6)',
                                            'url': "@url()",
                                            'name': "@cname(2,3)",
                                            'id|0-200': 1,
                                            'percent': /\d{1,2}[\.]\d{1}[%]{1}/
                                        }]
                                    }
                                )
                        ));
                }
            }
        }
    ]
};

這里我把 mock.js 里面寫的很長，目的是為了明確不同的請求地址與方法所對應(yīng)的情況，其中 default 內(nèi)的寫法就是 mock 中最大的亮點(diǎn)了，具體的寫法看這里。

最后就可以去使用 ajax 了：

$.ajax({
    url: "/api/data",
    type: "POST",
    data: {
        test: 1
    },
    success: function(data){
        console.log(data);
    },
    error: function(err){
        console.log(err);
     }
})

mockjs 就會根據(jù)請求的地址進(jìn)行攔截了。

返回的隨機(jī)數(shù)據(jù)：

{
    "items": [
        {
            "title": "問市制具飛再",
            "url": "mailto://jyvzt.pt/ihxiwr",
            "name": "易敏",
            "id": 95,
            "percent": "7.0%"
        },
        {
            "title": "百老三行如斗",
            "url": "rlogin://ndgwuqcv.eh/eorgshc",
            "name": "錢磊",
            "id": 106,
            "percent": "0.5%"
        },
        {
            "title": "教林技我組增",
            "url": "nntp://djrenaicjt.es/xwnpkwuy",
            "name": "胡濤",
            "id": 154,
            "percent": "80.5%"
        },
        {
            "title": "切什被五多情",
            "url": "telnet://jqnmjot.nl/ouau",
            "name": "田麗",
            "id": 13,
            "percent": "76.2%"
        },
        {
            "title": "問低連且三了",
            "url": "nntp://hvhqclj.coop/bnfrg",
            "name": "傅杰",
            "id": 103,
            "percent": "63.8%"
        },
        {
            "title": "計與此元已給",
            "url": "nntp://pwjlpbyg.cu/pmfgy",
            "name": "黎秀蘭",
            "id": 46,
            "percent": "83.1%"
        }
    ]
}

結(jié)尾

上面就是 gulp + mockjs 的簡單使用，更多的亮點(diǎn)會慢慢更新。:)