Mock.js使用

hlcfan 发布于2019-08-01 16:36 / 1910人阅读

摘要：是一款前端开发中拦截请求再生成随机数据响应的工具可以用来模拟服务器响应优点是非常简单方便无侵入性基本覆盖常用的接口数据类型大概记录下使用过程详细使用可以参见文档安装使用安装或直接数据模板格式属性名生成规则属性值请求发起请求响应响应模板随机

Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.

大概记录下使用过程, 详细使用可以参见Mock文档 Mock Wiki

安装

使用npm安装: npm install mockjs;
或直接;

数据模板格式:

"name|rule": value

属性名|生成规则: 属性值

GET请求

发起get请求:

$.ajax({
    url: "http://test.com",
    type: "get",
    dataType: "json"
}).done(function(data, status, xhr) {
    console.log(JSON.stringify(data, null, 4));
});

Mock.js响应:

var obj = {"aa":"11", "bb":"22", "cc":"33", "dd":"44"};

// Mock响应模板
Mock.mock("http://test.com", {
    "user|1-3": [{   // 随机生成1到3个数组元素
        "name": "@cname",  // 中文名称
        "id|+1": 88,    // 属性值自动加 1，初始值为88
        "age|18-28": 0,   // 18至28以内随机整数, 0只是用来确定类型
        "birthday": "@date("yyyy-MM-dd")",  // 日期
        "city": "@city(true)",   // 中国城市
        "color": "@color",  // 16进制颜色
        "isMale|1": true,  // 布尔值
        "isFat|1-2": true,  // true的概率是1/3
        "fromObj|2": obj,  // 从obj对象中随机获取2个属性
        "fromObj2|1-3": obj,  // 从obj对象中随机获取1至3个属性
        "brother|1": ["jack", "jim"], // 随机选取 1 个元素
        "sister|+1": ["jack", "jim", "lily"], // array中顺序选取元素作为结果
        "friends|2": ["jack", "jim"] // 重复2次属性值生成一个新数组
    },{
        "gf": "@cname"
    }]
});

可以看到结果:

{
    "user": [
        {
            "name": "董静",
            "id": 88,
            "age": 25,
            "birthday": "2015-04-01",
            "city": "湖南省 怀化市",
            "color": "#c0f279",
            "isMale": false,
            "isFat": false,
            "fromObj": {
                "dd": "44",
                "aa": "11"
            },
            "fromObj2": {
                "bb": "22",
                "cc": "33"
            },
            "brother": "jack",
            "sister": "jack",
            "friends": [
                "jack",
                "jim",
                "jack",
                "jim"
            ]
        },
        {
            "gf": "田杰"
        }
    ]
}

响应时也可以是使用function, 如:

Mock.mock("http://test.com", "get", function() {
    return Mock.mock({
        "user|1-3": [{
            "name": "@cname",
            "id": 88
        }
      ]
    });
});

结果:

{
    "user": [
        {
            "name": "许超",
            "id": 88
        }
    ]
}

POST请求

发起post请求:

$.ajax({
    url: "http://test.com",
    type: "post",
    dataType: "json",
    data: {
      account: 888,
      pwd: "abc123"
    }
}).done(function(data, status, xhr) {
    console.log(JSON.stringify(data, null, 4));
});

Mock.js响应:

Mock.mock("http://test.com", function(options) {
    console.log(options);
    return Mock.mock({
        "user|1-3": [{
            "name": "@cname",
            "id|+1": 88
        }
      ]
    });
});

可以看到结果:

{url: "http://test.com", type: "POST", body: "account=888&pwd=abc123"}

{
    "user": [
        {
            "name": "曾明",
            "id": 88
        }
    ]
}

自定义响应时间

可以自定义设置响应时间, 可以是绝对值, 也可以是区间.

// 设置4秒后再响应
Mock.setup({ timeout: 4000 });  

// 设置1秒至4秒间响应
Mock.setup({ timeout: "1000-4000" });

数据集

Mock.Random是一个工具类，用于生成各种格式随机数据. 有两种写法:

第一种:

