mysql - 需要将 React.js 登录表单连接到 SpringBoot 应用后端和 MySQL 数据库

Question

我是编程新手，我正在构建一个完整的堆栈应用程序，其中前端是一个名为“loginform”的 React.js 应用程序，用户可以在其中注册一个帐户，然后他们可以使用他们的凭据登录，后端应该是 SpringBoot和 MySQL 数据库来存储新的用户信息，一旦用户登录，他们将被定向到主页（我也在构建）。但是我一直在寻找一种解决方案来构建后端并将其连接到 React 前端，但我不知道该怎么做。

这是我目前所拥有的（如果需要，我可以提供更多的 React 代码）：

ReactJs App.js：

import React, { useState } from 'react';
import './App.css';
import Navbar from './components/Navbar/Navbar';
import Header from './components/Header/Header';
import LoginForm from './components/LoginForm/LoginForm';
import RegistrationForm from './components/RegistrationForm/RegistrationForm';
import Home from './components/Home/Home';
import PrivateRoute from './utils/PrivateRoute';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import AlertComponent from './components/AlertComponent/AlertComponent';

function App() {
  const [title, updateTitle] = useState(null);
  const [errorMessage, updateErrorMessage] = useState(null);

  
  return (
    <Router>
      <Route exact path="/" components={LoginForm} />
      <div className="App">
        <Header title={title} />
        <Navbar />
        <div className="container d-flex align-items-center flex-column">
          <Switch>
            <Route path="/" exact={true}>
              <RegistrationForm showError={updateErrorMessage} updateTitle={updateTitle} />
            </Route>
            <Route path="/register">
              <RegistrationForm showError={updateErrorMessage} updateTitle={updateTitle} />
            </Route>
            <Route path="/login">
              <LoginForm showError={updateErrorMessage} updateTitle={updateTitle} />
            </Route>
            <PrivateRoute path="/home">
              <Home />
            </PrivateRoute>
          </Switch>
          <AlertComponent errorMessage={errorMessage} hideError={updateErrorMessage} />
        </div>
      </div>
    </Router>
  );
}

export default App;

登录表单.js：

import React, { useState } from 'react';
import axios from 'axios';
import './LoginForm.css';
import { API_BASE_URL, ACCESS_TOKEN_NAME } from '../../constants/apiConstants';
import { withRouter } from "react-router-dom";


function LoginForm(props) {
    const [state, setState] = useState({
        email: "",
        password: "",
        successMessage: null
    })
    const handleChange = (e) => {
        const { id, value } = e.target
        setState(prevState => ({
            ...prevState,
            [id]: value
        }))
    }

    const handleSubmitClick = (e) => {
        e.preventDefault();
        const payload = {
            "email": state.email,
            "password": state.password,
        }
        axios.post(API_BASE_URL + 'login', payload)
            .then(function (response) {
                if (response.data.code === 200) {
                    setState(prevState => ({
                        ...prevState,
                        'successMessage': 'Login successful. Redirecting to home page..'
                    }))
                    localStorage.setItem(ACCESS_TOKEN_NAME, response.data.token);
                    redirectToHome();
                    props.showError(null)
                }
                else if (response.data.code === 204) {
                    props.showError("Username and password do not match");
                }
                else {
                    props.showError("Username does not exist");
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    }
    const redirectToHome = () => {
        props.updateTitle('Home')
        props.history.push('/home');
    }
    const redirectToRegister = () => {
        props.history.push('/register');
        props.updateTitle('Register for TEAMBOX');
    }
    return (
        <div className="card col-12 col-lg-4 login-card mt-2 hv-center">
            <form>
                <div className="form-group text-center"></div>
                <img src="/Teamboxwhite.png" alt="" />
                <div className="form-group text-left">
                    <label htmlFor="exampleInputEmail1">Email address:</label>
                    <input type="email"
                        className="form-control"
                        id="email"
                        aria-describedby="emailHelp"
                        placeholder="Enter email"
                        value={state.email}
                        onChange={handleChange}
                    />
                    <medium id="emailHelp" className="form-text text-muted">Please enter your email to login.</medium>
                </div>
                <div className="form-group text-left">
                    <label htmlFor="exampleInputPassword1">Password:</label>
                    <input type="password"
                        className="form-control"
                        id="password"
                        placeholder="Password"
                        value={state.password}
                        onChange={handleChange}
                    />
                </div>
                <div className="form-check">
                </div>
                <button
                    type="submit"
                    className="btn btn-primary"
                    onClick={handleSubmitClick}
                >Submit</button>
            </form>
            <div className="alert alert-success mt-2" style={{ display: state.successMessage ? 'block' : 'none' }} role="alert">
                {state.successMessage}
            </div>
            <div className="registerMessage">
                <span>Don't have an account? </span>
                <span className="loginText" onClick={() => redirectToRegister()}>Register</span>
            </div>
        </div>
    )
}

export default withRouter(LoginForm);

我知道要审查的内容很多，但我们将不胜感激任何帮助。提前致谢。

标签： mysqlreactjsspring-boot