学弟学妹们，大家好👋！作为计算机专业已经毕业多年的学长，回头再看毕业设计这段日子，依旧感慨万千🌟。当年熬夜调试 SpringBoot 接口、适配鸿蒙ArkTS客户端与微信小程序双端页面、反复优化MySQL数据库表结构、逐字打磨论文的画面，现在想起来还历历在目。看到很多同学选择基于SpringBoot+Vue+鸿蒙ArkTS+微信小程序的无人超市系统这个课题，心里特别有共鸣💻。

选这个课题的学弟学妹注意啦✨，本系统的核心亮点也是答辩高频考点，就是双端客户端适配、无人自助购物闭环、超市运营智能管理体系。开发不要贪多求全，优先跑通核心业务：用户通过鸿蒙ArkTS APP、微信小程序双端完成商品浏览、扫码购物、自助结算、在线支付、个人订单管理；管理员通过Vue后台完成商品管理、用户管控、订单监控、销售数据统计。做好普通顾客、超市管理员双重权限隔离和无人购物完整业务闭环，答辩重点讲清前后端分离架构、鸿蒙ArkTS端与小程序多端统一接口、扫码自助结算机制、订单状态流转、库存事务管控，完整演示双端APP功能+后台管理功能，答辩基本稳过高分💪。

---

博主介绍：

深耕计算机专业项目 开发多年，基于springboot,vue,node,javaweb,微信小程序,安卓,android,鸿蒙,Harmony,python,毕业设计，课程设计，支持定制开发，附全套资料。

文末有本题目的源码+全套资料 ⬇️⬇️⬇️

---

基于 ArkTS 鸿蒙 APP + 微信小程序无人超市系统毕业设计全套内容

说明：系统架构：后端 SpringBoot + Vue 管理后台；前端双端：ArkTS 鸿蒙 APP、微信小程序；数据库 MySQL。 定位：无人超市，顾客自助购物、扫码结算、商品管理、订单管理，管理员后台运营。

一、题目

中文题目：基于鸿蒙 ArkTS 与微信小程序的无人超市管理系统设计与实现 英文题目：Design and Implementation of Unmanned Supermarket Management System Based on HarmonyOS ArkTS and WeChat Mini Program

二、摘要

中文摘要

随着新零售模式快速发展，传统人工超市存在人力成本高、结账排队、运营效率低等痛点。本文设计并实现一套无人超市管理系统，系统采用 SpringBoot 作为后端框架，Vue 开发 PC 管理后台，MySQL 作为持久化数据库，同时提供双端客户端：基于 ArkTS 开发鸿蒙端 APP，以及微信小程序端，满足不同用户自助购物需求。系统包含顾客端、超市管理员两大角色，顾客可完成商品浏览、扫码购物、自助下单、在线支付、订单查询；管理员通过 PC 后台实现商品信息维护、订单管理、用户管理、销售数据查看。论文对系统需求、架构设计、数据库设计、功能实现进行详细阐述，完成系统功能测试。测试结果表明，该系统可以脱离人工收银，实现无人超市的自助购物流程，降低超市运营人力成本，提升消费者购物体验，具备一定实际应用价值。 关键词：无人超市；SpringBoot；Vue；ArkTS；微信小程序；MySQL

Abstract

With the rapid development of the new retail industry, traditional supermarkets face problems such as high labor cost, long checkout queue and low operation efficiency. This paper designs and implements an unmanned supermarket management system. The system uses SpringBoot as the backend framework, Vue for PC management background, MySQL for data storage. Two client applications are developed: HarmonyOS APP based on ArkTS and WeChat Mini Program to serve users with different devices. The system has two user roles, customers and supermarket administrators. Customers can browse goods, scan codes for shopping, place orders, make online payment and query order records. Administrators maintain commodity information, manage orders and users, and view sales statistics through web background. This paper describes system requirements, architecture, database design and function implementation, and completes system functional test. The test results show that the system supports self-service shopping without cashiers, reduces supermarket labor cost and improves shopping experience. The system has practical application value. Keywords: Unmanned Supermarket; SpringBoot; Vue; ArkTS; WeChat Mini Program; MySQL

三、研究目的与意义

研究目的

本课题研究目的在于设计一套轻量化无人超市管理系统，解决传统超市收银人力投入大、高峰期排队严重的问题。系统支持顾客使用鸿蒙 ArkTS APP 或者微信小程序进入无人超市，通过扫码方式选购商品，自助完成结算，无需收银员值守。同时为超市运营人员提供 Web 管理后台，方便管理员维护商品、查看订单、统计销售数据。本系统旨在打通 “线上选品 - 线下自助结算 - 后台运营” 完整业务链路，验证 SpringBoot+Vue+MySQL 搭配鸿蒙 ArkTS、微信小程序双端开发方案在新零售场景下的可行性。通过对系统需求分析、编码实现、测试验证，完成一个稳定可用的无人超市原型系统。

研究意义

