news 2026/10/22 2:14:16

从 B/S 到 Electron:平面排版套料系统桌面版开发实战

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
从 B/S 到 Electron:平面排版套料系统桌面版开发实战

一、引言

在制造业中,平面排版套料是提高材料利用率、降低生产成本的关键环节。传统的套料系统大多采用 B/S(浏览器 / 服务器)架构,用户通过浏览器访问系统进行排版和生成 NC 代码。

然而,B/S 架构在实际使用中存在一些局限性:依赖网络连接、数据存储在云端、离线使用不便、文件管理分散等。对于车间现场的工程师来说,他们更需要一个离线可用、数据本地化、操作便捷的桌面应用。

本文将介绍我们如何将一个成熟的 B/S 套料系统(Nesty)转换为 Electron 桌面单机应用,分享其中的技术架构、核心功能、关键实现和开发经验。

二、系统概述

Nesty是一款专业的平面排版套料系统,主要功能包括:

  • 智能排版:自动套排并优化零件在板材上的排列,提高材料利用率
  • NC 编排:生成数控机床可识别的标准 G 代码
  • 任务管理:创建、跟踪和管理排版任务
  • 数据备份:排版数据的一键备份和恢复,确保数据安全
  • 中英文双语:支持中文和英文界面

技术架构:

三、核心功能介绍

3.1 平面排版套料算法

套料算法是系统的核心。系统采用了现代流行的启发式算法,结合零件的形状、尺寸和优先级,自动优化排列方式。支持规则或异形零件的多品种多批次混合排版,大幅度的提升传统套排模式的材料利用率,为企业运营降低成本做贡献。

3.2 NC 编排和导出

自动套料排版完成后,可以让系统自动生成标准 NC 代码,并支持手动调整切割顺序、引线位置和切割参数。导出的G代码可应用于等离子、激光、水刀等数控机床。

3.3 任务管理和数据备份

所有任务数据存储在本机 SQLite 数据库中,支持一键备份和恢复。备份文件包含数据库和附件(DXF文件、结果图片等),确保数据完整性。

四、关键技术实现

4.1 Electron 桌面应用架构

系统使用 Electron 将 Vue 前端和 FastAPI 后端打包为桌面应用。后端通过 PyInstaller 打包为独立的 Python 可执行文件,前端通过 Vite 构建为静态文件,由主进程启动后端服务并加载前端页面。

架构亮点:

  • 跨域解决方案:主进程通过 session.webRequest 注入凭据,避免 CORS 问题
  • 安全隔离:contextIsolation 启用,preload 脚本暴露受控 API
  • 窗口管理:自绘标题栏、状态栏,丰富的工具栏组件

4.2 自动更新机制

自动更新是桌面应用的关键功能。系统实现了基于安全签名验证的更新机制:

  • 更新清单包含版本号、安装包 URL、SHA256 哈希和 数字签名
  • 客户端内置公钥,下载前先验证签名和哈希,确保安装包未被篡改

4.3 本机数据安全和备份恢复

数据安全是企业应用的底线。系统采用了同点快照和原子切换的备份恢复策略:

  • 备份时暂停新写入,确保数据库和附件来自同一时间点
  • 恢复时先解包到暂存目录,校验完整性后再切换
  • 持久化切换标记,崩溃后重启可自动恢复或回滚

五、开发经验和踩坑

5.1 B/S 到桌面版转换的挑战

从 B/S 转换为桌面版并非简单的 "套壳"。我们遇到了很多挑战:

  • 跨域问题:前端和后端在不同端口,需要通过主进程注入凭据解决
  • 文件下载:浏览器的下载逻辑在桌面版中需要改为主进程保存文件
  • 窗口管理:无边框窗口的拖动、最大化、最小化需要自定义实现
  • 自动更新:NSIS 安装包的签名验证、失败回滚、启动看门等

5.2 测试驱动开发的重要性

在开发过程中,我们深刻体会到测试驱动开发的重要性。每修改一个功能,都要编写对应的测试用例,确保修改不会破坏现有功能。

测试体系:

  • 后端测试:pytest 单元测试,覆盖套料算法、API 接口
  • 前端测试:Vitest 组件测试,覆盖 UI 组件和交互
  • Electron 测试:node --test 主进程测试,覆盖窗口管理、自动更新
  • 打包测试:smoke test,验证打包后的应用能正常启动和运行

5.3 打包和发布的经验

打包和发布是桌面应用开发的最后一环,也是最容易踩坑的一环。我们总结了一些经验:

  • 使用 ELECTRON_OVERRIDE_DIST_PATH 环境变量复用已下载的 Electron 二进制,避免网络超时
  • NSIS 安装包使用 oneClick=false,允许用户选择安装目录
  • 自动更新的签名清单必须离线保管私钥,公钥内置在应用中
  • 打包前必须运行所有测试,确保没有破坏现有功能

六、总结和展望

本文介绍了我们如何将一个成熟的 B/S 套料系统转换为 Electron 桌面单机应用。通过采用 Vue 3 + FastAPI + Electron 的技术架构,实现了离线可用、数据本地化、操作便捷的桌面应用。

未来,我们计划:

  • 优化套料算法,进一步提高材料利用率
  • 支持更多数控机床的 NC 代码格式
  • 探索 AI 辅助排版,提高智能化水平
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/10/22 2:14:15

认识元器件 · 钽电容· 规格书解读

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华
网站建设 2026/10/22 2:13:15

认识元器件MLCC分类筛选条件

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华
网站建设 2026/10/22 2:11:32

000P2DR 模型

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华
网站建设 2026/10/22 2:08:45

Harnessing the Reasoning Economy: A Survey of Efficient Reasoning for Large Language Models

文章总结 主要内容 本文系统探讨了大型语言模型(LLMs)在推理任务中的推理经济性问题,即在提升推理能力的同时优化计算成本。主要内容包括: 基础分析: 训练后方法:通过监督微调(SFT)和强化学习(RL)塑造模型行为,如过程奖励模型(PRM)和结果奖励模型(ORM)的设计。…

作者头像 李华
网站建设 2026/10/22 2:08:18

JavaFX实现FM音频流播放

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华