如何快速模拟一个后端 API

第一步:创建一个文件夹,用来存储你的数据

数据:

{"todos": [{ "id": 1, "text": "学习html44", "done": false },{ "id": 2, "text": "学习css", "done": true },{ "id": 3, "text": "学习javascript", "done": false }]
}

data.json

image.png

第二步:使用 json-server 来快速模拟一个后端 API,而无需真正搭建一个完整的后端服务器。这样可以轻松地进行开发、测试和演示,而无需依赖真实的后端服务。

npx json-server ./data.json --port 8080

  • npx: 是一个用于运行本地安装的 npm 包的工具。
  • json-server: 是一个使用 JSON 文件作为数据源创建 RESTful API 的工具。
  • ./data.json: 是指定 JSON 文件的路径和文件名,它将作为数据源提供给 json-server 使用。
  • --port 8080: 是指定服务器的端口号为 8080,这样 json-server 将在该端口上运行。

image.png

第三步:安装 axios

image.png

第四步:使用

  import axios from "axios";const loadData = async () => {const res = await axios.get("http://localhost:8080/todos");console.log(res);};loadData();

image.png

运行成功显示

image.png

实际应用场景:

image.png

image.png

代码:

// 导入
import { useState, useEffect } from "react";import "./App.scss";
import axios from "axios";// 子组件
const Module = ({ id, done, text, onToggle, onDelData }) => {return (<div><span className={done ? "" : "text"} onClick={() => onToggle(id, !done)}>-- {text} --</span>{/* 点击后子组件调用父组件函数,将 id 回传给父组件 */}<button onClick={() => onDelData(id)}>删除</button></div>);
};// 父组件
const App = () => {// 状态const [defaultTodoData, setDefaultTodo] = useState([]);// 发请求// 注意:不要直接在 useEffect 后边加 async ,因为它是同步的,不用在加了// 不是所有的请求都是在 useEffect 中发送,它只处理跟组件挂载、更新、卸载相关的请求代码// 比如事件处理程序:处理点击等用户操作时的请求代码useEffect(() => {const loadData = async () => {const res = await axios.get("http://localhost:8080/todos");setDefaultTodo(res.data);console.log(res.data);};loadData();}, []);// 修改文字状态const onToggle = async (id, done) => {setDefaultTodo(defaultTodoData.map((item) => {if (item.id === id) return { ...item, done: !item.done };return item;}));// 发请求,更新数据await axios.patch(`http://localhost:8080/todos/${id}`, { done });};// 删除const onDelData = (xId) => {const dataId = defaultTodoData.filter((item) => item.id !== parseInt(xId));console.log(xId, "点击了删除", dataId);setDefaultTodo(dataId);};return (<div><p>xxx </p>{defaultTodoData.map((item) => {// key 可以直接用// return <Module key={item.id} done={item.done} text={item.text}></Module>;// {...item} 解构写法,简化开发// onToggle 给子组件调用的函数return (<Modulekey={item.id}{...item}onToggle={onToggle}onDelData={onDelData}></Module>);})}</div>);
};export default App;

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

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

相关文章

Redis7学习笔记01

一、redis7实战教程简洁 1、大纲&#xff1a; ①、适合对象&#xff0c;从小白到熟手&#xff0c;一套全包圆 ②、Redis专题-大厂面试题&#xff0c;含100道 ③、Redis专题-真实需求生产真实案例 ④、Redis7新特性 2、小白篇高阶篇&#xff1a; 3、大厂面试题&#xff1a…

自动化测试——APP测试

一、环境配置 1、安装jdk 配置环境变量 2、Android SDK 环境安装 3、Appium Server安装 4、模拟器安装 5、安装appium-python-client Python第三方库 二、APP自动化测试原理 三、Desired Capabilites——APPium自动化配置项 1、设置参数 2、操作系统 3、选择版本 4、设备名称…

TCP KeepAlive与HTTP Keep-Alive

TCP KeepAlive与HTTP Keep-Alive TCP KeepAliveHTTP Keep-AliveTCP服务器怎么检测客户端断开连接 TCP KeepAlive TCP连接建立之后&#xff0c;如果应用程序或者上层协议一直不发送数据&#xff0c;或者隔很长时间才发送一次数据&#xff0c;那么TCP需要判断是应用程序掉线了还…

Android Studio 启用设备远程调试配置完整步聚

启用手机设置->开发者选项-无线调试,然后选择允许 已启用后无线调试变成绿色 ,点击无线调试进入详情页面 点击Android Studio的Device Manager 下的WIFI图标 会弹出下图窗口 打开手机的开发者选项中的WIFI调试(无线调试)下的使用二维码配对设备进行扫描. 设备配对成功后手机…

Unity Shader - if 和 keyword 的指令比较

文章目录 环境TestingIf4Sampleunity shaderlab 中的 TestingIf4Sample.shadergraphics analyzer 中的 TestingIf4Sample.glsl TestingKW4Sampleunity shaderlab 中的 TestingKW4Sample.shadergraphics analyzer 中的 TestingKW4Sample.glsl 比较 环境 Unity : 2020.3.37f1 Pi…

在Linux中用strsignal函数输出对各种信号的描述

2023年7月29日&#xff0c;周六上午 目录 函数原型Linux有多少种信号使用示例 函数原型 #include <string.h>char* strsignal(int signum);strsignal函数接受一个整数参数signum&#xff0c;表示信号的编号。 用于把信号编号转换成一个简短的对这个信号编号的描述。 L…

JAVA SE -- 第十一天

