# tools_20261027 **Repository Path**: burns/tools_20261027 ## Basic Information - **Project Name**: tools_20261027 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-10-27 - **Last Updated**: 2026-10-28 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # DevToolbox 开发者工具箱 一个面向前端、后端、运维与数据开发者的全栈效率工具站。在线工具打开即用，离线资源统一收录；同时提供开发者大屏、账号体系、主题与布局定制、多页签工作台。 ![DevToolbox 首页](docs/home.png) ## 功能特性 - **在线工具**：JSON 格式化、ASCII / 中文互转、Base64 编解码、时间戳转换、UUID 生成、正则表达式测试。 - **离线资源**：Postman、VS Code、DBeaver、MobaXterm，统一展示版本、分类与官方下载入口。 - **模糊搜索**：支持按名称、描述、标签与分类搜索，并可通过 URL 参数分享筛选结果。 - **开发者大屏**：注册用户、累计登录、收录工具、累计使用等指标，配合趋势、分类、热门工具与实时动态图表。 - **账号体系**：JWT 登录、BCrypt 密码加密、注册、个人资料与外观偏好同步。 - **主题定制**：亮色 / 暗色 / 跟随系统，8 种主题色，标准 / 宽屏 / 紧凑三种页面宽度。 - **多页签工作台**：打开过的工具以页签形式保留，支持切换、关闭、关闭其他、关闭全部，并通过 `KeepAlive` 保留工具内部状态。 - **响应式布局**：桌面、平板与移动端均可使用；页脚包含站点地图、分类导航、站点数据与备案信息。 ## 技术栈 | 层级 | 技术 | | --- | --- | | 前端 | Vue 3.5、TypeScript、Vite 6、Element Plus 2.9、Pinia、Vue Router、Axios、ECharts 5 | | 后端 | JDK 17、Spring Boot 3.3、Spring Security、Spring Data JPA、JJWT、Bean Validation | | 数据库 | MySQL 8（utf8mb4） | | 部署 | Docker、Docker Compose、Nginx | ## 项目结构 ```text . ├── backend/ Spring Boot API 服务 │ ├── src/main/java/com/devtoolbox/ │ │ ├── config/ 安全、JWT、初始化数据 │ │ ├── controller/ Auth / User / Tool / Dashboard / Site API │ │ ├── entity/ User、Tool、ToolUsage、LoginEvent │ │ ├── repository/ JPA Repository │ │ └── service/ 认证与业务逻辑 │ └── src/main/resources/application.yml ├── frontend/ Vue 3 单页应用 │ └── src/ │ ├── components/ 页头、页脚、页签、设置抽屉、图表等 │ ├── tools/ 6 个在线工具的独立组件 │ ├── views/ 首页、工具库、工具详情、登录、注册、个人中心 │ ├── stores/ 用户、站点数据、页签、主题布局 │ └── api/ Axios 封装与接口定义 ├── docker-compose.yml MySQL + 后端 + 前端一键部署 ├── .env.example Compose 环境变量模板 └── docs/ ├── home.png README 首页截图 └── 部署阿里云记录-20261028.md 阿里云部署与踩坑记录 ``` ## 快速开始（Docker Compose） > 需要 Docker Engine 24+ 与 Docker Compose v2。 ```bash cp .env.example .env # 按需修改 .env 中的数据库密码、JWT 密钥与端口 docker compose up -d --build ``` 启动完成后访问： - 前端：（端口由 `FRONTEND_PORT` 控制，默认 80） - 后端健康检查： - MySQL 默认只在 Compose 内部网络暴露，不对宿主机开放端口 查看日志或停止服务： ```bash docker compose logs -f backend docker compose down ``` 数据库数据保存在命名卷 `devtoolbox_mysql-data` 中。需要重新初始化演示数据时，可执行 `docker compose down -v` 后重新启动。 ## 本地开发 ### 环境要求 - JDK 17+ - Maven 3.9+ - Node.js 22+（已验证 22.12.0；Element Plus 依赖的 @vueuse/core 15 要求 Node.js 22+） - MySQL 8+ ### 1. 创建数据库 ```sql CREATE DATABASE devtoolbox CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; CREATE USER 'devtoolbox'@'%' IDENTIFIED BY 'devtoolbox'; GRANT ALL PRIVILEGES ON devtoolbox.* TO 'devtoolbox'@'%'; FLUSH PRIVILEGES; ``` 也可以直接使用 `root` 账号，后端默认配置为 `root / root`。 ### 2. 启动后端 ```bash cd backend # macOS / Linux DB_HOST=localhost DB_PORT=3306 DB_NAME=devtoolbox \ DB_USER=devtoolbox DB_PASSWORD=devtoolbox \ mvn spring-boot:run ``` ```powershell # Windows PowerShell cd backend $env:DB_HOST="localhost" $env:DB_PORT="3306" $env:DB_NAME="devtoolbox" $env:DB_USER="devtoolbox" $env:DB_PASSWORD="devtoolbox" mvn spring-boot:run ``` 首次启动且用户表为空时，`DataSeeder` 会自动写入 34 位演示用户、10 个工具以及登录 / 使用记录。后端默认监听 。 ### 3. 启动前端 ```bash cd frontend npm install npm run dev ``` 访问 。Vite 默认把 `/api` 代理到 `http://localhost:8080`；如果后端使用了其他端口： ```powershell # Windows PowerShell $env:VITE_API_TARGET="http://localhost:8081" npm run dev ``` ```bash # macOS / Linux VITE_API_TARGET=http://localhost:8081 npm run dev ``` ### 演示账号 | 角色 | 用户名 | 密码 | | --- | --- | --- | | 普通用户 | `demo` | `Demo@123456` | | 管理员 | `admin` | `Admin@123456` | > 演示账号仅用于本地体验。部署到公网前请修改或删除演示账号，并替换默认 JWT 密钥。 ## 环境变量 | 变量 | 默认值 | 说明 | | --- | --- | --- | | `SERVER_PORT` | `8083` | 后端端口 | | `DB_HOST` | `localhost` | MySQL 主机 | | `DB_PORT` | `3306` | MySQL 端口 | | `DB_NAME` | `devtoolbox` | 数据库名 | | `DB_USER` | `root` | 数据库用户名 | | `DB_PASSWORD` | `NewRoot2026` | 数据库密码，生产环境建议通过环境变量覆盖 | | `JWT_SECRET` | 内置开发密钥 | JWT 签名密钥，生产环境必须替换 | | `JWT_EXPIRATION_HOURS` | `168` | Token 有效期（小时） | | `CORS_ORIGINS` | `http://localhost:*,http://127.0.0.1:*` | 允许的跨域来源，逗号分隔 | | `FRONTEND_PORT` | `80` | Compose 前端宿主机端口 | | `BACKEND_PORT` | `8080` | Compose 后端宿主机端口 | 站点名称、备案号与版权信息位于 `backend/src/main/resources/application.yml` 的 `app.site` 节点，当前为演示占位内容。 ## API 概览 | 方法 | 路径 | 说明 | | --- | --- | --- | | `POST` | `/api/auth/register` | 注册并返回 Token | | `POST` | `/api/auth/login` | 登录并返回 Token | | `GET` | `/api/users/me` | 当前用户资料 | | `PUT` | `/api/users/me` | 更新昵称、邮箱、头像与简介 | | `PUT` | `/api/users/me/preferences` | 同步主题色、明暗模式与布局 | | `GET` | `/api/tools` | 工具列表，支持 `keyword`、`category`、`type` | | `GET` | `/api/tools/{code}` | 工具详情 | | `GET` | `/api/tools/stats` | 工具统计 | | `POST` | `/api/tools/{code}/use` | 记录一次工具使用 | | `GET` | `/api/dashboard/stats` | 首页大屏数据 | | `GET` | `/api/dashboard/totals` | 核心指标 | | `GET` | `/api/site/meta` | 站点名称、备案、分类等元信息 | | `GET` | `/api/health` | 健康检查 | 除公开接口外，请求需携带 `Authorization: Bearer `。 ## 扩展一个在线工具 1. 在 `frontend/src/tools/` 新建工具组件，例如 `MyTool.vue`。 2. 在 `frontend/src/tools/index.ts` 的工具组件映射中注册对应工具编码。 3. 在 `backend/.../config/DataSeeder.java` 中新增工具元数据。 `DataSeeder` 仅在用户表为空时执行。已有数据库需要直接插入 / 更新 `tools` 表，或清空数据库后重新初始化。工具组件按 `Tool.code` 动态加载，未注册组件的在线工具会展示“页面开发中”的占位状态。 ## 主题、布局与页签 - 主题和布局保存在浏览器 `localStorage` 的 `devtoolbox_ui` 中。 - 登录后点击“保存并同步”，设置会写入用户偏好；在其他设备登录时自动恢复。 - 已打开的工具页签保存在 `devtoolbox_tabs` 中，刷新页面后仍会保留。 - 在线工具组件使用 `KeepAlive` 缓存，切换页签不会丢失输入与结果。 ## 构建与检查 ```bash # 前端类型检查与生产构建 cd frontend npm run type-check npm run build # 后端打包 cd backend mvn -DskipTests package ``` 构建产物分别位于 `frontend/dist/` 与 `backend/target/`。 ## 上线前需要替换的占位内容 - `application.yml` 中的 `app.site.icp`、`app.site.police`、`app.site.copyright`。 - `frontend/src/components/AppFooter.vue` 中“开源与反馈”链接（当前指向 `https://gitee.com/burns/tools_20261027.git`）。 - 默认数据库密码、`JWT_SECRET` 与演示账号。 - 如需关闭 Hibernate 自动建表，可将 `spring.jpa.hibernate.ddl-auto` 改为 `validate` 并引入 Flyway / Liquibase 管理数据库版本。