# learning-vue3

**Repository Path**: libingquan/learning-vue3

## Basic Information

- **Project Name**: learning-vue3
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-25
- **Last Updated**: 2026-06-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3-todo

Vue 3 + Spring Boot 全栈待办事项应用，用于学习 Vue 3 开发现代化前端项目及前后端联调。

## 技术栈

### 前端

| 技术 | 版本 | 用途 |
|------|------|------|
| Vue 3 | ^3.5 | 渐进式前端框架（Composition API + `<script setup>`） |
| Vite | ^8.0 | 构建工具 |
| Vue Router | ^4.6 | 前端路由 |
| Pinia | ^2.1 | 状态管理 |
| Element Plus | ^2.13 | UI 组件库 |
| Axios | ^1.15 | HTTP 客户端 |
| Vitest | ^4.1 | 单元测试 |

### 后端

| 技术 | 版本 | 用途 |
|------|------|------|
| Spring Boot | 3.2.0 | Web 框架 |
| Spring Security | 6.x | 认证与授权 |
| Spring Data JPA | 3.2 | ORM / 数据访问 |
| Bean Validation | 3.x | 请求参数校验 |
| JWT (jjwt) | 0.12.3 | 无状态身份认证 |
| H2 Database | - | 内存数据库（开发环境） |
| JUnit + Mockito | - | 测试框架 |
| JaCoCo | 0.8.11 | 代码覆盖率 |

## 功能特性

- **用户认证** — JWT 登录/注册，路由守卫保护页面
- **待办 CRUD** — 新建、编辑、删除、切换完成状态
- **优先级管理** — 高/中/低三级优先级，颜色区分
- **筛选搜索** — 按状态筛选 + 关键词搜索
- **统计面板** — 待办/已完成计数，点击快速切换筛选
- **响应式布局** — 桌面端表格 + 移动端卡片列表
- **骨架屏加载** — 数据加载时显示骨架占位
- **表单验证** — 前后端双重校验，后端错误信息前端展示
- **面包屑导航** — 编辑页上下文导航
- **快捷键支持** — Ctrl+S 保存、Esc 返回
- **主题切换** — 亮色/暗色模式
- **页面过渡动画** — 路由切换流畅过渡
- **智能时间格式化** — 今天/昨天/日期 + 时分

## 项目结构

```
vue3-01/
├── start.sh                  # 一键启动脚本
├── CLAUDE.md                 # Claude Code 项目指南
├── docs/                     # 学习笔记与文档
├── vue3-todo/                # 前端 Vue 3 项目
│   ├── src/
│   │   ├── api/              # 接口层（axios 请求封装）
│   │   │   ├── todo.js       # 待办事项 API
│   │   │   └── auth.js       # 认证 API
│   │   ├── composables/      # 组合式函数
│   │   │   └── useDebounce.js
│   │   ├── layouts/          # 布局组件
│   │   │   └── AppShell.vue  # 顶部导航 + 用户菜单
│   │   ├── router/           # 路由配置 + 导航守卫
│   │   ├── stores/           # Pinia 状态管理
│   │   │   └── auth.js       # 认证状态
│   │   ├── utils/            # 工具函数
│   │   │   └── request.js    # axios 拦截器封装
│   │   ├── views/            # 页面组件
│   │   │   ├── TodoList.vue  # 待办列表页
│   │   │   ├── TodoEdit.vue  # 新增/编辑页
│   │   │   ├── Login.vue     # 登录页
│   │   │   └── Register.vue  # 注册页
│   │   ├── App.vue           # 根组件
│   │   ├── main.js           # 入口文件
│   │   └── style.css         # 全局样式 + CSS 变量
│   └── package.json
└── vue3-todo-backend/        # 后端 Spring Boot 项目
    └── src/main/java/com/example/todo/
        ├── TodoApplication.java
        ├── config/           # Security、数据初始化配置
        ├── controller/       # REST 控制器 + 全局异常处理
        ├── dto/              # 请求/响应 DTO
        ├── exception/        # 自定义异常
        ├── filter/           # JWT 认证过滤器
        ├── model/            # JPA 实体
        ├── repository/       # 数据访问层
        └── service/          # 业务逻辑层
```

## 快速开始

### 环境要求

- **Node.js** 18+
- **JDK** 17+
- **Maven** 3.6+

### 一键启动

```bash
./start.sh
```

启动后访问：
- 前端：http://localhost:5173
- 后端：http://localhost:8080
- 默认账号：`admin` / `admin123`

### 启动选项

```bash
./start.sh --backend-port 9090           # 自定义后端端口
./start.sh --frontend-port 3000          # 自定义前端端口
./start.sh --skip-backend                # 仅启动前端
./start.sh --skip-frontend               # 仅启动后端
./start.sh --db-console                  # 启用 H2 控制台
./start.sh --jwt-secret 'your-key'       # 自定义 JWT 密钥
./start.sh --help                        # 查看所有选项
```

### 手动启动

```bash
# 后端
cd vue3-todo-backend
mvn spring-boot:run

# 前端（新终端）
cd vue3-todo
npm install
npm run dev
```

### 运行测试

```bash
# 前端测试
cd vue3-todo && npm test

# 后端测试
cd vue3-todo-backend && mvn test
```

## API 接口

### 认证

| 方法 | 路径 | 说明 |
|------|------|------|
| POST | `/api/auth/register` | 用户注册 |
| POST | `/api/auth/login` | 用户登录，返回 JWT |

### 待办事项

所有待办接口需要请求头 `Authorization: Bearer <token>`。

| 方法 | 路径 | 说明 |
|------|------|------|
| GET | `/api/todos` | 获取当前用户待办列表 |
| GET | `/api/todos/{id}` | 获取单条待办 |
| POST | `/api/todos` | 新增待办 |
| PUT | `/api/todos/{id}` | 更新待办 |
| DELETE | `/api/todos/{id}` | 删除待办 |
| PATCH | `/api/todos/{id}/status` | 切换完成状态 |

### Todo 数据结构

```json
{
  "id": 1,
  "title": "学习 Vue 3",
  "description": "完成 Composition API 章节",
  "priority": 2,
  "status": 0,
  "createdAt": "2026-06-08T10:30:00"
}
```

- `priority`：1=低，2=中，3=高
- `status`：0=待办，1=已完成

## 环境变量

| 变量 | 默认值 | 说明 |
|------|--------|------|
| `jwt.secret` | 随机生成 | JWT 签名密钥（生产环境必须设置） |
| `jwt.expiration` | 86400000（24h） | JWT 过期时间（毫秒） |
| `server.port` | 8080 | 后端端口 |

## Git 提交规范

使用中文提交信息，格式：

```
<类型>: <简短描述>

<详细说明>
```

类型：`feat`（功能）、`fix`（修复）、`refactor`（重构）、`chore`（杂项）、`docs`（文档）