4 回答

TA貢獻1829條經驗 獲得超7個贊
如何添加功能,以便在單擊提交按鈕時,處于應用狀態的所有內容都將傳遞到后端 - 例如文本文件或 json 文件中。
您可以使用 Axios 或獲取 API 請求在應用程序中使用的數據。您可以使用兩種最流行的方法(稱為 Axios(基于承諾的 HTTP 客戶端)和提取 API(瀏覽器內置的 Web API))來使用 REST API。
獲取() API 是一種內置的 JavaScript 方法,用于從服務器或 API 端點獲取資源。它類似于 XML 請求
Axios 是一個易于使用的基于承諾的 HTTP 客戶端,適用于瀏覽器和節點.js。由于 Axios 是基于承諾的,我們可以利用異步并等待更多可讀性和異步代碼。借助 Axios,我們獲得了攔截和取消請求的能力,它還具有內置功能,可提供客戶端保護,防止跨站點請求偽造。
要了解更多信息,您可以參考此
以上這兩種方法,都可以用于將數據從前端提交到后端,以便將數據存儲到后端,然后您可以根據需要對其執行多個操作。
您可以參考多個博客和文檔來了解更多信息:
最近,我還創建了一個應用程序,其中我將 React 與彈簧靴應用程序集成。
在此應用程序中。我已經設置了路由器和路由,創建并提交了表單,稱為獲取,發布,PUT,使用axios刪除請求(也完成了獲取API)。
submitBook= event =>{
event.preventDefault();
const book = {
title: this.state.title,
author: this.state.author,
coverphotoURL: this.state.coverphotoURL,
isbnNumber: this.state.isbnNumber,
price: this.state.price,
language: this.state.language
};
const headers = new Headers();
headers.append("Content-Type", "application/json");
fetch("http://localhost:8080/rest/books",{
method:"POST",
body:JSON.stringify(book),
headers
})
.then(response => response.json())
.then((book) => {
if(book){
this.setState({"show":true, "method":"post"});
setTimeout(() => this.setState({"show":false}),3000);
}
else{
this.setState({"show":false});
}});
this.setState(this.initialState);
};
要查看完整代碼,您可以參考我的Github存儲庫
添加回答
舉報