# 基于Java数据结构存储可视化

**Repository Path**: mzb329/java-vue

## Basic Information

- **Project Name**: 基于Java数据结构存储可视化
- **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-03-07
- **Last Updated**: 2026-03-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 数据结构可视化演示系统

一款轻量级的数据结构可视化演示系统，通过 Web 界面直观展示基础数据结构的增删改查过程。无需数据库，开箱即用。

## 功能特性

### 支持 5 种基础数据结构

| 数据结构 | 操作 |
|---------|-----|
| **数组 (Array)** | 初始化、按索引插入、按索引删除、按索引查找 |
| **栈 (Stack)** | 入栈 (Push)、出栈 (Pop) |
| **队列 (Queue)** | 入队 (Enqueue)、出队 (Dequeue) |
| **单链表 (Linked List)** | 头插法、尾插法、按值查找、按值删除 |
| **二叉搜索树 (BST)** | 插入节点、查找节点 |

### 可视化特性

- 🎬 **动画演示** - 操作过程逐步播放，清晰展示每个步骤
- 📝 **代码联动** - 右侧代码面板实时高亮当前执行的代码行
- ⏯️ **播放控制** - 支持播放、暂停、重置操作
- 🎨 **颜色标识** - 不同状态（比较、插入、删除、找到）用不同颜色区分

## 技术栈

### 后端
- Java 8
- Spring Boot 2.7.x
- Maven

### 前端
- Vue 3
- Element Plus
- Vite 5
- Axios

## 项目结构

```
├── backend/                    # 后端项目
│   ├── pom.xml
│   └── src/main/java/com/dsvisual/
│       ├── DsVisualApplication.java
│       ├── config/             # 跨域配置
│       ├── controller/         # REST API
│       ├── model/              # 数据模型
│       └── service/            # 业务逻辑
│
├── frontend/                   # 前端项目
│   ├── package.json
│   ├── vite.config.js
│   └── src/
│       ├── App.vue
│       ├── main.js
│       ├── api/                # API 封装
│       ├── components/         # Vue 组件
│       └── styles/             # 样式文件
│
└── docs/
    └── PRD.md                  # 产品需求文档
```

## 快速开始

### 环境要求

- JDK 8 或更高版本
- Node.js 16+
- Maven 3.6+

### 启动后端

```bash
cd backend
mvn spring-boot:run
```

后端服务将在 http://localhost:8080 启动

### 启动前端

```bash
cd frontend
npm install
npm run dev
```

前端服务将在 http://localhost:5173 启动

### 访问应用

打开浏览器访问 http://localhost:5173

## 使用说明

1. **选择数据结构** - 在左侧菜单点击要演示的数据结构
2. **执行操作** - 输入参数，点击对应操作按钮
3. **观看动画** - 系统自动播放操作步骤动画
4. **查看代码** - 右侧面板显示对应的 Java 代码并高亮当前执行行

## API 接口

### 数组
```
POST /api/array/init?size=5       # 初始化
POST /api/array/insert?index=0&value=10  # 插入
POST /api/array/delete?index=0    # 删除
POST /api/array/search?index=0    # 查找
POST /api/array/reset             # 重置
```

### 栈
```
POST /api/stack/push?value=10     # 入栈
POST /api/stack/pop               # 出栈
POST /api/stack/reset             # 重置
```

### 队列
```
POST /api/queue/enqueue?value=10  # 入队
POST /api/queue/dequeue           # 出队
POST /api/queue/reset             # 重置
```

### 链表
```
POST /api/linkedlist/insertHead?value=10  # 头插
POST /api/linkedlist/insertTail?value=10  # 尾插
POST /api/linkedlist/search?value=10      # 查找
POST /api/linkedlist/delete?value=10      # 删除
POST /api/linkedlist/reset                # 重置
```

### 二叉搜索树
```
POST /api/bst/insert?value=10     # 插入
POST /api/bst/search?value=10     # 查找
POST /api/bst/reset               # 重置
```

## 设计约束

- **输入范围**: 仅支持 0-99 的整数
- **数组容量**: 最多 10 个元素
- **二叉树深度**: 最多 4 层

## 许可证

MIT License