React的数据Mock实现

在前后端分类的开发模式下,前端可以在没有实际后端接口的支持下先进行接口数据的模拟,进行正常的业务功能开发

1. 常见的Mock方式

在这里插入图片描述

2. json-server实现Mock

实现步骤:

  1. 项目中安装json-server
    npm i -D json-server
  2. 准备一个json文件
{
  "ka": [
    {
      "type": "pay",
      "money": -99,
      "date": "2022-10-24 10:36:42",
      "useFor": "drinks",
      "id": 1
    },
    {
      "type": "pay",
      "money": -88,
      "date": "2022-10-24 10:37:51",
      "useFor": "longdistance",
      "id": 2
    },
    {
      "type": "income",
      "money": 100,
      "date": "2022-10-22 00:00:00",
      "useFor": "bonus",
      "id": 3
    },
    {
      "type": "pay",
      "money": -33,
      "date": "2022-09-24 16:15:41",
      "useFor": "dessert",
      "id": 4
    },
    {
      "type": "pay",
      "money": -56,
      "date": "2022-10-22T05:37:06.000Z",
      "useFor": "drinks",
      "id": 5
    },
    {
      "type": "pay",
      "money": -888,
      "date": "2022-10-28T08:21:42.135Z",
      "useFor": "travel",
      "id": 6
    },
    {
      "type": "income",
      "money": 10000,
      "date": "2023-03-20T06:45:54.004Z",
      "useFor": "salary",
      "id": 7
    },
    {
      "type": "pay",
      "money": -10,
      "date": "2023-03-22T07:17:12.531Z",
      "useFor": "drinks",
      "id": 8
    },
    {
      "type": "pay",
      "money": -20,
      "date": "2023-03-22T07:51:20.421Z",
      "useFor": "dessert",
      "id": 9
    },
    {
      "type": "pay",
      "money": -100,
      "date": "2023-03-22T09:18:12.898Z",
      "useFor": "drinks",
      "id": 17
    },
    {
      "type": "pay",
      "money": -50,
      "date": "2023-03-23T09:11:23.312Z",
      "useFor": "food",
      "id": 18
    },
    {
      "type": "pay",
      "money": -10,
      "date": "2023-04-03T11:14:56.036Z",
      "useFor": "food",
      "id": 19
    }
  ]
}
  1. 添加启动命令
    在这里插入图片描述
  2. 访问接口进行测试
    在这里插入图片描述在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/584037.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

大数据开发工作中的数仓设计(Hadoop,hive ,mysql )

1.HUE工具介绍使用 HUE是CDH提供一个hive和hdfs的操作工具,在hue中编写了hiveSQl也可以操作hdfs的文件 http://主机名字:端口号 hdfs的web访问端口 http://主机名字:端口号 hdfs的程序访问端口 进入后确保hdfs hive yarn 开启 在点击hue开启 在这里面也可以进行h…

记录k8s以docker方式安装Kuboard v3 过程

原本是想通过在k8s集群中安装kuboad v3的方式安装kuboard,无奈在安装过程中遇到了太多的问题,最后选择了直接采用docker安装的方式,后续有时间会补上直接采用k8s安装kuboard v3的教程。 1.kuboard安装文档地址: 安装 Kuboard v3 …

华为 huawei 交换机 配置 MUX VLAN 示例(汇聚层设备)

组网需求 在企业网络中,企业所有员工都可以访问企业的服务器。但对于企业来说,希望企业内部部分员工之间可以互相交流,而部分员工之间是隔离的,不能够互相访问。 如 图 6-4 所示, Switch1 位于网络的汇聚层&#xff0…

【百度Apollo】探索自动驾驶:小白教学如何使用 Dreamview 播放数据包

🎬 鸽芷咕:个人主页 🔥 个人专栏: 《linux深造日志》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! 文章目录 引入一、Dreamview 简介二、使用 Dreamview 具体步骤步骤一:进入 Apollo Docker 环境步骤二&#xff…

Qt QThreadPool线程池

1.简介 QThreadPool类管理一个QThread集合。 QThreadPool管理和重新设计单个QThread对象,以帮助降低使用线程的程序中的线程创建成本。每个Qt应用程序都有一个全局QThreadPool对象,可以通过调用globalInstance来访问该对象。 要使用其中一个QThreadPool…

VMware安装ubuntun虚拟机使用桥接模式无法上网问题解决

问题:最近准备使用VMware虚拟机搭建k8s集群服务,因为需要在同一个网段下,我使用桥接的方式,我发现主机在使用有线连接时虚拟机网络连接正常,但是使用无线网就显示连接不上网络。 解决方法 一、查看网络连接&#xff…

软考-信息系统项目管理师-论文技术架构模板(60天备考第26天)

分享一段信息系统项目管理师论文项目技术架构描述的万能模板,供大家参考。距离考试还有二十八天,如果论文写不好的可以加微进论文指导群学习论文写作。 该系统前端基于Vue开发,后端基于java开发,前后端分离部署。整体采用B/S架构&…

