如何快速模拟一个后端 API
第一步:创建一个文件夹,用来存储你的数据
数据:
{"todos": [{ "id": 1, "text": "学习html44", "done": false },{ "id": 2, "text": "学习css", "done": true },{ "id": 3, "text": "学习javascript", "done": false }]
}
data.json

第二步:使用 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 将在该端口上运行。

第三步:安装 axios

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

运行成功显示

实际应用场景:


代码:
// 导入
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;相关文章:
如何快速模拟一个后端 API
第一步:创建一个文件夹,用来存储你的数据 数据: {"todos": [{ "id": 1, "text": "学习html44", "done": false },{ "id": 2, "text": "学习css", "…...
DLA :pytorch添加算子
pytorch的C extension写法 这部分主要介绍如何在pytorch中添加自定义的算子,需要以下cuda基础。就总体的逻辑来说正向传播需要输入数据,反向传播需要输入数据和上一层的梯度,然后分别实现这两个kernel,将这两个kernerl绑定到pytorch即可。 a…...
Java特殊时间格式转化
平常开发过程当中,我们可能会见到有的日期格式是这样的。 1、2022-12-21T12:20:1608:00 2、2022-12-21T12:20:16.0000800 3、2022-12-21T12:20:16.00008:00下面来说一下这种时间格式怎么转换 第一种:2022-12-21T12:20:1608:00 代码如下: p…...
在CSDN学Golang云原生(Kubernetes声明式资源管理Kustomize)
一,生成资源 在 Kubernetes 中,我们可以通过 YAML 或 JSON 文件来定义和创建各种资源对象,例如 Pod、Service、Deployment 等。下面是一个简单的 YAML 文件示例,用于创建一个 Nginx Pod: apiVersion: v1 kind: Pod m…...
后台管理系统中常见的三栏布局总结:使用element ui构建
vue2 使用 el-menu构建的列表布局: 列表可以折叠展开 <template><div class"home"><header><el-button type"primary" click"handleClick">切换</el-button></header><div class"conte…...
SpringCloud学习路线(10)——分布式搜索ElasticSeach基础
一、初识ES (一)概念: ES是一款开源搜索引擎,结合数据可视化【Kibana】、数据抓取【Logstash、Beats】共同集成为ELK(Elastic Stack),ELK被广泛应用于日志数据分析和实时监控等领域࿰…...
CSS翻转DIV展示顺序
项目国际化开发中,阿拉伯语是从右往左读的,在做样式兼容时,一些表单代码块也需要 label在右,表单在左。如果整个项目改div的话代价太大了,所以需要做样式翻转。 html <div class"container"><div …...
python 源码中 PyId_stdout 如何定义的
python 源代码中遇到一个变量名 PyId_stdout,搜不到在哪里定义的,如下只能搜到引用的位置(python3.8.10): 找了半天发现是用宏来构造的声明语句: // filepath: Include/cpython/object.h typedef struct …...
Mybatis映射关系mybatis核心配置文件
目录 1.Mybatis映射关系 1.1一对一映射之resultType 1.2resultMap处理映射关系 2.mybatis核心配置文件 1. properties(属性) 2. settings(设置) 3.typeAliases(类型别名) 4.environments࿰…...
Mybatis中limit用法与分页查询
错误示范 错误示范一: <select id"fileInspectionList" resultType"map">SELECT <include refid"aip_n_static_cols"/>FROM sys_inspection_form WHERE<if test" type admin.toString() ">dept_id …...
libcomposite: Unknown symbol config_group_init (err 0)
加载libcomposite.ko 失败 问题描述 如图,在做USB OTG 设备模式的时候需要用到libcomposite.ko驱动,加载失败了。 原因&解决方法 有一个依赖叫configfs.ko的驱动没有安装。可以从内核代码的fs/configfs/configfs.ko中找到这个驱动。先加载confi…...
Spring Tool Suite 4
参考:Spring tool suite4 安装及配置_springtoolsuite4_猿界零零七的博客-CSDN博客 下载:Spring | Tools 将下载的JAR进行解压两次,直至解压出contents中的sts 双击启动 第一次打开需要指定工作区文件夹 配置Maven的config 安装插件...
带你读论文第三期:微软研究员、北大博士陈琪,荣获NeurIPS杰出论文奖
Datawhale干货 来源:WhalePaper,负责人:芙蕖 WhalePaper简介 由Datawhale团队成员发起,对目前学术论文中比较成熟的 Topic 和开源方案进行分享,通过一起阅读、分享论文学习的方式帮助大家更好地“高效全面自律”学习&…...
农业中的计算机视觉 2023
物体检测应用于检测田间收割机和果园苹果 一、说明 欢迎来到Voxel51的计算机视觉行业聚焦博客系列的第一期。每个月,我们都将重点介绍不同行业(从建筑到气候技术,从零售到机器人等)如何使用计算机视觉、机器学习和人工智能来推动…...
掌握三个基础平面构成法则 优漫动游
1.图形重复:通过重复使用同一种或类似的图形元素,创造出一种有节奏、有重复感的视觉效果。这种设计手法可以使海报看起来更加统一和协调,增强视觉冲击力。 掌握三个基础平面构成法则 2.字体重复:通过重复使用同一种或类似的字体元素,创造出一种有序…...
叶工好容5-日志与监控
目录 前言 平台维度 docker运行状态 cAdvisor-日志采集者 Heapster-日志收集 metrics-server-出生决定成败 kube-state-metrics-不完美中的完美 应用维度 日志 部署方式 输出方式 工具选择 日志接入 监控 serviceMonitor Annotation Prometheus扩展性 Thanos …...
Dubbo 指定调用固定ip+port dubbo调用指定服务 dubbo调用不随机 dubbo自定义调用服务 dubbo点对点通信 dubbo指定ip
1. 在写分布式im时nami-im: 分布式im, 集群 zookeeper netty kafka nacos rpc主要为gate(长连接服务) logic (业务) lsb (负载均衡)store(存储) - Gitee.com,需要指定某一…...
BCNet论文精读
Title—标题 Boundary Constraint Network(边界约束网络) With Cross Layer Feature Integration(跨层特征融合) for Polyp Segmentation(息肉分割) 结构分析 标题结构由三部分组成,分别是本文…...
PHP8的注释-PHP8知识详解
欢迎你来到PHP服务网,学习《PHP8知识详解》系列教程,本文学习的是《PHP8的注释》。 什么是注释? 注释是在程序代码中添加的文本,用于解释和说明代码的功能、逻辑或其他相关信息。注释通常不会被编译器或解释器处理,而…...
优化企业集成架构:iPaaS集成平台助力数字化转型
前言 在数字化时代全面来临之际,企业正面临着前所未有的挑战与机遇。技术的迅猛发展与数字化转型正在彻底颠覆各行各业的格局,不断推动着企业迈向新的前程。然而,这一数字化时代亦衍生出一系列复杂而深奥的难题:各异系统之间数据…...
[AI/应用/MCP] MCP Server/Tool 开发指南
1. 智能软件工程的范式转移:从库集成到原生框架演进 在生成式人工智能(Generative AI)从单纯的文本生成向具备自主规划与执行能力的“代理化(Agentic)”系统跨越的过程中,.NET 生态系统正在经历一场自该平台…...
从拆解到驱动:手把手教你用IMX6ULL驱动OV5640摄像头模块(附完整代码)
从拆解到驱动:手把手教你用IMX6ULL驱动OV5640摄像头模块(附完整代码) 1. 硬件连接与接口解析 OV5640作为一款500万像素的CMOS图像传感器,支持DVP和MIPI两种接口模式。在IMX6ULL平台上,我们选择使用DVP并行接口进行连接…...
2025届必备的六大AI辅助写作神器解析与推荐
Ai论文网站排名(开题报告、文献综述、降aigc率、降重综合对比) TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 处于人工智能技术基础之上的智能辅助系统,是可给学术研究者送去高效、规范的开题…...
暗黑破坏神2单机增强神器:PlugY插件全方位使用指南
暗黑破坏神2单机增强神器:PlugY插件全方位使用指南 【免费下载链接】PlugY PlugY, The Survival Kit - Plug-in for Diablo II Lord of Destruction 项目地址: https://gitcode.com/gh_mirrors/pl/PlugY 对于暗黑破坏神2单机玩家而言,有限的储物空…...
实战分享:如何用本地替换和插桩调试搞定Kasada最新版x-kpsdk-cd环境检测
逆向工程实战:Kasada最新版x-kpsdk-cd环境检测的深度调试策略 在当今Web安全防护体系中,Kasada作为新一代反自动化攻击解决方案,其x-kpsdk-cd机制通过动态加密和运行时环境检测构建了强大的防御层。面对从280位扩展到294位的加密数组和Proxy保…...
深度学习优化算法详解:从 SGD 到 AdamW
深度学习优化算法详解:从 SGD 到 AdamW 1. 背景与动机 优化算法是深度学习训练的核心,选择合适的优化器直接影响模型的收敛速度和最终性能。本文深入分析主流优化算法的原理和适用场景。 2. 梯度下降家族 2.1 SGD import torch import torch.nn as nnopt…...
别再为PyTorch GPU环境发愁了!手把手教你用Miniconda管理多版本CUDA(GTX1060实测)
深度学习环境配置实战:GTX1060显卡下的PyTorch GPU环境搭建指南 在深度学习领域,环境配置往往是新手面临的第一个挑战。特别是当您手头有一块GTX1060这样的经典显卡时,如何充分发挥其计算潜力,同时避免陷入版本兼容性问题的泥潭&…...
UI设计入门指南——Figma新手必备操作全解析
1. Figma入门:从零到第一个设计稿 第一次打开Figma时,很多人会被满屏的英文界面和复杂工具栏吓到。其实我刚接触时也一样,但现在回头看,掌握基础操作只需要30分钟。Figma作为目前最流行的UI设计工具,最大的优势就是零门…...
告别手速焦虑:大麦抢票神器让你轻松锁定心仪演出
告别手速焦虑:大麦抢票神器让你轻松锁定心仪演出 【免费下载链接】ticket-purchase 大麦自动抢票,支持人员、城市、日期场次、价格选择 项目地址: https://gitcode.com/GitHub_Trending/ti/ticket-purchase 还在为抢不到演唱会门票而烦恼吗&#…...
OpenClaw如何实现数据可视化
要实现数据可视化,OpenClaw 主要通过以下几种方式,您可以根据需求选择合适的方法: 📊 1. 使用内置的 visualizerAgent OpenClaw 内置了 agent:visualizer,可直接从 CSV 等文件生成交互式 HTML 仪表盘(如折…...
