有時候前端寫好模板後,後端還完工,那麼總不能一直讓項目停滯吧,這裏就用Mockjs來模擬後端接口的數據,讓我們先人一步完成項目。
首先創建一個html,導入axios和mockjs
再用mock去攔截請求,如果後端接口寫好了,就把mock註釋掉即可,一點不影響項目進展!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
<script>
axios.request({
methods:'get',
url:'http://k1998.xyz/www/public/index.php/index/video/add'
})
.then(res=>{
console.log(res.data);
})
// 用mock去攔截請求
Mock.mock('http://k1998.xyz/www/public/index.php/index/video/add',{
'data|1-10':[{
'id|+1': 1,
'vimg': '@image',
'vname': '@name',
'vurl' : '@url'
}]
})
</script>
</html>
原接口數據
用mock攔截後的數據
數組的長短是隨機的,可能是4也可能是8
這裏的data|1-10指的是隨即1到十條數據
id|+1表示每個數據的id加一
其他的@name等就是隨機的名字和圖片地址等