# 算法“视界”——127种算法的沉浸式动画教学平台

一个面向算法沉浸式教学的中文 JavaWeb 平台，收录 127 个中文算法入口，支持算法步骤回放、速度调节、同屏对比、自定义数据集新增/编辑/查询/批量删除/分页、历史性能统计、DeepSeek AI 算法检索、学习路线推荐、输入数据诊断、当前步骤讲解、步骤追问、练习题提示、同屏对比报告和教师备课。 每个算法都提供一道来自力扣或洛谷等公开题库的配套练习题外链，点击后跳转到原题页面练习。

技术栈

• 后端：Java 17、Spring Boot 3.3.5、MyBatis 3.0.3、MySQL 8、Maven
• 前端：Vue 3.5.12、Vite 5.4.11、Vue Router 4.4.5、Element Plus 2.8.8
• 认证：HttpSession + JSESSIONID，支持用户名/手机号注册与登录
• AI：DeepSeek API，使用环境变量配置；未配置 Key 时自动使用本地免费教学兜底
• Mapper：MyBatis Mapper 代理，使用精确 @MapperScan 扫描真实 Mapper 包，避免普通业务接口被代理

目录结构

javawebwork/
  backend/                 Spring Boot 后端源码、配置和测试
    src/main/java/com/algoviz/
      ai/                  DeepSeek 接入、本地教学兜底和 AI 教学接口
      algorithm/           算法目录、执行器、步骤生成、同屏对比和运行记录
      auth/                用户名/手机号注册、登录、退出和 Session 用户态
      common/              统一响应、异常处理、跨域配置、数据库兼容初始化和 MyBatis Mapper 扫描配置
      dataset/             自定义输入数据保存、查询和删除
      history/             历史运行记录和性能统计
    src/test/java/         后端单元测试和回归测试
  frontend/                Vue 前端源码
    src/api/               后端接口封装
    src/components/        可复用可视化、播放、指标和伪代码组件
    src/router/            页面路由和登录守卫
    src/utils/             输入解析、格式化、播放状态和算法专属输入预设
    src/views/             页面级组件
  database/                MySQL 初始化脚本
    algorithm_viz_mysql.sql
    algorithm_viz_mysql_heidisql_gbk.sql
    schema.sql
  project-specification.md 项目规范和阶段记录
  .codex/project-memory.md 跨轮开发记忆

backend/target/、backend/.m2/、backend/logs/、frontend/node_modules/、frontend/dist/ 和 *.log 都属于本地构建、依赖或运行日志文件，已在 .gitignore 中排除，不作为项目源码交付内容。 课程设计报告和评分材料保存在 C:\Users\lenovo\Desktop\javaweb课设\课程设计报告，不再作为本项目源码目录的一部分维护。

数据库初始化

先确保本机 MySQL 可登录，然后执行：

mysql -u root -p < database/algorithm_viz_mysql.sql

也可以进入 MySQL 后执行：

SOURCE C:/Users/lenovo/Desktop/javawebwork/database/algorithm_viz_mysql.sql;

默认数据库名为 AlgorithmViz。

如果使用 HeidiSQL：

1. 优先关闭旧的 SQL 查询标签页，重新打开 database/algorithm_viz_mysql.sql，确认第一行是 SET NAMES utf8mb4;，然后从第一行执行整个文件。
2. 如果 HeidiSQL 里仍然把 警告、栈：数组实现 之类中文显示成 璀﹀憡、鏍堬細...，改用专用脚本 database/algorithm_viz_mysql_heidisql_gbk.sql。这个文件是 GBK/ANSI 编码，适合中文 Windows 上的 HeidiSQL 默认打开方式。
3. 如果之前已经导入过乱码数据，先在 HeidiSQL 执行 DROP DATABASE AlgorithmViz;，再打开上面的正确脚本完整执行。

导入后可以用下面的 SQL 检查中文是否正常：

SELECT algorithm_key, name_zh
FROM AlgorithmViz.algorithm_catalog
WHERE algorithm_key = 'stack_array';

期望结果中的中文应为 栈：数组实现。

环境变量

后端默认读取以下环境变量。数据库密码和 DeepSeek Key 不要写入源码。

$env:ALGOVIZ_DB_URL="jdbc:mysql://127.0.0.1:3306/AlgorithmViz?useSSL=false&serverTimezone=Asia/Shanghai&characterEncoding=utf8&allowPublicKeyRetrieval=true"
$env:ALGOVIZ_DB_USERNAME="root"
$env:ALGOVIZ_DB_PASSWORD="你的 MySQL 密码"
$env:DEEPSEEK_API_KEY="你的 DeepSeek Key，可不配置"
$env:DEEPSEEK_BASE_URL="https://api.deepseek.com"
$env:DEEPSEEK_MODEL="deepseek-chat"

