如何從spring-boot后端訪問數據以在reactjs前端中進行操作？

Question

我正在后端使用spring-boot和前端使用reactjs開發一個Web應用程序，我使用webpack和babel捆綁了react文件。 環境設置可以，並且前端工作正常。 但是我被困在前端和后端之間的通信上。

顯然，我的問題是如何從Spring Boot中獲取數據以將它們提供給react組件？

這是我的@RestController class ：

我嘗試在互聯網上進行全面研究，訪問了此Tuto https://spring.io/guides/tutorials/react-and-spring-data-rest/ ，在其中他們清楚地解釋了問題，但有些復雜，我沒有在我的腦海中無法很好地捕捉，因此我可以開發自己的代碼，以訪問他們使用一行代碼的后端數據

`client({method: 'GET', path: '/api/employees'}).done(response => {
            this.setState({employees: response.entity._embedded.employees});` 

但是這段代碼不清楚。 這個問題也不是如何將ReactJS與spring boot集成的重復，因為它沒有回答。 任何人都可以幫助我。

package scholar.reactspringwebpack.controllers;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import scholar.reactspringwebpack.entities.PrmEntity;
import scholar.reactspringwebpack.services.PrmServices;

import java.util.List;

@RestController
@CrossOrigin
public class DataController {

    @Autowired
    PrmServices prmServices;

    @GetMapping(value = "/all")
    public List<PrmEntity>readAll(){
        return prmServices.readAllUsers();
    }
}`

and here is my reactjs component : 

    import React, { Component } from 'react';
import axios from 'axios';

class SignupForm extends Component {
    state={
        fname: "",
        lname: "",
        depart: "",
        username: "",
        password: "",
        account_type: ""
    }
    componentDidMount(){
        axios.get("http://localhost:8080/all").then(res =>{
            const persons = res.data;
            this.setState({
                fname:persons.fname,
                lname:persons.lname,
                depart:persons.depart,
                username:persons.username,
                password:persons.password,
                account_type:persons.account_type
            });
        });
    }
  render() {
      const {users} = this.state;
      console.log(users);
    //   const userList = users.map(user=>{
    //       return(
    //           <table>
    //               <thead>
    //                   <tr>
    //                       <th>fname</th>
    //                       <th>lname</th>
    //                       <th>depart</th>
    //                       <th>username</th>
    //                       <th>password</th>
    //                       <th>account_type</th>
    //                   </tr>
    //               </thead>
    //               <tbody>
    //                   <tr>
    //                       <td>{user.fname}</td>
    //                       <td>{user.lname}</td>
    //                       <td>{user.depart}</td>
    //                       <td>{user.username}</td>
    //                       <td>{user.password}</td>
    //                       <td>{user.account_type}</td>
    //                   </tr>

    //               </tbody>
    //           </table>
    //       )
    //   })
    return (

        <div className="container">
            <div className="row">
                <div className="col-md-6 text-center signup-form ml-auto mr-5 card">
                    <div className="card-header">
                        <h3 className="text-info">Sign Up Form</h3>
                    </div>

                    <div className="card-body">
                        <form className="container">
                            <div className="form-group form-row">
                                <input
                                    type="text"
                                    name="fname"
                                    placeholder="Enter family name"
                                    className="input-text bg-transparent text-white form-control form-control-sm"
                                />
                            </div>

                            <div className="form-group form-row">
                                <input
                                    type="text"
                                    name="lname"
                                    placeholder="Enter last name"
                                    className="input-text bg-transparent text-white form-control form-control-sm" />

                            </div>




                            <div className="form-group form-row">
                                <select
                                    name="depart"
                                    className="input-text bg-transparent text-info custom-select custom-select-sm">
                                    <option value="">--Select your department--</option>
                                    <option value="administration">Administration</option>
                                    <option value="anaesthesia">Anaesthesia</option>
                                    <option value="palliative_care">Palliative care</option>
                                    <option value="petite_chgie">Petite chirirugie</option>
                                </select>
                            </div>
                            <div className="form-group form-row">
                                <input
                                    type="text"
                                    name="username"
                                    placeholder="Enter your username"
                                    className="input-text bg-transparent text-white form-control form-control-sm"
                                    />

                            </div>
                            <div className="form-group form-row">
                                <input
                                    type="password"
                                    name="password"
                                    placeholder="Enter password"
                                    className="input-text bg-transparent text-white form-control form-control-sm"
                                     />

                            </div>
                            <div className="form-group form-row">
                                <input
                                    type="password"
                                    name="confirm_password"
                                    placeholder="Confirm your password"
                                    className="input-text bg-transparent text-white form-control form-control-sm" />
                            </div>
                            <div className="">
                                <select
                                    name="account_type"
                                    className="input-text bg-transparent text-info custom-select custom-select-sm">
                                    <option value="">--Select your account type--</option>
                                    <option value="normal_user">Normal user</option>
                                    <option value="data_manager">Data Manager</option>
                                    <option value="head_of_dpt">Head of department</option>
                                    <option value="system_admin">System administrator</option>
                                </select>

                            </div>
                            <div className="form-group form-row">
                                <button name="signup_btn" className="mt-2 btn btn-block btn-outline-primary btn-sm">Sign up</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    )
  }
}

export default SignupForm;

Answer 1

React在前端，Spring在后端。 它們通過HTTP進行通信-就像大多數互聯網流量一樣，因此沒有關於React + Spring的特殊指南。

確保React發出有效的HTTP請求，例如（順便說一下，它是純JS，在我的示例中不需要React）：

fetch('http://my.api.com/api/employees')
  .then(resp => resp.json())
  .then(data => this.setState({employees: data.employees}})

還要確保您的后端能夠滿足您的需求，您可以使用curl或郵遞員對其進行調試。

最后但並非最不重要的一點是，通過在后端中正確配置CORS標頭 ，確保允許您的前端和后端相互通信。

Answer 2

為了使您的前端能夠讀取您的響應，您需要發送一種可讀格式，例如JSON。 您不能只返回對象。

首先，您可以使用@ResponseBody告訴Spring在其中編寫一些內容。 現在，您需要將對象序列化為字符串，以便能夠在HTTP-ResponseBody中編寫它。

為此，您可以使用Jackson（推薦！-> https://www.baeldung.com/jackson-object-mapper-tutorial ）或僅使用ObjectMapper（）：

例：

@GetMapping(value = "/all")
@ResponseBody
public String readAll(){
  ObjectMapper mapper = new ObjectMapper();
  user = prmServices.getUser(1);
  return mapper.writeValueAsString(user)
}

如上所述，您現在可以請求該端點：

fetch('http://my.api.com/all')
  .then(resp => resp.json())
  .then(data => this.setState({user: data}})

為了了解發生了什么，請在發出請求的同時查看Chrome中的Network-Tab。 該請求應該在那里，在“響應”下，您可以看到您的Spring App正在發回什么。 如果不是干凈的JSON，建議您閱讀上面給我的鏈接以正確進行序列化。 我不熟悉react，但是從那時起您應該可以了，因為任何JS都可以處理JSON。

對錯誤的Java語法表示抱歉，我3年前的上次編寫Java;）