正文

SpringBoot+React框架实战教程：从入门到项目实战，轻松搭建前后端分离应用

/0 浏览量
0531

在当前的技术发展趋势中，前后端分离的应用架构越来越受到开发者的青睐。这种架构将前端和后端开发分离，使得两个团队可以并行工作，提高了开发效率。本文将带您从零开始，使用SpringBoot和React框架搭建一个完整的前后端分离应用。

一、准备工作

在开始之前，请确保您的电脑上已安装以下软件：

  • Java Development Kit (JDK) 1.8或更高版本
  • Maven 3.0或更高版本
  • Node.js和npm
  • 一个代码编辑器，如Visual Studio Code

二、创建SpringBoot项目

  1. 初始化项目：使用Spring Initializr（https://start.spring.io/）创建一个SpringBoot项目。选择Maven作为构建工具，Java版本选择1.8，并添加`Spring Web、Spring Data JPA、H2 Database和Lombok`依赖。

  2. 配置数据库：在application.properties文件中配置数据库连接信息。

spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=password
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
  1. 创建实体类和Repository：以用户为例，创建User实体类和UserRepository接口。
@Entity
@Data // Lombok注解，自动生成getter和setter
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String password;
}

public interface UserRepository extends JpaRepository<User, Long> {
}
  1. 创建Controller：创建UserController类，用于处理用户相关的请求。
@RestController
@RequestMapping("/users")
public class UserController {
    @Autowired
    private UserRepository userRepository;

    @GetMapping
    public List<User> getAllUsers() {
        return userRepository.findAll();
    }

    @PostMapping
    public User createUser(@RequestBody User user) {
        return userRepository.save(user);
    }
}

三、创建React项目

  1. 初始化项目：使用Create React App（https://create-react-app.dev/docs/getting-started/）创建一个React项目。
npx create-react-app my-app
cd my-app
  1. 安装依赖：安装axios和react-router-dom库。
npm install axios react-router-dom
  1. 创建组件：创建UserList、UserForm和App组件。
// UserList.js
import React from 'react';
import axios from 'axios';

const UserList = () => {
  const [users, setUsers] = React.useState([]);

  React.useEffect(() => {
    axios.get('/users').then((response) => {
      setUsers(response.data);
    });
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.username}</li>
      ))}
    </ul>
  );
};

export default UserList;

// UserForm.js
import React, { useState } from 'react';
import axios from 'axios';

const UserForm = () => {
  const [user, setUser] = useState({ username: '', password: '' });

  const handleChange = (e) => {
    setUser({ ...user, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    axios.post('/users', user).then((response) => {
      alert('User created successfully!');
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input type="text" name="username" value={user.username} onChange={handleChange} />
      </label>
      <label>
        Password:
        <input type="password" name="password" value={user.password} onChange={handleChange} />
      </label>
      <button type="submit">Create User</button>
    </form>
  );
};

export default UserForm;

// App.js
import React from 'react';
import UserList from './UserList';
import UserForm from './UserForm';

const App = () => {
  return (
    <div>
      <h1>User Management</h1>
      <UserList />
      <UserForm />
    </div>
  );
};

export default App;

四、运行项目

  1. 运行SpringBoot项目：在SpringBoot项目的根目录下运行以下命令。
mvn spring-boot:run
  1. 运行React项目：在React项目的根目录下运行以下命令。
npm start

现在，您应该能够在浏览器中访问React应用，并通过SpringBoot后端API进行用户管理。

五、总结

本文介绍了如何使用SpringBoot和React框架搭建一个前后端分离的应用。通过本文的学习，您应该能够掌握以下技能：

  • 使用SpringBoot创建RESTful API
  • 使用React创建用户界面
  • 使用axios进行前后端通信

希望本文对您有所帮助！

-- 展开阅读全文 --