继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

欢迎了解Mock.js

DIEA
关注TA
已关注
手记 458
粉丝 63
获赞 390

特性

前后端分离

让前端攻城师独立于后端进行开发

增加但愿测试的真实性

通过随机数据,模拟各种场景。

开发无入侵

不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。

用法简单

符合直觉的接口。

数据类型丰富

支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

方便扩展

支持支持扩展更多数据类型,支持自定义函数和正则。

开始安装

Node(CommonJS)

#  安装npm install mockjs
// 使用 Mockvar Mock = require('mockjs')var data = Mock.mock({    // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
    'list|1-10': [{        // 属性 id 是一个自增数,起始值为 1,每次增 1
        'id|+1': 1
    }]
})// 输出结果console.log(JSON.stringify(data, null, 4))

Bower

#  安装npm install -g bower
bower install --save mockjs

RequireJS (AMD)

// 配置 Mock 路径require.config({    paths: {        mock: 'http://mockjs.com/dist/mock'
    }
})// 加载 Mockrequire(['mock'], function(Mock){    // 使用 Mock
    var data = Mock.mock({        'list|1-10': [{            'id|+1': 1
        }]
    })    // 输出结果
    document.body.innerHTML +=        '<pre>' +        JSON.stringify(data, null, 4) +        '</pre>'})
// ==>{    "list": [
        {            "id": 1
        },
        {            "id": 2
        },
        {            "id": 3
        }
    ]
}

Sea.js (CMD)

因为 Sea.js 社区尚未提供 webpack 插件,所以 Mock.js 暂不完整支持通过 Sea.js 加载。

一种变通的方式是,依然通过 Sea.js 配置和加载 Mock.js,然后访问全局变量 Mock。

// 配置 Mock 路径seajs.config({    alias: {        mock: 'http://mockjs.com/dist/mock.js'
    }
})// 加载 Mockseajs.use('mock', function(__PLACEHOLDER) {    // 使用 Mock(全局变量)
    var data = Mock.mock({        'list|1-10': [{            'id|+1': 1
        }]
    });    document.body.innerHTML +=        '<pre>' +        JSON.stringify(data, null, 4) +        '</pre>'})

Random CLI

# 全局安装$ npm install mockjs -g# 执行$ random url# => http://rmcpx.org/funzwc# 帮助random -h



作者:茹茹茹茹茹茹欧尼_
链接:https://www.jianshu.com/p/7cbf83eff644


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP