SpringBoot+Vue3厨艺平台全栈开发实战

1. 项目概述厨艺交流平台的技术栈选型这个基于SpringBoot2Vue3MyBatis-PlusMySQL8.0的厨艺交流平台本质上是一个典型的Java Web全栈项目。我去年为某烹饪培训机构开发过类似系统当时选型时特别考虑了前后端分离架构的协同效率问题。前端采用Vue3的组合式API开发体验确实比Options API流畅不少特别是配合TypeScript后组件复用和类型检查效率提升明显。后端选择SpringBoot2.x版本而非最新的3.x主要是考虑到国内企业环境对JDK17的普及率还不够高而SpringBoot2.x对JDK8的完美支持更符合实际生产需求。数据库方面MySQL8.0相比5.7版本在JSON支持、窗口函数等方面的增强特别适合存储菜谱这种半结构化数据。比如我们可以把食材用量、烹饪步骤这些动态内容直接存为JSON格式省去了复杂的关联表设计。2. 核心功能模块设计2.1 用户系统实现方案用户模块采用JWTSpring Security的认证方案这里有个实际开发中的经验不要在JWT token中存储敏感信息。我见过有开发者把用户权限列表全塞进token这会导致token体积过大影响性能。正确的做法是只存userId和必要的基本信息权限数据通过后端接口实时获取。密码加密推荐使用BCryptPasswordEncoder这是Spring Security默认提供的加密器。千万别用MD5或SHA-1这些已经被证明不安全的算法最近某知名美食APP的用户数据泄露事件就是血淋淋的教训。// 用户注册逻辑示例 PostMapping(/register) public Result register(RequestBody User user) { if(userService.existsUsername(user.getUsername())){ return Result.error(用户名已存在); } user.setPassword(passwordEncoder.encode(user.getPassword())); user.setCreateTime(LocalDateTime.now()); userService.save(user); return Result.success(); }2.2 菜谱管理模块设计菜谱实体设计是核心难点需要考虑多种数据结构基础信息标题、简介、难度等用常规字段存储食材清单建议用JSON类型字段MySQL8.0支持步骤图文用单独的表关联存储MyBatis-Plus的TableField(typeHandler JacksonTypeHandler.class)注解可以完美处理JSON字段映射Data TableName(autoResultMap true) public class Recipe { private Long id; private String title; TableField(typeHandler JacksonTypeHandler.class) private ListIngredient ingredients; // 自动JSON序列化 TableField(typeHandler JacksonTypeHandler.class) private ListStep steps; }2.3 社区互动功能实现评论系统采用无限级回复设计数据库表需要包含parent_id字段标识父评论tree_path字段记录评论路径如0,1,3表示三级回复前端展示时Vue3的递归组件非常适合渲染这种树形结构template div v-forcomment in comments :keycomment.id CommentItem :commentcomment/ CommentList v-ifcomment.replies :commentscomment.replies/ /div /template3. 关键技术实现细节3.1 文件上传与CDN加速图片上传是厨艺平台的高频操作建议采用前端用axios实现分片上传后端用SpringBoot的MultipartFile接收存储到阿里云OSS等对象存储服务关键配置示例# application.yml spring: servlet: multipart: max-file-size: 10MB max-request-size: 20MB3.2 高性能查询优化菜谱列表页需要处理多种查询条件按分类筛选按食材搜索按烹饪时间排序MyBatis-Plus的Wrapper条件构造器可以优雅地实现动态SQLpublic PageRecipe queryRecipes(RecipeQuery query) { return recipeMapper.selectPage(new Page(query.getPage(), query.getSize()), new QueryWrapperRecipe() .like(StringUtils.isNotBlank(query.getKeyword()), title, query.getKeyword()) .eq(query.getCategoryId() ! null, category_id, query.getCategoryId()) .orderByDesc(query.isHot() ? view_count : create_time) ); }3.3 实时消息通知采用WebSocket实现以下实时功能新评论通知菜谱被收藏提醒系统公告推送SpringBoot集成WebSocket的核心配置Configuration EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(new NotificationHandler(), /ws/notifications) .setAllowedOrigins(*); } }4. 项目部署实战4.1 生产环境部署方案推荐使用Docker Compose编排服务version: 3 services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: root volumes: - ./mysql/data:/var/lib/mysql backend: build: ./backend ports: - 8080:8080 depends_on: - mysql frontend: build: ./frontend ports: - 80:804.2 性能监控配置SpringBoot ActuatorPrometheusGrafana监控方案添加依赖dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-actuator/artifactId /dependency dependency groupIdio.micrometer/groupId artifactIdmicrometer-registry-prometheus/artifactId /dependency配置application.ymlmanagement: endpoints: web: exposure: include: health,metrics,prometheus metrics: tags: application: cooking-platform5. 常见问题排查指南5.1 跨域问题解决方案开发阶段常见跨域错误需配置Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(GET, POST, PUT, DELETE) .allowCredentials(true) .maxAge(3600); } }5.2 MyBatis-Plus主键冲突使用雪花算法生成ID时需注意Data public class User { TableId(type IdType.ASSIGN_ID) // 雪花算法 private Long id; //... }5.3 Vue3路由缓存问题使用key属性强制组件刷新router-view v-slot{ Component } component :isComponent :key$route.fullPath/ /router-view6. 项目优化建议6.1 缓存策略优化菜谱详情使用Redis缓存Cacheable(value recipe, key #id) public Recipe getById(Long id) { return getById(id); }热门列表定时更新Scheduled(cron 0 0/30 * * * ?) public void updateHotRecipes() { // 查询并更新缓存 }6.2 前端性能优化路由懒加载const routes [ { path: /recipe/:id, component: () import(./views/RecipeDetail.vue) } ]图片懒加载img v-lazyimageUrl alt菜谱图片6.3 安全加固措施接口防刷RateLimiter(value 10, key #userId) public Result addComment(Comment comment) { //... }XSS防护Bean public FilterRegistrationBeanXssFilter xssFilter() { FilterRegistrationBeanXssFilter registration new FilterRegistrationBean(); registration.setFilter(new XssFilter()); registration.addUrlPatterns(/*); return registration; }7. 开发环境搭建指南7.1 后端环境配置JDK1.8环境变量配置# 在~/.bashrc或~/.zshrc中添加 export JAVA_HOME/path/to/jdk export PATH$JAVA_HOME/bin:$PATHMaven镜像加速!-- settings.xml -- mirror idaliyunmaven/id mirrorOf*/mirrorOf name阿里云公共仓库/name urlhttps://maven.aliyun.com/repository/public/url /mirror7.2 前端环境准备Node.js版本管理nvm install 16.14.0 nvm use 16.14.0Yarn淘宝源配置yarn config set registry https://registry.npmmirror.com7.3 数据库初始化MySQL8.0配置优化# my.cnf [mysqld] default_authentication_pluginmysql_native_password character-set-serverutf8mb4 collation-serverutf8mb4_unicode_ci8. 项目文档编写规范8.1 API文档生成使用Swagger3Knife4jConfiguration EnableOpenApi public class SwaggerConfig { Bean public Docket api() { return new Docket(DocumentationType.OAS_30) .apiInfo(apiInfo()) .select() .apis(RequestHandlerSelectors.basePackage(com.cooking.platform)) .paths(PathSelectors.any()) .build(); } }8.2 数据库文档推荐使用screw工具自动生成plugin groupIdcn.smallbun.screw/groupId artifactIdscrew-maven-plugin/artifactId version1.0.5/version /plugin8.3 部署手册要点必须包含环境要求清单配置文件修改说明启动停止脚本示例常见问题解决方案9. 扩展功能开发思路9.1 智能推荐功能基于用户行为的协同过滤算法public ListRecipe recommendRecipes(Long userId) { // 1. 获取用户历史行为 // 2. 计算相似用户 // 3. 返回推荐结果 }9.2 烹饪视频功能集成云点播服务流程前端使用vue-video-player组件后端生成上传签名转码回调处理9.3 移动端适配方案响应式布局使用Vue3的useMediaQueryPWA支持配置workbox插件微信小程序通过uni-app转换10. 项目二次开发建议10.1 代码结构优化推荐分层方式src/ ├── main/ │ ├── java/ │ │ └── com.cooking.platform/ │ │ ├── config/ │ │ ├── controller/ │ │ ├── service/ │ │ ├── mapper/ │ │ └── model/ │ └── resources/ │ ├── mapper/ │ └── application.yml10.2 技术债务处理常见需要改进的点日志规范统一异常处理完善单元测试补充10.3 企业级改造方向接入统一认证中心增加分布式事务支持实现灰度发布能力在开发类似项目时我最大的体会是一定要先做好技术选型的验证工作。比如Vue3和SpringBoot2的版本兼容性不同MySQL驱动版本对8.0新特性的支持程度等这些最好在项目初期就通过原型验证。另外厨艺类平台要特别注意图片和视频的处理性能建议在架构设计阶段就考虑好CDN和分布式存储的方案。