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

react中如何mock数据

1.需求说明

因为前后端分离开发项目,就会存在前端静态页面写好了,后端数据接口还没写好;这时候前端就需要自己定义数据来使用。

定义数据有三种方式:直接写死数据、使用mock软件、json-server工具

这里讲解通过json-server工具来获取数据

2.安装插件

npm i -D json-server

3.新建数据文件

在根目录下新建server文件,该文件夹下新建data.json文件用于存储数据

4.更改项目配置文件

package.json

更改前

"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},

更改后

"scripts": {"start": "react-scripts start & npm run server","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject","server": "json-server ./server/data.json --port 8888"},

说明:

1.需要同时启动项目和工具,工具启动命令是npm run server,项目启动命令是npm run start

2."server": "json-server ./server/data.json --port 8888"代码意思是,server是启动命令、json-server是工具、./server/data.json是数据源位置、--port 8888是设置端口号

3."start": "react-scripts start & npm run server"的意思是,start是启动命令、react-scripts start不知道是什么、& npm run server是代表同时启动server工具;整行代码就是通过npm run start就同时启动项目和启动server工具

4.启动项目和工具可以分开在两个终端控制台启动,分别在两个终端控制台输入各自的命令就行了;也可以在一个控制终端上通过npm run start,前提是有写"react-scripts start & npm run server"

5.测试

