正文

新手必看！SpringBoot + React 项目从零到一完整部署教程

/0 浏览量
1013

1. 引言

随着互联网技术的不断发展，前端和后端技术的融合变得越来越紧密。SpringBoot 和 React 是当前非常流行的两种技术，SpringBoot 用于后端开发，而 React 用于前端开发。本文将带你从零开始，一步步搭建一个 SpringBoot + React 的完整项目，并对其进行部署。

2. 环境准备

在开始之前，我们需要准备以下环境：

  • Java 开发工具包（JDK）：推荐使用 JDK 1.8 或更高版本
  • Maven：用于项目构建和管理依赖
  • Node.js 和 npm：用于 React 项目开发
  • 数据库：本文以 MySQL 为例

3. 创建 SpringBoot 项目

3.1 创建 Maven 项目

  1. 打开 Maven 安装目录下的 bin 文件夹，运行 mvn archetype:generate 命令。
  2. 选择 maven-archetype-spring-boot，输入 A 并回车。
  3. 输入项目名称、组 ID 和版本号，例如：com.example、springboot-react、1.0.0-SNAPSHOT。
  4. 选择项目类型，例如：Maven Project。
  5. 输入项目描述、打包方式和是否创建父项目等信息。

3.2 添加依赖

在 pom.xml 文件中添加以下依赖：

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
</dependencies>

3.3 配置数据库

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

spring.datasource.url=jdbc:mysql://localhost:3306/springboot-react?useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root
spring.jpa.hibernate.ddl-auto=update

3.4 创建实体类和控制器

创建一个实体类 User 和一个控制器 UserController：

@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String email;
    // 省略 getter 和 setter 方法
}

@RestController
@RequestMapping("/users")
public class UserController {
    @Autowired
    private UserService userService;

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

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

4. 创建 React 项目

4.1 创建 React 项目

  1. 打开终端，运行 npx create-react-app springboot-react 命令。
  2. 进入项目目录：cd springboot-react。

4.2 安装依赖

在项目目录下运行 npm install 命令，安装项目依赖。

4.3 创建组件

创建一个名为 UserList 的组件，用于展示用户列表：

import React, { useEffect, useState } from 'react';
import axios from 'axios';

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

    useEffect(() => {
        axios.get('/users')
            .then(response => {
                setUsers(response.data);
            })
            .catch(error => {
                console.error('Error fetching users:', error);
            });
    }, []);

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

export default UserList;

4.4 配置代理

在 package.json 文件中添加以下配置：

"proxy": "http://localhost:8080"

这样，React 项目就可以通过代理访问 SpringBoot 项目的接口了。

5. 部署项目

5.1 部署 SpringBoot 项目

  1. 在 SpringBoot 项目目录下，运行 mvn clean package 命令，将项目打包成可执行的 jar 文件。
  2. 将 jar 文件上传到服务器，并使用 Java 运行时环境启动项目。

5.2 部署 React 项目

  1. 将 React 项目的 build 目录上传到服务器。
  2. 使用 Nginx 或 Apache 等服务器软件配置静态资源访问。

6. 总结

本文从零开始，带你搭建了一个 SpringBoot + React 的完整项目，并对其进行了部署。希望这篇文章能帮助你更好地了解这两种技术的融合，以及如何将它们应用到实际项目中。

-- 展开阅读全文 --