在理论层面，本课题结合鸿蒙 ArkTS 跨端开发与微信小程序技术，拓展移动前端技术在新零售自助场景的应用案例，研究多端共用同一套后端接口的开发模式，为同类自助零售系统的毕业设计提供参考方案。 在实际应用层面，无人超市系统可以大幅减少超市收银岗位人力开销，降低门店运营成本。顾客可以自由选择鸿蒙 APP 或者微信小程序，不受设备限制，进店扫码选购，离店自助结算，省去排队等待时间，提升购物体验。超市管理员可以在网页端实时查看门店商品库存、销售订单，及时补货，掌握经营数据。 本系统体量适中，部署简单，适合社区小型无人便利店使用。同时系统模块化设计，后续可扩展人脸进店、商品防盗等功能，具备良好的扩展性。课题完成过程中，能够综合锻炼后端开发、Web 后台、鸿蒙 ArkTS 开发、小程序开发、数据库设计等多项能力，对计算机专业学生工程实践能力培养具有现实意义。

四、国内外研究现状

国外无人零售起步较早，亚马逊 Amazon Go 是无人超市代表性产品，依托机器视觉、传感器融合技术实现拿了就走的购物体验，用户进店绑定账户，取出商品自动扣款。欧美多家零售企业陆续推出自助收银设备，自助结算系统技术成熟，但硬件成本高昂，整套系统部署费用高，很难普及到小型社区便利店。国外自助零售软件系统大多和专用硬件深度绑定，软件通用性差，二次开发难度大，不适合国内轻量化低成本无人便利店场景。

国内新零售发展迅速，阿里、京东等企业先后落地无人超市项目。国内方案大多分为两种：一种是视觉识别方案，硬件投入巨大；另一种是扫码自助结算方案，成本更低，适合小规模门店。目前市面上大量自助收银小程序，但是大多只支持微信单端，缺少鸿蒙 ArkTS APP 客户端。随着鸿蒙设备市场占有率提升，越来越多用户使用鸿蒙手机，仅支持微信小程序会限制用户群体。现有的部分无人超市系统业务耦合严重，前后端分离架构使用较少，维护升级困难。

综合来看，现有无人超市系统存在两个短板：一是大多依赖昂贵传感器、视觉硬件，不适合小型便利店；二是客户端单一，很少同时提供鸿蒙 ArkTS APP + 微信小程序双端访问。 因此本文设计基于 SpringBoot+Vue 的后台，搭配鸿蒙 ArkTS APP 与微信小程序双端无人超市系统，采用扫码购物方案，降低硬件成本，顾客可以任选鸿蒙 APP 或者微信小程序完成购物。系统采用前后端分离架构，代码解耦，方便后期维护迭代。该方案可以弥补现有系统客户端单一的缺陷，满足国内小型无人便利店低成本运营需求，具有一定研究价值。

五、需求分析（角色划分 + 权限 + 功能模块详细描述）

本系统一共两类用户：顾客、超市管理员

1. 顾客（鸿蒙 ArkTS APP / 微信小程序端）

权限：注册登录、浏览商品、扫码选购、下单支付、查看个人订单、修改个人信息 功能模块：

1. 用户登录注册模块：支持手机号注册、登录；保存用户信息；忘记密码重置。鸿蒙 APP 和小程序共用一套后端接口。
2. 商品浏览模块：首页展示商品分类、商品图片、名称、单价、库存；支持搜索商品，查看商品详情。
3. 扫码购物模块：调用手机摄像头扫描商品条码，自动将商品加入购物车；支持手动修改购物车商品数量，删除购物车商品。
4. 购物车模块：实时计算购物车内商品总金额，勾选商品进行结算。
5. 订单与支付模块：提交订单，模拟支付；生成订单编号；查看订单状态（待支付、已完成）。
6. 个人中心模块：查看我的全部订单，修改手机号，查看消费记录。

2. 超市管理员（Vue 网页管理后台）

权限：商品管理、订单管理、用户管理、销售信息查看，无注册权限，账号由开发预设。 功能模块：

1. 商品管理模块：新增商品、编辑商品信息（名称、价格、库存、条码），上下架商品，删除商品。
2. 用户管理模块：查看所有注册顾客账号，查看用户基础信息，禁用违规用户。
3. 订单管理模块：查看所有用户订单，查询订单详情，导出订单记录，修改订单状态。
4. 销售统计模块：简单统计商品销量，展示销售数据，查看热门商品。

六、系统使用技术栈介绍

后端技术：SpringBoot

SpringBoot 是基于 Spring 的快速开发框架，自动配置，减少 XML 配置文件。采用 MVC 分层架构，Controller 接收前端请求，Service 处理业务逻辑，Mapper 操作数据库。提供 RESTful 接口，同时给鸿蒙 ArkTS APP、微信小程序、Vue 后台提供接口，实现多端复用后端服务。

PC 管理前端：Vue2/Vue3 + ElementUI

Vue 是轻量前端框架，组件化开发，ElementUI 提供现成表单、表格组件，快速搭建管理后台页面。实现商品列表、订单表格、数据统计页面，通过 axios 请求后端接口完成数据交互。

鸿蒙客户端：ArkTS

ArkTS 是鸿蒙主推开发语言，基于 TypeScript 扩展，声明式 UI 语法。开发鸿蒙端 APP，实现页面布局、相机扫码、网络请求，调用鸿蒙原生能力，完成顾客自助购物全部业务。

