# web项目

**Repository Path**: chen_s_1_0/web

## Basic Information

- **Project Name**: web项目
- **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-05-14
- **Last Updated**: 2026-05-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 仿 XMind 思维导图项目

一个基于 Spring Boot + MySQL 的在线思维导图应用，支持 XMind 核心功能，并在此基础上进行了扩展。

## 功能特性

### 核心功能
- ✅ 思维导图的创建、编辑、删除
- ✅ 主题的增删改查
- ✅ 多级主题嵌套
- ✅ 主题样式自定义（颜色、形状等）

### 高级功能
- ✅ 多格式导入导出（JSON、XML、Markdown、OPML）
- ✅ AI 大模型辅助生成思维导图
- ✅ 实时同步（WebSocket）
- ✅ 用户系统（注册、登录）
- ✅ 思维导图管理

### 技术栈
- 后端：Spring Boot 4.0.5 + JPA + WebSocket
- 数据库：MySQL 8.0+
- 前端：原生 JavaScript + CSS3
- 实时通信：SockJS + STOMP

## 快速开始

### 1. 环境要求
- JDK 21+
- MySQL 8.0+
- Maven 3.6+

### 2. 数据库配置

创建数据库并执行初始化脚本：

```bash
# 登录 MySQL
mysql -u root -p

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

或者手动执行 SQL 创建数据库。

### 3. 修改配置

编辑 `src/main/resources/application.yaml`：

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

### 4. 配置 AI（可选）

在 `application.yaml` 中添加 AI 配置：

```yaml
ai:
  api:
    url: https://your-ai-api.com/v1/completions  # AI API 地址
    key: your-api-key  # AI API 密钥
```

### 5. 运行项目

```bash
# Windows
mvnw.cmd spring-boot:run

# Linux/Mac
./mvnw spring-boot:run

# 或者直接打包运行
mvnw.cmd package
java -jar target/web-0.0.1-SNAPSHOT.jar
```

### 6. 访问应用

打开浏览器访问：http://localhost:8080

## API 接口

### 认证接口
- `POST /api/auth/register` - 用户注册
- `POST /api/auth/login` - 用户登录
- `GET /api/auth/user/{id}` - 获取用户信息

### 思维导图接口
- `POST /api/mindmaps` - 创建思维导图
- `GET /api/mindmaps/{id}` - 获取思维导图
- `GET /api/mindmaps/user/{userId}` - 获取用户的思维导图列表
- `PUT /api/mindmaps/{id}` - 更新思维导图
- `DELETE /api/mindmaps/{id}` - 删除思维导图

### 主题接口
- `POST /api/mindmaps/{mindMapId}/topics` - 添加主题
- `PUT /api/mindmaps/topics/{topicId}` - 更新主题
- `DELETE /api/mindmaps/topics/{topicId}` - 删除主题

### 导入导出接口
- `GET /api/export/{id}/json` - 导出为 JSON
- `GET /api/export/{id}/xml` - 导出为 XML
- `GET /api/export/{id}/markdown` - 导出为 Markdown
- `GET /api/export/{id}/opml` - 导出为 OPML
- `POST /api/export/import/json` - 从 JSON 导入
- `POST /api/export/import/xml` - 从 XML 导入
- `POST /api/export/import/markdown` - 从 Markdown 导入
- `POST /api/export/import/opml` - 从 OPML 导入

### AI 接口
- `POST /api/ai/generate` - AI 生成思维导图
- `GET /api/ai/suggest?topic=xxx` - 获取相关主题建议
- `POST /api/ai/optimize` - 优化内容

### WebSocket 接口
- 连接：`/ws`
- 订阅：`/topic/mindmap/{mindMapId}`
- 发送：`/app/mindmap/{mindMapId}/sync`

## 数据库表结构

### users - 用户表
- id: 主键
- username: 用户名（唯一）
- password: 密码
- email: 邮箱
- avatar: 头像 URL
- created_at: 创建时间
- updated_at: 更新时间

### mind_maps - 思维导图表
- id: 主键
- title: 标题
- description: 描述
- user_id: 用户 ID（外键）
- theme: 主题
- layout: 布局
- version: 版本号
- created_at: 创建时间
- updated_at: 更新时间

### topics - 主题表
- id: 主键
- title: 标题
- content: 内容
- icon: 图标
- color: 颜色
- position: 位置
- mind_map_id: 思维导图 ID（外键）
- parent_id: 父主题 ID（外键，自关联）
- collapsed: 是否折叠
- shape: 形状
- width: 宽度
- height: 高度
- created_at: 创建时间
- updated_at: 更新时间

### relationships - 关系表
- id: 主键
- source_topic_id: 源主题 ID
- target_topic_id: 目标主题 ID
- title: 关系标题
- color: 颜色
- style: 样式
- mind_map_id: 思维导图 ID（外键）
- created_at: 创建时间

### attachments - 附件表
- id: 主键
- file_name: 文件名
- file_type: 文件类型
- file_size: 文件大小
- file_path: 文件路径
- url: URL
- topic_id: 主题 ID（外键）
- created_at: 创建时间

## 使用指南

### 创建思维导图
1. 点击"新建导图"按钮
2. 输入思维导图标题
3. 点击"添加主题"添加根主题
4. 鼠标悬停在主题上，点击"+"添加子主题
5. 点击"✏️"编辑主题内容
6. 点击"×"删除主题
7. 点击"💾 保存"保存思维导图

### AI 生成思维导图
1. 点击"✨ AI 生成"按钮
2. 输入主题（如：人工智能）
3. 点击"AI 生成"
4. 等待 AI 生成内容
5. 确认打开生成的思维导图

### 导入导出
- 导出：在编辑器中点击相应的导出按钮
- 导入：在列表页点击"导入"按钮，选择文件

## 项目结构

```
web/
├── src/main/java/com/example/web/
│   ├── config/          # 配置类
│   ├── controller/      # 控制器
│   ├── dto/            # 数据传输对象
│   ├── entity/         # 实体类
│   ├── repository/     # 数据访问层
│   └── service/        # 业务逻辑层
├── src/main/resources/
│   ├── static/         # 静态资源
│   │   ├── css/
│   │   └── js/
│   ├── application.yaml
│   └── init.sql
└── pom.xml
```

## 后续优化建议

1. **安全性**
   - 添加密码加密（BCrypt）
   - 实现 JWT 认证
   - 添加 CSRF 保护

2. **功能增强**
   - 添加更多主题样式
   - 支持拖拽操作
   - 添加撤销/重做功能
   - 支持协作编辑

3. **性能优化**
   - 添加缓存
   - 优化数据库查询
   - 实现懒加载

4. **UI/UX**
   - 响应式设计
   - 添加动画效果
   - 优化移动端体验

## 常见问题

### Q: 启动时提示数据库连接失败
A: 检查 MySQL 服务是否启动，数据库密码是否正确。

### Q: AI 生成功能不能用
A: 检查是否配置了 AI API 地址和密钥，或者使用默认的模拟数据。

### Q: WebSocket 连接失败
A: 检查防火墙设置，确保端口开放。

## 许可证

MIT License

## 联系方式

如有问题或建议，欢迎反馈！