🌟 美食分享平台技术博客
本文是对一个基于 Spring Boot 开发的美食分享平台项目的总结与展示，内容包括项目设计思路、技术选型、核心功能代码解析、开发过程中遇到的问题及解决方法和项目的一些亮点特色。
📌 一、项目简介
- 项目名称： DeliciousFoods 美食分享平台
- 项目类型： 基于 B/S 架构的全栈应用系统
- 目标用户： 喜爱美食、乐于分享和交流的用户群体
- 项目目标： 打造一个美食社区平台，支持用户发布美食、浏览内容、收藏菜品和互动评论，营造良好的内容创作与交流氛围。
🧰 二、技术选型与系统结构
2.1 核心技术栈
| 层级 | 技术框架/工具 |
|---|---|
| 前端 | Vue.js + Element UI |
| 后端 | Spring Boot 2.x |
| 权限控制 | Spring Security + JWT |
| 数据访问 | MyBatis Plus |
| 数据存储 | MySQL |
| 缓存优化 | Redis |
| 工具类 | Lombok、Hutool |
| 构建与依赖 | Maven |
2.2 项目模块划分
delicious-foods-admin：后台管理系统，管理员可在此维护全站数据。delicious-foods-api：后端核心业务模块，处理前端请求。common：通用模块，包含工具类、常用实体等。framework：权限控制、全局配置、异常捕获等系统框架模块。delicious-foods-vue：前端项目，采用 Vue3 进行页面开发。
2.3 系统架构简图
[浏览器] → [Nginx] → [Vue 前端界面] ←→ [Spring Boot 接口层] ←→ [MySQL / Redis]
↑
│
[JWT 实现身份认证]
🔑 三、核心功能解析
3.1 用户登录与认证
public AjaxResult login(@RequestBody LoginBody loginBody) {
LoginUser user = loginService.login(loginBody.getUsername(), loginBody.getPassword());
return AjaxResult.success(tokenService.createToken(user));
}
- 用户输入账号密码后，系统验证信息并生成 Token，返回给前端用于后续请求验证。
3.2 权限控制示例
@PreAuthorize("@ss.hasPermi('food:menu:list')")
@GetMapping("/menu/list")
- 利用注解进行接口访问控制，确保不同角色用户访问权限受限。
3.3 发布美食内容
@PostMapping("/food")
public AjaxResult add(@RequestBody Food food) {
return toAjax(foodService.insertFood(food));
}
- 用户可通过前端表单上传美食标题、内容和图片，系统保存至数据库。
3.4 图片上传接口
@PostMapping("/common/upload")
public AjaxResult uploadFile(MultipartFile file) throws Exception {
String filePath = FileUploadUtils.upload(RuoYiConfig.getUploadPath(), file);
return AjaxResult.success(filePath);
}
- 前端图片上传后，服务器生成路径并返回，用于展示或存储。
🛠 四、开发过程中遇到的问题与解决方案
4.1 Token 自动过期
- 问题现象： 登录一段时间后访问接口失败。
- 解决办法： 增加刷新机制，用户在有效期内访问将自动续签 Token。
4.2 跨域访问错误
- 问题现象： 前端调试时报 CORS 错误。
- 解决办法： 后端全局配置跨域支持，允许前端请求指定接口。
4.3 图片路径不一致
- 问题现象： 上传图片后页面无法正确显示。
- 解决办法： 统一路径规则，在后端工具类中进行路径拼接处理。
✨ 五、项目亮点与特色功能
- 🎨 页面简洁美观：结合 Element UI 与 Vue3，提升用户交互体验
- 📷 支持多图上传：用户可一次上传多张美食图片进行展示
- ⚙️ 接口结构统一：后端统一封装响应格式，提高调试效率
- 🧾 自动生成接口文档：集成 Swagger 进行 API 可视化测试
🖼 六、页面效果展示
- 登录界面展示
- 美食详情浏览页
- 后台食品数据管理表格
🚀 七、部署与运行指南
想要本地体验此项目，请按以下步骤操作：
# 启动后端服务
cd delicious-foods-api
mvn spring-boot:run
# 启动前端服务
cd delicious-foods-vue
npm install
npm run dev
确保本地安装有 Java、Node.js、MySQL 和 Redis，配置好数据库与端口映射。