// 生成一个email格式的字符串
console.log(Mock.mock("@email"));  // 结果: s.uorjeqdou@crqfpdypt.gw

第二种:

var Random = Mock.Random;
console.log(Random.email());  // 结果: r.quyppn@yit.cv

提供的种类有:

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

如果上面没有你需要的种类, 还可以自定义扩展, 如下:

Random.extend({
    weekday: function(date) {
        var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        return this.pick(weekdays);
    },
    sex: function(date) {
        var sexes = ["男", "女", "中性", "未知"];
        return this.pick(sexes);
    }
});

console.log(Random.weekday());  // 结果: Saturday
console.log(Mock.mock("@weekday"));  // 结果: 112Tuesday
console.log(Random.sex());  // 结果: 男
console.log(Mock.mock("@sex"));  // 结果: 未知

校验

Mock.valid(template, data): 用来校验真实数据data是否与数据模板template匹配

var tempObj = { "user|1-3": [{ "name": "@cname", "id|18-28": 88 } ]};
var realData = { "user": [{ "name": "张三", "id": 90 } ]};
console.log(Mock.valid(tempObj, realData));

JSON Schema

Mock.toJSONSchema(template): 用来把Mock.js风格的数据模板template转换成JSON Schema

var tempObj = { "user|1-3": [{ "name": "@cname", "id|18-28": 88 } ]};
console.log(Mock.toJSONSchema(tempObj));

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50625.html

让前端攻城师独立于后端进行开发: Mock.js

摘要：一是什么目前的大部分公司的项目都是采用的前后端分离后端接口的开发和前端人员是同时进行的那么这个时候就会存在一个问题在页面需要使用大量数据进行渲染生成前后端开发人员的接口也许并没有写完作为前端的我们也就没有办法获取数据所以前端工程师就需要自己 showImg(https://segmentfault.com/img/remote/1460000013022563); 一.Mock.js是...

Fundebug 2019-08-22 14:06 评论0 收藏0
vue-vue项目中mock.js的使用

摘要：表示需要拦截的请求类型。添加信息拦截请求，调用函数先看一下这个是什么获取信息更改后输入标题，点击提交，再点击获取，可以看到返回了我们提交的数据，并且是对象的形式，拿到数据后就可以做进一步的操作了。 mock.js 官网地址：mockjs.com/ mockjs是用来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url，mockjs可以拦截ajax请求...

Object 2019-05-23 17:34 评论0 收藏0
前后端真正分离，网线被拔，也能请求数据（mock.js）

摘要：六使用扩展很多时候，服务器都有定义固定的返回值，如为则表示该请求有效。做了一回标题党（别吐槽，说的大实话，真的可以不用后台，就能拿数据，快！，向下看...）一、mock.js 是什么？官网机票简单的描述一下， mock.js 可以在后台接口没有更新时，来本地模拟数据达到测试界面功能的一个很方便的工具库，mock.js 可以拦截ajax 请求，重指向并返回你定义的模板数据。更多细节，可查...

高璐 2019-05-23 13:53 评论0 收藏0
在mockjs官网上没学到的

摘要：模板在模板中生成多条数据后返回数据请求拦截响应拦截封装输出引入使用数据模板数据占位符数据模板在官网都没有定义。使用占位符表示。后记网上有好多关于的文章。 mock会拦截下指定的请求，并返回由mock计算出的数据。 mock拦截下的请求不会在network里出现。 mock方便前端脱离后端进行开发。先来一个dome说明怎么使用。mock怎么与项目结合使用。 mockjs demo...

CNZPH 2019-08-26 14:00 评论0 收藏0
webpack4+vue2+axios+vue-router的多页+单页混合应用框架

摘要：适用于主要入口页面生成多页，子页面和次要页面使用单页形式的项目。文件用来存放固定的数据，而文件可更加自由的处理并返回数据。 VUE2的单页应用框架有人分享了，多页应用框架也有人分享了，这里分享一个单页+多页的混合应用框架吧，node.js写了一个简单的mock服务也集成在里面，整体初现雏形，还有很多需要优化和改善的地方。。。项目结构 │ ├─build ...

whatsns 2019-08-23 11:44 评论0 收藏0