# 实验 2-2  Vibe Coding 及 Vibe Learning

**Repository Path**: javaweb-dev-tech/lab2_2

## Basic Information

- **Project Name**: 实验 2-2  Vibe Coding 及 Vibe Learning
- **Description**: Vibe Coding 及 Vibe Learning。
Vibe Coding ：使用AI编程工具trae，完成图书管理系统的后端开发，测试。
Vibe Learning：使用Skill进行对JDBC及CRUD知识点进行学习。初步了解 Agent Skill
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-28
- **Last Updated**: 2026-04-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 实验 2-2：Vibe Coding 及 Vibe Learning —— 基于 AI 辅助的图书管理系统开发

---

## 一、实验目的

1. **Vibe Learning**：利用 AI 编程助手（Trae AI IDE / Claude Code 等）学习 JDBC、数据库连接池、Servlet 等 Java Web 核心技术，掌握"AI 引导 + 自己编码"的高效学习模式。
2. **Vibe Coding**：通过 AI 辅助完成一个完整的后端系统开发，理解 MVC 架构、分层设计（Controller / Service / DAO）、RESTful API 设计等工程实践。
3. **Agent Skill 概念**：了解和使用 AI Agent 的 Skill 配置，为后续使用 Claude Code、Codex 等更强大的 AI 编程工具打下基础。
4. **接口测试**：掌握 Postman 接口测试方法，理解前后端分离开发中的联调流程。

---

## 二、实验环境

| 工具 / 技术 | 版本要求 | 说明 |
|:------------|:--------:|------|
| JDK | 17+ | Java 开发工具包 |
| Apache Maven | 3.8+ | 项目构建工具 |
| Apache Tomcat | 11.0+ | Web 服务器（Jakarta Servlet 6.0） |
| MySQL | 8.0+ | 数据库（可选，未安装可使用实验提供的远程数据库） |
| Trae AI IDE | 最新版 | AI 辅助编程 IDE |
| Postman | 最新版 | API 接口测试工具 |
| Navicat / DBeaver | 任意 | 数据库可视化管理工具 |
| IDEA  | 2025.2 | 运行调试代码 |

---

## 三、实验准备

### 3.1 安装 Trae AI IDE

