Crazy Web 算法可视化实验平台

一个面向《算法设计与分析》课程的交互式算法可视化项目。
前端基于 Vue 3 + TypeScript + Vite，后端基于 FastAPI，将课程中常见的算法思想做成了可以直接运行、观察、对比和交互的网页实验。

这个项目不是简单地“把算法结果打印出来”，而是尽量把算法运行过程、状态变化、搜索路径和结果结构可视化，让抽象的算法过程变得更直观。

项目定位

Crazy Web 主要服务于下面几类场景：

• 算法课程实验展示
• 课堂讲解与演示
• 复习时快速理解算法流程
• 前后端分离的课程项目作品集展示

如果你想把“分治、贪心、动态规划、回溯”这几类经典算法做成真正能交互的网页，这个项目就是一个完整范例。

项目亮点

• 算法可视化而不是纯静态页面，重点展示“过程”
• 前后端分离，前端负责交互与图形展示，后端负责算法计算
• 覆盖课程核心章节，贴合《算法设计与分析》实验场景
• 支持多种经典问题的输入、求解、结果展示与对比
• 使用 Canvas 绘制搜索树、路径和状态变化，适合表现复杂结构
• 页面风格统一，适合直接作为课程大作业或作品集项目展示

已实现实验模块

实验一：分治法

• 最近点对问题
• 支持点集生成与算法求解
• 可对比分治法与蛮力法的执行效果

实验二：贪心算法

• TSP 最近邻近似求解
• 分数背包问题
• 0/1 背包的贪心尝试与局限性展示

实验三：动态规划

• TSP 状态压缩动态规划
• 0/1 背包动态规划
• 展示状态转移与最优结果

实验四：回溯法

• TSP 回溯搜索
• 0/1 背包回溯搜索
• 搜索树、剪枝过程和解的可视化展示

实验五

• 当前为预留模块 / 测试模块

技术栈

前端

• Vue 3
• TypeScript
• Vite
• Vue Router
• Pinia
• Tailwind CSS
• @vueuse/core
• lucide-vue-next

后端

• FastAPI
• Python
• Uvicorn

项目结构

crazy_web
├─ backend                # FastAPI 后端
│  ├─ main.py             # 后端入口
│  ├─ requirements.txt    # Python 依赖
│  └─ routers             # 各实验接口
├─ public                 # 静态资源
├─ scripts                # 辅助脚本
├─ src
│  ├─ assets              # 图片与资源
│  ├─ components          # 页面组件
│  ├─ pages               # 各实验页面
│  ├─ router              # 路由配置
│  ├─ stores              # 状态管理
│  └─ styles              # 全局样式
├─ package.json           # 前端脚本与依赖
└─ README.md

前后端职责划分

前端负责

• 页面布局与交互
• 参数输入与表单控制
• 图形可视化展示
• 搜索树、路径、状态结果渲染

后端负责

• 核心算法实现
• 请求参数解析
• 计算结果返回
• 为前端提供统一 API

这种拆分方式的好处很明显：

• 算法逻辑和页面逻辑解耦
• 前端可以专注可视化
• 后端可以专注算法实现与接口组织
• 后续扩展新的实验模块更方便

接口组织

当前后端已经按实验模块拆分了接口：

• /api/lab1：实验一相关接口
• /api/lab2：实验二相关接口
• /api/lab3：实验三相关接口
• /api/lab4：实验四相关接口

后端入口位于：

• backend/main.py

快速开始

1. 克隆项目

git clone https://github.com/impigsea/MyCrazyWeb.git
cd MyCrazyWeb

2. 安装前端依赖

npm install

3. 安装后端依赖

进入 backend 目录，安装 Python 依赖：

cd backend
pip install -r requirements.txt

4. 启动前端

npm run dev

5. 启动后端

如果你已经在项目根目录：

npm run backend

或者手动进入后端目录运行：

uvicorn main:app --reload --port 8000

6. 同时启动前后端

项目已经提供一键启动脚本：

npm run start:all

常用脚本

npm run dev         # 启动前端开发环境
npm run build       # 构建前端
npm run preview     # 预览构建结果
npm run lint        # 运行 ESLint
npm run format      # 使用 Prettier 格式化
npm run backend     # 启动 FastAPI 后端
npm run start:all   # 同时启动前后端

页面效果说明

这个项目最有意思的部分，不是“算出答案”，而是“把过程画出来”。

例如：

• 最近点对问题可以展示点集与结果对
• 贪心 TSP 可以展示访问顺序与路径
• 动态规划可以展示状态转移逻辑和结果
• 回溯法可以展示搜索树、剪枝点和解路径

尤其是在回溯实验中，搜索树动画是项目的一个重点亮点：
前端通过 Canvas 绘制树结构，结合节点布局算法、分步绘制和高亮策略，把“深度优先搜索 + 剪枝”表现成一个可交互的动态图。

适合作为

• 算法课程实验项目
• Web 课程综合作业
• 前后端分离练手项目
• 算法可视化作品集项目
• 简历中的课程项目展示

后续可扩展方向

• 增加更多算法模块，如分支限界、图论、字符串算法等
• 增强动画表现力，例如更细粒度的步骤控制
• 增加代码展示区，做到“输入 - 运行 - 可视化 - 代码”一体化
• 补充实验报告导出或结果保存功能
• 加入部署配置，支持线上访问

项目截图

当前仓库暂未放入正式截图。
如果你愿意，我建议后续补充：

• 首页总览图
• 最近点对实验图
• 贪心 TSP 路径图
• 动态规划状态展示图
• 回溯搜索树动画图

这样 GitHub 首页的展示效果会更完整，也更“像一个成品”。

开发说明

当前项目前端和后端都已经具备比较清晰的模块结构，适合继续扩展。
如果你后面要继续做课程展示，我建议优先完善：

• README 截图
• 部署地址
• 每个实验的算法说明
• 输入输出示例

License

本项目当前未单独声明开源许可证。
如果你计划公开展示或长期维护，建议后续补充 MIT 或其他合适的 License。

---

如果这个项目对你有帮助，欢迎点个 Star。
如果你是为了课程实验、算法复习或者作品集展示而来的，希望这个项目能帮你把“会写算法”变成“能把算法讲明白、展示出来”。