使用Mock.js生成前端测试数据
栏目: JavaScript · 发布时间: 5年前
内容简介:前端工程师在做前后端分离的项目的时,有时候接口未开发完成,或者开发环境不允许使用接口,这时候就需要前端工程师自己模拟数据了,模拟数据的方式有很多种,今天给大家介绍一款npm包,Mock.js。首先我们要明白Mock.js的本质是拦截ajax请求,并返回约定好的数据。数据需要根据开发者的需求结合Mock.js的文档来定制,下面来看一下如何使用:引入mock.js和JQuery
前端工程师在做前后端分离的项目的时,有时候接口未开发完成,或者开发环境不允许使用接口,这时候就需要前端工程师自己模拟数据了,模拟数据的方式有很多种,今天给大家介绍一款npm包,Mock.js。
首先我们要明白Mock.js的本质是拦截ajax请求,并返回约定好的数据。数据需要根据开发者的需求结合Mock.js的文档来定制,下面来看一下如何使用:
引入mock.js和JQuery
<script src="js/jquery-1.12.4.min.js"></script>
<script src=" http://mockjs.com/dist/mock.j... ;></script>
创建模拟Api,这里需要结合需求按照文档编写,拦截Ajax请求,返回测试数据,这里面需要注意的是mock的第一个参数,指的是我们将来发送ajax要请求的接口地址:
//模拟后台
Mock.mock('http://api.com', { "user|5-10": [{ 'name': '@cname', //中文名称 'age|1-100': 100, //100以内随机整数 'birthday': '@date("yyyy-MM-dd")', //日期 'city': '@city(true)' //中国城市 }] });
发送ajax请求:
//JQuery方式
$.ajax({ url: 'http://api.com', dataType: 'json' }).done(function(data, status, xhr) { console.log( JSON.stringify(data, null, 4) ) });
这里也可以用原生的ajax请求,只要是用XMLhttprequest的实例发送的请求,都会被Mock.js拦截,诸如axios、vue-resurce等等。
看一下响应结果:
{
"user": [ { "name": "锺丽", "age": 17, "birthday": "1983-11-01", "city": "内蒙古自治区 赤峰市" }, { "name": "陈艳", "age": 25, "birthday": "1973-07-10", "city": "河南省 驻马店市" }, { "name": "冯霞", "age": 59, "birthday": "2010-10-28", "city": "澳门特别行政区 离岛" }, { "name": "贾秀英", "age": 63, "birthday": "1973-01-22", "city": "新疆维吾尔自治区 伊犁哈萨克自治州" }, { "name": "周勇", "age": 34, "birthday": "1985-05-21", "city": "湖南省 衡阳市" } ]
}
以上便是mock的使用。
欢迎大家关注、转发、点击好看
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 前端页面水印生成实现
- 生成海报(前端 | python)
- 前端代码是怎样智能生成的(图像分离篇)
- 前端小纠结--约定式提交和自动生成`changelog`
- JWCloud 专业版 v1.1.0 发布,新增代码生成器、一键生成模块及前端 UI 代码
- Java 通用代码生成器光 2.2.0 智慧版本 Beta6 版,显著改进前端代码生成物
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
图片转BASE64编码
在线图片转Base64编码工具
HSV CMYK 转换工具
HSV CMYK互换工具