import axios from "axios"
function Home() {async function shower() {// await axios.get('http://localhost:8888/kanno').then(res=>{// console.log('res:', res.data);// }) // 通过axios来请求数据const response = await fetch('http://localhost:8888/kanno'); // 通过fetch来请求数据const data = await response.json();console.log('Data:', data);}return (<div><div>我是home</div><button onClick={shower}>点击请求数据</button></div>)
}export default Home

说明:接口地址来源于使用npm run server启动server工具时

6.最终效果

相关文章:

react中如何mock数据

1.需求说明 因为前后端分离开发项目&#xff0c;就会存在前端静态页面写好了&#xff0c;后端数据接口还没写好&#xff1b;这时候前端就需要自己定义数据来使用。 定义数据有三种方式&#xff1a;直接写死数据、使用mock软件、json-server工具 这里讲解通过json-server工具…...

通过Faiss和DINOv2进行场景识别

目标&#xff1a;通过Faiss和DINOv2进行场景识别&#xff0c;确保输入的照片和注册的图片&#xff0c;保持内容一致。 MetaAI 通过开源 DINOv2&#xff0c;在计算机视觉领域取得了一个显着的里程碑&#xff0c;这是一个在包含1.42 亿张图像的令人印象深刻的数据集上训练的模型…...

新手入门基础Java

一:基础语法 1.Java的运行机制 2. Java基本语法 1.注释、标识符、关键字; 2.数据类型(四类八种) 3.类型转换 1.自动转换;2.强制转换; 4.常量和变量 1.常量;2.变量; 3.变量的作用域 5.运算符 1.算数运算符;2.赋值运算符;3.关系运算符; 4.逻辑运算符;5.自…...

2024最新版虚拟便携空调小程序源码 支持流量主切换空调型号

产品截图 部分源代码展示 urls.js Object.defineProperty(exports, "__esModule", {value: !0 }), exports.default ["9c5f1fa582bee88300ffb7e28dce8b68_3188_128_128.png", "E-116154b04e91de689fb1c4ae99266dff_960.svg", "573eee719…...

前端在浏览器总报错,且获取请求头中token的值为null

前端请求总是失败说受跨域请求影响&#xff0c;但前后端配置已经没有问题了&#xff0c;如下&#xff1a; package com.example.shop_manage_sys.config;import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Conf…...

html+css前端作业 王者荣耀官网6个页面无js

htmlcss前端作业 王者荣耀官网6个页面无js 下载地址 https://download.csdn.net/download/qq_42431718/89571150 目录1 目录2 项目视频 王者荣耀6个页面&#xff08;无js&#xff09; 页面1 页面2 页面3 页面4 页面5 页面6...

在windows上使用Docker部署一个简易的web程序

使用Docker部署一个python的web服务&#x1f680; 由于是从事算法相关工作&#xff0c;之前在项目中&#xff0c;需要将写完的代码服务&#xff0c;部署在docker上&#xff0c;以此是开始接触了Docker这个工具&#xff0c;由于之前也没系统学习过&#xff0c;之后应该可能还会用…...

sqlalchemy使用mysql的json_extract函数查询JSON字段

sqlalchemy使用mysql的json_extract函数查询JSON字段 在SQLAlchemy中,如果你想要在MySQL中存储JSON字段,并且进行查询操作,可以按照以下步骤进行设置和查询: 1. 创建表格 首先,创建一个表格来存储包含JSON字段的数据。假设我们有一个名为 users 的表格,其中有一个名为…...

分类模型-逻辑回归和Fisher线性判别分析★★★★

该博客为个人学习清风建模的学习笔记&#xff0c;部分课程可以在B站&#xff1a;【强烈推荐】清风&#xff1a;数学建模算法、编程和写作培训的视频课程以及Matlab等软件教学_哔哩哔哩_bilibili 目录 1理论 1.1逻辑回归模型 1.2线性概率模型 1.3线性判别分析 1.4两点分布…...

JMeter介绍、安装配置以及快速入门

文章目录 1. JMeter简介2. JMeter安装配置3. JMeter快速入门 1. JMeter简介 Apache JMeter是一款开源的压力测试工具&#xff0c;主要用于测试静态和动态资源&#xff08;如静态文件、服务器、数据库、FTP服务器等&#xff09;的性能。它最初是为测试Web应用而设计的&#xff…...

GPT LangChain experimental agent - allow dangerous code

题意&#xff1a;GPT LangChain 实验性代理 - 允许危险代码 问题背景&#xff1a; Im creating a chatbot in VS Code where it will receive csv file through a prompt on Streamlit interface. However from the moment that file is loaded, it is showing a message with…...

1 LableMe安装下载

git:GitHub - labelmeai/labelme: Image Polygonal Annotation with Python (polygon, rectangle, circle, line, point and image-level flag annotation). 1 LabelMe介绍 LabelMe是一个图像标注工具&#xff0c;主要用于帮助研究人员和开发者创建有标签的数据集&#xff0c;这…...

rce漏洞-ctfshow(50-70)

Web51 if(!preg_match("/\;|cat|flag| |[0-9]|\\$|\*|more|less|head|sort|tail|sed|cut|tac|awk|strings|od|curl|\|\%|\x09|\x26/i", $c)){ system($c." >/dev/null 2>&1"); } Nl&#xff0c;绕过tac&#xff0c;cat&#xff0c;绕…...

vulntarget-a靶机-复现报告

靶机复现过程 测试标题 测试过程 测试外网ip 192.168.2.84 测试详情 第一步&#xff0c;我们先对其这个外网ip进行扫描&#xff0c;结果如下 结果我们发现这个ip开启了80和445端口&#xff0c;同时我们还可以看到这里是win7系统&#xff0c;我们先看看web页面是怎样的 结…...

为什么 FPGA 的效率低于 ASIC?

FPGA是“可重构逻辑”器件。先制造的芯片&#xff0c;再次设计时“重新配置”。 ASIC 不需要“重新配置”。你先设计&#xff0c;把它交给代工厂&#xff0c;然后制造芯片。 现在让我们看看这些芯片的结构是什么样的&#xff0c;以及它们的不同之处。 ● 逻辑单元&#xff1a;F…...

使用水星Mecury人形机器人搭建VR遥操作控制平台!

VR遥操作机械臂是一种将虚拟现实技术与机械臂控制相结合的系统&#xff0c;使用户可以通过虚拟现实设备操控和交互实际的机械臂。这种技术可以应用于多个领域&#xff0c;包括远程操作、培训、危险环境中的工作等。 双臂人形机器人是一种模拟人体上半身结构&#xff0c;包括头部…...

【学习笔记】无人机系统(UAS)的连接、识别和跟踪(三)-架构模型和概念

引言 3GPP TS 23.256 技术规范&#xff0c;主要定义了3GPP系统对无人机&#xff08;UAV&#xff09;的连接性、身份识别、跟踪及A2X&#xff08;Aircraft-to-Everything&#xff09;服务的支持。 3GPP TS 23.256 技术规范&#xff1a; 【免费】3GPPTS23.256技术报告-无人机系…...

uniapp bug解决:uniapp文件查找失败:‘uview-ui‘ at main.js:14

文章目录 报错内容解决方法main.js 文件中 uView 主 JS 库引入 uView 的全局 SCSS 主题文件内容修改引入 uView 基础样式内容修改配置 easycom 内容修改 报错内容 10:50:51.795 文件查找失败&#xff1a;uview-ui at main.js:14 10:59:39.570 正在差量编译... 10:59:43.213 文…...

Python 爬虫(爬取百度翻译的数据)

前言 要保证爬虫的合法性&#xff0c;可以从以下几个方面着手&#xff1a; 遵守网站的使用条款和服务协议&#xff1a;在爬取数据之前&#xff0c;仔细阅读目标网站的相关规定。许多网站会在其 robots.txt 文件中明确说明哪些部分可以爬取&#xff0c;哪些不可以。 例如&…...

【LeetCode:2766. 重新放置石块 + 哈希表】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…...

做了5年GEO优化,我敢说90%的企业都没看懂GEO的真实成本

很多人来问我 GEO 是什么意思&#xff0c;大多是听别人说这是 AI 时代的获客新路子&#xff0c;能比传统推广省好几倍的钱&#xff0c;还能让 AI 优先推荐自己家。但我每次都先不说那些好听的好处&#xff0c;先给大家算清楚&#xff0c;做 GEO 这件事里&#xff0c;那些 90% 的…...

s2-pro快速上手指南:3步完成文本转语音与音色迁移实操手册

s2-pro快速上手指南&#xff1a;3步完成文本转语音与音色迁移实操手册 1. 平台简介 s2-pro是Fish Audio开源的专业级语音合成模型镜像&#xff0c;它能够将文本内容转换为自然流畅的语音&#xff0c;并支持通过参考音频实现音色迁移功能。这意味着你可以上传一段参考音频&…...

Debian12下Docker国内镜像加速全攻略:以腾讯云为例快速部署WordPress

Debian12下Docker国内镜像加速全攻略&#xff1a;以腾讯云为例快速部署WordPress 在Debian12系统中使用Docker时&#xff0c;国内用户常遇到镜像下载速度慢的问题。本文将详细介绍如何配置国内镜像源加速Docker&#xff0c;并以腾讯云为例&#xff0c;快速部署WordPress环境。…...

2026年小红书文案降AI工具怎么选?自媒体人亲测这4款最靠谱

开始做小红书内容之前&#xff0c;我以为降AI只是学生的事。后来才发现&#xff0c;品牌方审稿也在查AI率&#xff0c;小红书平台自己也有AI检测机制。 自媒体文案的降AI需求和论文不一样&#xff0c;核心要求是&#xff1a;保留口语化语感&#xff0c;不能变成学术腔。降完还…...

OpenClaw任务编排:GLM-4.7-Flash驱动复杂工作流

OpenClaw任务编排&#xff1a;GLM-4.7-Flash驱动复杂工作流 1. 为什么需要任务编排&#xff1f; 去年我接手了一个重复性极高的数据整理工作——每周需要从十几个不同来源收集数据&#xff0c;清洗后生成可视化报告。最初尝试用Python脚本自动化&#xff0c;但随着需求变化&a…...

给嵌入式新手的保姆级指南:JTAG、SWD、J-Link、ST-Link到底怎么选?

嵌入式开发调试工具全指南&#xff1a;从JTAG到SWD的实战选择策略 第一次拿到STM32开发板时&#xff0c;看着板子上那排密密麻麻的调试接口针脚&#xff0c;我盯着J-Link和ST-Link这两个名词发了半小时呆——它们到底有什么区别&#xff1f;为什么有的教程用JTAG接线&#xff0…...

基于春联生成模型的Python爬虫数据采集与内容生成系统

基于春联生成模型的Python爬虫数据采集与内容生成系统 用技术传承文化&#xff0c;让AI助力创作 1. 项目背景与价值 春节是中国人最重要的传统节日&#xff0c;而春联则是春节文化中不可或缺的一部分。每年春节&#xff0c;家家户户都会贴上新的春联&#xff0c;表达对新年的美…...

douyin-downloader:智能抖音视频全流程管理工具,让内容收集效率提升90%

douyin-downloader&#xff1a;智能抖音视频全流程管理工具&#xff0c;让内容收集效率提升90% 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader douyin-downloader是一款开源的抖音视频批量下载与管理工具&am…...

AI 开发实战:AI 成本监控怎么做,团队才不会越用越贵

AI 开发实战&#xff1a;AI 成本监控怎么做&#xff0c;团队才不会越用越贵 一、这个问题为什么值得专门拿出来做&#xff1f; 在 AI 工程落地里&#xff0c;真正拖慢团队的往往不是模型本身&#xff0c;而是流程和协作方式没有跟上。 围绕“AI 成本监控怎么做&#xff0c;团…...

从SolidWorks到Gazebo:手把手教你用SW2URDF插件为ROS2 Humble机械臂建模(含ROS2适配避坑指南)

从SolidWorks到Gazebo&#xff1a;ROS2 Humble机械臂建模全流程实战 1. 工业设计与机器人仿真的桥梁搭建 当机械工程师第一次接触机器人仿真时&#xff0c;往往会面临一个关键挑战&#xff1a;如何将精心设计的SolidWorks模型转化为可在Gazebo中运行的仿真模型&#xff1f;这个…...