前端模拟数据mock的使用

最新推荐文章于 2024-06-12 16:30:13 发布

李博的前端篇

最新推荐文章于 2024-06-12 16:30:13 发布

阅读量2.5k

点赞数

分类专栏： mockjs 文章标签： MockJS 接口模拟 JSON数据前端开发 npm

本文链接：https://blog.csdn.net/m0_63498341/article/details/123996606

版权

mockjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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)