MindMap/frontend

思维导图前端应用

基于 Vue 3 + Mind Elixir 的思维导图前端应用，与 Django 后端 API 集成。

功能特性

• ✅ 创建新思维导图
• ✅ 加载现有思维导图
• ✅ 添加子节点
• ✅ 添加兄弟节点
• ✅ 编辑节点（标题和描述）
• ✅ 删除节点（软删除）
• ✅ 拖拽操作
• ✅ 实时数据同步

技术栈

• Vue 3 - 前端框架
• Mind Elixir 3.x - 思维导图核心库
• Axios - HTTP 客户端
• Vite - 构建工具

安装和运行

1. 安装依赖

cd frontend
npm install

2. 启动开发服务器

npm run dev

应用将在 http://localhost:3000 启动。

3. 构建生产版本

npm run build

API 集成

前端通过以下 API 与后端通信：

• POST /api/mindMaps - 创建思维导图
• GET /api/mindMaps/{id} - 获取思维导图
• POST /api/mindMaps/addNodes - 添加节点
• PATCH /api/mindMaps/updateNode - 更新节点
• DELETE /api/mindMaps/deleteNodes - 删除节点

使用说明

1. 创建思维导图: 点击"新建思维导图"按钮
2. 加载思维导图: 点击"加载思维导图"并输入ID
3. 添加节点: 选中节点后点击"添加子节点"或"添加兄弟节点"
4. 编辑节点: 双击节点或右键选择编辑
5. 删除节点: 选中节点后点击"删除节点"

项目结构

frontend/
├── src/
│   ├── api/
│   │   └── mindmap.js      # API 接口
│   ├── components/
│   │   └── MindMap.vue     # 思维导图组件
│   ├── App.vue             # 主应用组件
│   └── main.js             # 应用入口
├── index.html              # HTML 模板
├── package.json            # 项目配置
├── vite.config.js          # Vite 配置
└── README.md               # 项目说明

注意事项

• 确保后端 Django 服务器在 http://localhost:8000 运行
• 前端通过代理访问后端 API，避免跨域问题
• 所有操作都会实时同步到后端数据库