用mock实现前端所需数据

mock.js的小demo及mock语法简述及JSON.stringify用法

[TOC]

工具：

mock.js 官网:http://mockjs.com/
（进阶的有eolinker，是基于mock.js的可视化模拟数据API接口）:https://www.eolinker.com/

Mock概述：

Mock.js实现的功能

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

用法：

浏览器：

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script src="jquery.min.js"></script>
    <script src="http://mockjs.com/dist/mock.js"></script>
    <script>
        var data = Mock.mock({
            'list|1-10': [{
                'id|+1': 1
            }]
        });
        $('<pre>').text(JSON.stringify(data, null, 4))
            .appendTo('body');
        
        
        //JQuery
        //配置模拟数据
        Mock.mock('http://g.cn',{
            'name':'@name',
            'age|1-100':100,
            'color':'@color'
        });

        //发送Ajax请求
        $.ajax({
            url:'http://g.cn',
            dataType:'json'
        }).done(function(data,status,xhr){
            console.log(
                JSON.stringify(data,null,4)
            )
        });

    </script>
</body>

</html>

页面返回值：

{
"list": [
    {
        "id": 1
    },
    {
        "id": 2
    },
    {
        "id": 3
    }
    ]
}

浏览器控制台输出：

index.html:33 {
    "name": "Deborah Williams",
    "age": 2,
    "color": "#ecf279"
}

语法

Mock.js 的语法规范包括两部分：

数据模板定义（Data Temaplte Definition，DTD）
数据占位符定义（Data Placeholder Definition，DPD）

数据模板定义 DTD

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

注意：

属性名和生成规则之间用 | 分隔。
生成规则是可选的。
生成规则有 7 种格式：

'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value

生成规则的含义需要依赖属性值才能确定。

属性值中可以含有 @占位符。
属性值还指定了最终值的初始值和类型。

数据占位符定义 DPD

占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。占位符的格式为：

1 2	@占位符 @占位符(参数 [, 参数])

注意：

用 @ 来标识其后的字符串是占位符。
占位符引用的是 Mock.Random 中的方法。
通过 Mock.Random.extend() 来扩展自定义占位符。
占位符也可以引用数据模板中的属性。
占位符会优先引用数据模板中的属性

{
 name: {
 first: '@FIRST',
 middle: '@FIRST',
 last: '@LAST',
 full: '@first @middle @last'
    }
}
// =>
{
 "name": {
 "first": "Charles",
 "middle": "Brenda",
 "last": "Lopez",
 "full": "Charles Brenda Lopez"
    }
}

常用方法

Mock.mock( rurl?, rtype?, template|function(options) )

根据数据模板生成模拟数据。
参数的含义和默认值如下所示：

参数 rurl：可选。表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /\/domain\/list.json/、’/domian/list.json’。
参数 rtype：可选。表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
参数 template：可选。表示数据模板，可以是对象或字符串。例如 { ‘data|1-10’:[{}] }、‘@EMAIL’。
参数 function(options)：可选。表示用于生成响应数据的函数。
参数 options：指向本次请求的 Ajax 选项集。

Mock.mockjax(library)

覆盖（拦截） Ajax 请求，目前内置支持 jQuery、Zepto、KISSY。

Mock.Random

Mock.Random 是一个工具类，用于生成各种随机数据。Mock.Random 的方法在数据模板中称为“占位符”，引用格式为 @占位符(参数 [, 参数]) 。

Mock.tpl(input,options,helpers,partials)

基于 Handlebars、Mustache 的 HTML 模板生成模拟数据。

方法使用详情请参考mock.js文档

相关知识

JSON.stringify 方法

把一个对象通过 stringify 之后提交给后台或者存储在 Storage 里是很常用的手段。

demo：

var data = [
    {name: "王尼玛", sex:1, age: 30},
    {name: "王尼美", sex:0, age: 20},
    {name: "王大锤", sex:1, age: 30}
];
var str_json = JSON.stringify(data);
console.log(str_json);

这个是我们日常用法，非常简单，对吧。

比如说，我们的数据非常复杂，还有类似头像，昵称，个人签名之类的信息。
可是我保存在本地，只需要用户名，和性别，肿么破呢？
也许你会说 so easy, 遍历数据重新提取下即可。
例如：

var data = [
    {name: "王尼玛", sex:1, age: 30},
    {name: "王尼美", sex:0, age: 20},
    {name: "王大锤", sex:1, age: 30}
];
for (var i=0, new_data=[]; i<data.length; i++) {
    new_data.push({
        name: data[i].name,
        sex:  data[i].sex
    });
}
var str_json = JSON.stringify(new_data);
console.log(str_json);

确实分分钟搞定。

其实我们只需要用 stringify 第二个参数即可简单处理这种问题。

var data = [
    {name: "王尼玛", sex:1, age: 30},
    {name: "王尼美", sex:0, age: 20},
    {name: "王大锤", sex:1, age: 30}
];
var str_json = JSON.stringify(data, ["name", "sex"]);
console.log(str_json);

第二个参数如此强悍，为我们省去了不少麻烦。

还有第三个参数，用于格式化字符串用的。

var data = [
    {name: "王尼玛", sex:1, age: 30},
    {name: "王尼美", sex:0, age: 20},
    {name: "王大锤", sex:1, age: 30}
];
var str_json = JSON.stringify(data, null, "\t");
console.log(str_json);
str_json = JSON.stringify(data, ["name", "sex"], "\t");
console.log(str_json);

不想要的 key 返回 undefined 即可

var data = [
    {name: "王尼玛", sex:1, age: 30},
    {name: "王尼美", sex:0, age: 20},
    {name: "王大锤", sex:1, age: 30}
];
var str_json = JSON.stringify(data, function (k, v) {
    if (k === "sex") {
        return ["女", "男"][v];
    } else if (k === "age" ) {
        return undefined;
    }
    return v;
});

console.log(str_json);

JSON.stringify(str, null, 4) //表示使用四个空格缩进

参考链接：

本作品采用知识共享署名 2.5 中国大陆许可协议进行许可，欢迎转载，但转载请注明来自JayMo，并保持转载后文章内容的完整。本人保留所有版权相关权利。
本文永久链接：http://jaymo666.github.io/2018/04/01/用mock实现前端所需数据/