# Dev-Tools

**Repository Path**: ngmuma/dev-tools

## Basic Information

- **Project Name**: Dev-Tools
- **Description**: DevTools Web 工具集合
- **Primary Language**: Unknown
- **License**: Unlicense
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-11-20
- **Last Updated**: 2026-03-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Java, React, Web, tools

## README

# DevTools Web 工具集合

基于 React + Vite 与 Spring Boot + MyBatis-Plus 的前后端分离项目，目标打造类似 DevToys 的在线开发者工具集合。

## 功能概览
- 工具目录与搜索、工具详情页、深/浅色主题与统一交互
- 示例工具：Base64 编码/解码（可编/可解、复制、清空）
- 统一接口响应结构 `{ code, message, data }` 与基础异常处理

## 技术栈
- 前端：React 18、Vite 5、TypeScript、React Router
- 后端：Spring Boot 3、MyBatis-Plus、Spring Validation、SpringDoc OpenAPI
- 数据库：开发内置 H2（内存），后续可切换 MySQL

## 本地快速开始
1) 启动后端
- 在 `dev-tools-api` 目录执行：
  - `mvn -q -DskipTests package`
  - `java -jar target/dev-tools-api-0.1.0.jar`
- 或使用开发模式：
  - `mvn spring-boot:run`
- Swagger 文档：`http://localhost:8080/swagger-ui.html`

2) 启动前端
- 在 `dev-tools-fe` 目录执行：
  - `npm install`
  - `npm run dev`
- 访问：`http://localhost:5173/`

3) 代理联通
- 前端代理在 `dev-tools-fe/vite.config.ts` 中配置（`/api` → `http://localhost:8080`），可按需修改。

## 目录结构
```
DevTools/
├─ dev-tools-fe/              # 前端项目 (React + Vite)
│  ├─ src/
│  │  ├─ App.tsx              # 页面框架与路由
│  │  ├─ pages/Home.tsx       # 首页、卡片网格
│  │  ├─ pages/tools/Base64Tool.tsx  # Base64 工具页
│  │  ├─ components/ToolCard.tsx     # 工具卡片组件
│  │  └─ styles/app.css       # 全局样式（深色主题）
│  ├─ index.html
│  ├─ package.json
│  └─ vite.config.ts
│
├─ dev-tools-api/             # 后端项目 (Spring Boot)
│  ├─ src/main/java/com/devtools/api/
│  │  ├─ DevToolsApiApplication.java        # 应用入口
│  │  ├─ common/ApiResponse.java            # 统一返回结构
│  │  ├─ advice/GlobalExceptionHandler.java # 全局异常处理
│  │  └─ controller/tools/Base64Controller.java # Base64 接口
│  ├─ src/main/resources/application.yml
│  └─ pom.xml
│
├─ docs/需求文档.md           # 需求与实施计划
└─ .gitignore                 # 忽略文件规则
```

## 前端脚本
- `npm run dev`：启动开发服务器
- `npm run build`：构建生产产物
- `npm run preview`：本地预览构建产物
- `npm run typecheck`：TypeScript 类型检查

## 后端脚本
- `mvn spring-boot:run`：开发模式运行后端
- `mvn -DskipTests package`：打包 Jar（跳过测试）

## 示例 API
- `POST /api/tools/base64/encode` 入 `{ text }` 出 `{ base64 }`
- `POST /api/tools/base64/decode` 入 `{ base64 }` 出 `{ text }`

## 开发约定
- 前端工具以独立组件实现，逻辑函数化，保持可测试性
- 接口响应统一结构，错误可见且易定位
- 深色主题为主，组件遵循卡片化与网格布局

## 迁移到 MySQL（后续）
- 在 `application.yml` 配置 `spring.datasource.*`，引入 MySQL 驱动
- 使用 MyBatis-Plus 映射实体与 Mapper，保留现有 Controller/Service 架构

## 部署建议
- 前端构建后由 Nginx 静态托管
- 后端使用 Spring Boot 容器化镜像运行
- 开启 HTTPS 与反向代理、按需接入日志与监控

## 许可
- 仅用于学习与内部使用，外部发布前请完善许可与版权声明。