学习mockjs

什么是mockjs

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

安装

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

Random CLI

全局安装 $ npm install mockjs -g

执行 $ random url => http://rmcpx.org/funzwc

帮助 random -h

Mock.js 最初的灵感来自 Elijah Manor 的博文 ocking Introduction, 语法参考了 mennovanslooten/mockJSON, 随机数据参考了 victorquinn/chancejs。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 什么是token?

      token就是令牌,前后端进行鉴权的一种有效形式,比传统的 session 鉴权更加方便,简单来说:当用户首次登陆时,网站会给你一张“门卡”,以后你可以凭借...

    我不是费圆
  • Canvas线条动画

     简单的Canvas动画,代码只有71行,试试吧!没有谁天生就会,用这个动画,做为你的Canvas小结。  如果你觉得我的代码还算有趣,在你的学习中能有所帮助,...

    我不是费圆
  • 前端html换肤

    这个红色的大盒子就是#box,我给它添加了一个默认颜色,如果不加就是透明。 我给每个盒子都添加了边框,容易区分块儿与块儿

    我不是费圆
  • Vue笔记:使用 mock.js 模拟数据

    在我们的项目实际开发过程中,后端的接口往往是较晚才会提供出来,并且还要写接口文档,如果前端的开发都要等到接口开发完成才开始就非常影响项目整体开发进度了,mock...

    朝雨忆轻尘
  • 初学者阅读源码三板斧

    苦叶子
  • 为 VUE 项目添加 PWA 解决发布后刷新报错问题

    下面这些文件忘记出处是哪,Github也能搜到一些,之前写的 PWA 的 Demo 里面拿过来的~

    易墨
  • day53_BOS项目_05

    定区可以将取派员、分区、客户信息关联到一起。 页面:WEB-INF/pages/base/decidedzone.jsp

    黑泽君
  • Tree - AdaBoost with sklearn source code

    In the previous post we addressed some issue of decision tree, including instabi...

    风雨中的小七
  • 浅谈webp

    定义 webp是由谷歌推出的新一代图片格式,在压缩方面比当前JPEG格式更优越,同时提供了有损压缩与无损压缩的图片文件格式,派生自图像编码格式VP8.以BSD授...

    逸鹏
  • webp图片实践之路

    最近,我们在项目中实践了webp图片,并且抽离出了工具模块,整合到了项目的基础模板中。传闻IOS10也将要支持webp,那么使用webp带来的性能提升将更加明显...

    逸鹏

扫码关注云+社区

领取腾讯云代金券