构建类Scan2Info移动端条码扫描查价系统的技术咨询

我正在开发一款类似Scan2Info的系统，用户可通过手机摄像头扫描商品条码（EAN/UPC），从自定义后端API即时获取价格、名称及详情等商品信息，目标是替代传统货架价签，让顾客自行扫码查询价格。

需实现的功能 #

• 利用手机摄像头扫描条码（EAN/UPC）
• 将扫描得到的条码发送至后端API
• 从SQL Server数据库中检索商品数据
• 在移动端屏幕即时展示结果

当前技术栈 #

• 后端：ASP.NET Core（使用ADO.NET）
• 数据库：SQL Server
• 前端：考虑采用Blazor或简易Web方案

技术疑问解答 #

1. 移动端浏览器中基于JavaScript的条码扫描，最优库或方案是什么？ #

推荐两个成熟的纯JS方案：

• QuaggaJS：专门针对条码扫描的轻量库，原生支持EAN/UPC码，无需依赖后端处理，适配移动端浏览器。可自定义扫描区域、调整识别精度，还能优化模糊条码的识别效果。
• ZXing-js：Google ZXing条码识别库的JavaScript移植版本，稳定性强，支持多种条码格式，移动端兼容性好，社区活跃，问题修复及时。

使用注意点：

• 必须提前请求摄像头权限，在用户授权后再启动扫描；
• 优化扫描区域，只聚焦屏幕中间的条码区域，缩小识别范围提升速度；
• 增加低光环境提示，引导用户在光线充足的场景下扫码。

2. 该系统构建为PWA还是原生移动应用更合适？ #

结合业务目标（让顾客快速扫码查价，替代货架价签），PWA是更优选择：

• 无需用户下载安装，直接通过浏览器访问，降低使用门槛；
• 跨平台兼容，iOS和Android用户都能正常使用；
• 基于Blazor WebAssembly开发PWA可与现有ASP.NET Core技术栈无缝衔接，开发维护成本更低；
• 支持离线缓存基础资源，即使网络波动也能快速加载核心功能。

如果后续需要深度硬件控制（比如自定义摄像头参数、离线批量扫码），再考虑原生应用，但当前场景下PWA完全满足需求。

3. 如何优化响应时间以实现近实时结果？ #

从前端、后端、数据库三层优化：

• 前端层：
  • 扫描到条码后立即发起API请求，避免不必要的延迟；
  • 显示加载状态（比如骨架屏），让用户感知系统正在处理，数据返回后快速更新UI；
  • 启用前端资源压缩（JS/CSS/图片），减少页面加载时间。
• 后端层：
  • 使用ADO.NET参数化查询，既避免SQL注入，又提升查询执行效率；
  • 引入缓存层（比如Redis或ASP.NET Core内存缓存），缓存高频查询的商品数据，设置合理过期时间（比如1小时），减少数据库访问次数；
  • API接口采用异步方法，避免线程阻塞，提升并发处理能力；
  • 启用API响应的Gzip/Brotli压缩，减少数据传输量。
• 数据库层：
  • 给EAN/UPC条码字段创建唯一索引，确保查询时能快速定位数据；
  • 定期更新数据库统计信息，让SQL Server生成最优查询计划；
  • 避免查询多余字段，只返回前端需要的商品数据（比如价格、名称、详情）。

4. 此类系统有哪些推荐的可扩展架构？ #

推荐分层解耦的架构，便于后续横向扩展：

前端（Blazor PWA） → API网关 → 商品服务（ASP.NET Core） → 缓存层（Redis） → SQL Server

• API网关：统一处理请求路由、负载均衡、认证授权，后续新增服务时无需修改前端；
• 商品服务：独立封装商品查询、条码校验等业务逻辑，可根据用户量横向扩容多个实例；
• 缓存层：缓解数据库压力，提升查询响应速度，同时支持缓存失效策略（比如商品更新时主动清理对应缓存）；
• 数据库层：后续用户量增大时，采用读写分离架构，将读请求分流到只读副本，主库负责写操作。

另外，可引入事件驱动机制，比如商品价格更新时，通过消息队列（比如RabbitMQ）通知缓存层更新数据，保证数据一致性。

内容的提问来源于stack exchange，提问作者AHMAD ALMAJALI