前言
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請求之後返回是一樣的,就不分開寫效果圖了
如果本篇文章對你有幫助的話,很高興能夠幫助上你。
當然,如果你覺得文章有什麼讓你覺得不合理、或者有更簡單的實現方法又或者有理解不來的地方,希望你在看到之後能夠在評論裏指出來,我會在看到之後儘快的回覆你。