在前后端分离的项目中,通常需要启动一个后台服务器来配合前端项目的接口需求。mockjs的作用是拦截ajax请求并模拟各种数据返回,让前端开发可以更加自由独立。
npm install mockjs
mock.mock()第一个参数是需要拦截的接口,第二个参数表明ajax请求类型(get/post/put/delete等),第三个参数是模拟返回值的数据模版。
接口可以通过字符串或者正则匹配:字符串需要和接口完全一样,正则只需要一部分匹配就行。请求类型参数如果省略,就表示任何类型的请求都可以拦截。数据模版可以生成各种随机数据,参见语法规范。
import mock from "mockjs";
/*** 设置随机的接口响应时间,10-2500毫秒 ***/
mock.setup({
timeout: '10-2500'
})
/*** 监听user接口,采用正则匹配 ***/
mock.mock(/\/user/, {
info: {
name: mock.random.cname(),
"age|12-38": 1,
"sex|1": ["male", "female"]
}
})
$.ajax({
url: '/user/1111'
}).done(function(data, status, jqxhr) {
console.log(json.stringify(data, null, 4))
})
/*** 监听list接口,采用字符串匹配 ***/
mock.mock("/list","post", {
'info|15-25': [{
'index|+1': 1,
'name': '@first @last',
'id': '@integer( 10000, 99999 )',
'date': '@datetime',
'img': "@image('200x200')",
'prod': "@sentence( 6, 22 )"
}]
})
$.ajax({
url: '/list',
datatype: 'json',
type:'post'
}).done(function(data, status, jqxhr) {
console.log(json.stringify(data, null, 4))
})
将mockjs相关代码写在独立的js文件里,开发时引用该文件,打包时去掉对该文件的引用即可。
如对本文有疑问, 点击进行留言回复!!
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json?Protocol Buffer?FlatBuffers?
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论