核心功能實現
1. 類別導航動態加載
-
前端實現：
// 加載一級分類 $.ajax({url: '/category/showFirstMenu?pid=0',success: function(resp) {resp.forEach(item => {$(".index-menu").append(`<li onmouseover="showSecondMenu(${item.id})">${item.name}</li>`);});} });// 加載二級分類 function showSecondMenu(pid) {$.ajax({url: `/category/showFirstMenu?pid=${pid}`,success: function(resp) {$(".second-menu").empty();resp.forEach(item => {$(".second-menu").append(`<li>${item.name}</li>`);});}}); } -
后端實現：
@RestController @RequestMapping("/category") public class CategoryController {@GetMapping("/showFirstMenu")public List<Category> showFirstMenu(Integer pid) {return categoryService.getByParentId(pid);} }
2. Banner圖輪播與緩存優化
-
Redis集成：
@RequestMapping("/showBanner") public List<String> showBanner() {// 檢查緩存if (redisTemplate.hasKey("banner")) {return redisTemplate.opsForList().range("banner", 0, -1);} else {// 數據庫查詢并緩存List<Banner> banners = bannerService.getAll();List<String> urls = banners.stream().map(Banner::getImgUrl).collect(Collectors.toList());redisTemplate.opsForList().rightPushAll("banner", urls);return urls;} }
3. 商品展示模塊
-
熱門與新品查詢：
<!-- 熱門商品 --> <select id="getHotProduct" resultType="Product">SELECT * FROM t_product ORDER BY sales DESC LIMIT 4 </select><!-- 最新商品 --> <select id="getNewProduct" resultType="Product">SELECT * FROM t_product ORDER BY create_time DESC LIMIT 4 </select>
二、云存儲解決方案（阿里云OSS）
1. 配置與上傳流程
-
依賴引入：
<dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.15.1</version> </dependency> -
文件上傳接口：
@PostMapping("/upload") public String upload(@RequestParam("file") MultipartFile file) {String endpoint = "oss-cn-hangzhou.aliyuncs.com";OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);ossClient.putObject("your-bucket", "folder/" + file.getOriginalFilename(), file.getInputStream());return "https://your-bucket.oss-cn-hangzhou.aliyuncs.com/folder/" + file.getOriginalFilename(); }
2. 前端集成
<!-- 文件上傳表單 -->
<form action="/upload" method="post" enctype="multipart/form-data"><input type="file" name="file"><button type="submit">上傳</button>
</form><!-- 圖片展示 -->
<img src="https://your-bucket.oss-cn-hangzhou.aliyuncs.com/folder/image.jpg">三、性能優化策略
1. 緩存機制對比
| 場景 | 技術選型 | 優勢 |
|---|---|---|
| 高頻靜態數據 | Redis | 毫秒級響應，支持數據持久化 |
| 動態查詢結果 | MyBatis二級緩存 | 減少數據庫壓力，自動失效機制 |
2. SQL優化技巧
-
索引優化：為
parent_id、sales、create_time字段添加索引 -
分頁查詢：使用
LIMIT offset, size避免全表掃描 -
避免
SELECT *：明確指定查詢字段
四、常見問題解決方案
1. 跨域問題
@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowedMethods("GET", "POST");}
}2. 圖片上傳失敗排查
-
OSS配置檢查：
-
Endpoint是否正確
-
Bucket權限是否為公共讀
-
AccessKey是否有效
-
-
代碼調試：
try {ossClient.putObject(...); } catch (OSSException e) {log.error("OSS錯誤: {}", e.getErrorMessage()); } finally {ossClient.shutdown(); // 確保關閉連接 }
五、項目部署建議
1. 環境分離
| 環境 | 數據庫 | Redis | OSS Bucket |
|---|---|---|---|
| 開發 | 本地MySQL | 本地Docker實例 | 測試Bucket |
| 生產 | 阿里云RDS | 云數據庫Redis | 生產Bucket |
2. 監控與日志
-
Spring Boot Actuator：集成健康檢查與性能監控
-
Logback+ELK：實現分布式日志收集與分析