&#xff08;全部来自“韩顺平教育”&#xff09; 异常-Exception 一、异常介绍 1、基本介绍 Java语言中&#xff0c;将程序执行中发生的不正常情况为“异常”&#xff08;开发过程中的语法错误和逻辑错误不是异常&#xff09; 2、执行过程中发生的异常事件可分为两大类 …

FPGA2-采集OV5640乒乓缓存后经USB3.0发送到上位机显示

1.场景 基于特权A7系列开发板&#xff0c;采用OV5640摄像头实时采集图像数据&#xff0c;并将其经过USB3.0传输到上位机显示。这是验证数据流能力的很好的项目。其中&#xff0c;用到的软件版本&#xff0c;如下表所示&#xff0c;基本的硬件情况如下。该项目对应FPGA工程源码…

图注意力网络论文详解和PyTorch实现

图神经网络(gnn)是一类功能强大的神经网络&#xff0c;它对图结构数据进行操作。它们通过从节点的局部邻域聚合信息来学习节点表示(嵌入)。这个概念在图表示学习文献中被称为“消息传递”。 消息(嵌入)通过多个GNN层在图中的节点之间传递。每个节点聚合来自其邻居的消息以更新其…

MyBatis(二)

文章目录 一.MyBatis的模式开发1.1 定义数据表和实体类1.2 配置数据源和MyBatis1.3 编写Mapper接口和增加xxxMapper.xml1.4 测试我们功能的是否实现. 二. Mybatis的增删查改操作2.1 单表查询2.2 多表查询三.动态SQL的实现3.1 什么是动态SQL3.2 动态SQL的使用if标签的使用trim标…

M1/M2 通过VM Fusion安装Win11 ARM,解决联网和文件传输

前言 最近新入了Macmini M2&#xff0c;但是以前的老电脑的虚拟机运行不起来了。&#x1f605;&#xff0c;实际上用过K8S的时候&#xff0c;会发现部分镜像也跑不起来&#xff0c;X86的架构和ARM实际上还是有很多隐形兼容问题。所以只能重新安装ARM Win11&#xff0c;幸好微软…

【MySQL】表的操作

今天我们来谈谈MySQL下对表的操作 目录 一、创建表 二、查看表 2.1 查看库中存有的表 2.2 查看表结构 2.3 查看表的创建语句 三、修改表 3.1 重命名表名 3.2 新增列 3.3 修改列的数据类型 3.4 删除列 3.5 重命名列 四、删除表 一、创建表 我们要想在数据库中创建…

SpringMvc+阿贾克斯

0目录 1.SpringMVC 加阿贾克斯 2.分页版 1.实战 创建数据库 创建工程和pom依赖 配置web.xml和applicationContext.xml 实体类 Mapper接口方法 Mapper.xml BookService BookSeriviceImpl 控制层 测试 加入findAll.html 测试 2.分页版 控制层 PostMan测…

华为OD机试真题 Java 实现【AI面板识别】【2023 B卷 100分】,附详细解题思路

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明4、控制台输出 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08…

【C++】STL中stack,queue容器适配器的模拟实现(使用deque容器)

文章目录 前言一、deque的一些基本知识相比vector&#xff1a;相比list&#xff1a;3为什么选择deque作为stack和queue的底层默认容器 二、stack模拟实现三、queue的模拟实现 前言 STL标准库中stack和queue的底层结构 &#xff1a;虽然stack和queue中也可以存放元素&#xff0c…

java文件相关操作工具,包括读取服务器路径下文件,删除文件及子文件,删除文件夹等方法

文章目录 一、记录文件相关操作方法二、代码1.读取路径返回List\<File>2.读取路径返回List\<String>3.删除文件夹4.删除文件 一、记录文件相关操作方法 二、代码 1.读取路径返回List<File> import org.slf4j.LoggerFactory; import org.slf4j.Logger;impo…

【计算机视觉 | 图像分割】arxiv 计算机视觉关于图像分割的学术速递(7 月 26 日论文合集)

文章目录 一、分割|语义相关(7篇)1.1 Learning Transferable Object-Centric Diffeomorphic Transformations for Data Augmentation in Medical Image Segmentation1.2 Optical Flow boosts Unsupervised Localization and Segmentation1.3 Spectrum-guided Multi-granularity…

【LeetCode热题100】打卡第45天:倒数第24~20题

文章目录 【LeetCode热题100】打卡第45天&#xff1a;倒数第24~20题⛅前言 最佳卖股票时机含冷冻期&#x1f512;题目&#x1f511;题解 戳气球&#x1f512;题目&#x1f511;题解 零钱兑换&#x1f512;题目&#x1f511;题解 打家劫舍III&#x1f512;题目&#x1f511;题解…

opencv-25 图像几何变换04- 透视 cv2.warpPerspective()

什么是透视&#xff1f; 透视是一种几何学概念&#xff0c;用于描述在三维空间中观察物体时&#xff0c;由于视角的不同而产生的变形效果。在现实世界中&#xff0c;当我们从不同的角度或位置观察物体时&#xff0c;它们会呈现出不同的形状和大小。这种现象被称为透视效果。 透…

TCP网络通信编程之字节流

目录 【TCP字节流编程】 // 网络编程中&#xff0c;一定是server端先运行 【案例1】 【思路分析】 【客户端代码】 【服务端代码】 【结果展示】 【案例2】 【题目描述】 【注意事项】 【服务端代码】 【客户端代码】 【代码结果】 【TCP字节流编程】 // 网络编程中&a…