Mockjs，模拟数据生成器
（推荐使用）Mock.js是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。
提供了以下模拟功能：
1. 根据数据模板生成模拟数据。
2. 模拟Ajax请求，生成并返回模拟数据。
3. 基于 HTML 模板生成模拟数据。
用处
在后端还没完成数据接口，前端只好写静态模拟数据的时候，Mockjs的用处：
1. 避免手动编写静态模拟数据，由代码生成，添加和删除数据都更简单、安全。
2. 可以生成尽可能真实的数据，提供了IP、随机数、图片、地址、邮箱、名字等占位符，也支持扩展自定义占位符。
3. 不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
在Node模块使用
// 安装
npm install mockjs // 使用
var Mock = require('mockjs');
var data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
});
console.log(JSON.stringify(data, null, 4))
可以在Node模块里面。
在浏览器页面使用
比较常用的应该是在浏览器页面，用法也很简单，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MockJS-demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="mock.js"></script>
</head>
<body>
<script>
//demo1
var data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
});
console.log(JSON.stringify(data, null, 4)) //demo2
Mock.mock('http://g.cn', {
'name' : '@name',
'age|1-100': 100,
'color' : '@color'
}); $.ajax({
url: 'http://g.cn',
dataType:'json'
}).done(function(data, status, xhr){
document.writeln(JSON.stringify(data, null, 4));
});
</script>
</body>
</html>
总结
Mockjs最大作用是避免我们自己手写一大段模拟数据，可生成随机数据，减少维护的工作量。
用法倒比较简单，看文档就明白，文档地址：http://mockjs.com/0.1/
本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。
本文地址 ：http://www.cnblogs.com/lovesong/p/5956312.html
Mockjs，模拟数据生成器的更多相关文章
- 让前端独立于后端进行开发，模拟数据生成器Mock.js
让前端独立于后端进行开发,模拟数据生成器Mock.jsMock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试. Home · nuysoft/Mock Wiki ...
- 如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
- vue+mockjs 模拟数据，实现前后端分离开发
在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...
- vue 利用mockJs 模拟数据
工作这几年一直用Java 开发,前端的技术自己也忘得差不多了(实际上自己也不怎么会),最近参与的项目是用VUE + Element-ui + springboot 写的,由于需求没有定,先画一个de ...
- mockjs模拟数据请求
一般项目的方法 <html> <head> <script> <script src="http://requirejs.org/docs/rele ...
- vue项目中使用mockjs模拟接口返回数据
Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了. 网上介绍mock的教程也较多 ...
- 如何在vue-cli项目中结合mockjs模拟假数据
1.前言 在如今前后端分离的开发方式已被广泛采用的今天,前端同学和后端同学各自独立开发,后端提供数据接口,前端调用接口获取数据渲染页面.但是在实际开发中,后端开发由于逻辑相对复杂接口迟迟提供不到位,而 ...
- Mock.js 与 fiddler 前端模拟数据与拦截请求
最近 工作需要 接触了Mock.js. Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试.提供了以下模拟功能: 根据数据模板生成模拟数据 模拟 Ajax ...
- 【vue】生成接口模拟数据
目录 方案一:自定义模拟数据 Step1 创建json文件 Step2 在 vue.config.js 中配置 Step3 在组件中使用 (方式一) Step3 封装api (方式二) Step4 在 ...
随机推荐
- Nlog配置实例
彩色Console target <?xml version="1.0" encoding="utf-8" ?> <nlog xmlns= ...
- Princeton Algorithms week3 Assignment
这周编程作业是实现检测点共线的算法.和排序算法有关系的地方在于,对斜率排序后可以很快的检测出来哪些点是共线的,另外这个算法的瓶颈也在于排序的性能. 一点收获: java传参数时传递的是值,这很多人都知 ...
- WPF - 属性系统 （3 of 4）
依赖项属性元数据 在前面的章节中,我们已经介绍了WPF依赖项属性元数据中的两个组成:CoerceValueCallback回调以及PropertyChangedCallback.而在本节中,我们将对其 ...
- 《MSSQL2008技术内幕:T-SQL语言基础》读书笔记（上）
索引: 一.SQL Server的体系结构 二.查询 三.表表达式 四.集合运算 五.透视.逆透视及分组 六.数据修改 七.事务和并发 八.可编程对象 一.SQL Server体系结构 1.1 数据库 ...
- 我的第一个python程序--给2.x的print代码加上括号
最近想学习一门脚本语言,综合考虑,选择了python. 花了几天时间看完了 简明 Python 教程 ,想着应该写点什么东西才好,刚好我使用的是3.x版本,以前好多2.x的代码都直接报错,尤其是pri ...
- CSharpGL(7)对VAO和VBO的封装
CSharpGL(7)对VAO和VBO的封装 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立的Demo,更适合入门参考 ...
- ABP框架 - 功能管理
文档目录 本节内容: 简介 关于 IFeatureValueStore 功能类型 Boolean 功能 Value 功能 定义功能 基本功能属性 其它功能属性 功能层次 检查功能 使用Requires ...
- 原生ajax实现登录(一部分代码)
<script type="text/javascript"> function ajax() { //先声明一个异步请求对 ...
- XSS原理
跨站脚本攻击(Cross-Site Scripting),是一种网站应用程序的安全漏洞,是代码注入攻击的一种. XSS的种类: 反射型XSS: 非持久型XSS(需要自行触发,输入-输出). ...
- Sass：初识Sass与Koala工具的使用
一.下载Koala(找到合适的系统版本)并安装 二.先新建一个css文件夹,并在里面新建一个文本文档(.txt),将其命名为demo.scss 三.打开Koala,将css文件夹拽进来,可以修改一下输 ...