# study_record

**Repository Path**: htao001/study_record

## Basic Information

- **Project Name**: study_record
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-01
- **Last Updated**: 2025-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 📚 学习记录系统

一个基于 **React + Node.js + Prisma** 的现代化学习记录管理系统，采用**企业级模块化架构**，帮助你记录和管理学习进度。

## ✨ 功能特点

- 📝 **学习记录管理**：添加、编辑、删除学习记录
- 🔍 **智能搜索**：按标题、内容、标签快速查找
- 📊 **数据统计**：总学习时长、记录数、平均时长等
- 📈 **数据可视化**：学习趋势图、标签分布图
- 🏷️ **标签管理**：自定义标签，便于分类
- 🎨 **现代化UI**：基于 Tailwind CSS 的美观界面
- 📱 **响应式设计**：支持手机、平板、桌面设备
- 🏗️ **模块化架构**：分层清晰，易于维护扩展

## 🛠️ 技术栈

### 后端（模块化架构）
- **Node.js 16+** - JavaScript运行环境
- **Express.js** - Web框架
- **Prisma ORM** - 现代化ORM，类型安全
- **SQLite** - 轻量级数据库
- **express-validator** - 请求验证
- **helmet** - 安全中间件

### 前端
- **React 18+** - 前端框架
- **Vite** - 超快构建工具
- **Tailwind CSS** - CSS框架
- **Chart.js** - 数据可视化
- **Axios** - HTTP客户端
- **React Icons** - 图标库
- **date-fns** - 日期处理

## 🏗️ 后端架构（NEW！）

采用**企业级分层架构**：

```
backend/
├── prisma/               # Prisma ORM
│   ├── schema.prisma    # 数据模型定义
│   └── seed.js          # 数据库种子
├── src/
│   ├── config/          # 配置管理
│   ├── middleware/      # 中间件层
│   │   ├── errorHandler.js  # 错误处理
│   │   ├── logger.js        # 请求日志
│   │   └── validator.js     # 请求验证
│   ├── services/        # 业务逻辑层
│   ├── controllers/     # 控制器层
│   ├── routes/          # 路由层
│   ├── app.js          # Express配置
│   └── server.js       # 服务器入口
└── package.json
```

**优势：**
- ✅ **分层清晰** - Routes → Controllers → Services → Prisma
- ✅ **类型安全** - Prisma 提供完整的类型推导
- ✅ **易于测试** - 每层职责单一，易于单元测试
- ✅ **易于维护** - 模块化设计，代码清晰
- ✅ **专业架构** - 符合企业级开发标准

## 📦 安装步骤

### 前置要求

- Node.js 16 或更高版本
- npm 或 yarn

### 快速安装

**Windows用户：**
```bash
双击 install.bat
```

**Mac/Linux用户：**
```bash
chmod +x install.sh
./install.sh
```

**手动安装：**
```bash
# 1. 安装后端依赖
cd backend
npm install

# 2. 初始化 Prisma（重要！）
npm run prisma:generate
npm run prisma:migrate

# 3. 安装前端依赖
cd ../frontend
npm install
```

## 🚀 运行项目

### 方式1：使用启动脚本（推荐）

**Windows用户：**
```bash
# 终端1：启动后端
双击 start-backend.bat

# 终端2：启动前端
双击 start-frontend.bat
```

**Mac/Linux用户：**
```bash
# 一键启动前后端
./start-all.sh
```

### 方式2：手动启动

**终端1 - 启动后端：**
```bash
cd backend
npm start          # 生产模式
# 或
npm run dev        # 开发模式（自动重启）
```

**终端2 - 启动前端：**
```bash
cd frontend
npm run dev
```

### 访问应用

