React中使用Mockjs进行接口数据模拟

引子每个改进都是为了解决问题。现在我在开发中碰到了问题,我先描述下问题:我们现在做前后端完全分离的应用,前端写前端的,后端写后端的,他们通过API接口连接。前端同学心理路程:“后端同学接口写的好慢,我都没法调试了。”是不是有这个问题呢?一般我们怎么解决?第一种:自己这边随便造点数据,等后端接口写好了之后,再小修改,再调试。第二种:想想我们之前获得用户信息的dist/api/user...
摘要由CSDN通过智能技术生成

引子

每个改进都是为了解决问题。
现在我在开发中碰到了问题,我先描述下问题:
我们现在做前后端完全分离的应用,前端写前端的,后端写后端的,他们通过API接口连接。
前端同学心理路程:“后端同学接口写的好慢,我都没法调试了。”
是不是有这个问题呢?一般我们怎么解决?
第一种:自己这边随便造点数据,等后端接口写好了之后,再小修改,再调试。
第二种:想想我们之前获得用户信息的dist/api/user.json,我们可以用这种方式来调试。
但是想象下,我们要模拟一个文章列表,就要手动写几十列。oh~no!
并且,后端接口一般都不带.json,到时候对接,是不是还得改代码?
好了,下面介绍下今天的主角Mock.js。
他会做一件事情:拦截AJAX请求,返回需要的数据!
我们写AJAX请求的时候,正常写,Mock.js会自动拦截的。

1.mock是什么?

官方文档

Start

1. 装包

yarn add mockjs
yarn add axios 这个是测试用 你也可以使用ajax、fetch 等

2. 在src 目录下创建我们的mock 文件夹用于存放我们的mock数据
3.写入mock数据
  • 创建一个data2.js 内容如下
// 使用 Mock
import Mock from 'mockjs'


export default Mock.mock('/postdata1','post',{
   
    success: true,
    message: '@cparagraph',
    // 属性 list 的值是一个数组,其中含有 1 到 5 个元素
    'list|1-5': [{
   
        // 属性 sid 是一个自增数,起始值为 1,每次增 1
        'sid|+1': 1,
        // 属性 userId 是一个5位的随机码
        'userId|5': 
  • 3
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值