前言
01)本篇文章不介绍如何创建账号,以及创建接口,如果没有账号的话花个5分钟左右创建一个账号,并创建一条接口,附上传送门:Easy Mock官网
02)文章中使用了 “name|1:[ ]” 的写法,这里用到的是mock.js的语法,表示随机返回数组的其中一项,附上传送门:mock.js语法规则
easy mock接口
01)将代码片段全部拷贝下来,复制到 easy mock 的模拟接口上
02)复制接口api链接到浏览器的地址栏,输入两个参数,api?page=1&pageSize=10 (页数,条数)
03)page, pageSize 可自行修改名字,并不是写死的,如需修改将下面代码对应地方的进行修改即可
以下是使用get请求的代码(post请求稍微有点区别,请使用文章后面1.26新增部分)
{
"count": 1000,
"data": function({
_req,
Mock
}) {
let i = 0,
_data = [],
page = _req.query.page, // 页数
pageSize = _req.query.pageSize, // 返回的条数
len = (1000 - pageSize * (page - 1)) < pageSize ? (1000 - pageSize * (page - 1)) : pageSize;
for (i; i < len; i++) {
_data.push(
Mock.mock({
"id": (page - 1) * pageSize + (i + 1),
"urlImg|1": [
'https://goss.veer.com/creative/vcg/veer/612/veer-134669323.jpg',
'https://goss2.veer.com/creative/vcg/veer/612/veer-133071017.jpg',
'https://goss.veer.com/creative/vcg/veer/612/veer-147395960.jpg',
'https://goss4.veer.com/creative/vcg/veer/612/veer-161959036.jpg'
]
})
);
}
return _data;
},
"msg": "请求数据成功"
}
1.26号新增
01)get请求和post请求稍微有一点区别,需要修改两行代码 _req.query.page 和 _req.query.pageSize 替换成 _req.body.page 和 _req.body.page
以下是使用post请求的代码
{
"count": 1000,
"data": function({
_req,
Mock
}) {
let i = 0,
_data = [],
page = _req.body.page, // 页数
pageSize = _req.body.pageSize, //返回的条数
len = (1000 - pageSize * (page - 1)) < pageSize ? (1000 - pageSize * (page - 1)) : pageSize;
for (i; i < len; i++) {
_data.push(
Mock.mock({
"id": (page - 1) * pageSize + (i + 1),
"urlImg|1": [
'https://goss.veer.com/creative/vcg/veer/612/veer-134669323.jpg',
'https://goss2.veer.com/creative/vcg/veer/612/veer-133071017.jpg',
'https://goss.veer.com/creative/vcg/veer/612/veer-147395960.jpg',
'https://goss4.veer.com/creative/vcg/veer/612/veer-161959036.jpg'
]
})
);
}
return _data;
},
"msg": "请求数据成功"
}
在浏览器效果图
以下是get请求再浏览器的样子
以下是post请求在浏览器的样子,可以看见浏览器返回为空,但是不影响ajax请求返回数据
get- -post请求,ajax请求之后返回是一样的,就不分开写效果图了
如果本篇文章对你有帮助的话,很高兴能够帮助上你。
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。