如何从 spring-boot 后端访问数据以在 reactjs 前端进行操作？

Question

我正在开发一个 web 应用程序，在后端使用 spring-boot，在前端使用 reactjs，我使用 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});` 

但是这段代码不清楚。这个问题也不是这个How to integrate ReactJS with 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 或postman 对其进行调试。

最后但同样重要的是，通过在后端正确配置您的CORS headers，确保您的前端和后端可以相互通信。

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 中的网络选项卡。请求应该在那里，在“响应”下，您可以看到您的 Spring 应用程序发回的内容。 如果它不是一个干净的 JSON，我建议您阅读我在上面给您的链接以正确序列化。我不熟悉 react，但从那时起你应该没问题，因为任何 JS 都可以处理 JSON。

抱歉，Java 语法有问题，上次我写 Java 是在 3 年前；）