Я занимаюсь разработкой веб-приложения с использованием Spring-Boot в Backend и Reactjs во Frontend. Я использовал WebPack и Babel для объединения файлов реагирования. Настройка среды в порядке, а внешний интерфейс работает нормально. Но я застрял на связи между внешним и внутренним интерфейсом.
Очевидно, у меня вопрос: как я могу получить данные из весенней загрузки, чтобы обработать их в реактивном компоненте?
Вот мой @RestController class:
Я пытался исследовать все, в Интернете, пошел к этому туто 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 с пружинным загрузчиком , потому что он не отвечает на него. Любой может помочь мне.
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;