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. 访问接口进行测试
    在这里插入图片描述在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue中如何正确使用异步async和await

async 是异步的意思,而 await 是等待的意思,await 用于等待一个异步任务执行完成的结果。 1.async/await 是一种编写异步代码的新方法(以前是采用回调和 promise)。 2. async/await 是建立在 promise 的基础上。 3. async/await 像…

计算机毕业设计python基于django框架的网上拍卖系统

创新点:本系统采用英国式拍卖和荷兰式拍卖两种模式,英国式拍卖也叫升价拍卖。这是最普遍的一种拍卖方式。拍卖人设定一个底价,竞买人相继给出更高的价格,最终出价最高者胜出,并支付最高价。这种形式在电影中非常常见&a…

PHP源码_新ui潮乎盲盒_h5源码

运行截图 源码贡献 https://githubs.xyz/boot?app40 数据库部份表 -- -- 表的结构 la_box_mark --CREATE TABLE la_box_mark (id int(10) UNSIGNED NOT NULL,icon varchar(191) COLLATE utf8_unicode_ci DEFAULT ,bg_thumb varchar(191) COLLATE utf8_unicode_ci DEFAULT N…

react props传参

props是父子传参的常用方法。 一、主要功能 1.传参 定义:父级组件向子级组件传递参数。 2.验证数据类型格式 定义:可以指定父组件传递过来数据为指定类型。 3.设置默认值 定义:在参数未使用时,直接默认为指定值。 二、实例代…

c++详解栈和队列——及模拟实现stack——queue——例题

初来乍到,望大家点点赞,点点关注,谢谢各位看官老爷 个人主页 在c语言中我们已经模拟实现过栈和队列了,对其底层结构有了基本的认识 栈和队列的详讲 文章目录 目录 文章目录 前言 一、了解栈和队列是什么? ​编辑​编辑…

【信号与系统杂谈 - 1】为什么拉普拉斯变换有收敛域而傅里叶变换没有

这个问题是我在推导傅里叶变换的时移特性公式和拉普拉斯变换的延时特性公式时发现的(即拉氏变换总是需要考虑收敛域的原因) 援引知乎上的回答解释

人工智能论文:GPT, GPT-2, GPT-3 对比和演进的思路

2018.6 GPT: Improving Language Understanding by Generative Pre-Training 第一篇主要强调 无监督预训练有监督微调transformer 主要成果: 1,无监督预训练:使得模型能够从海量未标记数据中自主学习,为后续任务提供了…

(免费人工智能机器人、周报通、AI中文站、choose-car、智造喵)分享好用的ChatGPT

目录 1、ChatGPTer - 免费人工智能机器人 2、周报通 3、 AI中文站 - chat.7jm.cn 人工智能,稳定高效

(暗虫AI、一站式、酷盖、智言智语、靠谱AI)分享好用的ChatGPT

目录 1、暗虫AI 2、GPT中文站 - 一站式AI解决方案 3、酷盖AI实验室

【Linux系统编程】第十一弹---编辑器vim使用

✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、vim的基本概念 2、vim的基本操作 3、vim插入模式命令集 4、vim正常(命令)模式命令集 5、vim末行模式命令集 6、vim操作…

支持向量机回归(概念+实例)

目录 前言 一、基本概念 1. 支持向量机回归的原理 2. 支持向量机回归的工作方式 3. 支持向量机回归的优缺点 4. 支持向量机回归的应用 二、实例 前言 支持向量机(Support Vector Machine,SVM)是一种强大的机器学习算法,最初…

安装 MySQL 数据库服务器

安装 MySQL 数据库服务器 MySQL 是一种流行的开源关系型数据库管理系统,提供了稳定、高性能的数据库解决方案。下面将介绍在 Windows、Linux 和 macOS 上安装 MySQL 数据库服务器的步骤。 在 Windows 上安装 MySQL 下载 MySQL 安装包:从 MySQL 官方网站…

数据结构与算法(Java版) | 详解十大经典排序算法之一:插入排序

接下来,我来给大家讲解第三种排序算法,即插入排序。 基本介绍 首先,我们来看下插入排序的基本介绍。 插入排序,其属内部排序法,是对于欲排序的元素以插入的方式来找寻该元素的适当位置,以便最终达到排序…

java集合框架总结

简介 Java 集合框架(Java Collections Framework, JCF)是 Java 平台的一部分,为数据的存储和操作提供了一整套强大的接口和实现。Java 集合框架不仅仅是一些数据结构的聚合,它通过一组精心设计的接口和类提供了数据操作的各种算法…

k8s复制pod里的文件到宿主机

要在Kubernetes中复制Pod里的文件到宿主机&#xff0c;可以使用kubectl cp命令。以下是一个基本的命令格式和示例&#xff1a; 命令格式: kubectl cp <namespace>/<pod-name>:/path/to/file/in/pod /path/to/target/location/on/host -c <container-name> …

R可视化:Venn图进阶版本

前言 最近看到一张不一样的韦恩图,添加了上下调基因数目的韦恩图,将其实现一下,用于自己的研究展示。 导入R包和数据 library(dplyr) library(tibble) library(ggplot2) library(ggVennDiagram) library(ggpubr) library(data.table)subgrp <- c("HC", &quo…

2024年十五届蓝桥杯省赛大学B组真题(Java完整版)

2024年十五届蓝桥杯省赛大学B组真题&#xff08;Java&#xff09; 前言&#xff1a; 赛后一直犹豫要不要对比赛进行复盘出个题解&#xff0c;拖到了现在&#xff0c;终于也是等到比赛结果出来&#xff0c;看到没有辜负个人期望成功取得省一&#xff0c;决定在国赛前对省赛进行…

根据txt文件绘制词云 -- python

根据一段文字绘制词云&#xff0c;我们有两种方法 &#xff0c;一种是登录专业的绘图网站http://yciyun.com/ 不过&#xff0c;貌似这个网站需要会员才可以体验&#xff0c;他只是给出了一些形状图案的词云&#xff0c;虽然看起来很精美&#xff0c;但是他不能让我们自己随意更…

开发文档、PHP身份核验接口,三要素实名认证接口

在这个数字时代&#xff0c;每一步的安全都至关重要。想象一下&#xff0c;一个简单、高效又安全的解决方案&#xff0c;让您的业务与客户之间建立起坚不可摧的信任桥梁&#xff0c;那便是翔云身份证三要素实名认证接口。 翔云身份证实名认证接口&#xff0c;实时联网&#xf…

没有管理员权限如何apt-get install

没有管理员权限如何apt-get install 一、下载包二、安装到本地三、添加路径到.bashrc文件 一般来说使用apt安装deb软件&#xff0c;必须要有root权限&#xff0c;因为apt安装时需要写 /usr/bin&#xff0c;/usr/lib&#xff0c;/usr/share等目录&#xff0c;而这些目录只有root…