MockJs案例

最新推荐文章于 2022-11-21 18:58:28 发布

我yi癫狂

最新推荐文章于 2022-11-21 18:58:28 发布

阅读量468

点赞数

分类专栏： JavaScript Vue

本文链接：https://blog.csdn.net/weixin_43560272/article/details/106172784

版权

Vue 同时被 2 个专栏收录

31 篇文章 2 订阅

订阅专栏

JavaScript

22 篇文章 8 订阅

订阅专栏

有时候前端写好模板后，后端还完工，那么总不能一直让项目停滞吧，这里就用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等就是随机的名字和图片地址等

我yi癫狂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
MockJs案例

有时候前端写好模板后，后端还完工，那么总不能一直让项目停滞吧，这里就用Mockjs来模拟后端接口的数据，让我们先人一步完成项目。首先创建一个html，导入axios和mockjs再用mock去拦截请求，如果后端接口写好了，就把mock注释掉即可，一点不影响项目进展！！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpor.
复制链接

扫一扫

专栏目录