# 学习计划

**Repository Path**: MoSheng2020/study-plan

## Basic Information

- **Project Name**: 学习计划
- **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-06-03
- **Last Updated**: 2025-06-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 📚 编程学习计划管理平台

一个完整的编程学习平台，帮助学员从零基础掌握 Web 技术、C# 编程，最终实现浏览器自动化开发。

## 🌟 功能特色

### ✅ 核心功能
- 📈 **学习进度跟踪** - 54天完整学习计划，实时进度可视化
- 📅 **每日打卡系统** - 连续打卡统计，班级排行榜
- 📚 **资源管理中心** - 分类整理学习资源，支持搜索筛选
- 📱 **移动端适配** - 响应式设计，手机平板完美支持
- 👥 **用户权限管理** - 学生/教师/管理员角色权限
- 📊 **数据统计分析** - 学习时长统计，完成率分析

### 🎯 学习路径
1. **第一阶段** - Web 技术基础 (HTML/CSS/JavaScript) - 14天
2. **第二阶段** - C# 编程基础 - 14天  
3. **第三阶段** - 前端框架 Vue.js - 10天
4. **第四阶段** - 浏览器自动化 & CEF3 - 16天

## 🛠️ 技术栈

### 后端
- **Node.js** + **Express** - 服务器框架
- **MySQL** + **Sequelize** - 数据库与ORM
- **JWT** - 用户认证
- **Bcrypt** - 密码加密
- **Moment.js** - 时间处理

### 前端
- **Vue 3** + **Composition API** - 前端框架
- **Element Plus** - UI组件库
- **Vue Router** - 路由管理
- **Pinia** - 状态管理
- **ECharts** - 数据可视化
- **Axios** - HTTP请求

### 开发工具
- **Vite** - 构建工具
- **ESLint** - 代码规范
- **Docker** - 容器化部署

## 🚀 快速开始

### 环境要求
- Node.js >= 16.0.0
- MySQL >= 8.0
- npm 或 yarn

### 安装步骤

1. **克隆项目**
```bash
git clone <repository-url>
cd study-plan-platform
```

2. **安装依赖**
```bash
# 安装所有依赖
npm run install-all

# 或分别安装
npm install
cd server && npm install
cd ../client && npm install
```

3. **配置数据库**
```bash
# 复制环境配置文件
cd server
cp config.env.example config.env

# 编辑配置文件，填入你的数据库信息
# DB_HOST=localhost
# DB_PORT=3306
# DB_NAME=study_platform
# DB_USER=root
# DB_PASSWORD=your_password
# JWT_SECRET=your_super_secret_jwt_key
```

4. **创建数据库**
```sql
CREATE DATABASE study_platform CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

5. **启动项目**
```bash
# 开发模式 - 同时启动前后端
npm run dev

# 或分别启动
npm run server  # 启动后端 (localhost:3000)
npm run client  # 启动前端 (localhost:5173)
```

6. **访问应用**
- 前端地址: http://localhost:5173
- 后端API: http://localhost:3000/api
- API健康检查: http://localhost:3000/api/health

## 📁 项目结构

```
study-plan-platform/
├── client/                 # Vue.js 前端项目
│   ├── src/
│   │   ├── components/     # 公共组件
│   │   ├── views/          # 页面视图
│   │   ├── stores/         # Pinia状态管理
│   │   ├── router/         # 路由配置
│   │   ├── utils/          # 工具函数
│   │   └── assets/         # 静态资源
│   ├── package.json
│   └── vite.config.js
├── server/                 # Node.js 后端项目
│   ├── config/             # 配置文件
│   ├── models/             # 数据模型
│   ├── controllers/        # 控制器
│   ├── routes/             # 路由
│   ├── middleware/         # 中间件
│   ├── package.json
│   └── server.js
├── package.json            # 根项目配置
└── README.md
```

## 📖 API 文档

### 认证接口
- `POST /api/auth/register` - 用户注册
- `POST /api/auth/login` - 用户登录
- `GET /api/auth/profile` - 获取用户信息
- `PUT /api/auth/profile` - 更新用户信息

### 学习进度接口
- `POST /api/progress/initialize` - 初始化学习进度
- `GET /api/progress` - 获取学习进度
- `PUT /api/progress/:dayNumber` - 更新学习进度
- `GET /api/progress/stats` - 获取学习统计

### 打卡接口
- `POST /api/checkin` - 每日打卡
- `GET /api/checkin/status` - 获取打卡状态
- `GET /api/checkin/history` - 获取打卡历史
- `GET /api/checkin/leaderboard` - 获取排行榜

### 资源管理接口
- `GET /api/resources` - 获取资源列表
- `GET /api/resources/:id` - 获取资源详情
- `POST /api/resources` - 创建资源
- `PUT /api/resources/:id` - 更新资源
- `DELETE /api/resources/:id` - 删除资源

## 🎨 功能预览

### 1. 学习进度看板
- 54天学习计划可视化
- 各阶段完成率统计
- 学习时间记录
- 作业提交状态

### 2. 打卡系统
- 每日打卡日历
- 连续打卡天数
- 学习心情记录
- 班级排行榜

### 3. 资源中心
- 分类资源浏览
- 搜索和筛选
- 资源评分系统
- 收藏功能

### 4. 移动端适配
- 响应式布局
- 触摸友好交互
- PWA支持
- 离线缓存

## 🔧 部署说明

### 开发环境
```bash
npm run dev
```

### 生产环境
```bash
# 构建前端
npm run build

# 启动后端
npm run start
```

### Docker部署
```bash
# 构建镜像
docker build -t study-platform .

# 运行容器
docker run -p 3000:3000 study-platform
```

## 🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 详情请查看 [LICENSE](LICENSE) 文件

## 📞 联系我们

如果你在使用过程中遇到问题，或有改进建议，欢迎：

- 📧 发送邮件
- 🐛 提交 Issue
- 💬 加入讨论群

---

**祝你学习愉快！从编程小白到浏览器自动化专家，我们一起加油！** 🚀