一个用vue3和c++实现的背包问题可视化系统

Knapsack Visualizer

一个基于 Electron + Vue 3 + C++ 的动态规划算法可视化演示系统，支持 10 种经典背包问题算法。
技术栈

技术版本用途Vue3.5+前端框架Electron39+桌面应用框架Vite7+构建工具Element Plus2.13+UI 组件库C++17算法实现功能特性

• 10 种背包算法可视化
  
  
  
  • 0/1 背包、完全背包、多重背包、混合背包
    
  • 二维费用背包、分组背包、依赖背包、树形背包
    
  • 第K优解、方案计数
    
  
  
• 实时动画演示：逐步展示 DP 状态转移过程，直观理解算法原理
  
• 交互式界面：支持自定义输入、预设案例、随机生成
  
• 性能分析：显示算法复杂度和执行时间
  
• 多语言 UI：完全中文界面
  

演示截图

0/1 背包

多重背包

二维费用背包

分组背包

树形背包

依赖背包

快速开始

前置要求

• Node.js >= 16.0
  
• npm >= 8.0
  
• g++ (用于编译 C++ 算法)
  
  
  
  • Windows: 安装 MinGW 或 TDM-GCC
    
  • macOS: xcode-select --install
    
  • Linux: sudo apt-get install build-essential
    
  
  

安装步骤

1. 安装依赖

1. npm install

复制代码

2. 编译 C++ 算法

1. cd cpp
3. # Windows
4. .\build.bat
6. # macOS/Linux
7. ./build.sh

复制代码

3. 开发模式运行

1. npm run dev

复制代码

打包发布

1. # Windows - 生成 Knapsack Visualizer.exe
2. npm run build:win
4. # macOS - 生成 Knapsack Visualizer.dmg
5. npm run build:mac
7. # Linux - 生成 Knapsack Visualizer.AppImage
8. npm run build:linux

复制代码

打包完成后，安装程序在 dist/ 目录下。
项目结构

1. ├── src/
2. │   ├── main/
3. │   │   └── index.js                    # Electron 主进程（IPC通信、C++调用）
4. │   ├── preload/
5. │   │   └── index.js                    # 预加载脚本（安全上下文）
6. │   └── renderer/
7. │       ├── index.html                  # 应用入口 HTML
8. │       └── src/
9. │           ├── App.vue                 # 主应用组件
10. │           ├── main.js                 # Vue 应用初始化
11. │           ├── assets/                 # 静态资源
12. │           └── components/             # Vue 组件
13. │               ├── InputPanel.vue      # 输入参数面板
14. │               ├── ControlBar.vue      # 播放控制栏
15. │               ├── InfoPanel.vue       # 结果信息面板
16. │               ├── DPGrid.vue          # DP 表格视图
17. │               ├── TreeView.vue        # 树形背包可视化
18. │               ├── GroupCircleView.vue # 分组背包圆环视图
19. │               ├── DependencyView.vue  # 依赖背包套餐视图
20. │               ├── MultipleKnapsackView.vue  # 多重背包拆分视图
21. │               └── TwoDimensionView.vue      # 二维费用切片视图
22. ├── cpp/
23. │   ├── build.bat                       # Windows 编译脚本
24. │   ├── knapsack_01.cpp                 # 0/1 背包算法
25. │   ├── knapsack_complete.cpp           # 完全背包算法
26. │   ├── knapsack_multiple.cpp           # 多重背包算法
27. │   ├── knapsack_mixed.cpp              # 混合背包算法
28. │   ├── knapsack_2d.cpp                 # 二维费用背包算法
29. │   ├── knapsack_group.cpp              # 分组背包算法
30. │   ├── knapsack_depend.cpp             # 依赖背包算法
31. │   ├── knapsack_tree.cpp               # 树形背包算法
32. │   ├── knapsack_kth.cpp                # 第K优解算法
33. │   └── knapsack_count.cpp              # 方案计数算法
34. ├── build/                              # 构建资源
35. ├── resources/                          # 应用资源
36. ├── image/                              # 演示截图
37. ├── package.json                        # 项目依赖配置
38. ├── electron-builder.yml                # Electron 打包配置
39. ├── electron.vite.config.mjs            # Vite 构建配置
40. └── README.md                           # 项目说明

复制代码

使用指南

• 选择算法：从左侧菜单选择要演示的背包问题类型
  
• 输入参数：设置背包容量和物品信息
  
• 开始演示：点击"开始演示"按钮
  
• 控制播放：使用播放/暂停、上一步/下一步按钮控制演示进度
  
• 调整速度：使用速度按钮调整动画播放速度
  

算法说明

• 0/1 背包 - 每个物品最多选择一次，求最大价值。
  
• 完全背包 - 每个物品可以选择无限次，求最大价值。
  
• 多重背包 - 每个物品有限定数量，求最大价值。
  
• 混合背包 - 结合 0/1、完全、多重背包的特性。
  
• 二维费用背包 - 物品有两个维度的消耗（如重量和体积）。
  
• 分组背包 - 物品分组，每组最多选一个。
  
• 依赖背包 - 物品间存在依赖关系（主物品和附属物品）。
  
• 树形背包 - 物品构成树形结构的依赖关系。
  
• 第K优解 - 求第 K 个最优解。
  
• 方案计数 - 计算所有最优方案的数量。
  

友情链接

GitHub: Cyans1314/Knapsack-Visualizer

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

谢谢楼主提供！

不错，里面软件多更新就更好了

感谢，下载保存了

过来提前占个楼

过来提前占个楼

这个好，看起来很实用

感谢，下载保存了

不错，里面软件多更新就更好了

yyds。多谢分享

鼓励转贴优秀软件安全工具和文档！