本文檔旨在詳細闡述“星之語”明星周邊產品銷售網站的全棧開發過程，涵蓋系統設計、技術實現、源碼結構、部署方案以及設計理念。

一、 項目概述

“星之語”是一個集明星資訊、粉絲社區與周邊商品銷售于一體的綜合性電商平臺。項目采用前后端分離架構，后端基于SpringBoot構建RESTful API，管理后臺前端使用Vue.js，而面向用戶的多端應用（小程序、H5、App）則通過UniApp實現，以達到“一次開發，多端部署”的目標。

二、 系統架構設計

1. 技術棧

• 后端：SpringBoot 2.x + MyBatis-Plus + MySQL + Redis + JWT + Spring Security

• 管理后臺前端：Vue.js 3 + Element Plus + Axios + Vue Router + Pinia

• 用戶端前端：UniApp + Vue.js 3 + uView UI + Pinia

2. 架構圖
用戶通過UniApp編譯的H5/小程序/App訪問 -> Nginx反向代理 -> SpringBoot應用服務器 -> MySQL（主數據）、Redis（緩存/會話）。管理后臺通過瀏覽器直接訪問Vue構建的SPA，與后端API交互。

三、 核心功能模塊設計與實現

1. 用戶系統

• 設計：支持手機號/郵箱注冊登錄，集成JWT進行無狀態認證，Spring Security控制權限。用戶角色分為普通用戶、VIP用戶、管理員。

• 實現：UserController提供注冊、登錄、信息修改接口；JwtFilter攔截請求驗證Token；用戶密碼經BCrypt加密存儲。

1. 商品與訂單模塊

• 設計：商品分類（按明星、品類）、詳情展示、庫存管理、購物車、下單、支付（模擬/集成微信支付、支付寶）、訂單狀態流。

• 實現：ProductController, OrderController處理核心業務；Redis緩存熱門商品；使用樂觀鎖處理庫存扣減；訂單表與商品、用戶表關聯。

1. 社區與資訊模塊

• 設計：明星動態發布、粉絲圈帖子、評論點贊、資訊瀏覽。

• 實現：PostController, CommentController管理內容；實現分頁查詢；支持圖片上傳至OSS或本地。

1. 多端適配（UniApp）

• 設計：一套Vue代碼，通過條件編譯適配微信小程序、H5及App端。

• 實現：使用uni.request調用后端統一API；頁面路由使用uni-app自帶路由系統；UI組件使用多端兼容的uView庫。

四、 數據庫設計

關鍵表包括：用戶表(user)、商品表(product)、訂單表(order)、訂單詳情表(order_item)、商品分類表(category)、帖子表(post)、評論表(comment)等。表結構設計遵循第三范式，并建立了適當的索引以優化查詢性能。

五、 源碼結構說明 (lw - 論文/項目參考)

` backend-star-zone/ # SpringBoot后端 ├── src/main/java/com.starzone/ │ ├── controller/ # 控制器層 │ ├── service/ # 業務邏輯層 │ ├── mapper/ # 數據訪問層（MyBatis-Plus） │ ├── entity/ # 實體類 │ ├── config/ # 配置類（安全、Redis等） │ └── util/ # 工具類（JWT、OSS等） ├── resources/ │ ├── application.yml # 主配置文件 │ └── mapper/ # XML映射文件

admin-frontend/ # Vue管理后臺
├── src/
│ ├── views/ # 頁面組件
│ ├── router/ # 路由
│ ├── store/ # 狀態管理(Pinia)
│ ├── api/ # 接口封裝
│ └── components/ # 公共組件

uni-app-frontend/ # UniApp用戶端
├── pages/ # 頁面文件
├── static/ # 靜態資源
├── store/ # 狀態管理
├── api/ # 接口封裝
└── uni.scss # 樣式配置
`

六、 部署文檔

1. 環境準備：服務器安裝JDK8+、MySQL8、Redis、Nginx、Node.js。
2. 后端部署：

• 將SpringBoot項目打包為star-zone-backend.jar。

• 修改application-prod.yml中的生產環境數據庫、Redis配置。

• 使用命令 nohup java -jar star-zone-backend.jar --spring.profiles.active=prod & 啟動。

1. 前端部署：

• 管理后臺：在admin-frontend目錄下執行npm run build生成dist文件夾，將其內容部署到Nginx指定目錄，并配置代理指向后端API地址。

• UniApp H5：在HBuilderX中發行到H5，同樣將生成的文件部署到Nginx。

• 小程序：在HBuilderX中發行到微信小程序，用微信開發者工具上傳審核。

4. Nginx配置示例：
`nginx
server {
listen 80;
servername your-domain.com;
location /api/ { # 后端API代理
proxypass http://localhost:8080/;
}
location /admin { # 管理后臺靜態資源
alias /path/to/admin/dist/;
tryfiles $uri $uri/ /admin/index.html;
}
location / { # H5主站
alias /path/to/uniapp-h5/dist/;
tryfiles $uri $uri/ /index.html;
}
}
`

七、 網頁與網站設計講解

1. 設計理念：以“星光璀璨”為主題，采用深色系（如深藍、紫色）搭配明亮點綴色，營造時尚、潮流的粉絲文化氛圍。UI設計強調明星元素的融入，如明星簽名字體、代表性符號等。
2. 用戶體驗(UX)：

• 用戶端(UniApp)：底部導航欄清晰劃分“首頁”、“商城”、“社區”、“我的”。首頁輪播圖推送熱門商品與資訊，商品列表采用卡片流布局，支持下拉刷新上拉加載。購物流程力求簡潔。

• 管理后臺(Vue)：采用側邊欄導航，布局清晰。提供數據看板，以及對商品、訂單、用戶、內容的CRUD管理界面，操作高效直觀。

1. 響應式與多端適配：UniApp本身處理了多端差異，但需注意組件兼容性。管理后臺利用Element Plus的布局組件實現響應式，確保在桌面端不同分辨率下良好顯示。

八、

“星之語”項目完整實踐了從設計、全棧開發到部署上線的全過程。通過SpringBoot保障了后端服務的穩健與高效，Vue.js帶來了管理后臺的現代交互體驗，而UniApp則極大地提升了面向粉絲用戶的多端開發效率。此項目可作為學習現代Web全棧技術，特別是跨平臺應用開發的綜合性實踐案例。