86 lines
2.0 KiB
Markdown
86 lines
2.0 KiB
Markdown
|
# 思维导图前端应用
|
|||
|
|
|
|||
|
|
基于 Vue 3 + Mind Elixir 的思维导图前端应用，与 Django 后端 API 集成。
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
- ✅ 创建新思维导图
|
|||
|
|
- ✅ 加载现有思维导图
|
|||
|
|
- ✅ 添加子节点
|
|||
|
|
- ✅ 添加兄弟节点
|
|||
|
|
- ✅ 编辑节点（标题和描述）
|
|||
|
|
- ✅ 删除节点（软删除）
|
|||
|
|
- ✅ 拖拽操作
|
|||
|
|
- ✅ 实时数据同步
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- **Vue 3** - 前端框架
|
|||
|
|
- **Mind Elixir 3.x** - 思维导图核心库
|
|||
|
|
- **Axios** - HTTP 客户端
|
|||
|
|
- **Vite** - 构建工具
|
|||
|
|
|
|||
|
|
## 安装和运行
|
|||
|
|
|
|||
|
|
### 1. 安装依赖
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
cd frontend
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 启动开发服务器
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
应用将在 `http://localhost:3000` 启动。
|
|||
|
|
|
|||
|
|
### 3. 构建生产版本
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
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，避免跨域问题
|
|||
|
|
- 所有操作都会实时同步到后端数据库
|