React的数据Mock实现

devtools/2024/9/23 1:01:20/

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

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.ppmy.cn/devtools/35450.html

相关文章

JS基础:8个算数运算符详解

你好,我是云桃桃。 一个希望帮助更多朋友快速入门 WEB 前端的程序媛。 云桃桃 大专生,一枚程序媛,感谢关注。回复 “前端基础题”,可免费获得前端基础 100 题汇总,回复 “前端基础路线”,可获取完整web基础…

力扣简单题

393. 判断子序列 给定字符串 s 和 t ,判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些(也可以不删除)字符而不改变剩余字符相对位置形成的新字符串。(例如,"ace"是"abcde"的…

HCIP-Datacom-ARST必选题库_BGP【道题】

1.关于summary automatic命令和BGP聚合的描述,错误的是? 该命令用于实现自动聚合,其优先级高于手动聚合 配置该命令后,BGP将按自然网段聚合路由 该命令用来使能对本地引入的路由进行自动聚合 配置该命令后,BGP只向对等体发送聚合后的路由 1.关于summary automatic命令和BGP聚…

将springboot应用打包为docker镜像并运行

概述 平时都是直接打包成jar包,然后直接命令行运行。 但是不便于管理。容器化的概念已经推广开来了,正好可以把springboot应用打包成镜像,用docker运行。 docker容器再用docker-compose进行统一编排,方便管理。 dockerFile编写 …

Android 官网Ota介绍

构建 OTA 软件包 | Android 开源项目 | Android Open Source Project

jmeter下载及安装配置

前言 本文是在win10环境下安装使用jmeter,jmeter可以运行在多平台上Windows和Linux。 环境准备:java 1.8jmeter 5.1.1 jmeter环境 jmeter环境依赖JAVA环境,需安装JDK1.8环境,JDK环境安装网上一大堆教程,我这里就不…

js方法返回类型

在JavaScript中,方法可以是以下几种形式: 1. **函数声明**:传统的函数声明方式。 javascript function greet() { console.log(Hello, World!); } 2. **函数表达式**:使用变量赋值的方式定义函数。 javascript const greet…

【数字图像处理笔记】Matlab实现图像平滑算法 均值-中值-高斯滤波 (三)

💌 所属专栏:【数字图像处理笔记】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! &#x…