MockJs案例

有時候前端寫好模板後,後端還完工,那麼總不能一直讓項目停滯吧,這裏就用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
數組的長短是隨機的,可能是4也可能是8

這裏的data|1-10指的是隨即1到十條數據
id|+1表示每個數據的id加一
其他的@name等就是隨機的名字和圖片地址等

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章