学习mockjs
时间:2022-07-25
本文章向大家介绍学习mockjs,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
什么是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>'
})
Random CLI
全局安装
$ npm install mockjs -g
执行
$ random url
=> http://rmcpx.org/funzwc
帮助
random -h
Mock.js 最初的灵感来自 Elijah Manor 的博文 ocking Introduction, 语法参考了 mennovanslooten/mockJSON, 随机数据参考了 victorquinn/chancejs。
- Elasticsearch JAVA api轻松搞定groupBy聚合
- 微信加关注链接 一键关注公众号 解决用手机看网页无法扫二维码的烦恼
- springboot mybatis redis 二级缓存
- Elasticsearch强制重置未分配的分片(unassigned)
- 帝国cms调用缩略图和具体文章的方法
- python codis集群客户端(一) - 基于客户端daemon探活与服务列表维护
- python codis集群客户端(二) - 基于zookeeper对实例创建与摘除
- JavaScript replace() 方法
- 别让Open Sans字体拖慢wordpress后台速度
- Oracle 问题小结
- 为帝国cms模板添加站内搜索小教程
- 线程传参
- JQuery 小结
- 错误:该行已经属于另一个表
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法