Sprint Boot + React + MySQL 项目开发指南

Sprint Boot + React + MySQL

一、Sprint Boot

1. 环境准备

1.1 工具和依赖安装

  • 安装 Java JDK 17+（Spring Boot 推荐），确保 java 和 javac 命令在终端中可用。
  • 安装 Maven 或 Gradle，并确保 mvn 或 gradle 命令可用。
  • 配置 VS Code：
    • 安装以下扩展：
      • Spring Boot Extension Pack
      • Java Extension Pack
      • Lombok Annotations Support
  • 安装并启动 MySQL 数据库，配置本地数据库，创建一个空的 book_management 数据库。

2. 项目创建

2.1 创建 Spring Boot 项目

  • 使用 Spring Initializr：
    • 打开 VS Code -> Command Palette (Ctrl + Shift + P) -> 输入 Spring Initializr: Generate a Maven Project。
  • 配置项目：
    • Group: com.example
    • Artifact: book-management
    • Dependencies:
      • Spring Web
      • Spring Data JPA
      • MySQL Driver
      • Spring Boot DevTools
      • Spring Security（用于用户认证） 项目生成后打开项目文件夹。

3. 数据库配置

3.1 配置 application.properties

创建或编辑 src/main/resources/application.properties，配置数据库连接：

1
2
3
4
5
6
7
8
9
10
11
12
# 数据库配置
spring.datasource.url=jdbc:mysql://localhost:3306/book_management?useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=your_password

# JPA 配置
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.format_sql=true

# 服务器端口
server.port=8080

替换 your_password 为实际的 MySQL 密码。

4. 核心模块代码实现

项目目录结构：

1
2
3
4
5
6
7
src/main/java/com/example/booksystem/
├── controller/      # 控制器层，负责处理 HTTP 请求
├── service/         # 服务层，包含业务逻辑
├── repository/      # 数据访问层，包含与数据库交互的接口
├── entity/          # 实体层，存放数据库表的映射类
├── config/          # 配置类，如 Spring Security 或跨域配置
└── dto/             # 数据传输对象（可选）
  • 实体类（表的设计）：放在 src/main/java/com/example/booksystem/entity/ 目录中。每个表对应一个 Java 类，使用 JPA 注解进行映射。
  • Repository 接口：放在 src/main/java/com/example/booksystem/repository/ 目录中。每个表对应一个 JpaRepository 接口，用于执行数据库操作。
  • Service 层：放在 src/main/java/com/example/booksystem/service/ 目录中。用于封装业务逻辑，例如对表的增删改查。
  • Controller 层：放在 src/main/java/com/example/booksystem/controller/ 目录中。通过 RESTful API 暴露服务。

4.1 Entity 层

创建 User，Book，BorrowRecord 表及其属性，描述实体特征。例如：创建 src/main/java/com/example/booksystem/entity/User.java。

4.2 Repository 层

创建 UserRepository，BookRepository，BorrowRecordRepository 接口，继承 JpaRepository。例如：创建 src/main/java/com/example/booksystem/repository/UserRepository.java。

4.3 Service 层

编写 UserService，BookService，BorrowService 类实现业务逻辑。例如：创建 src/main/java/com/example/booksystem/service/UserService.java。

4.4 Controller 层

编写 RESTful API，包括用户管理、书籍管理和借阅管理。例如：创建 src/main/java/com/example/booksystem/controller/UserController.java。

二、React

加速下载依赖，使用国内镜像源：

1
npm config set registry https://registry.npmmirror.com

使用 create-react-app（推荐）、Vite 或其他工具。以下以 create-react-app 为例：

  1. 在终端运行：
1
npx create-react-app my-app
- `npx` 是 Node.js 自带的工具，用于执行 `npm` 包。
- `my-app` 是项目名称，可以自行更改。
  1. 进入项目目录：
1
cd my-app
  1. 启动开发服务器 运行以下命令启动项目：
1
npm start

默认情况下，项目会在 http://localhost:3000/ 启动。

项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
todolist-frontend/
├── public/                    # 静态资源目录
│   ├── index.html            # HTML 模板
│   ├── manifest.json         # PWA 配置文件
│   ├── favicon.ico           # 网站图标
│   └── robots.txt            # 搜索引擎爬虫配置
│
├── src/                      # 源代码目录
│   ├── components/           # React 组件
│   │   ├── TodoHeader.js     # 头部组件，包含标题和主题切换
│   │   ├── TodoInput.js      # 输入组件，用于添加新待办事项
│   │   ├── TodoList.js       # 列表组件，显示所有待办事项
│   │   ├── TodoFilter.js     # 过滤组件，用于筛选待办事项
│   │   └── TodoStats.js      # 统计组件，显示完成进度
│   │
│   ├── services/             # API 服务
│   │   └── todoService.js    # 封装后端 API 调用
│   │
│   ├── App.js               # 主应用组件
│   ├── App.css              # 主应用样式
│   ├── index.js             # 应用入口文件
│   ├── index.css            # 全局样式
│   └── App.test.js          # 应用测试文件
│
├── package.json             # 项目依赖配置
├── package-lock.json        # 依赖版本锁定文件
├──.gitignore              # Git 忽略文件
└── README.md               # 项目说明文档
  • 主要修改内容：主要是修改 src 目录下的文件，完成前端内容的开发。
    • public/：存放静态资源，包含项目的 HTML 模板和其他静态文件。
    • src/components/：React 组件目录，包括 TodoHeader.js（头部组件）、TodoInput.js（输入组件）、TodoList.js（列表组件）、TodoFilter.js（过滤组件）、TodoStats.js（统计组件）等。
    • src/services/：API 服务目录，todoService.js 用于封装与后端的 API 交互。
    • 根目录文件：
      • App.js：应用的主组件。
      • index.js：应用的入口文件。
      • App.css：主组件样式。
      • index.css：全局样式。
      • App.test.js：测试文件。
    • 配置文件：
      • package.json：npm 包管理配置文件。
      • .gitignore：Git 忽略配置。
      • README.md：项目说明文档。