学习mockjs

原创

她与丈母娘皆失 2022-08-23 10:52:04 博主文章分类：前端 ©著作权

文章标签 mockjs vue框架 vue周边加载 json 文章分类 运维

©著作权归作者所有：来自51CTO博客作者她与丈母娘皆失的原创作品，请联系作者获取转载授权，否则将追究法律责任

什么是mockjs

前后端分离（让前端攻城师独立于后端进行开发）
增加单元测试的真实性（通过随机数据，模拟各种场景）
开发无侵入（不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据）
用法简单（符合直觉的接口）
数据类型丰富（支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等）
方便扩展（支持支持扩展更多数据类型，支持自定义函数和正则）

安装

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
< script type=“text/javascript” src="./bower_components/mockjs/dist/mock.js">< /script>

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>'
})