隨著寵物經濟的蓬勃發展和移動互聯網的深度普及，開發一款功能完善、用戶體驗優良的愛寵用品銷售App具有廣闊的市場前景和實際應用價值。本畢業設計旨在設計并實現一個采用前后端分離架構的愛寵用品銷售App，后端使用SpringBoot框架，前端使用Vue.js框架，為用戶提供便捷、高效的線上寵物用品購物體驗。

一、 系統概述與設計目標
本系統旨在構建一個B2C（Business-to-Customer）模式的電子商務平臺，核心目標是實現寵物用品的在線展示、搜索、購買、支付及訂單管理等功能。系統主要分為前臺用戶端和后臺管理端。用戶端面向普通消費者，提供商品瀏覽、加入購物車、下單、個人中心等功能；管理端面向平臺管理員，提供商品管理、訂單處理、用戶管理、數據統計等功能。

設計目標包括：

1. 實現穩定高效的后端服務，保障數據安全與業務邏輯正確性。
2. 構建響應式、交互友好的前端界面，提升用戶體驗。
3. 確保系統具有良好的可擴展性和可維護性，便于后續功能迭代。

二、 系統架構與技術選型
本項目采用前后端分離的開發模式，這是現代Web應用的主流架構。

1. 后端技術棧（Server-side）:

• 核心框架: SpringBoot。它簡化了Spring應用的初始搭建和開發過程，提供了自動配置、嵌入式Tomcat等特性，能快速構建獨立、生產級的應用。

• 持久層: MyBatis-Plus。作為MyBatis的增強工具，它提供了強大的CRUD操作和條件構造器，簡化了數據庫操作。

• 數據庫: MySQL。成熟穩定的關系型數據庫，用于存儲用戶信息、商品數據、訂單記錄等。

• 安全與認證: Spring Security + JWT（JSON Web Token）。用于實現用戶登錄認證和權限控制，保障接口安全。

• 其他: Maven（項目構建）、Redis（緩存、會話管理）、Swagger（API文檔生成）。

1. 前端技術棧（Client-side）:

• 核心框架: Vue.js。一套用于構建用戶界面的漸進式JavaScript框架，具有輕量、易上手、數據驅動視圖等特點，非常適合開發單頁面應用（SPA）。

• UI組件庫: Element-UI 或 Vant。提供豐富的預制組件，加速開發進程，保證界面風格統一美觀。

• 狀態管理: Vuex。用于集中管理所有組件的狀態，解決組件間通信的復雜性。

• 路由管理: Vue Router。實現前端路由跳轉，構建SPA。

• 網絡請求: Axios?；赑romise的HTTP客戶端，用于與后端RESTful API進行數據交互。

• 構建工具: Webpack（通常由Vue CLI集成）。

1. 開發與部署環境:

• 開發工具: IntelliJ IDEA（后端）、Visual Studio Code（前端）。

• 版本控制: Git。

• 部署: 后端可打包為JAR文件，部署至云服務器（如阿里云ECS）；前端項目構建為靜態文件，部署至Nginx或對象存儲服務（如阿里云OSS）。

三、 系統功能模塊設計

1. 用戶模塊: 注冊、登錄（含手機驗證碼）、個人信息管理、收貨地址管理。
2. 商品模塊: 商品分類展示、商品詳情頁（圖文、規格、評價）、商品搜索與篩選（按分類、價格、品牌等）。
3. 購物車模塊: 添加/刪除商品、修改數量、商品選中結算。
4. 訂單模塊: 訂單創建（基于購物車）、在線支付集成（模擬或對接支付寶/微信支付沙箱）、訂單狀態查詢（待付款、待發貨、待收貨、已完成）、訂單評價。
5. 后臺管理模塊（獨立前端項目或集成于同一項目但權限隔離）:

• 儀表盤：關鍵數據概覽。

• 商品管理：商品的上架、下架、編輯、庫存管理。

• 訂單管理：查看訂單詳情、處理發貨、退款等。

• 用戶管理：查看用戶列表、禁用/啟用賬戶。

• 系統管理：輪播圖管理、分類管理。

四、 數據庫設計
數據庫設計需遵循規范化原則，核心表包括：

• 用戶表(user): 用戶ID、用戶名、密碼（加密）、手機號、頭像等。
• 商品分類表(category): 分類ID、分類名、父分類ID。
• 商品表(product): 商品ID、名稱、描述、價格、庫存、分類ID、詳情圖等。
• 購物車表(cart): 記錄ID、用戶ID、商品ID、商品數量、選中狀態。
• 訂單表(orders): 訂單ID、用戶ID、總金額、狀態、收貨地址、創建時間。
• 訂單項表(order_item): 關聯訂單與商品，記錄商品快照、數量、單價。
• 收貨地址表(address): 地址ID、用戶ID、聯系人、電話、詳細地址。

五、 關鍵技術與實現難點

1. 前后端數據交互: 定義清晰的RESTful API接口規范，使用JSON格式傳輸數據。前端通過Axios發起請求，后端使用@RestController返回統一格式的響應（如包含code, message, data）。
2. 用戶認證與授權: 用戶登錄成功后，后端生成JWT令牌返回給前端。前端后續請求在HTTP頭（Authorization）中攜帶該令牌。后端通過攔截器（Interceptor）或過濾器（Filter）驗證令牌有效性并解析用戶信息。Spring Security用于配置訪問路徑的權限規則。
3. 購物車狀態管理: 購物車數據可設計為登錄后同步（存儲于數據庫），或結合本地存儲（localStorage）在未登錄時暫存，登錄后合并。Vuex可管理前端的購物車狀態，保證多組件間數據同步。
4. 支付流程: 畢業設計中可模擬支付流程，或使用支付寶/微信支付提供的沙箱環境進行集成測試，實現從下單、調用支付接口到接收異步通知更新訂單狀態的完整閉環。
5. 圖片上傳與存儲: 商品圖片等文件上傳可使用第三方云存儲服務（如阿里云OSS），后端提供簽名生成接口，前端直傳至云存儲，數據庫僅保存文件URL，減輕服務器壓力。

六、 軟硬件環境要求

1. 軟件開發環境:

• 操作系統：Windows 10/11 或 macOS / Linux。

• JDK：版本1.8或以上。

• Node.js：版本14.x或以上，配套npm或yarn包管理器。

• MySQL：版本5.7或8.0。

• IDE：如上文所述。

• 瀏覽器：Chrome（用于前端調試）。

1. 硬件環境:

• 開發機：建議配置4核CPU、8GB以上內存、固態硬盤，確保開發工具和多服務同時運行的流暢性。

• 服務器（部署）: 最低配置1核2GB的云服務器（如學生機），用于部署后端應用、數據庫和Nginx。生產環境需根據預估訪問量提升配置。

七、
本畢業設計通過結合SpringBoot和Vue.js的技術優勢，設計并實現了一個功能相對完整的愛寵用品銷售App。前后端分離的架構使得開發職責清晰，提高了開發效率，也便于團隊協作。系統涵蓋了電商的核心業務流程，并考慮了安全性、擴展性和用戶體驗。通過此項目的實踐，能夠全面鍛煉和展示學生在Java后端開發、Vue.js前端開發、數據庫設計、系統集成與部署等方面的綜合能力，符合計算機專業畢業設計的要求與目標。后續可在此基礎上擴展更多功能，如社交分享、智能推薦、寵物社區等，以增強平臺粘性。