# personal-notes

**Repository Path**: xiaoguanghua/personal-notes

## Basic Information

- **Project Name**: personal-notes
- **Description**: No description available
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-29
- **Last Updated**: 2025-10-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 个人笔记系统

一个功能完善的个人笔记管理系统，支持PC和H5自适应，提供优雅的笔记创建、编辑、分类管理等功能。

## 📋 项目介绍

### 技术栈

**后端：**
- Java 8
- Spring Boot 2.7.14
- MyBatis Plus 3.5.3.1
- MySQL 8.0
- Druid 数据库连接池
- Hutool 工具库

**前端：**
- Vue 3.3.4
- Vite 4.4.9
- Element Plus 2.3.14
- Vue Router 4.2.4
- Pinia 2.1.6
- Axios 1.5.0
- Marked (Markdown 渲染)
- Highlight.js (代码高亮)

### 功能特性

✅ **笔记管理**
- 创建、编辑、删除笔记
- 支持 Markdown 语法
- 实时预览
- 代码高亮

✅ **分类与标签**
- 自定义分类
- 标签管理
- 分类筛选

✅ **笔记操作**
- 置顶笔记
- 收藏笔记
- 草稿/发布状态
- 批量删除

✅ **搜索功能**
- 关键词搜索（标题/内容）
- 分类筛选
- 状态筛选
- 收藏/置顶筛选

✅ **响应式设计**
- PC端大屏显示
- H5移动端适配
- 自适应布局
- 优雅的交互体验

✅ **数据统计**
- 总笔记数
- 已发布笔记数
- 草稿笔记数
- 收藏笔记数
- 分类数量

## 🚀 快速开始

### 环境要求

- JDK 1.8+
- Maven 3.6+
- MySQL 8.0+
- Node.js 16+
- npm 或 yarn

### 后端启动

1. **创建数据库**

```bash
# 进入数据库
mysql -u root -p

# 执行初始化脚本
source backend/src/main/resources/sql/schema.sql
```

2. **修改配置**

编辑 `backend/src/main/resources/application.yml`，修改数据库连接信息：

```yaml
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/personal_notes?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false&allowPublicKeyRetrieval=true
    username: root
    password: your_password  # 修改为你的密码
```

3. **启动后端**

```bash
cd backend

# 使用 Maven 启动
mvn clean install
mvn spring-boot:run

# 或者使用 IDE（IDEA/Eclipse）直接运行 PersonalNotesApplication.java
```

后端服务将在 `http://localhost:8080` 启动

### 前端启动

1. **安装依赖**

```bash
cd frontend
npm install
```

2. **启动开发服务器**

```bash
npm run dev
```

前端服务将在 `http://localhost:3000` 启动，浏览器会自动打开

3. **构建生产版本**

```bash
npm run build
```

构建后的文件将输出到 `frontend/dist` 目录

## 📁 项目结构

```
personal-notes/
├── backend/                          # 后端项目
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/
│   │   │   │   └── com/notes/
│   │   │   │       ├── PersonalNotesApplication.java  # 启动类
│   │   │   │       ├── common/                        # 公共类
│   │   │   │       │   ├── Result.java                # 统一返回结果
│   │   │   │       │   └── ResultCode.java            # 响应状态码
│   │   │   │       ├── config/                        # 配置类
│   │   │   │       │   ├── CorsConfig.java            # 跨域配置
│   │   │   │       │   ├── MyBatisPlusConfig.java     # MyBatis Plus配置
│   │   │   │       │   └── MetaObjectHandlerConfig.java # 自动填充配置
│   │   │   │       ├── controller/                    # 控制器
│   │   │   │       │   └── NoteController.java        # 笔记控制器
│   │   │   │       ├── entity/                        # 实体类
│   │   │   │       │   └── Note.java                  # 笔记实体
│   │   │   │       ├── exception/                     # 异常处理
│   │   │   │       │   ├── BusinessException.java     # 业务异常
│   │   │   │       │   └── GlobalExceptionHandler.java # 全局异常处理
│   │   │   │       ├── mapper/                        # Mapper接口
│   │   │   │       │   └── NoteMapper.java            # 笔记Mapper
│   │   │   │       └── service/                       # 服务层
│   │   │   │           ├── NoteService.java           # 笔记服务接口
│   │   │   │           ├── NoteStatistics.java        # 统计信息
│   │   │   │           └── impl/
│   │   │   │               └── NoteServiceImpl.java   # 笔记服务实现
│   │   │   └── resources/
│   │   │       ├── application.yml                    # 配置文件
│   │   │       └── sql/
│   │   │           └── schema.sql                     # 数据库初始化脚本
│   │   └── test/                                      # 测试代码
│   └── pom.xml                                        # Maven配置
│
├── frontend/                         # 前端项目
│   ├── public/                       # 静态资源
│   ├── src/
│   │   ├── api/                      # API接口
│   │   │   └── note.js               # 笔记API
│   │   ├── components/               # 组件
│   │   │   └── NoteEditor.vue        # 笔记编辑器
│   │   ├── router/                   # 路由配置
│   │   │   └── index.js              # 路由
│   │   ├── stores/                   # 状态管理
│   │   │   └── note.js               # 笔记状态
│   │   ├── utils/                    # 工具类
│   │   │   └── request.js            # Axios封装
│   │   ├── views/                    # 页面
│   │   │   ├── Layout.vue            # 布局页面
│   │   │   └── NoteList.vue          # 笔记列表
│   │   ├── App.vue                   # 根组件
│   │   └── main.js                   # 入口文件
│   ├── index.html                    # HTML模板
│   ├── package.json                  # 项目配置
│   └── vite.config.js                # Vite配置
│
└── README.md                         # 项目说明
```

