получение объекта состояния из реагирующего интерфейса на весну без создания модели

Question

Я новичок в реакции и Spring, пытаюсь распечатать простые данные о состоянии на моей консоли весенней загрузки, не создавая модель.

Код реакции: работает нормально и отображает вывод в виде данных: "{" пользователь": {" username ":" foo "," password ":" bar "}}".

import React, { Component } from "react";
import LoginBtn from "../Buttons/ActionButtons/LoginActionBtn";
import Username from "../CommonInputElement/Username";
import Password from "../CommonInputElement/Password";
import Axios from "axios";

export default class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password: ""
    };
    this.inputUsernameRef = React.createRef();
    this.inputPasswordRef = React.createRef();
  }

  handleInputChange = event => {
    event.preventDefault();
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  handleSubmit = event => {
    event.preventDefault();

    const user = this.state;

    Axios.post("http://localhost:8080/user", { user }).then(
      res => {
        console.log(res);
        console.log(res.data);
      }
    );
  };

  render() {
    const { username } = this.state;
    const { password } = this.state;
    return (
      <div>
        <div className="login-form">
          <p>Login Form</p>
          <form onSubmit={this.handleSubmit}>
            <Username
              inputRef={this.inputUsernameRef}
              value={username}
              name="username"
              onChange={this.handleInputChange}
            />
            <Password
              inputRef={this.inputPasswordRef}
              value={password}
              name="password"
              onChange={this.handleInputChange}
            />
            <div className="home-button-container btn-group">
              <LoginBtn />
            </div>
          </form>
        </div>
      </div>
    );
  }
}

Spring code: это проблема, при которой возвращается ноль.Кто-нибудь может мне помочь с извлечением объекта реакции на весну без создания модели или репозиториев?

@RequestMapping(value = "/user",  method = RequestMethod.POST)
    public String addEmployee(@RequestParam Map<String, String> data) throws ParseException {
        System.out.println(data.get("username"));
        return data.toString();

    }

Answer 1

Хорошо, я объясню проблему, в вашем коде реакции вы отправляете данные как body, но пытаетесь использовать их как param при весенней загрузке.

Я просто перепишу th axiosтолько запрос и пружинная потребительская часть.

А также то, что я мог при отправке данных в бэкэнд, вам не нужно заключать простое имя и пароль в другой объект, поэтому рассмотрите следующий формат.

Формат запроса

{
  "username":"foo",
  "password":"bar"
}

Код реагирования

    const payload = this.state;  // {"username":"foo","password":"bar"} inspect the request in browser
    Axios.post("http://localhost:8080/user", payload).then(
      res => {
        console.log(res);
        console.log(res.data);
      });

Back End

Spring может напрямую отобразить объект запроса как pojo, используя @RequestBody, поэтому создайтекласс.

User.class

public class User {

  private String username;
  private String password;

  // Getter & Setter
}

Контроллер

Добавить User.class в качестве RequestBody

@RequestMapping(value = "/user",  method = RequestMethod.POST)
public String addEmployee(@RequestBody User user) throws ParseException {
        System.out.println(user.getUsername());
        return user.getUsername();
}

РЕДАКТИРОВАТЬ - СParam

Код реагирования

Axios.post("http://localhost:8080/user", null, { params: payload}).then(
      res => {
        console.log(res);
        console.log(res.data);
      });

Back end

@RequestMapping(value = "/user",  method = RequestMethod.POST)
public String addEmployee(@RequestParam("username") String username, @RequestParam("password") String password) throws ParseException {
        System.out.println(username);
        return username;
}