- **前端页面**：http://localhost:5173
- **后端API**：http://localhost:5000
- **数据库GUI**：`cd backend && npm run prisma:studio` (http://localhost:5555)

## 📖 使用说明

### 添加学习记录
1. 点击页面右上角的"新建记录"按钮
2. 填写标题、学习内容、学习时长
3. 添加标签（可选）
4. 点击"保存"按钮

### 搜索记录
- 在搜索框输入关键词搜索标题或内容
- 使用标签下拉菜单筛选特定标签的记录
- 点击"搜索"按钮查看结果

### 编辑/删除记录
- 点击记录卡片上的编辑图标进行修改
- 点击删除图标删除记录（需要确认）

### 查看统计
- 顶部显示总记录数、总学习时长、平均时长、标签种类
- 图表展示近7天学习趋势和热门标签分布

## 📁 项目结构

```
STUDY-RECORD/
├── backend/                    # 后端 (模块化架构)
│   ├── prisma/                # Prisma ORM
│   │   ├── schema.prisma     # 数据模型
│   │   └── seed.js           # 种子数据
│   ├── src/
│   │   ├── config/           # 配置管理
│   │   ├── middleware/       # 中间件
│   │   ├── services/         # 业务逻辑
│   │   ├── controllers/      # 控制器
│   │   ├── routes/           # 路由
│   │   ├── app.js            # Express配置
│   │   └── server.js         # 入口
│   ├── package.json
│   └── README.md             # 后端文档
│
├── frontend/                   # 前端React应用
│   ├── src/
│   │   ├── components/        # React组件
│   │   │   ├── Header.jsx
│   │   │   ├── Statistics.jsx
│   │   │   ├── Charts.jsx
│   │   │   ├── SearchBar.jsx
│   │   │   ├── RecordForm.jsx
│   │   │   ├── RecordList.jsx
│   │   │   └── RecordCard.jsx
│   │   ├── services/
│   │   │   └── api.js         # API封装
│   │   ├── App.jsx
│   │   └── main.jsx
│   ├── package.json
│   └── vite.config.js
│
├── 启动脚本
│   ├── install.bat/sh         # 一键安装
│   ├── start-backend.bat      # 启动后端
│   ├── start-frontend.bat     # 启动前端
│   └── start-all.sh           # 一键启动（Mac/Linux）
│
└── 文档
    ├── README.md              # 本文件
    ├── 启动说明.md             # 快速启动指南
    ├── 快速参考.md             # 命令速查
    └── 项目概览.md             # 架构详解
```

## 🔌 API接口

### 学习记录

| 方法 | 路径 | 说明 |
|------|------|------|
| GET | `/api/records` | 获取所有记录（支持搜索筛选） |
| GET | `/api/records/:id` | 获取单个记录 |
| POST | `/api/records` | 创建新记录 |
| PUT | `/api/records/:id` | 更新记录 |
| DELETE | `/api/records/:id` | 删除记录 |

### 统计与标签

| 方法 | 路径 | 说明 |
|------|------|------|
| GET | `/api/statistics` | 获取统计数据 |
| GET | `/api/tags` | 获取所有标签 |
| GET | `/api/health` | 健康检查 |

## 🎯 数据模型（Prisma）

```prisma
model StudyRecord {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  duration  Int      // 学习时长（分钟）
  tags      String?  // 标签（逗号分隔）
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}
```

## 💡 Prisma 特色功能

### 1. 数据库迁移
```bash
cd backend
npm run prisma:migrate    # 应用迁移
```

### 2. Prisma Studio（数据库GUI）
```bash
cd backend
npm run prisma:studio      # 访问 http://localhost:5555
```

### 3. 种子数据
```bash
cd backend
npm run prisma:seed        # 添加示例数据
```

### 4. 生成客户端
```bash
cd backend
npm run prisma:generate    # 生成Prisma客户端
```

## 🐛 常见问题

### 1. Prisma 相关错误

```bash
cd backend

# 重新生成客户端
npm run prisma:generate

# 重置数据库
rm dev.db
npm run prisma:migrate
```

### 2. 后端启动失败
- 确认已安装 Node.js 16+：`node --version`
- 确认已初始化 Prisma：`npm run prisma:generate`
- 确认已创建数据库：`npm run prisma:migrate`
- 检查端口 5000 是否被占用

### 3. 前端启动失败
- 确认已安装依赖：`cd frontend && npm install`
- 清除缓存：`npm cache clean --force`
- 删除 `node_modules` 重新安装

### 4. npm install 慢
使用国内镜像：
```bash
npm config set registry https://registry.npmmirror.com
npm install
```

### 5. 数据库文件损坏
```bash
cd backend
rm dev.db dev.db-journal
npm run prisma:migrate
npm run prisma:seed      # 可选：添加示例数据
```

## 🚀 开发指南

### 添加新功能（后端）

1. **定义数据模型** - `prisma/schema.prisma`
2. **创建Service** - `src/services/`
3. **创建Controller** - `src/controllers/`
4. **定义Routes** - `src/routes/`
5. **添加验证** - 使用 `express-validator`

### 修改样式（前端）
- 使用 Tailwind CSS 类名
- 全局样式：`frontend/src/index.css`

## 📚 更多文档

- **后端详细文档**：`backend/README.md`
- **后端快速启动**：`backend/快速启动.md`
- **完整启动指南**：`启动说明.md`
- **快速参考手册**：`快速参考.md`
- **项目架构详解**：`项目概览.md`

## 🎓 学习资源

- [Prisma 官方文档](https://www.prisma.io/docs)
- [Express.js 文档](https://expressjs.com/)
- [React 官方文档](https://react.dev)
- [Tailwind CSS 文档](https://tailwindcss.com)

## 📄 许可证

MIT License

## 👨‍💻 贡献

欢迎提交 Issue 和 Pull Request！

---

**采用现代化技术栈和企业级架构，祝你学习进步！** 📖✨🚀