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中添加啟動命令,啟動服務后,可以通過指定的路徑獲取模擬的數(shù)據(jù),感興趣的朋友一起看看吧

一、安裝 json-server

pnpm add json-server -D

二、創(chuàng)建JSON格式的數(shù)據(jù)

在項目根目錄（或 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 表示監(jiān)聽文件變化自動更新；
--port 5174 指定端口號（你可以改成自己喜歡的）；
--delay 500 模擬網絡延遲（單位毫秒）。

四、啟動json-server服務

json-server --watch db.json --port 5174

注：這里的端口號便是你在package.json，這里要對應起來。

五、獲取接口返回的數(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'

到此這篇關于react項目使用json-server模擬接口獲取數(shù)據(jù)的文章就介紹到這了,更多相關react使用json-server獲取數(shù)據(jù)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

React 首頁加載慢問題性能優(yōu)化案例詳解
這篇文章主要介紹了React 首頁加載慢問題性能優(yōu)化案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下
2021-09-09
使用React hook實現(xiàn)remember me功能
相信大家在使用 React 寫頁面的時候都遇到過完成 Remember me 的需求吧！本文就將這個需求封裝在一個 React hook 中以供后續(xù)的使用,覺得有用的同學可以收藏起來以備不時之需,感興趣的小伙伴跟著小編一起來看看吧
2024-04-04
nginx配置React靜態(tài)頁面的方法教程
作為一個前端開發(fā)時刻想著，怎么把自己寫的東西，丟到自己的服務器上面，然后展示給別人看。下面我就簡單直白的寫下，這篇文章主要給大家介紹了關于nginx配置React靜態(tài)頁面的方法教程,需要的朋友可以參考下。
2017-11-11
React路由的history對象的插件history的使用解讀
這篇文章主要介紹了React路由的history對象的插件history的使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
React中使用Echarts無法顯示title、tooltip等組件的解決方案
這篇文章主要介紹了React中使用Echarts無法顯示title、tooltip等組件的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
React?高階組件與Render?Props優(yōu)缺點詳解
這篇文章主要weidajai?介紹了React?高階組件與Render?Props優(yōu)缺點詳解,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
基于React實現(xiàn)無限滾動表格
以文本為例,為了實現(xiàn)無限循環(huán)的視覺效果,我們需要準備兩段相同的文本,并讓第二段文本的頭部銜接在第一段文本的尾部,同時,為兩段文本設置相同的滾動動畫,本文給大家介紹了基于React實現(xiàn)無限滾動表格,需要的朋友可以參考下
2023-11-11
React RenderProps模式運用過程淺析
render props是指一種在 React 組件之間使用一個值為函數(shù)的 prop 共享代碼的技術。簡單來說，給一個組件傳入一個prop，這個props是一個函數(shù)，函數(shù)的作用是用來告訴這個組件需要渲染什么內容，那么這個prop就成為render prop
2023-03-03
React中獲取數(shù)據(jù)的3種方法及優(yōu)缺點
這篇文章主要介紹了React中獲取數(shù)據(jù)的3種方法及優(yōu)缺點，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-02-02
react中用less的問題
本文主要介紹了react中用less的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2024-04-04