如果不配置 DEEPSEEK_API_KEY，AI 检索、学习路线、输入诊断、当前步骤讲解、步骤追问、练习题提示、对比报告和教师备课都会自动使用免配置本地教学模式；它会基于平台当前算法目录、复杂度说明、输入特征、当前步骤快照和真实对比指标返回结构化中文教学内容。配置后端 Key 后会自动切换为官方 DeepSeek。

前端如需自定义 API 地址，可复制 frontend/.env.example 为 frontend/.env；本地开发建议继续使用 127.0.0.1，不要把前端写成 127.0.0.1、后端写成 localhost 的混合形式。

上线并发配置

后端已提供面向上千用户同时使用场景的可调运行参数，默认值按课程演示和中等服务器预留余量配置。上线时建议按服务器 CPU、内存、MySQL 连接数和压测结果调整：

$env:ALGOVIZ_TOMCAT_MAX_THREADS="400"
$env:ALGOVIZ_TOMCAT_MIN_SPARE_THREADS="40"
$env:ALGOVIZ_TOMCAT_MAX_CONNECTIONS="2000"
$env:ALGOVIZ_TOMCAT_ACCEPT_COUNT="1000"
$env:ALGOVIZ_DB_POOL_MAX_SIZE="80"
$env:ALGOVIZ_DB_POOL_MIN_IDLE="10"
$env:ALGOVIZ_SESSION_TIMEOUT="30m"
$env:ALGOVIZ_SESSION_COOKIE_SECURE="false"

真实上线承载能力不只由代码决定，还需要配合 MySQL max_connections、数据库索引、静态资源独立部署或 Nginx 反向代理、服务器带宽和 JMeter/LoadRunner 等压测结果确认。当前项目代码侧已把 Tomcat 线程、连接队列、响应压缩、Session 超时、Session Cookie secure 开关和 Hikari 连接池做成环境变量配置，方便上线前调优。HTTPS 部署时建议把 ALGOVIZ_SESSION_COOKIE_SECURE 设为 true。

启动后端

cd backend
mvn spring-boot:run

默认地址：

http://127.0.0.1:8080

如果 Maven 默认仓库权限受限，可以使用项目内仓库：

mvn --% -Dmaven.repo.local=.m2/repository spring-boot:run

启动前端

首次运行先安装依赖：

cd frontend
npm.cmd install

启动开发服务器：

npm.cmd run dev

默认地址：

http://127.0.0.1:5173

为了保证 Session 正常工作，建议前端和后端都使用 127.0.0.1，不要混用 localhost。

验证命令

后端测试：

cd backend
mvn --% -Dmaven.repo.local=.m2/repository test

前端构建：

cd frontend
npm.cmd run build

核心页面

• /algorithms：算法目录
• /visualizer/bubble_sort：冒泡排序可视化
• /visualizer/quick_sort：快速排序可视化
• /visualizer/:algorithmKey：127 个目录算法均可生成可视化步骤，并支持 AI 输入诊断、AI 讲解和步骤追问
• /compare：127 个目录算法中同一类别下的两个不同算法同屏对比，可跳转到 AI 学习中心生成对比报告
• /datasets：自定义测试数据管理，支持新增、编辑、查询、单删、批量删除和分页
• /history：历史记录和性能统计
• /ai-search：AI 学习中心，集中提供算法检索、学习路线、对比报告、练习提示和教师备课

演示建议

1. 用用户名或手机号注册/登录一个测试账号。
2. 打开算法目录，进入冒泡排序、快速排序或任意一个目录算法。
3. 输入 5,3,8,1,2 生成步骤。
4. 使用播放、暂停、上一步、下一步和速度调节查看高亮变化。
5. 点击“AI 诊断输入”查看当前数据是否适合演示；再点击“AI 讲解”查看当前步骤的意义、变量解释、伪代码对应关系、观察重点和易错点。
6. 在步骤讲解下方继续追问“为什么这里要交换？”或“下一步会发生什么？”。
7. 点击算法卡片或可视化侧栏中的“配套练习”链接，到原题页面刷一道对应练习题；需要提示时到 AI 学习中心生成不含完整答案的练习提示。
8. 进入同屏对比，使用同一输入比较同类别的两个不同算法，再到 AI 学习中心生成 AI 对比报告。
9. 保存一组数据集，查看历史统计。
10. 在 AI 检索中输入“我想找最短路径算法”或“我想学图算法”，观察推荐、学习路线和可视化入口；若问题涉及目录外算法，页面会提示平台暂未收录。