欢迎了解Mock.js

作者: 茹茹茹茹茹茹欧尼_ | 来源:发表于2017-07-11 22:02 被阅读0次

    特性

    前后端分离

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

    增加但愿测试的真实性

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

    开发无入侵

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

    用法简单

    符合直觉的接口。

    数据类型丰富

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

    方便扩展

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

    开始安装

    Node(CommonJS)

    #  安装
    npm install mockjs
    
    // 使用 Mock
    var 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'
        }
    })
    // 加载 Mock
    require(['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'
        }
    })
    
    // 加载 Mock
    seajs.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
    

    相关文章

      网友评论

        本文标题:欢迎了解Mock.js

        本文链接:https://www.haomeiwen.com/subject/buqvhxtx.html