微信小程序

小程序前端技术，无需安装 APP，微信直接打开。实现和鸿蒙 APP 相同顾客业务逻辑，调用小程序扫码 API，访问同一套 SpringBoot 后端接口。

数据库：MySQL

关系型数据库，开源稳定，适合存储用户、商品、订单数据。支持事务，保证订单创建、库存扣减的数据一致性。

七、数据库表设计

一共 4 张表：用户表 user、商品表 goods、订单表 orders、订单详情表 order_item

用户表 user

字段名	中文释义	类型	是否为空
id	用户编号	int，主键自增	否
phone	手机号	varchar(20)	否
password	密码	varchar(50)	否
name	用户昵称	varchar(30)	是
role	角色 0 顾客 1 管理员	tinyint	否

商品表 goods

字段名	中文释义	类型	是否为空
id	商品编号	int，主键自增	否
goods_name	商品名称	varchar(100)	否
price	商品单价	decimal(10,2)	否
stock	库存数量	int	否
barcode	商品条码	varchar(50)	否

订单表 orders

字段名	中文释义	类型	是否为空
id	订单编号	int，主键自增	否
user_id	下单用户 id	int	否
total_price	订单总金额	decimal(10,2)	否
create_time	下单时间	datetime	否
status	订单状态 0 待支付 1 已完成	tinyint	否

订单详情表 order_item

字段名	中文释义	类型	是否为空
id	详情编号	int，主键自增	否
order_id	关联订单 id	int	否
goods_id	商品 id	int	否
num	购买数量	int	否
price	下单时商品价格	decimal(10,2)	否

八、系统详细设计 + 核心代码片段

8.1 整体架构设计

采用前后端分离架构。后端 SpringBoot 提供 REST 接口；三个前端端（Vue 后台、ArkTS 鸿蒙 APP、微信小程序）通过 http 请求访问后端接口。MySQL 存储持久化数据。 业务流程：顾客打开鸿蒙 APP / 小程序，登录后扫码商品，商品条码传给后端，后端查询 goods 表返回商品信息，加入购物车；提交订单，后端开启事务，创建 orders 主表记录，order_item 保存购买明细，扣减 goods 库存；管理员登录 Vue 后台对商品、订单进行管理。

8.2 SpringBoot 后端核心代码片段

商品 Controller（扫码查询商品接口）

@RestController
@RequestMapping("/goods")
public class GoodsController {
    @Autowired
    private GoodsService goodsService;

    // 根据条码查询商品，供鸿蒙APP、小程序扫码调用
    @GetMapping("/getByBarcode")
    public Result<Goods> getByBarcode(String barcode){
        Goods goods = goodsService.getByBarcode(barcode);
        return Result.success(goods);
    }
}

商品 Service 库存扣减核心逻辑

@Service
public class GoodsServiceImpl implements GoodsService {
    @Autowired
    private GoodsMapper goodsMapper;

    @Override
    @Transactional
    public void reduceStock(Integer goodsId, Integer num) {
        Goods goods = goodsMapper.selectById(goodsId);
        if(goods.getStock() < num){
            throw new RuntimeException("库存不足");
        }
        goods.setStock(goods.getStock() - num);
        goodsMapper.updateById(goods);
    }
}

8.3 ArkTS 鸿蒙 APP 核心代码片段（扫码组件）

// ArkTS 扫码获取商品条码
scanCode(){
  scanBarcode("scan").then((res)=>{
    let barcode = res.value;
    // 请求springboot后端接口，查询商品
    http.requestUrl({
      url:"http://127.0.0.1:8080/goods/getByBarcode?barcode="+barcode,
      method:"GET"
    }).then((resp)=>{
      let goodsData = JSON.parse(resp.result);
      // 将商品添加到购物车
      this.addToCart(goodsData.data);
    })
  })
}

8.4 微信小程序核心代码片段（扫码）

wx.scanCode({
  success: (res) => {
    let barcode = res.result;
    wx.request({
      url: 'http://127.0.0.1:8080/goods/getByBarcode',
      data:{barcode:barcode},
      success:(resp)=>{
        // 拿到商品数据加入购物车
        this.setData({goods:resp.data.data})
      }
    })
  }
})

8.5 Vue 管理后台商品列表片段

<template>
  <el-table :data="goodsList">
    <el-table-column label="商品名称" prop="goodsName"></el-table-column>
    <el-table-column label="价格" prop="price"></el-table-column>
    <el-table-column label="库存" prop="stock"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="editGoods(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import {getGoodsList} from "@/api/goods";
let goodsList = ref([]);
getGoodsList().then(res=>goodsList.value = res.data)
</script>

---

最后出来的界面UI效果如下：

前台：

后台：

鸿蒙APP ，微信小程序：

         

---

上面分享的这套系统，完整的项目代码、MySQL 数据库文件、全套文档、界面效果图、PPT 我都已经打包整理好了🎓。 正在准备同题目的学弟学妹，想要拿来参考学习的，可以点击下方链接。👇👇👇👇👇