# StudySysytem

**Repository Path**: XxX_YZR/YzrStudySystem

## Basic Information

- **Project Name**: StudySysytem
- **Description**: 这是一套学习系统，目前只做了笔记模块，后续还会新增错题本这类功能。
目前还有可以改进的地方：现在只接入了百度云 OCR 文字识别，图片转出来的文本格式很乱，得手动重新排版，这块后续可以优化。
项目开源，欢迎社区各位大佬帮忙改进，有优化版本可以提交上来。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-11
- **Last Updated**: 2026-09-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 康奈尔笔记系统（前后端一体）

基于 SpringBoot 3 + MyBatis + PostgreSQL 的康奈尔笔记系统，含完整前端页面。

## 项目结构

```
studySystem/
├── pom.xml
├── README.md
├── sql/
│   └── init.sql                          # 数据库初始化脚本
├── frontend/
│   ├── index.html                        # 完整前端页面（编辑/列表/查看/删除）
│   └── cornell-note-api.js               # 前端 axios 调用封装（独立参考版）
└── src/main/
    ├── java/com/cornell/
    │   ├── CornellNoteApplication.java   # 启动类
    │   ├── common/
    │   │   ├── Result.java               # 统一返回封装
    │   │   └── GlobalExceptionHandler.java # 全局异常处理
    │   ├── config/
    │   │   └── CorsConfig.java           # 跨域配置
    │   ├── controller/
    │   │   └── CornellNoteController.java
    │   ├── dto/
    │   │   └── CornellNoteDTO.java
    │   ├── entity/
    │   │   └── CornellNote.java
    │   ├── handler/
    │   │   └── StringArrayTypeHandler.java # PG数组类型转换器
    │   ├── mapper/
    │   │   └── CornellNoteMapper.java
    │   └── service/
    │       ├── CornellNoteService.java
    │       └── impl/
    │           └── CornellNoteServiceImpl.java
    └── resources/
        ├── application.yml
        └── mapper/
            └── CornellNoteMapper.xml
```

## 快速开始

### 1. 初始化数据库

确保 Docker 中 pg16 容器正在运行，然后用 DBeaver 连接 testdb，执行 `sql/init.sql`。

### 2. 修改配置

`src/main/resources/application.yml` 中数据库连接信息：
```yaml
url: jdbc:postgresql://localhost:5432/testdb
username: postgres
password: change-me
```

### 3. 启动服务（推荐使用 study.bat）

在项目根目录下打开 cmd，执行：

```cmd
:: 启动服务（启动成功后自动打开浏览器）
study start

:: 查看服务状态
study status

:: 重启服务
study restart

:: 停止服务
study stop
```

> 也可以直接双击 `study.bat` 查看用法，或在cmd中输入 `study.bat start`。

### 4. 访问页面

服务启动成功后会**自动打开浏览器**，访问地址：**http://localhost:8080**

前端页面已集成到SpringBoot静态资源中，无需手动打开HTML文件。

### 手动启动方式（备选）

```bash
mvn spring-boot:run
```

## RESTful 接口一览

| 方法 | 路径 | 说明 |
|------|------|------|
| POST | /api/cornell-notes | 新增笔记 |
| GET | /api/cornell-notes/{id} | 查询单条 |
| GET | /api/cornell-notes | 分页查询（支持 title、tags 过滤） |
| PUT | /api/cornell-notes/{id} | 修改笔记 |
| DELETE | /api/cornell-notes/{id} | 软删除 |

### 新增笔记请求示例

```json
POST /api/cornell-notes
Content-Type: application/json

{
    "title": "Docker康奈尔笔记",
    "cuesHtml": "<p>什么是Docker？</p>",
    "mainHtml": "<div>康奈尔主笔记完整HTML</div>",
    "summaryHtml": "<p>总结内容</p>",
    "tags": ["Docker", "Postgres", "Java"],
    "sortNo": 0
}
```

### 返回示例

```json
{
    "code": 200,
    "msg": "success",
    "data": {
        "id": 1,
        "title": "Docker康奈尔笔记",
        "tags": ["Docker", "Postgres", "Java"],
        "createdAt": "2026-09-09T15:30:00+08:00"
    }
}
```

## 前端使用

项目已内置完整前端页面 `frontend/index.html`，功能包括：
- ✏️ **新建笔记**：康奈尔三栏布局（线索栏/笔记栏/总结栏），支持富文本编辑
- 📚 **笔记列表**：分页展示，支持标题搜索、标签过滤
- 👁️ **查看笔记**：完整渲染康奈尔三栏结构
- ✏️ **编辑笔记**：回填数据修改
- 🗑️ **删除笔记**：软删除

### 使用方式

1. 确保后端已启动（`mvn spring-boot:run`，端口8080）
2. 直接用浏览器打开 `frontend/index.html`
3. 点击「确认添加」保存笔记，数据自动写入 PostgreSQL

> 前端通过 axios 调用 `http://localhost:8080/api/cornell-notes`，后端已配置 CORS 跨域，无需额外处理。

### 独立 API 封装（可选）

`frontend/cornell-note-api.js` 是独立的 API 封装，可在其他页面中引入使用：

```html
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="cornell-note-api.js"></script>
<script>
CornellNoteApi.save({
    title: '笔记标题',
    cuesHtml: document.querySelector('.cues-column').innerHTML,
    mainHtml: document.querySelector('.main-notes-column').innerHTML,
    summaryHtml: document.querySelector('.summary-column').innerHTML,
    tags: ['Docker', '学习']
}).then(data => alert('保存成功，ID: ' + data.id));
</script>
```

## 技术要点

- **标签存储**：使用 PostgreSQL 原生 `varchar[]` 数组类型，配合自定义 TypeHandler 与 Java `List<String>` 互转
- **软删除**：`is_deleted` 字段标记删除，不物理删除数据
- **自动更新时间**：数据库触发器自动维护 `updated_at`
- **GIN 索引**：标签数组字段建 GIN 索引，加速 `@>` 包含查询
- **跨域**：已配置 CORS，前端可直接调用