# 工具百宝箱

**Repository Path**: Java-ZhangYi/treasure-box

## Basic Information

- **Project Name**: 工具百宝箱
- **Description**: 百宝箱工具，提供天气查询、待办事项、笔记记录等等功能
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-24
- **Last Updated**: 2025-07-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 百宝箱 (Treasure Box)

百宝箱是一个综合性的个人工具集合应用，提供多种日常实用功能，包括待办事项管理、笔记本、天气查询以及个人资料管理等模块。应用采用前后端分离架构，后端使用Spring Boot，前端使用Vue.js开发。

## 技术架构

### 后端技术栈

- **核心框架**：Spring Boot 2.7.x
- **安全框架**：Spring Security + JWT (JSON Web Token)
- **ORM框架**：MyBatis Plus 3.5.2
- **数据库**：MySQL 8.0
- **API文档**：Swagger 3（SpringDoc）
- **其他工具库**：
  - Lombok：简化Java代码
  - Jackson：JSON处理
  - RestTemplate：HTTP客户端
  - Commons IO/Lang：通用工具类

### 前端技术栈

- **核心框架**：Vue.js 2.x
- **UI组件库**：Element UI
- **状态管理**：Vuex
- **路由管理**：Vue Router
- **HTTP客户端**：Axios
- **编辑器**：Quill Editor (富文本编辑)
- **其他工具库**：
  - js-cookie：Cookie管理
  - dayjs/moment：日期处理

## 功能模块

### 1. 用户认证与安全

- 用户注册
- 用户登录
- JWT令牌认证
- 安全拦截

### 2. 待办事项(Todo)

- 添加待办事项
- 编辑待办内容
- 设置优先级和截止日期
- 标记完成状态
- 删除待办事项
- 待办事项列表筛选和分页

### 3. 笔记本(Notes)

- 创建和编辑笔记
- 富文本编辑器支持
- 分类管理
- 星标笔记
- 笔记搜索

### 4. 天气查询

- 城市天气查询
- 实时天气信息显示
- 未来天气预报
- 热门城市快速选择

### 5. 个人资料管理

- 查看个人资料
- 更新个人信息
- 上传和修改头像

### 6. 文件管理

- 文件上传
- 文件存储
- 文件访问控制

## 项目目录结构

### 后端目录结构

```
treasure-box-server/
├── src/
│   ├── main/
│   │   ├── java/
│   │   │   └── com/
│   │   │       └── treasurebox/
│   │   │           ├── common/        # 通用类，如API响应
│   │   │           ├── config/        # 配置类
│   │   │           ├── controller/    # 控制器
│   │   │           ├── entity/        # 实体类
│   │   │           ├── mapper/        # MyBatis映射接口
│   │   │           ├── security/      # 安全相关类
│   │   │           ├── service/       # 服务接口和实现
│   │   │           ├── util/          # 工具类
│   │   │           ├── vo/            # 值对象
│   │   │           └── TreasureBoxApplication.java  # 启动类
│   │   ├── resources/
│   │   │   ├── application.yml        # 应用配置
│   │   │   ├── db/                    # 数据库脚本
│   │   │   └── mapper/                # MyBatis XML映射文件
│   │   └── webapp/                    # Web资源
│   └── test/                          # 测试代码
└── pom.xml                            # Maven配置
```

### 前端目录结构

