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 在 ...
随机推荐
- 监控 SQL Server (2005/2008) 的运行状况
Microsoft SQL Server 2005 提供了一些工具来监控数据库.方法之一是动态管理视图.动态管理视图 (DMV) 和动态管理函数 (DMF) 返回的服务器状态信息可用于监控服务器实例的 ...
- linux上使用google身份验证器（简版）
系统:centos6.6 下载google身份验证包google-authenticator-master(其实只是一个.zip文件,在windwos下解压,然后传进linux) #cd /data/ ...
- 快速构建App界面的框架(●'◡'●) -----SalutJs
前言 卤煮在公司之初接触到的是一个微信APP应用.前端技术采用的是Backbone+zepto等小型JS类库.在项目开发之初,这类中小型的项目采用这两种库可以满足基本的需求.然而,随着迭代的更新和业务 ...
- [C#版本]有趣啊！各种编程语言实现 2 + 2 = 5
首页新闻里面那个 [新闻头条]有趣啊!各种编程语言实现 2 + 2 = 5 其他的就不评论的,但是其中C#版的 真是逗比啊...评论中各种吐槽有木有... static void Main (stri ...
- TODO：字节的那点事Go篇
TODO:字节的那点事Go篇 (本文go version go1.7.3 darwin/amd64) 在Golang中string底层是由byte数组组成的. fmt.Println(len(&quo ...
- Android Studio 轻松整理字符串到string.xml中
昨天了解了Alt+Enter快捷键的大用处,今天又发现了一个快捷的方法,必须记下来.转载请注明出处http://www.cnblogs.com/LT5505/p/5466630.html 1.首先代码 ...
- SQLServer 数据库镜像+复制方案
目标: 主机做了Mirror和Replication,当主机出现问题时,Replication和Mirror实现自动的故障转移(Mirror 和Replication都切换到备机,而当主机 重新启动后 ...
- Chrome调试手机页面
新开发的网页需要在手机或是模拟机上运行测试,如果手头事件比加紧,那么可以借助 Chrome提供的手机网页预览程序进行简单调试.查看 制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chro ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（40）-精准在线人数统计实现-【过滤器+Cache】
系列目录 上次的探讨没有任何结果,我浏览了大量的文章和个别系统的参考!决定用Cache来做,这可能有点难以接受但是配合mvc过滤器来做效果非常好! 由于之前的过滤器我们用过了OnActionExecu ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（41）-组织架构
系列目录 本节开始我们要实现工作流,此工作流可以和之前的所有章节脱离关系,也可以紧密合并. 我们当初设计的项目解决方案就是可伸缩可以拆离,可共享的项目解决方案.所以我们同时要添加App.Flow文件夹 ...