1. 下载并安装 [Trae AI IDE](https://www.trae.cn/)
2. 登录 Trae 账号，确保 AI 功能可用

### 3.2 配置 Java 和 Maven 环境变量

Trae 工具在生成代码后会执行 Maven 编译命令验证代码，因此必须确保命令行能直接调用 Java 和 Maven：

```bash
# 验证环境
java -version
mvn -version
```

如果命令行无法识别 `java` 或 `mvn`，请先配置环境变量。


### 3.3 项目结构说明

```
lab2_2/
├── vibe_learning/          # 模块 1：Vibe Learning 学习环境
│   ├── .trae/skills/       # 已配置好的 AI Agent Skills
│   │   ├── ai-assisted-jdbc-learning/   # JDBC 学习引导 Skill
│   │   └── frontend-design/             # 前端设计 Skill
│   ├── src/main/java/      # 学生练习代码目录
│   └── pom.xml             # Maven 配置
│
├── book_template/          # 模块 2：图书管理系统模板工程
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/       # 后端 Java 代码（学生在此开发）
│   │   │   ├── webapp/     # 前端页面（已提供，无需修改）
│   │   │   │   ├── user/   # 用户端页面
│   │   │   │   ├── admin/  # 管理员端页面
│   │   │   │   └── js/common.js  # 公共 API 工具模块
│   │   │   └── resources/  # 数据库配置文件
│   │   └── test/           # 测试代码
│   ├── doc/ui界面设计/      # UI 设计参考图
│   ├── API.md              # API 接口文档（重要）
│   ├── 项目需求及设计文档.md # 完整的需求和设计说明（重要）
│   ├── A-校园图书管理系统.postman_collection.json  # Postman 测试集合
│   └── pom.xml             # Maven 配置（含 Jakarta Servlet 依赖）
│
└── README.md               # 本文件
```

---

## 四、实验模块 1：Vibe Learning

### 4.1 Agent Skill 的概念与配置

**什么是 Agent Skill？**

Agent Skill 是 AI 编程助手的可复用能力模块。每个 Skill 包含一个 `SKILL.md` 文件，定义了 AI 在特定场景下的行为模式。配置好后，只需在对话中输入简短指令即可触发对应的专业工作流。

**Trae 中的 Skill 配置**

`vibe_learning` 目录下已预置了 `.trae/skills/` 目录：

| Skill 名称 | 文件 | 用途 |
|:-----------|:-----|------|
| AI 辅助 JDBC 学习 | `ai-assisted-jdbc-learning/SKILL.md` | 8 步结构化工作流引导学习 Java Web 开发 |
| 前端UI设计 | `ui-ux-pro-max/SKILL.md` | 生成高质量、独特风格的前端界面 |

**验证步骤**：
1. 使用 Trae AI IDE 打开 `vibe_learning` 目录
  <img src="_imgs/trae_1.png" width="70%" />
2. 在 Trae 的 AI 对话框中输入查看 Skill 列表
  <img src="_imgs/trae_2.png" width="70%" />

3. 确认上述两个 Skill 已正确加载

### 4.2 学习任务：JDBC 与数据库连接池

利用 `ai-assisted-jdbc-learning` Skill，完成以下学习路径：

1. **JDBC 基础**：了解 JDBC 的工作原理，掌握 `Connection`、`Statement`、`ResultSet` 的使用
2. **PreparedStatement**：理解参数化查询，防止 SQL 注入
3. **DAO 模式**：学习数据访问对象模式，分离数据库操作与业务逻辑
4. **数据库连接池**：了解连接池的概念，学习使用 Druid 等连接池工具

> 在 Trae 中通过 Skill 引导，按照"概念讲解 → 最小示例 → 代码讲解 → 引导重构 → 代码审核 → 工程化升级 → 练习生成 → 作业审核"的 8 步循环进行。

### 4.3 学习任务：图书模块 CRUD 操作

在 `vibe_learning` 项目中，独立完成以下练习：

1. 设计并创建 `books` 数据库表
2. 使用 JDBC 实现图书的增删改查（DAO 层）
3. 使用 Servlet 实现图书列表和详情查询的 API
4. 使用连接池优化数据库连接

### 4.4 使用 Skill 优化界面 UI 风格

在 `ui-ux-pro-max` Skill 的帮助下，可以快速为前端页面生成专业风格的 UI。

**操作步骤**：
1. 在 Trae AI 对话框中输入以下指令：

```text
使用技能 ui-ux-pro-max，帮我修改登录页 login.html 的风格，采用正式、简洁的官方风格
```

<img src="_imgs/trae_3.png" width="70%" />

2. 等待 AI 生成并预览修改后的页面效果
3. 满意后可将生成的代码应用到实际项目中

> **提示**：除了登录页，你也可以使用该 Skill 为图书管理系统的其他页面（如首页、管理后台等）统一调整 UI 风格。

---

## 五、实验模块 2：Vibe Coding —— 图书管理系统后端开发

> **说明**：若在之前的课程中已完成图书管理系统后端开发的同学，可以使用自己之前的代码为基础继续完成本实验。请使用 AI 生成你项目的 API 接口文档，并依据该文档生成 Postman 接口测试集合（JSON 文件）。然后导入到 Postman 中进行接口测试。

### 5.1 实验背景

通过 AI 编程助手完成一个完整的 **校园图书管理系统** 后端开发。

**已提供的内容**（无需修改）：
- 项目需求及设计文档，已位于 `book_template/项目需求及设计文档.md`
- API 接口文档，位于 `book_template/API.md`
- 完整的 UI 设计稿，位于 `book_template/doc/ui界面设计/`
- 全部前端页面（HTML/CSS/JS），位于 `book_template/src/main/webapp/`
- 前端对接后端的公共 API 模块（`js/common.js`），基于 Fetch API
- Postman 接口测试集合，位于 `book_template/A-校园图书管理系统.postman_collection.json`

**需要完成的内容**：
- 后端 Java 代码（Servlet + JDBC）
- 数据库配置
- 全部 25+ 个 API 接口的实现

### 5.2 技术栈

| 层级 | 技术 | 说明 |
|:-----|:-----|------|
| 前端 | HTML / CSS / JavaScript | 已提供，无需修改 |
| 后端 | Java 17 + Servlet（Jakarta 6.0） | 学生开发 |
| 数据库 | MySQL 8.0 + JDBC | 学生开发 |
| Web 服务器 | Apache Tomcat 11.0+ | 运行环境 |
| 构建工具 | Maven | 项目构建 |
| AI 工具 | Trae AI IDE  | 辅助开发 |

### 5.3 开发步骤

#### Step 1：数据库建表

**数据库选择**（二选一）：

| 方式 | 适用场景 | 说明 |
|:----:|:--------:|:-----|
| 本地数据库（推荐） | 已安装 MySQL 8.0+ | 性能更好，开发调试方便 |
| 远程数据库 | 未安装 MySQL | 使用实验提供的数据库服务器 |

**方式一：使用本地 MySQL 数据库**

如果你的电脑已安装 MySQL 8.0+，建议使用本地数据库：

1. 启动本地 MySQL 服务
2. 创建数据库：`CREATE DATABASE book_management DEFAULT CHARACTER SET utf8mb4;`
3. 在 `db.properties` 中配置本地数据库连接：

```properties
jdbc.url=jdbc:mysql://localhost:3306/book_management?useSSL=false&serverTimezone=Asia/Shanghai&characterEncoding=utf8
jdbc.username=root
jdbc.password=你的MySQL密码
jdbc.driver=com.mysql.cj.jdbc.Driver
```

**方式二：使用实验提供的远程数据库**

如果你的电脑未安装 MySQL，可以使用实验提供的数据库服务器：

| 配置 | 适用环境 | 主机 | 端口 | 用户名 | 密码 | 数据库 |
|:----:|:--------:|:-----|:----:|:-------|:-----|:-------|
| 配置一（校园网） | 校内网络 | `10.50.79.225` | `3306` | `user_学号` | `学号` | `app_学号` |
| 配置二（外网） | 校外网络 | `8.140.216.36` | `29206` | `user_学号` | `学号` | `app_学号` |

> **说明**：两种配置数据相同。校园网环境推荐使用配置一（性能更好），校外环境使用配置二。提交 war 包时建议使用校园网配置。

**建表步骤**：

1. 使用 Navicat 或 DBeaver 连接数据库（本地或远程）
2. 参照 `book_template/项目需求及设计文档.md` **附录 B：数据库设计**，创建以下三张表：

| 表名 | 说明 |
|:-----|------|
| `users` | 用户表（存储管理员和普通用户） |
| `books` | 图书表（含多复本管理） |
| `borrow_records` | 借阅记录表 |

3. 插入初始数据（默认管理员账号 `admin/123456` 和测试图书数据）

> **提示**：可让 AI 生成 SQL 初始化脚本，或参考文档手动创建。

#### Step 2：项目配置及初始化

1. **打开项目**：使用 Trae AI IDE 打开 `book_template` 目录进行 AI 辅助编程；同时使用 IDEA 打开项目进行调试。

2. **配置数据库连接**：在 `src/main/resources/db.properties` 中配置数据库连接：

**使用本地数据库**：
```properties
# 本地 MySQL 配置
jdbc.url=jdbc:mysql://localhost:3306/book_management?useSSL=false&serverTimezone=Asia/Shanghai&characterEncoding=utf8
jdbc.username=root
jdbc.password=你的MySQL密码
jdbc.driver=com.mysql.cj.jdbc.Driver
```

**使用远程数据库**（替换 `{YOUR_STUDENT_ID}` 为你的学号）：
```properties
# 校园网配置（推荐）
jdbc.url=jdbc:mysql://10.50.79.225:3306/app_{YOUR_STUDENT_ID}?useSSL=false&serverTimezone=Asia/Shanghai&characterEncoding=utf8
jdbc.username=user_{YOUR_STUDENT_ID}
jdbc.password={YOUR_STUDENT_ID}
jdbc.driver=com.mysql.cj.jdbc.Driver

# 外网配置（校外环境使用，取消注释即可）
#jdbc.url=jdbc:mysql://8.140.216.36:29206/app_{YOUR_STUDENT_ID}?useSSL=false&serverTimezone=Asia/Shanghai&characterEncoding=utf8
#jdbc.username=user_{YOUR_STUDENT_ID}
#jdbc.password={YOUR_STUDENT_ID}
#jdbc.driver=com.mysql.cj.jdbc.Driver
```

#### Step 3：使用 Trae AI IDE 生成代码

1. **打开 Trae AI IDE**：在 `book_template` 目录下打开 Trae AI IDE。
2. **输入编程指令**：例如 **根据 `项目需求及设计文档.md` 中的需求及设计，`API.md`接口文档，完成后端功能开发。**
3. **生成代码**：观察右侧窗口，AI规划执行代码生成任务，等待生成完成。
4. **查看生成代码**：在 AI 生成的代码窗口中查看后端 Java 代码。
5. **调试代码**：在 IDEA 中运行项目，检查生成的代码是否正常工作。

**提示**：可根据需求调整 AI 生成的代码，或参考文档手动实现。

### 5.4 关键技术要点

> 以下内容可借助 AI Skill 学习，但必须自己理解和实现。

1. **Session 认证**：登录后将用户信息存入 Session，后续请求通过过滤器检查 Session 有效性。管理员接口额外检查 `role == "admin"`。
2. **密码加密**：使用 MD5 对密码进行加密存储（教学简化方案）。
3. **借阅业务规则**：
   - 每人最多借阅 5 本（借阅中状态）
   - 借阅期限 30 天
   - 有超期未还记录时禁止借阅
   - 可借复本为 0 时禁止借阅
4. **删除限制**：
   - 有借阅记录的用户不可删除
   - 有借阅记录的图书不可删除（`available_copies < total_copies`）
   - 管理员账号不可删除
5. **编码规范**：所有 Servlet 响应设置 `request.setCharacterEncoding("UTF-8")` 和 `response.setContentType("application/json;charset=UTF-8")`。

### 5.5 业务规则速查

```
借阅检查流程：
  1. 用户是否已登录？ → 未登录返回 401
  2. 当前借阅数 < 5？ → 已达上限返回 400
  3. 有无超期未还记录？ → 有超期记录返回 400
  4. 图书可借复本 > 0？ → 无复本返回 400
  5. 校验通过 → 创建借阅记录，available_copies - 1

归还流程：
  1. 查找借阅记录（status = 'borrowing'）
  2. 更新 status = 'returned'，return_date = NOW()
  3. 图书 available_copies + 1
```

---

## 六、接口测试

### 6.1 Postman 接口测试

1. **导入测试集合**：打开 Postman，导入 `book_template/A-校园图书管理系统.postman_collection.json`

   <img src="_imgs/postman-1.png" width="70%" />
   <img src="_imgs/postman-2.png" width="70%" />
   <img src="_imgs/postman-3.png" width="70%"  />


2. **配置环境变量**：在 Postman 新建环境，name: `A-校园图书管理系统` ，并在配置以下变量：
   - `ip`：Tomcat 服务器地址（如 `localhost`）
   - `port`：Tomcat 运行端口（如 `8080`）
   - `context`：应用上下文（如 `/book`）

   <img src="_imgs/postman-4.png" width="70%" />
   <img src="_imgs/postman-5.png" width="70%" />

3. **启动项目**：在 IDEA 中配置 Tomcat 并运行项目


4. **测试 API**：按模块逐个测试接口

**测试顺序建议**：
```
认证模块（注册 → 登录 → 验证 Session）
  ↓
用户模块（获取个人信息 → 修改密码 → 修改邮箱）
  ↓
图书模块（列表 → 详情 → 搜索 → 分类）
  ↓
借阅模块（检查资格 → 借阅 → 查看记录 → 归还）
  ↓
管理员模块（图书管理 → 用户管理 → 借阅管理）
```

### 6.2 Web 界面测试

启动 Tomcat 后，访问以下页面进行功能验证（将 `{context}` 替换为你的应用上下文，如 `/book`）：

| 页面 | 访问地址 | 测试功能 |
|:-----|:---------|----------|
| 登录页 | `http://localhost:8080{context}/user/login.html` | 登录、跳转 |
| 用户首页 | `http://localhost:8080{context}/user/index-user.html` | 图书浏览、搜索、分类筛选、借阅 |
| 图书详情 | `http://localhost:8080{context}/user/book_detail.html?id=1` | 查看详情、借阅操作 |
| 我的借阅 | `http://localhost:8080{context}/user/my-borrowing.html` | 查看记录、归还图书 |
| 个人中心 | `http://localhost:8080{context}/user/profile.html` | 查看信息、修改密码 |
| 管理员首页 | `http://localhost:8080{context}/admin/admin-index.html` | 统计数据、快捷入口 |
| 图书管理 | `http://localhost:8080{context}/admin/book-manage.html` | 新增、编辑、删除图书 |
| 用户管理 | `http://localhost:8080{context}/admin/user-manage.html` | 查看用户、删除用户 |
| 借阅管理 | `http://localhost:8080{context}/admin/borrow-records.html` | 查看全部记录、手动归还、超期查看 |

**功能检查清单**：

- [ ] **用户认证模块**
  - [ ] 注册新用户（学号格式验证、唯一性验证）
  - [ ] 正常登录 / 密码错误登录失败
  - [ ] 退出登录
  - [ ] 未登录访问受保护页面自动跳转登录页

- [ ] **普通用户模块**
  - [ ] 用户首页图书列表展示
  - [ ] 按书名/作者搜索图书
  - [ ] 按分类筛选图书
  - [ ] 查看图书详情
  - [ ] 借阅图书（满足所有条件时成功）
  - [ ] 借阅上限校验（5 本限制）
  - [ ] 查看我的借阅记录
  - [ ] 归还图书
  - [ ] 查看历史借阅
  - [ ] 个人中心查看和修改密码

- [ ] **管理员模块**
  - [ ] 管理员首页统计数据
  - [ ] 新增图书（设置复本数）
  - [ ] 编辑图书信息（不修改复本数）
  - [ ] 删除图书（无人借阅时可删，有借阅时不可删）
  - [ ] 查看所有用户列表
  - [ ] 删除用户（无借阅记录时可删）
  - [ ] 查看所有借阅记录
  - [ ] 手动代为归还
  - [ ] 查看超期借阅记录

---

## 七、作业提交要求

**必做：提交实验报告**

- **实验报告要求**：
  1. 使用实验报告 Word 模板，个人信息填写完整
  2. 内容完整，包含：实验目的、实验原理、实验设备仪器、实验方法步骤及数据、实验总结归纳分析体会

- **提交主要内容**（Word 文档）：
  - 任务一 Vibe Learning：
    - Vibe Learning 部分核心代码
    - 与 AI 关键对话截图: 例如  向 AI 询问 JDBC 概念、让 AI 生成最小可运行 JDBC 代码 Demo、让 AI 生成知识点相关编程练习Demo 等
    - Vibe Learning 模块学习过程与心得体会

  - 任务二 Vibe Coding
    -  Vibe Coding 部分核心代码
    - 与 AI 关键对话截图： 例如  向 AI 下达编码任务、测试遇到问题让 AI 修复等  
    - Postman 接口测试截图（至少覆盖 5 个核心接口）
    - 系统核心功能截图（登录页、用户首页图书列表、用户借阅图书、管理员首页、管理员图书管理、管理员用户管理、管理员借阅管理等关键页面）
    - Vibe Coding 模块开发过程（遇到的问题及解决方案）、对 AI 辅助编程的体会和反思等

- **提交方式**：提交至学习通作业



---

**选做：额外20% 加分项（提交项目源码和 WAR 包）**

> 完成加分项后，你的项目将会部署到服务器上，可以通过公网 http://tomcat.chende.top/{你项目的上下文}  
例如：http://tomcat.chende.top/stu_20240101048_assign_1 或者校园网访问。

**加分项配置步骤**：

1. **修改 Maven 打包配置**：在 `pom.xml` 中替换为你的学号：

```xml
<build>
    <!-- 替换为你的学号，最终效果：stu_25204149_assign_1 -->
    <finalName>stu_{YOUR_STUDENT_ID}_assign_1</finalName>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <version>3.4.0</version>
        </plugin>
    </plugins>
</build>
```

2. **配置 IDEA Tomcat 上下文**：在 IDEA 中配置 Tomcat 时，将应用上下文（Application Context）设置为 `/{YOUR_STUDENT_ID}_assign_1`，例如 `/stu_25204149_assign_1`。

3. **修改前端 API 路径**：在 `src/main/webapp/js/common.js` 中，将 `baseURL` 修改为：
```javascript
const baseURL = '/stu_{YOUR_STUDENT_ID}_assign_1/api';
```

4. **配置数据库连接**：在 `src/main/resources/db.properties` 中配置数据库连接，**必须使用提供的远程数据库连接**（确保服务器可访问）。

5. **IDEA 调试运行**：先本地调试运行项目，确保所有功能正常。

6. **打包 WAR 文件**：在 IDEA 中使用 Maven 打包，生成 WAR 文件，命名格式：`stu_学号_assign_1.war`

**提交方式**：

- **作业提交系统地址**（二选一）：
  - 公网地址：http://tomcat.chende.top/expsub/  
  - 校园网地址：http://10.50.79.225:8080/expsub/（上传速度更快）  
- **登录账号**：你的学号
- **登录密码**：`jzxy#javaweb`
   <img src="_imgs/实验提交系统-登录界面2.png" width="100%" />

**提交内容**：
- **项目源码压缩包**：将完整目录（包含 `vibe_learning` 和 `book_template` 项目源码）压缩为 zip 文件，命名格式：`stu_学号_assign_1.zip`
- **WAR 包**：命名格式：`stu_学号_assign_1.war`
   <img src="_imgs/实验提交界面.png" width="100%" />
         
   </br>
   <img src="_imgs/实验提交成功截图.png" width="100%" />

**部署后访问地址**：
- 公网地址：http://tomcat.chende.top/stu_你的学号_assign_1/  
   例如：http://tomcat.chende.top/stu_20240101048_assign_1/
   <img src="_imgs/提交成功后-访问你的实验项目.png" width="100%" />
   </br>
   <img src="_imgs/提交成功后-后台管理页面.png" width="100%" />
- 校园网地址：http://10.50.79.225:8080/stu_你的学号_assign_1/  
  例如：http://10.50.79.225:8080/stu_25204149_assign_1/

> **重点注意**：上下文配置和数据库配置必须正确，才能确保你的项目被正确部署。
---

## 八、常见问题

### Q1：Tomcat 11 报 `jakarta.servlet` 相关错误？
A：Tomcat 10+ 已切换到 Jakarta EE 规范。代码中必须使用 `jakarta.servlet.*` 而非 `javax.servlet.*`。Maven 依赖中也需使用 `jakarta.servlet-api`。

### Q2：中文乱码？
A：确保三点：① 数据库字符集 `utf8mb4`；② JDBC 连接参数加 `characterEncoding=utf8`；③ Servlet 中设置请求/响应编码。

### Q3：Session 登录状态丢失？
A：`js/common.js` 中使用 `sessionStorage` 存储用户信息，关闭浏览器或刷新后失效。这是开发调试阶段的设计。每次重新登录会创建新的服务器端 Session。

### Q4：Maven 编译失败？
A：检查 `pom.xml` 中 JDK 版本配置（本项目要求 JDK 17+），以及 `jakarta.servlet-api` 的 `scope` 是否为 `provided`。

### Q5：密码加密用哪种？
A：教学阶段使用 MD5 简化即可（`java.security.MessageDigest`）。实际项目中应使用 BCrypt。

---

## 附录：参考资料

- [项目需求及设计文档](book_template/项目需求及设计文档.md) —— 完整的需求说明和 API 接口参考
- [API 接口文档](book_template/API.md) —— 每个接口的详细请求/响应格式
- [Postman 测试集合](book_template/A-校园图书管理系统.postman_collection.json) —— 接口测试用