正文

Spring Boot+React框架实战教程：轻松搭建全栈项目实例

/0 浏览量
0531

引言

在这个数字化时代，全栈开发已经成为了一种趋势。Spring Boot 和 React 是当前最受欢迎的后端和前端框架之一。本文将带你从零开始，使用 Spring Boot 和 React 框架搭建一个全栈项目实例，让你轻松掌握全栈开发的技能。

1. 准备工作

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

  • Java Development Kit (JDK)
  • Maven
  • Node.js 和 npm
  • Visual Studio Code 或其他你喜欢的代码编辑器

2. 创建 Spring Boot 项目

2.1 初始化项目

打开终端，执行以下命令创建一个新的 Spring Boot 项目：

mvn archetype:generate -DgroupId=com.example -DartifactId=myproject -DarchetypeArtifactId=spring-boot-starter-parent -DarchetypeVersion=2.3.4.RELEASE

2.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>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

2.3 配置数据库

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

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

2.4 创建实体类

创建一个名为 User 的实体类，用于表示用户信息：

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

2.5 创建控制器

创建一个名为 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);
    }
    // 省略其他方法
}

3. 创建 React 项目

3.1 初始化项目

打开终端，执行以下命令创建一个新的 React 项目：

npx create-react-app myreactapp
cd myreactapp

3.2 安装依赖

在项目目录下，执行以下命令安装依赖：

npm install axios

3.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);
            });
    }, []);

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

export default UserList;

3.4 配置服务器

在 src/App.js 文件中，配置服务器地址：

import React from 'react';
import UserList from './components/UserList';

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

export default App;

4. 部署项目

4.1 部署 Spring Boot 项目

在终端中，执行以下命令启动 Spring Boot 项目：

mvn spring-boot:run

4.2 部署 React 项目

在终端中，执行以下命令启动 React 项目：

npm start

现在，你可以在浏览器中访问 http://localhost:3000，查看你的全栈项目实例。

总结

本文带你从零开始，使用 Spring Boot 和 React 框架搭建了一个全栈项目实例。通过学习本文，你将掌握全栈开发的基本技能，为今后的项目开发打下坚实的基础。

-- 展开阅读全文 --