当前位置: 首页 > news >正文

如何快速模拟一个后端 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;

相关文章:

如何快速模拟一个后端 API

第一步&#xff1a;创建一个文件夹&#xff0c;用来存储你的数据 数据&#xff1a; {"todos": [{ "id": 1, "text": "学习html44", "done": false },{ "id": 2, "text": "学习css", "…...

DLA :pytorch添加算子

pytorch的C extension写法 这部分主要介绍如何在pytorch中添加自定义的算子&#xff0c;需要以下cuda基础。就总体的逻辑来说正向传播需要输入数据&#xff0c;反向传播需要输入数据和上一层的梯度&#xff0c;然后分别实现这两个kernel,将这两个kernerl绑定到pytorch即可。 a…...

Java特殊时间格式转化

平常开发过程当中&#xff0c;我们可能会见到有的日期格式是这样的。 1、2022-12-21T12:20:1608:00 2、2022-12-21T12:20:16.0000800 3、2022-12-21T12:20:16.00008:00下面来说一下这种时间格式怎么转换 第一种&#xff1a;2022-12-21T12:20:1608:00 代码如下&#xff1a; p…...

在CSDN学Golang云原生(Kubernetes声明式资源管理Kustomize)

一&#xff0c;生成资源 在 Kubernetes 中&#xff0c;我们可以通过 YAML 或 JSON 文件来定义和创建各种资源对象&#xff0c;例如 Pod、Service、Deployment 等。下面是一个简单的 YAML 文件示例&#xff0c;用于创建一个 Nginx Pod&#xff1a; apiVersion: v1 kind: Pod m…...

后台管理系统中常见的三栏布局总结:使用element ui构建

vue2 使用 el-menu构建的列表布局&#xff1a; 列表可以折叠展开 <template><div class"home"><header><el-button type"primary" click"handleClick">切换</el-button></header><div class"conte…...

SpringCloud学习路线(10)——分布式搜索ElasticSeach基础

一、初识ES &#xff08;一&#xff09;概念&#xff1a; ES是一款开源搜索引擎&#xff0c;结合数据可视化【Kibana】、数据抓取【Logstash、Beats】共同集成为ELK&#xff08;Elastic Stack&#xff09;&#xff0c;ELK被广泛应用于日志数据分析和实时监控等领域&#xff0…...

CSS翻转DIV展示顺序

项目国际化开发中&#xff0c;阿拉伯语是从右往左读的&#xff0c;在做样式兼容时&#xff0c;一些表单代码块也需要 label在右&#xff0c;表单在左。如果整个项目改div的话代价太大了&#xff0c;所以需要做样式翻转。 html <div class"container"><div …...

python 源码中 PyId_stdout 如何定义的

python 源代码中遇到一个变量名 PyId_stdout&#xff0c;搜不到在哪里定义的&#xff0c;如下只能搜到引用的位置&#xff08;python3.8.10&#xff09;&#xff1a; 找了半天发现是用宏来构造的声明语句&#xff1a; // filepath: Include/cpython/object.h typedef struct …...

Mybatis映射关系mybatis核心配置文件

目录 1.Mybatis映射关系 1.1一对一映射之resultType 1.2resultMap处理映射关系 2.mybatis核心配置文件 1. properties&#xff08;属性&#xff09; 2. settings&#xff08;设置&#xff09; 3.typeAliases&#xff08;类型别名&#xff09; 4.environments&#xff0…...

Mybatis中limit用法与分页查询

错误示范 错误示范一&#xff1a; <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 失败 问题描述 如图&#xff0c;在做USB OTG 设备模式的时候需要用到libcomposite.ko驱动&#xff0c;加载失败了。 原因&解决方法 有一个依赖叫configfs.ko的驱动没有安装。可以从内核代码的fs/configfs/configfs.ko中找到这个驱动。先加载confi…...

Spring Tool Suite 4

参考&#xff1a;Spring tool suite4 安装及配置_springtoolsuite4_猿界零零七的博客-CSDN博客 下载&#xff1a;Spring | Tools 将下载的JAR进行解压两次&#xff0c;直至解压出contents中的sts 双击启动 第一次打开需要指定工作区文件夹 配置Maven的config 安装插件...

带你读论文第三期:微软研究员、北大博士陈琪,荣获NeurIPS杰出论文奖

Datawhale干货 来源&#xff1a;WhalePaper&#xff0c;负责人&#xff1a;芙蕖 WhalePaper简介 由Datawhale团队成员发起&#xff0c;对目前学术论文中比较成熟的 Topic 和开源方案进行分享&#xff0c;通过一起阅读、分享论文学习的方式帮助大家更好地“高效全面自律”学习&…...

农业中的计算机视觉 2023

物体检测应用于检测田间收割机和果园苹果 一、说明 欢迎来到Voxel51的计算机视觉行业聚焦博客系列的第一期。每个月&#xff0c;我们都将重点介绍不同行业&#xff08;从建筑到气候技术&#xff0c;从零售到机器人等&#xff09;如何使用计算机视觉、机器学习和人工智能来推动…...

掌握三个基础平面构成法则 优漫动游

1.图形重复&#xff1a;通过重复使用同一种或类似的图形元素,创造出一种有节奏、有重复感的视觉效果。这种设计手法可以使海报看起来更加统一和协调,增强视觉冲击力。 掌握三个基础平面构成法则 2.字体重复&#xff1a;通过重复使用同一种或类似的字体元素,创造出一种有序…...

叶工好容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&#xff08;长连接服务&#xff09; logic &#xff08;业务&#xff09; lsb &#xff08;负载均衡&#xff09;store&#xff08;存储&#xff09; - Gitee.com&#xff0c;需要指定某一…...

BCNet论文精读

Title—标题 Boundary Constraint Network&#xff08;边界约束网络&#xff09; With Cross Layer Feature Integration&#xff08;跨层特征融合&#xff09; for Polyp Segmentation&#xff08;息肉分割&#xff09; 结构分析 标题结构由三部分组成&#xff0c;分别是本文…...

PHP8的注释-PHP8知识详解

欢迎你来到PHP服务网&#xff0c;学习《PHP8知识详解》系列教程&#xff0c;本文学习的是《PHP8的注释》。 什么是注释&#xff1f; 注释是在程序代码中添加的文本&#xff0c;用于解释和说明代码的功能、逻辑或其他相关信息。注释通常不会被编译器或解释器处理&#xff0c;而…...

优化企业集成架构:iPaaS集成平台助力数字化转型

前言 在数字化时代全面来临之际&#xff0c;企业正面临着前所未有的挑战与机遇。技术的迅猛发展与数字化转型正在彻底颠覆各行各业的格局&#xff0c;不断推动着企业迈向新的前程。然而&#xff0c;这一数字化时代亦衍生出一系列复杂而深奥的难题&#xff1a;各异系统之间数据…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

DiscuzX3.5发帖json api

参考文章&#xff1a;PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下&#xff0c;适配我自己的需求 有一个站点存在多个采集站&#xff0c;我想通过主站拿标题&#xff0c;采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...

论文阅读:Matting by Generation

今天介绍一篇关于 matting 抠图的文章&#xff0c;抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法&#xff0c;已经有很多的工作和这个任务相关。这两年 diffusion 模型很火&#xff0c;大家又开始用 diffusion 模型做各种 CV 任务了&am…...