核心功能实现
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：实现分布式日志收集与分析
