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，避免跨域问题
|
||
- 所有操作都会实时同步到后端数据库
|