摘要

在數字化餐飲管理日益普及的今天，為經典中式快餐連鎖——沙縣小吃量身定制一套高效、易用的收銀系統，具有顯著的實際應用價值。本畢業設計旨在結合SpringBoot后端框架與Vue.js前端框架，設計并實現一套功能完備、界面友好的沙縣小吃連鎖門店收銀管理系統。該系統不僅提升了點餐與結算效率，更通過數據化管理為經營決策提供支持，是現代計算機技術在傳統餐飲行業中的一次生動實踐。

一、 系統總體設計

1.1 設計目標與原則

本系統設計遵循以下核心目標：

• 高效便捷：優化點餐、加菜、結賬流程，縮短顧客等待時間。
• 準確可靠：確保訂單、庫存、財務數據的準確性與一致性。
• 易于擴展：采用微服務思想（通過SpringBoot易于實現），便于未來功能模塊（如外賣集成、會員營銷）的添加。
• 良好體驗：為收銀員提供直觀、流暢的操作界面，降低培訓成本。

設計原則包括前后端分離、模塊化開發、數據安全及響應式布局，以適應不同尺寸的收銀終端設備。

1.2 系統架構設計

系統采用經典的前后端分離架構：

• 前端：使用Vue.js框架，配合Element-UI組件庫，構建單頁面應用（SPA）。Vue的響應式數據綁定和組件化開發，非常適合構建動態、交互性強的收銀界面。通過Axios與后端進行API通信。
• 后端：采用SpringBoot框架快速搭建RESTful API服務。它簡化了配置，內嵌Tomcat服務器，并整合了MyBatis-Plus進行數據庫操作，極大地提升了開發效率。
• 數據庫：選用MySQL，存儲菜品、訂單、庫存、員工等核心數據。
• 關鍵交互流程：顧客點餐信息由前端發起請求，經后端API處理，操作數據庫后返回結果，前端實時更新界面狀態。

1.3 核心功能模塊設計

1. 收銀終端模塊：核心操作界面，包含桌臺管理、菜品瀏覽與點餐、訂單修改、合并結算、多種支付方式（現金、掃碼）集成。
2. 后廚管理模塊：訂單自動分單打印或屏幕顯示，標記菜品制作狀態（待制作、制作中、已完成）。
3. 庫存管理模塊：關聯菜品原料，實現銷售自動扣減庫存，庫存不足預警，支持進貨登記。
4. 菜品與菜單管理：支持菜品分類（蒸餃、拌面、燉罐等）、價格管理、特價促銷設置。
5. 統計與報表模塊：生成日/月銷售報表、暢銷菜品分析、時段客流分析等。
6. 系統管理模塊：員工權限管理（收銀員、店長）、操作日志記錄。

二、 系統實現與關鍵技術

2.1 開發環境與技術棧

• 后端：Java 8/11， SpringBoot 2.x， Maven， MyBatis-Plus， JWT（身份認證）。
• 前端：Node.js， Vue 2/3， Vue Router， Vuex（狀態管理）， Element-UI， Axios。
• 數據庫：MySQL 5.7+。
• 開發工具：IntelliJ IDEA， Visual Studio Code， Navicat。

2.2 關鍵功能實現要點

• 實時收銀界面：利用Vue的響應式特性，構建可動態增刪菜品的購物車組件。菜品圖標與分類清晰展示，模擬沙縣小吃實體菜單布局。
• 訂單狀態流：使用WebSocket或定時輪詢，實現前臺收銀端與后廚顯示屏之間的訂單狀態實時同步，確保信息流暢。
• 庫存聯動：在訂單支付成功的后端邏輯中，同步調用庫存扣減服務，確保數據一致性。使用數據庫事務保證扣減操作的原子性。
• 權限控制：后端API使用Spring Security整合JWT進行接口鑒權，前端根據用戶角色動態渲染可訪問的路由和操作按鈕。

2.3 數據庫核心表設計簡述

• dish（菜品表）：存儲菜品ID、名稱、價格、分類、圖片、關聯原料等。
• order（訂單主表）：訂單ID、桌臺號、總金額、支付狀態、創建時間。
• order_item（訂單明細表）：關聯訂單ID與菜品ID，記錄數量、單價。
• inventory（庫存表）：原料ID、名稱、當前庫存量、預警閾值。
• employee（員工表）：員工信息及角色權限。

三、 電腦動畫設計在系統展示中的應用

作為畢業設計的重要展示環節，電腦動畫設計可以生動呈現系統的設計理念與操作流程：

1. 系統概念動畫：使用三維或二維動畫軟件（如Blender, After Effects），制作一段短片，從“傳統沙縣小吃門店面臨的效率挑戰”切入，過渡到“引入智能收銀系統后的煥新升級”，直觀對比變革價值。
2. 交互動畫演示：錄制系統實際運行的高清屏幕錄像，并輔以動畫特效進行重點標注和說明。例如：

• 在演示點餐流程時，用流暢的動畫箭頭和高亮效果引導視線，展示如何將“一份拌面”和“一份蒸餃”拖入購物車。

• 在展示后廚聯動時，用畫面分割動畫，同步展示前臺下單與后廚屏幕彈出新訂單的動態效果。

• 在展示數據報表時，用動畫生成柱狀圖或餅圖，形象展示“燉罐類菜品銷量占比最高”等分析結論。

1. UI/UX動效設計：在系統前端開發中，適當加入Vue的過渡動畫或CSS3動畫，提升用戶體驗。例如，菜品加入購物車時的拋物線動畫、支付成功時的彈窗祝賀動畫等，這些細節動畫也是電腦動畫設計能力的體現。

四、 與展望

本設計成功將SpringBoot與Vue.js技術棧應用于沙縣小吃收銀場景，實現了一套涵蓋點餐、結算、庫存、管理全流程的系統。通過電腦動畫技術進行可視化展示，極大地增強了畢業設計的表現力與說服力。系統不僅解決了傳統手工收銀的痛點，其架構也為未來集成線上點餐、連鎖店統一管理等功能預留了空間。該實踐表明，前沿的Web開發技術能夠有效地賦能傳統服務業，推動其向數字化、智能化轉型升級。