react項目使用json-server模擬接口獲取數(shù)據(jù)的操作方法
更新時間：2025年11月13日 11:45:46 作者：^^為歡幾何^^
文章介紹了如何在React項目中使用json-server模擬接口并獲取數(shù)據(jù),首先安裝json-server,創(chuàng)建JSON格式的數(shù)據(jù)文件,并在package.json中添加啟動命令,啟動服務(wù)后,可以通過指定的路徑獲取模擬的數(shù)據(jù),感興趣的朋友一起看看吧
一、安裝 json-server
pnpm add json-server -D
二、創(chuàng)建JSON格式的數(shù)據(jù)
在項目根目錄（或 src/mock/）下新建一個文件：
/mock/db.json
內(nèi)容示例：
{
"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表示監(jiān)聽文件變化自動更新；--port 5174指定端口號（你可以改成自己喜歡的）；--delay 500模擬網(wǎng)絡(luò)延遲（單位毫秒）。
四、啟動json-server服務(wù)
json-server --watch db.json --port 5174
注：這里的端口號便是你在package.json，這里要對應(yīng)起來。
五、獲取接口返回的數(shù)據(jù)
const [users, setUsers] = useState([])
useEffect(() => {
axios.get("http://localhost:5174/users").then(res => {
setUsers(res.data)
})
}, [])注釋：這里的'/users'路徑就是根據(jù)你在JSON文件定義的對象名定的，例如你要獲取上述的porducts數(shù)據(jù)，則是請求路徑后面是'/products'
到此這篇關(guān)于react項目使用json-server模擬接口獲取數(shù)據(jù)的文章就介紹到這了,更多相關(guān)react使用json-server獲取數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決React報錯Expected?`onClick`?listener?to?be?a?function
這篇文章主要為大家介紹了React報錯Expected?`onClick`?listener?to?be?a?function解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
通過React-Native實現(xiàn)自定義橫向滑動進(jìn)度條的 ScrollView組件
開發(fā)一個首頁擺放菜單入口的ScrollView可滑動組件,允許自定義橫向滑動進(jìn)度條,且內(nèi)部渲染的菜單內(nèi)容支持自定義展示的行數(shù)和列數(shù),在內(nèi)容超出屏幕后,渲染順序為縱向由上至下依次排列,對React Native橫向滑動進(jìn)度條相關(guān)知識感興趣的朋友一起看看吧2024-02-02
在 React 開發(fā)中,經(jīng)常需要處理點擊事件并判斷點擊的元素屬于哪個組件,這對于實現(xiàn)復(fù)雜的交互邏輯、狀態(tài)管理和組件通信至關(guān)重要,本文將深入探討多種判斷方法,并提供詳細(xì)的代碼示例,需要的朋友可以參考下2025-09-09
這篇文章主要介紹了淺談react性能優(yōu)化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
React 中常用的幾種路由跳轉(zhuǎn)方式小結(jié)
基本路由跳轉(zhuǎn)是最常見的一種方式,下面介紹React 中常用的幾種路由跳轉(zhuǎn)方式,感興趣的朋友一起看看吧2023-12-12
關(guān)于React Native報Cannot initialize a parameter of type''NSArra
這篇文章主要介紹了關(guān)于React Native報Cannot initialize a parameter of type'NSArray＜id＜RCTBridgeModule＞＞錯誤，本文給大家分享解決方案,需要的朋友可以參考下2021-05-05
這篇文章主要介紹了React中jquery引用的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
React項目執(zhí)行build命令后,在本地服務(wù)器打開頁面是空白的,本文主要介紹了React項目build打包頁面空白的解決方案,感興趣的可以了解一下2023-08-08
這篇文章主要為大家詳細(xì)介紹了react native之ScrollView下拉刷新效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
React組件對子組件children進(jìn)行加強(qiáng)的方法
這篇文章主要給大家介紹了關(guān)于React組件中對子組件children進(jìn)行加強(qiáng)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用React具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06