摘要

隨著電子商務和線下實體零售的深度融合，傳統便利店的管理與銷售模式正面臨著數字化轉型的迫切需求。為提高商品管理效率、優化購物體驗并實現線上線下數據同步，本項目設計并實現了一個基于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和現代前端的主流技術，更具備了明確的商業應用場景和進一步開發的潛力，達到了理論與實踐相結合的教學目標。