react项目使用json-server模拟接口获取数据的操作方法
更新时间：2025年11月13日 11:45:46 作者：^^为欢几何^^
文章介绍了如何在React项目中使用json-server模拟接口并获取数据,首先安装json-server,创建JSON格式的数据文件,并在package.json中添加启动命令,启动服务后,可以通过指定的路径获取模拟的数据,感兴趣的朋友一起看看吧
一、安装 json-server
pnpm add json-server -D
二、创建JSON格式的数据
在项目根目录（或 src/mock/）下新建一个文件：
/mock/db.json
内容示例：
{
"users": [
{ "id": 1, "name": "张三", "age": 25 },
{ "id": 2, "name": "李四", "age": 30 }
],
"products": [
{ "id": 1, "name": "iPhone 15", "price": 9999 },
{ "id": 2, "name": "MacBook Pro", "price": 19999 }
]
}三、在 package.json 中添加启动命令
{
"scripts": {
"dev": "vite",
"mock": "json-server --watch mock/db.json --port 5174 --delay 500"
}
}说明：
--watch表示监听文件变化自动更新；--port 5174指定端口号（你可以改成自己喜欢的）；--delay 500模拟网络延迟（单位毫秒）。
四、启动json-server服务
json-server --watch db.json --port 5174
注：这里的端口号便是你在package.json，这里要对应起来。
五、获取接口返回的数据
const [users, setUsers] = useState([])
useEffect(() => {
axios.get("http://localhost:5174/users").then(res => {
setUsers(res.data)
})
}, [])注释：这里的'/users'路径就是根据你在JSON文件定义的对象名定的，例如你要获取上述的porducts数据，则是请求路径后面是'/products'
到此这篇关于react项目使用json-server模拟接口获取数据的文章就介绍到这了,更多相关react使用json-server获取数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
解决React报错Expected `onClick` listener to be a function
这篇文章主要为大家介绍了React报错Expected `onClick` listener to be a function解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
通过React-Native实现自定义横向滑动进度条的 ScrollView组件
开发一个首页摆放菜单入口的ScrollView可滑动组件,允许自定义横向滑动进度条,且内部渲染的菜单内容支持自定义展示的行数和列数,在内容超出屏幕后,渲染顺序为纵向由上至下依次排列,对React Native横向滑动进度条相关知识感兴趣的朋友一起看看吧2024-02-02
在 React 开发中,经常需要处理点击事件并判断点击的元素属于哪个组件,这对于实现复杂的交互逻辑、状态管理和组件通信至关重要,本文将深入探讨多种判断方法,并提供详细的代码示例,需要的朋友可以参考下2025-09-09
这篇文章主要介绍了浅谈react性能优化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
基本路由跳转是最常见的一种方式,下面介绍React 中常用的几种路由跳转方式,感兴趣的朋友一起看看吧2023-12-12
关于React Native报Cannot initialize a parameter of type''NSArra
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray＜id＜RCTBridgeModule＞＞错误，本文给大家分享解决方案,需要的朋友可以参考下2021-05-05
这篇文章主要介绍了React中jquery引用的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
React项目执行build命令后,在本地服务器打开页面是空白的,本文主要介绍了React项目build打包页面空白的解决方案,感兴趣的可以了解一下2023-08-08
这篇文章主要为大家详细介绍了react native之ScrollView下拉刷新效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要给大家介绍了关于React组件中对子组件children进行加强的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用React具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
最新评论