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 首页加载慢问题性能优化案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
相信大家在使用 React 写页面的时候都遇到过完成 Remember me 的需求吧！本文就将这个需求封装在一个 React hook 中以供后续的使用,觉得有用的同学可以收藏起来以备不时之需,感兴趣的小伙伴跟着小编一起来看看吧2024-04-04
作为一个前端开发时刻想着，怎么把自己写的东西，丢到自己的服务器上面，然后展示给别人看。下面我就简单直白的写下，这篇文章主要给大家介绍了关于nginx配置React静态页面的方法教程,需要的朋友可以参考下。2017-11-11
React路由的history对象的插件history的使用解读
这篇文章主要介绍了React路由的history对象的插件history的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
React中使用Echarts无法显示title、tooltip等组件的解决方案
这篇文章主要介绍了React中使用Echarts无法显示title、tooltip等组件的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要weidajai 介绍了React 高阶组件与Render Props优缺点详解,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
以文本为例,为了实现无限循环的视觉效果,我们需要准备两段相同的文本,并让第二段文本的头部衔接在第一段文本的尾部,同时,为两段文本设置相同的滚动动画,本文给大家介绍了基于React实现无限滚动表格,需要的朋友可以参考下2023-11-11
render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的技术。简单来说，给一个组件传入一个prop，这个props是一个函数，函数的作用是用来告诉这个组件需要渲染什么内容，那么这个prop就成为render prop2023-03-03
这篇文章主要介绍了React中获取数据的3种方法及优缺点，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
本文主要介绍了react中用less的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2024-04-04
最新评论