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 在 ...
随机推荐
- (转)从0开始搭建SQL Server AlwaysOn 第二篇（配置故障转移集群）
原文地址: http://www.cnblogs.com/lyhabc/p/4682028.html 这一篇是从0开始搭建SQL Server AlwaysOn 的第二篇,主要讲述如何搭建故障转移集 ...
- jexus5.8.2 linux x64专业版 配置https
一.环境 1.jexus版本:Jexus/5.8.2.8 Linux专业版 内置mono版本:Mono/4.6.2.7 2.操作系统:centOs7 jexus独立版由于是免安装版并且内置mono,所 ...
- webpack解惑：多入口文件打包策略
本文是我用webpack进行项目构建的实践心得,场景是这样的,项目是大型类cms型,技术选型是vue,只支持chrome,有诸多子功能模块,全部打包在一起的话会有好几MB,所以最佳方式是进行多入口打包 ...
- EasyPR--中文开源车牌识别系统 开发详解（1）
在上篇文档中作者已经简单的介绍了EasyPR,现在在本文档中详细的介绍EasyPR的开发过程. 正如淘宝诞生于一个购买来的LAMP系统,EasyPR也有它诞生的原型,起源于CSDN的taotao123 ...
- CSharpGL(25)一个用raycast实现体渲染VolumeRender的例子
CSharpGL(25)一个用raycast实现体渲染VolumeRender的例子 本文涉及的VolumeRendering相关的C#代码是从(https://github.com/toolchai ...
- ArtifactTransferException: Failure to transfer org.apache.openejb:javaee-api:jar:5.0-1
最近在myeclipse上创建maven类型的web项目的时候,出现了一个错误. ArtifactTransferException: Failure to transfer org.apache.o ...
- Js删除数组重复元素的多种方法
js对数组元素去重有很多种处理的方法,本篇文章中为网络资源整理,当然每个方法我都去实现了:写下来的目的是希望自己活学活用,下次遇到问题后方便解决. 第一种 function oSort(arr){ v ...
- 06.移动先行之谁主沉浮----我的代码我来写（Xaml的优势）
如果移动方向有任何问题请参考===> 异常处理汇总-移动系列(点) 前面几节课,我们都是在前台创建对象,进行一些设置,那么我们为什么不用传统的方法来编程呢? 我们今天来试试你就明了了~~ 打开M ...
- jQuery -原生 如何互转
今天研究源码的时候发现,不需要用get() 也能进行原生转换,使用原生方法. 原生- jQuery对象 var obj=document.xxx $(obj).css(); 也可以直接 $(doc ...
- php内核分析（四）－do_cli
这里阅读的php版本为PHP-7.1.0 RC3,阅读代码的平台为linux # main 把剩下的代码增加了下注释全部贴出来了(这个是简化后的main函数,去掉了一些无关紧要的代码段): int m ...