用React+Springboot+MySQL实现一个简单的登录功能

前端React部分：

import React from 'react';

import '../css/zujian.css'; // 导入外部样式表

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      username: '',
      password: ''
    };

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleInputChange(event) {
    const { name, value } = event.target;

    if (name === 'username') {
      this.setState({ username: value });
    } else if (name === 'password') {
      this.setState({ password: value });
    }
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log('username:', this.state.username);
    console.log('password:', this.state.password);
	
	// 创建一个 XMLHttpRequest 对象
	const xhr = new XMLHttpRequest();
	
	// 设置请求方法和请求 URL，请求参数通过 URL 传递
	xhr.open('GET', 'http://localhost:8080/login?username=' + this.state.username + '&password=' + this.state.password);
	
	
	// 监听响应状态变化事件
	xhr.onreadystatechange = function() {
	  if (xhr.readyState === 4 && xhr.status === 200) {
	    // 响应已完成，并且响应状态码为 200
	    console.log(xhr.responseText);
	  }
	};
	
	// 发送请求
	xhr.send();
    // TODO: 处理登录逻辑
  }

 render() {
     return (
       <div className="container">
         <h1>Login Page</h1>
         <form className="form" onSubmit={this.handleSubmit}>
           <div>
             <label className="label" htmlFor="username">Username:</label>
             <input className="input" type="text" name="username" id="username" value={this.state.username} onChange={this.handleInputChange} />
           </div>
           <div>
             <label className="label" htmlFor="password">Password:</label>
             <input className="input" type="password" name="password" id="password" value={this.state.password} onChange={this.handleInputChange} />
           </div>
           <button className="button" type="submit">Login</button>
         </form>
       </div>
     );
   }
 
}

export default App

MySQL数据表：

USE xuesheng;

CREATE TABLE USER (
  id INT(11) NOT NULL AUTO_INCREMENT,
  username VARCHAR(50) NOT NULL,
  PASSWORD VARCHAR(50) NOT NULL,
  PRIMARY KEY (id),
  UNIQUE KEY uk_username (username)
) ENGINE=INNODB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

INSERT INTO USER (username, PASSWORD) VALUES ('admin', 'admin');

后端Springboot部分：

先创建一个类允许跨域：

package com.example.demo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfigurer implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")  // 允许跨域请求的域名，例如：http://localhost:3000
                .allowedMethods("*")  // 允许的请求方法，例如：GET、POST、PUT、DELETE 等
                .allowedHeaders("*"); // 允许的请求头部信息，例如：Origin、Content-Type、Authorization 等
    }
}

使用JPA访问数据库：

引入依赖：

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.23</version>
</dependency>

在启动类上加入代码扫描数据表的接口

@EnableJpaRepositories(basePackages = "com.example.demo.mapper")

在entity包下创建一个user类，对应数据库中的user表

package com.example.demo.entity;

import jakarta.persistence.*;

@Entity
@Table(name = "user")
public class User {
    @Id // 声明该属性是一个主键
    @GeneratedValue(strategy = GenerationType.IDENTITY) // 声明主键的生成策略为自增长
    private Long id;

    @Column(name = "username") // 声明该属性与数据库中的 username 列相对应
    private String username;

    @Column(name = "password") // 声明该属性与数据库中的 password 列相对应
    private String password;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

在mapper包下新建UserRepository接口

package com.example.demo.mapper;


import com.example.demo.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;
//该接口中操作的实体类型为 User，主键类型为 Long。

public interface UserRepository extends JpaRepository<User, Long> {

    User findByUsername(String username); // 根据用户名查找用户
    
}

在controller中新建一个类：

package com.example.demo;

import com.example.demo.entity.User;
import com.example.demo.mapper.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.Objects;

@RestController
public class test {

    @Autowired
    private UserRepository userRepository;

    @GetMapping("/login") 
    public String login(@RequestParam("username") String username, @RequestParam("password") String password) {
		//把表中的数据映射给user类
        User user = userRepository.findByUsername(username);
        if (user != null && Objects.equals(user.getPassword(), password)) {
            return "Login Success";
        } else {
            return "Login Failed";
        }

    }
}

效果图：

JPA的增删改查功能：

controller：

package com.example.demo.controller;

import com.example.demo.model.User;
import com.example.demo.repository.UserRepository;
import jakarta.transaction.Transactional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
public class test {

    @Autowired
    private UserRepository userRepository;

    @Transactional
    @GetMapping("/login") // 声明该方法处理 GET 请求，并且请求路径为 /user/login
    public List<User> getAllUsers() {
//  增加用户：
//        User user = new User();
//        user.setUsername("zhangsan");
//        user.setPassword("zhangsan");
//        userRepository.save(user);
//  删除用户
//        userRepository.deleteById(4L);
//  修改用户
        userRepository.updateUser(5L,"zhangsan","zs");
//  查找用户
        return userRepository.findAll();
    }

}

repository：

package com.example.demo.repository;


import com.example.demo.model.User;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Modifying;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.query.Param;
import org.springframework.stereotype.Repository;

@Repository
public interface UserRepository extends JpaRepository<User, Long> {

    @Modifying
    @Query("update User u set u.username = :username, u.password = :password where u.id = :id")
    void updateUser(@Param("id") Long id, @Param("username") String username, @Param("password") String password);
}