【论文阅读笔记】Frequency Perception Network for Camouflaged Object Detection

1.论文介绍 Frequency Perception Network for Camouflaged Object Detection 基于频率感知网络的视频目标检测 2023年 ACM MM Paper Code 2.摘要 隐蔽目标检测(COD)的目的是准确地检测隐藏在周围环境中的目标。然而,现有的COD方法主要定位…

java中的对象拷贝(包括BeanUtils和Mapstruct)

对象拷贝 借鉴: https://blog.csdn.net/weixin_43811057/article/details/122853749https://blog.csdn.net/weixin_42036952/article/details/105697234?spm1001.2101.3001.6650.8&utm_mediumdistribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogComme…

目标检测应用场景—数据集【NO.33】血细胞图像分类和检测数据集

写在前面:数据集对应应用场景,不同的应用场景有不同的检测难点以及对应改进方法,本系列整理汇总领域内的数据集,方便大家下载数据集,若无法下载可关注后私信领取。关注免费领取整理好的数据集资料!今天分享…

LVS/NAT工作模式介绍及配置

1.1 LVS/NAT模式工作原理 LVS(Linux Virtual Server)的网络地址转换(NAT)模式是一种在网络层(第四层)实现负载均衡的方法。在NAT模式中,Director Server(DS)充当所有服务…

leetcode51.N皇后(困难)-回溯法

思路 都知道n皇后问题是回溯算法解决的经典问题,但是用回溯解决多了组合、切割、子集、排列问题之后,遇到这种二维矩阵还会有点不知所措。 首先来看一下皇后们的约束条件: 不能同行不能同列不能同斜线 确定完约束条件,来看看究…

UE5 体积云

写好的体积材质放这里面 效果如上 Begin Object Class/Script/UnrealEd.MaterialGraphNode Name"MaterialGraphNode_4"Begin Object Class/Script/Engine.MaterialExpressionVectorParameter Name"MaterialExpressionVectorParameter_0"End ObjectBegin O…

人工智能_大模型044_模型微调004_随机梯度下降优化_常见损失计算算法_手写简单神经网络_实现手写体识别---人工智能工作笔记0179

然后对于,梯度下降,为了让训练的速度更好,更快的下降,又做了很多算法,可以看到 这里要知道Transformer中最常用的Adam 和 AdamW这两种算法. 当然,这些算法都是用于优化神经网络中的参数,以最小化损失函数。下面我会尽量以通俗易懂的方式解释它们的原理和适用场景。 1. **L-…

关于电路设计的一些基本知识点

目录 一,BUCK降压电路1.1 布局与布线1.1.1 高频电流环路1.1.2 小信号的地1.1.3 其他要注意的地方 1.2 输入输出电容,电感的选择1.2.1 电感的选择1.2.2 输入输出电容的选择 三,电源芯片3.1 LM2596,LM2576 四,运放电路设计4.1 运放的…

亚马逊接入时遇到的相关问题和解决方法

1、签名获取 在做amazon的SDK接入时,发现需要应用签名的一些信息:MD5签名和SHA256签名。用命令java的命令 keytool -list -v -keystore xxx.keystore 如果是Java版本不是1.8的话,结果缺少MD5值 这里有3种解决方案: 1、将jav…

医生个人品牌网红IP孵化打造赋能运营方案

【干货资料持续更新,以防走丢】 医生个人品牌网红IP孵化打造赋能运营方案 部分资料预览 资料部分是网络整理,仅供学习参考。 PPT可编辑(完整资料包含以下内容) 目录 个人IP运营方案 1. 目标设定 - 个人定位:根据医生…

【论文阅读】IPT:Pre-TrainedImageProcessingTransformer

Pre-TrainedImageProcessingTransformer 论文地址摘要1. 简介2.相关作品2.1。图像处理2.2。 Transformer 3. 图像处理3.1. IPT 架构3.2 在 ImageNet 上进行预训练 4. 实验4.1. 超分辨率4.2. Denoising 5. 结论与讨论 论文地址 1、论文地址 2、源码 摘要 随着现代硬件的计算能…

ChatGPT理论分析

ChatGPT "ChatGPT"是一个基于GPT(Generative Pre-trained Transformer)架构的对话系统。GPT 是一个由OpenAI 开发的自然语言处理(NLP)模型,它使用深度学习来生成文本。以下是对ChatGPT进行理论分析的几个主…

科学高效备考AMC8和AMC10竞赛,吃透2000-2024年1850道真题和解析

多做真题,吃透真题和背后的知识点是备考AMC8、AMC10有效的方法之一,通过做真题,可以帮助孩子找到真实竞赛的感觉,而且更加贴近比赛的内容,可以通过真题查漏补缺,更有针对性的补齐知识的短板。 AMC8和AMC10…