SpringBoot+Vue外卖项目开发实战与问题解决

1. 苍穹外卖项目开发实战笔记作为一名长期奋战在一线的Java开发者最近在参与一个外卖平台项目时遇到了不少典型问题。这里记录下从环境搭建到前后端联调过程中踩过的坑和解决方案希望能给同样在做类似项目的朋友一些参考。这个项目采用常见的SpringBootVue技术栈数据库用MySQL中间用Nginx做反向代理。开发过程中从Git仓库搭建、数据库配置到接口文档管理每个环节都有值得注意的技术细节。下面我就按实际开发流程把关键问题和解决方法整理出来。2. 开发环境搭建与初始化2.1 Git仓库配置与SSL问题解决项目启动第一件事就是建立版本控制。我习惯用Git做代码管理但在初始化远程仓库时遇到了第一个坑git remote add origin https://git.xxx.com/xxx/sky-takeout.git执行推送时出现SSL证书错误SSL certificate problem: unable to get local issuer certificate。这是因为Git默认对HTTPS仓库地址进行SSL验证而内部Git服务可能使用自签名证书。解决方案有三种彻底禁用SSL验证不安全git config --global http.sslVerify false改用HTTP协议不推荐git remote set-url origin http://git.xxx.com/xxx/sky-takeout.git推荐方案仅对当前仓库禁用SSL安全且精准git config http.sslVerify false提示生产环境建议配置正确的CA证书临时方案仅适用于开发环境2.2 数据库环境搭建技巧导师提供的SQL文件直接用IDEA打开执行是个好方法但有几个细节要注意连接配置检查确保application.yaml中的数据库连接信息正确特别检查时区设置建议统一用UTCspring: datasource: url: jdbc:mysql://localhost:3306/sky_takeout?useSSLfalseserverTimezoneUTC username: root password: yourpasswordSQL文件执行顺序先执行DDL建表语句再执行DML初始化数据最后执行索引和约束常见问题表名大小写敏感问题Linux下MySQL默认区分字符集不一致导致中文乱码建议统一utf8mb43. 前后端联调实战3.1 登录功能卡顿问题排查联调时最典型的问题就是前端登录一直转圈圈。经过排查发现几个常见原因数据库连接失败检查application.yaml配置测试数据库连通性telnet localhost 3306跨域问题前端请求地址与后端不匹配解决方案配置CORS或使用Nginx反向代理密码加密处理前端传输的密码需要MD5加密后端验证时也要同样处理DigestUtils.md5DigestAsHex(password.getBytes());3.2 Nginx反向代理配置详解前后端分离项目最常见的架构就是通过Nginx做反向代理。我的配置如下server { listen 80; server_name local.sky-takeout.com; # 前端静态资源 location / { root /www/sky-takeout-fe; index index.html; try_files $uri $uri/ /index.html; } # 后端API代理 location /api/ { proxy_pass http://localhost:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } # WebSocket代理 location /ws/ { proxy_pass http://localhost:8080/ws/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; } }关键配置说明try_files解决Vue路由刷新404问题/api/路径重写确保后端接收正确路径WebSocket需要特殊协议升级头4. 接口文档管理实践4.1 YApi与Swagger对比选择项目中我们同时使用了YApi和Swagger两者的定位和用法有本质区别特性YApiSwagger文档生成方式手动/导入自动生成维护成本较高较低测试功能强大基础适合场景前期设计/团队协作开发时实时文档实际使用建议项目初期用YApi做接口设计开发中用Swagger保持文档同步测试阶段用YApi做接口测试4.2 Swagger集成配置SpringBoot集成Swagger的完整配置Configuration EnableSwagger2 public class SwaggerConfig { Bean public Docket createRestApi() { return new Docket(DocumentationType.SWAGGER_2) .apiInfo(apiInfo()) .select() .apis(RequestHandlerSelectors.basePackage(com.sky.controller)) .paths(PathSelectors.any()) .build(); } private ApiInfo apiInfo() { return new ApiInfoBuilder() .title(苍穹外卖API文档) .version(1.0) .build(); } }常见问题页面无法加载检查是否添加了资源映射Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(swagger-ui.html) .addResourceLocations(classpath:/META-INF/resources/); }接口参数不显示检查是否使用了ApiModel等注解5. 数据架构设计思考5.1 DTO与Entity的合理使用项目中大量使用了DTOData Transfer Object模式与数据库Entity形成明确分层// Entity - 对应数据库表 public class User { private Long id; private String username; private String password; // 数据库存储加密后的密码 // getters/setters } // DTO - 用于前后端传输 public class UserDTO { private String username; private String plainPassword; // 前端传输的明文密码 // getters/setters }使用场景对比场景EntityDTO数据库操作√×接口参数/返回值×√业务逻辑处理有限使用主要使用敏感信息处理存储加密数据可包含明文经验DTO应该根据不同的业务场景设计比如UserLoginDTO、UserRegisterDTO等避免一个大DTO包含所有字段5.2 密码安全处理方案密码安全是外卖系统的重中之重我们的处理流程前端MD5加密原始密码// Vue示例 import md5 from js-md5; const encryptedPwd md5(password);后端二次加密存储// 加密逻辑 String salt UUID.randomUUID().toString(); String dbPassword DigestUtils.md5DigestAsHex((encryptedPwd salt).getBytes());验证流程// 登录验证 public boolean checkPassword(String inputPwd, String dbPwd, String salt) { String encryptedInput DigestUtils.md5DigestAsHex( (DigestUtils.md5DigestAsHex(inputPwd.getBytes()) salt).getBytes()); return encryptedInput.equals(dbPwd); }6. 开发中的典型问题排查6.1 接口响应慢问题分析在开发过程中遇到几个接口响应特别慢的情况通过以下步骤排查启用SQL日志logging: level: org.hibernate.SQL: debug org.hibernate.type.descriptor.sql.BasicBinder: trace发现N1查询问题使用ManyToOne等关联查询时容易产生解决方案EntityGraph(attributePaths {orderItems}) ListOrder findByUserId(Long userId);慢SQL优化添加合适索引重构复杂查询6.2 事务管理实践外卖系统中的订单处理需要特别注意事务管理Transactional public void placeOrder(OrderDTO orderDTO) { // 1. 扣减库存 reduceInventory(orderDTO); // 2. 创建订单 Order order createOrder(orderDTO); // 3. 支付预处理 paymentService.prepare(order); // 4. 发送MQ消息 rabbitTemplate.convertAndSend(order.create, order); }事务设计要点事务粒度要合理不宜过大注意异常处理RuntimeException才会回滚分布式事务考虑最终一致性7. 项目经验总结经过这个项目的实战有几个深刻体会文档先行接口文档一定要在编码前确定好后期修改成本很高。我们后来采用Swagger YApi双轨制设计阶段用YApi开发时用Swagger保持同步。环境隔离开发、测试、生产环境一定要严格隔离。我们曾因开发环境配置污染测试环境导致严重Bug。密码安全密码加密不能只在后端做前端也要有基本保护。我们的方案是前端MD5 后端盐值加密即使抓包也难破解。Nginx配置反向代理的路径处理要特别注意/api/的斜杠问题就坑了我们半天。建议统一规范前端请求统一加/api前缀Nginx配置proxy_pass结尾加/后端Controller用RequestMapping(/api)