## 🌐 API 接口

### 笔记相关

| 接口 | 方法 | 说明 |
|------|------|------|
| /api/note/page | GET | 分页查询笔记列表 |
| /api/note/{id} | GET | 查询笔记详情 |
| /api/note | POST | 创建笔记 |
| /api/note | PUT | 更新笔记 |
| /api/note/{id} | DELETE | 删除笔记 |
| /api/note/batch | DELETE | 批量删除笔记 |
| /api/note/{id}/top | PUT | 切换置顶状态 |
| /api/note/{id}/favorite | PUT | 切换收藏状态 |
| /api/note/categories | GET | 获取所有分类 |
| /api/note/statistics | GET | 获取统计信息 |

### 请求示例

**分页查询笔记**
```
GET /api/note/page?current=1&size=10&keyword=Java&category=编程&status=1
```

**创建笔记**
```json
POST /api/note
{
  "title": "Java学习笔记",
  "content": "## Java基础\n\n内容...",
  "category": "编程",
  "tags": "Java,后端",
  "status": 1,
  "isTop": 0,
  "isFavorite": 0
}
```

## 📱 响应式设计

### PC端（>768px）
- 侧边栏固定显示
- 卡片网格布局（自适应列数）
- 完整的工具栏和统计信息
- 双栏编辑预览

### 移动端（≤768px）
- 可收起的侧边栏
- 单列卡片布局
- 简化的工具栏
- 单栏编辑或预览切换

## 🎨 界面展示

### 主要特点
- 渐变色顶部导航栏
- 卡片式笔记展示
- Markdown实时预览
- 代码语法高亮
- 流畅的动画效果
- 优雅的交互体验

## 🔧 开发说明

### 后端开发规范

- 遵循阿里巴巴Java开发手册
- 统一使用Lombok简化代码
- 所有接口返回统一的Result结构
- 完善的异常处理机制
- 详细的JavaDoc注释
- 使用MyBatis Plus简化CRUD操作

### 前端开发规范

- 使用Vue3 Composition API
- 统一使用Element Plus组件库
- Axios统一拦截处理
- 使用Pinia进行状态管理
- 响应式设计适配PC和移动端
- SCSS编写样式

## 📝 数据库设计

### 笔记表（note）

| 字段 | 类型 | 说明 |
|------|------|------|
| id | bigint | 主键ID |
| title | varchar(200) | 笔记标题 |
| content | text | 笔记内容 |
| category | varchar(50) | 笔记分类 |
| tags | varchar(200) | 标签（逗号分隔） |
| is_top | tinyint | 是否置顶：0-否，1-是 |
| is_favorite | tinyint | 是否收藏：0-否，1-是 |
| status | tinyint | 笔记状态：0-草稿，1-已发布 |
| deleted | tinyint | 逻辑删除：0-未删除，1-已删除 |
| create_time | datetime | 创建时间 |
| update_time | datetime | 更新时间 |

### 索引设计

- 主键索引：id
- 普通索引：category, status, is_top, is_favorite, create_time, update_time

## 🔐 安全特性

- SQL注入防护（MyBatis参数化查询）
- XSS防护（前端输出转义）
- CSRF防护（可配置Token机制）
- 跨域配置（CORS）
- 统一异常处理
- 参数校验

## 🚀 性能优化

### 后端优化
- Druid数据库连接池
- MyBatis Plus分页插件
- 逻辑删除避免物理删除
- 索引优化查询性能
- 统一结果缓存（可扩展Redis）

### 前端优化
- 路由懒加载
- 组件按需引入
- 虚拟滚动（可扩展）
- 防抖节流
- Vite构建优化

## 📦 部署说明

### 后端部署

```bash
# 打包
cd backend
mvn clean package

# 运行jar包
java -jar target/personal-notes-1.0.0.jar
```

### 前端部署

```bash
# 构建
cd frontend
npm run build

# 部署到Nginx
cp -r dist/* /usr/share/nginx/html/
```

### Nginx配置示例

```nginx
server {
    listen 80;
    server_name your-domain.com;
    
    # 前端静态资源
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }
    
    # 后端API代理
    location /api {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

## 🤝 贡献指南

欢迎提交Issue和Pull Request！

## 📄 开源协议

MIT License

## 👨‍💻 作者

System

## 📮 联系方式

如有问题或建议，欢迎通过以下方式联系：

- Issue: 提交GitHub Issue
- Email: your-email@example.com

## ⭐ 致谢

感谢以下开源项目：

- Spring Boot
- Vue.js
- Element Plus
- MyBatis Plus
- Marked
- Highlight.js

---

**如果这个项目对你有帮助，请给一个Star⭐**