mockjs 的使用（生成随机数据，拦截 Ajax 请求）

介绍

mockjs 是一个强大的东西，根据官网上的一句话来描述：生成随机数据，拦截 Ajax 请求

具体的作用有：

• 基于 数据模板 生成模拟数据
• 基于 HTML模板 生成模拟数据
• 拦截并模拟 ajax 请求

解决问题

开发过程中，后端还没有写好接口，前端只能搁置任务或者手写模拟数据，然而这种数据往往有几个特点：

• 真实性较低
• 重复率过高
• 数据格式单一
• 以牺牲时间为代价改善以上几点

在开发过程中，花费大量的时间去写模拟数据是得不偿失的，这里 mockjs 就体现了它强大的地方。

它可以（官网上写的。。。）

• 让前端攻城师独立于后端进行开发
• 不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据
• 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
• 通过随机数据，模拟各种场景
• 符合直觉的接口
• 支持扩展更多数据类型，支持自定义函数和正则

项目中使用

本篇文章介绍的是 mockjs 结合 gulp 的实例，其中使用了 browser-sync 作为静态服务器，主要的 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 里面写的很长，目的是为了明确不同的请求地址与方法所对应的情况，其中 default 内的写法就是 mock 中最大的亮点了，具体的写法看这里。

最后就可以去使用 ajax 了：

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

mockjs 就会根据请求的地址进行拦截了。

返回的随机数据：

{
    "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%"
        }
    ]
}

结尾

上面就是 gulp + mockjs 的简单使用，更多的亮点会慢慢更新。:)