1.需求說明

因為前后端分離開發(fā)項目，就會存在前端靜態(tài)頁面寫好了，后端數據接口還沒寫好；這時候前端就需要自己定義數據來使用。

定義數據有三種方式：直接寫死數據、使用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.最終效果