前端模拟数据mock的使用

81 阅读 0 评论 54 点赞

我是靠谱客的博主欣喜飞鸟，最近开发中收集的这篇文章主要介绍前端模拟数据mock的使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、npm下载

npm install mockjs

2、在src下面创建mock文件夹

3、在src下创建自己要模拟的数据(可以创建多个)

banner.json

[
{
"id": "1",
"imgUrl": "/images/banner1.jpg"
},
{
"id": "2",
"imgUrl": "/images/banner2.jpg"
},
{
"id": "3",
"imgUrl": "/images/banner3.jpg"
},
{
"id": "4",
"imgUrl": "/images/banner4.jpg"
}
]

4、在src下创建mockServe.js

//先引入mockjs模块
import Mock from 'mockjs';
//吧json数据引入
import banner from './banner.json';
//mock数据：第一个参数请求的地址，第二个参数：请求的数据
Mock.mock("/mock/banner",{code:200,data:banner});

5、访问的方式和正常访问接口一样(这里使用get)