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