```
treasure-box-vue/
├── public/                         # 静态资源
├── src/
│   ├── assets/                     # 资源文件
│   ├── components/                 # 组件
│   │   └── QuillEditor.vue         # 富文本编辑器组件
│   ├── router/                     # 路由配置
│   │   └── index.js
│   ├── store/                      # Vuex状态管理
│   │   ├── index.js                # 主Store
│   │   └── modules/                # 模块化Store
│   │       ├── note.js             # 笔记模块
│   │       ├── user.js             # 用户模块
│   │       └── weather.js          # 天气模块
│   ├── utils/                      # 工具类
│   │   ├── api.js                  # Axios配置
│   │   └── api/                    # API模块
│   │       ├── note.js             # 笔记API
│   │       ├── user.js             # 用户API
│   │       └── weather.js          # 天气API
│   ├── views/                      # 页面组件
│   │   ├── auth/                   # 认证相关页面
│   │   ├── note/                   # 笔记相关页面
│   │   ├── todo/                   # 待办相关页面
│   │   ├── user/                   # 用户相关页面
│   │   ├── weather/                # 天气相关页面
│   │   ├── Home.vue                # 首页
│   │   └── Layout.vue              # 布局组件
│   ├── App.vue                     # 根组件
│   └── main.js                     # 入口文件
├── .eslintrc.js                    # ESLint配置
├── babel.config.js                 # Babel配置
├── package.json                    # npm配置
└── vue.config.js                   # Vue CLI配置
```

## 快速开始

### 后端启动

1. 确保已安装JDK 17和Maven
2. 创建MySQL数据库`treasure-box`
3. 运行`schema.sql`初始化数据库表结构
4. 修改`application.yml`中的数据库连接信息
5. 执行命令启动后端服务：

```bash
cd treasure-box-server
mvn spring-boot:run
```

后端服务将在28080端口启动。

### 前端启动

1. 确保已安装Node.js和npm
2. 安装依赖并启动前端服务：

```bash
cd treasure-box-vue
npm install
npm run serve
```

前端服务将在8080端口启动。

## 功能截图

### 登录页面
![登录页面] ![img_1.png](docs/images/img_1.png)
![img_2.png](docs/images/img_2.png)
### 首页
 ![img_5.png](docs/images/img_5.png)

### 待办事项
![待办事项](docs/images/todo.png)
![img_6.png](docs/images/img_6.png)

![img_7.png](docs/images/img_7.png)
### 笔记本
 ![img_9.png](docs/images/img_9.png)

![img_10.png](docs/images/img_10.png)

### 天气查询
 ![img_11.png](docs/images/img_11.png)

### 个人资料
 ![img_12.png](docs/images/img_12.png)

## 项目配置说明

### 后端配置

主要配置项位于`application.yml`：

```yaml
server:
  port: 28080
  servlet:
    context-path: /api

spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/treasure-box
    username: root
    password: ******
    driver-class-name: com.mysql.cj.jdbc.Driver
  
  servlet:
    multipart:
      enabled: true
      max-file-size: 10MB
      max-request-size: 10MB

# 文件上传配置
file:
  upload-dir: C:/fileUpload

# JWT配置
jwt:
  secret: treasurebox-secret-key
  expiration: 604800 # 7天，单位秒

# 天气API配置
weather:
  api:
    key: your api key
    now-url: http://apis.juhe.cn/simpleWeather/query
```

### 前端配置

主要配置项位于`vue.config.js`：

```javascript
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:28080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    }
  }
}
```

## 数据库设计

系统包含以下主要数据表：

1. `tb_user` - 用户表
2. `tb_todo` - 待办事项表
3. `tb_note_category` - 笔记分类表
4. `tb_note` - 笔记表
5. `tb_common_city` - 城市信息表
6. `tb_file` - 文件信息表

## 安全机制

系统采用JWT (JSON Web Token) 进行身份验证和授权：

1. 用户登录成功后获取JWT令牌
2. 前端将令牌存储在Cookie中
3. 后续请求在请求头中携带令牌
4. 服务端验证令牌有效性
5. 特定API端点需要身份验证

## 部署说明

### 后端部署

1. 打包成可执行JAR文件：
   ```bash
   mvn clean package -DskipTests
   ```

2. 运行JAR文件：
   ```bash
   java -jar target/treasure-box-server.jar
   ```

### 前端部署

1. 构建生产环境代码：
   ```bash
   npm run build
   ```

2. 将`dist`目录内容部署到Web服务器（如Nginx）

## 作者与贡献

- 作者：[Java-ZhangYi]

## 许可证

本项目采用 [MIT 许可证](LICENSE)。