摘要

随着电子商务和线下实体零售的深度融合，传统便利店的管理与销售模式正面临着数字化转型的迫切需求。为提高商品管理效率、优化购物体验并实现线上线下数据同步，本项目设计并实现了一个基于SSM（Spring+SpringMVC+MyBatis）后端框架与Vue.js前端框架的“绿洲便利店商品售卖系统”。该系统旨在为中小型便利店提供一个功能完备、操作简便、安全可靠的数字化管理解决方案。

一、 系统开发背景与目标

1.1 开发背景

在竞争激烈的零售市场中，便利店需要高效的商品管理、准确的库存控制以及便捷的收银结算。传统的人工记录或单机版管理软件已难以满足多终端访问、实时数据同步和用户体验提升的要求。因此，一个基于B/S架构的Web管理系统成为理想选择。

1.2 设计目标

本系统的主要设计目标包括：

• 实现商品全生命周期管理：涵盖商品信息录入、分类、定价、促销与下架。
• 优化库存管理：实现库存预警、入库出库记录及盘点功能。
• 构建前端售卖门户：为顾客提供在线浏览商品、加入购物车及模拟结算的友好界面。
• 提供后台管理功能：为管理员提供员工、订单、会员及数据统计的管理能力。
• 确保系统安全与性能：通过权限控制保障数据安全，并保证系统响应速度。

二、 系统总体设计

2.1 技术架构选型

• 后端技术栈：采用经典的SSM框架。Spring作为核心容器，负责业务对象管理和事务控制；Spring MVC处理Web层请求与响应；MyBatis作为ORM框架，负责与MySQL数据库交互，兼顾灵活性与性能。
• 前端技术栈：采用Vue.js渐进式框架，配合Element UI组件库，构建响应式、组件化的用户界面。通过Axios实现前后端数据异步交互。
• 开发模式：前后端分离开发。后端提供RESTful API接口，前端独立部署，通过接口调用数据，提高了开发效率和系统可维护性。

2.2 系统功能模块设计

系统主要分为两大模块：前台商品售卖模块与后台管理模块。

2.2.1 前台售卖模块

• 用户界面：展示便利店品牌形象（绿洲便利店）。
• 商品展示：分类展示商品，支持按名称、价格搜索。
• 购物车功能：用户可添加、删除、修改选购商品数量。
• 模拟下单：提供完整的下单流程界面（非真实支付），生成订单概要。

2.2.2 后台管理模块

• 管理员登录与权限管理：实现基于角色的访问控制。
• 商品管理：对商品进行CRUD操作，设置商品状态与促销信息。
• 库存管理：记录采购入库、销售出库，设置库存阈值并预警。
• 订单管理：查看所有订单详情及状态。
• 会员管理：管理会员信息与积分。
• 数据统计：提供销售数据、热门商品等可视化图表。

2.3 数据库设计

根据系统需求，设计了核心数据表，包括：用户表（管理员）、商品分类表、商品信息表、库存记录表、订单表、订单明细表、会员表等。表之间通过外键关联，确保数据的一致性和完整性。

三、 系统关键功能实现

3.1 前后端数据交互

前端Vue组件通过Axios发送HTTP请求（GET/POST/PUT/DELETE）至后端Spring MVC定义的Controller。Controller调用Service层处理业务逻辑，Service层再通过MyBatis Mapper接口操作数据库。返回的数据统一封装为JSON格式。

3.2 商品展示与搜索功能

前端首页调用商品列表API，后端通过MyBatis动态SQL实现多条件查询（如分类、关键词），并将结果分页返回。前端利用Vue的v-for指令循环渲染商品卡片。

3.3 购物车状态管理

利用Vuex进行前端状态管理，将购物车商品信息（ID、名称、数量、单价）存储在state中，确保在多个组件间状态同步。购物车数据可临时保存在浏览器本地存储（LocalStorage）中。

3.4 后台权限控制

在Spring Security或自定义拦截器中，通过验证管理员登录态和角色权限，对访问后台API的请求进行过滤，防止未授权访问。

四、 网页设计与界面实现

4.1 设计理念

界面设计遵循“简洁、直观、高效”的原则，贴合便利店清新、便捷的品牌形象。主色调采用绿色系，象征“绿洲”的自然与活力。

4.2 主要界面

• 前台首页：清晰的产品分类导航栏、轮播广告图、商品瀑布流展示。
• 商品详情页：展示大图、价格、规格及详情描述，设有加入购物车按钮。
• 购物车页面：列表展示所选商品，支持数量修改和金额实时计算。
• 后台仪表盘：采用卡片和图表（如ECharts）直观展示关键业务数据。
• 表单页面：如商品编辑表单，使用Element UI的Form组件，并实施表单验证。

五、 与展望

本项目成功设计并实现了一个功能相对完整的便利店商品售卖系统。通过SSM与Vue.js的结合，构建了一个层次清晰、易于扩展的Web应用。系统实现了从商品管理到前端售卖的核心流程，为便利店数字化运营提供了基础框架。

未来展望：
1. 功能增强：集成移动支付接口、实现真实的在线支付与配送流程。
2. 技术升级：后端可考虑迁移至Spring Boot以简化配置；引入Redis缓存提升性能。
3. 用户体验优化：开发微信小程序或APP端，实现多终端覆盖。
4. 智能化扩展：引入简单的数据分析模型，为进货、促销提供智能建议。

本系统作为计算机专业的毕业设计，不仅综合运用了Java Web和现代前端的主流技术，更具备了明确的商业应用场景和进一步开发的潜力，达到了理论与实践相结合的教学目标。