1. 项目背景与核心目标前后端联调并连接数据库是绝大多数毕业设计项目必经的关键环节。这个阶段往往决定了整个系统的稳定性和功能完整性。作为毕设的第三步它承接着前端界面开发和后端基础架构搭建的工作成果需要将分散的模块整合成一个有机整体。在实际开发中这个阶段最容易出现各自为战的情况——前端按自己理解的接口开发后端按自己设想的逻辑实现数据库设计又自成一派。等到联调时才发现字段不匹配、接口不一致、数据类型冲突等各种问题。我在指导学生的过程中发现约70%的延期毕业设计都卡在这个环节。2. 技术选型与准备工作2.1 基础技术栈确定根据当前主流技术趋势和教学实践我推荐以下技术组合前端Vue.js 3 Axios后端Spring Boot 2.7 MyBatis-Plus数据库MySQL 8.0这个组合的优势在于技术成熟度高社区支持完善学习曲线平缓适合毕业设计场景各组件间有成熟的整合方案2.2 开发环境配置确保所有开发成员环境一致至关重要# 前端环境 node -v # 建议v16 npm -v # 建议8 # 后端环境 java -version # JDK11 mvn -v # Maven3.6 # 数据库 mysql --version # 8.0重要提示强烈建议使用Docker统一数据库环境避免因本地配置差异导致的问题。可以共享docker-compose.yml文件确保环境一致。3. 数据库连接实现3.1 数据库设计规范在设计阶段就要考虑联调需求表字段命名采用下划线风格user_name主键统一使用id作为字段名时间字段使用datetime类型添加create_time和update_time字段示例用户表SQLCREATE TABLE user ( id bigint NOT NULL AUTO_INCREMENT, username varchar(50) NOT NULL, password varchar(100) NOT NULL, email varchar(100) DEFAULT NULL, create_time datetime DEFAULT CURRENT_TIMESTAMP, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY idx_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;3.2 Spring Boot数据库配置application.yml典型配置spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/your_db?useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 jpa: show-sql: true hibernate: ddl-auto: none mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: logic-delete-field: deleted # 逻辑删除字段 logic-not-delete-value: 0 logic-delete-value: 14. 前后端接口规范4.1 RESTful接口设计遵循以下原则资源使用复数名词/users而非/user使用HTTP方法表示操作类型状态码规范使用典型接口示例GET /users 获取用户列表 POST /users 创建用户 GET /users/{id} 获取指定用户 PUT /users/{id} 更新用户 DELETE /users/{id} 删除用户4.2 统一响应格式前端最头疼的就是处理各种不同的响应格式。建立统一格式{ code: 200, message: success, data: { // 实际数据 }, timestamp: 1630000000000 }Spring Boot实现方案Data public class ResultT implements Serializable { private Integer code; private String message; private T data; private Long timestamp; public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMessage(success); result.setData(data); result.setTimestamp(System.currentTimeMillis()); return result; } // 其他工厂方法... }5. 联调实战技巧5.1 接口文档管理强烈推荐使用Swagger或YAPISwagger配置示例Configuration EnableSwagger2 public class SwaggerConfig { Bean public Docket api() { return new Docket(DocumentationType.SWAGGER_2) .select() .apis(RequestHandlerSelectors.basePackage(com.your.package)) .paths(PathSelectors.any()) .build() .apiInfo(apiInfo()); } private ApiInfo apiInfo() { return new ApiInfoBuilder() .title(毕业设计API文档) .description(前后端联调参考文档) .version(1.0) .build(); } }访问地址http://localhost:8080/swagger-ui.html5.2 跨域问题解决开发阶段常见问题及解决方案Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .maxAge(3600); } }注意生产环境需要严格限制allowedOrigins不要使用*6. 调试与排错指南6.1 常见问题速查表问题现象可能原因解决方案404错误1. 接口路径错误2. 请求方法不匹配1. 检查Swagger文档2. 使用Postman测试500错误1. 服务端异常2. SQL错误1. 查看后端日志2. 检查MyBatis日志连接超时1. 服务未启动2. 端口被占用1. 检查服务状态2. netstat -ano数据不显示1. 字段名不匹配2. 数据未返回1. 检查JSON结构2. 使用浏览器开发者工具6.2 日志排查技巧开启MyBatis-Plus日志mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl查看完整请求链路RestController RequestMapping(/api) Slf4j public class UserController { GetMapping(/users) public ResultListUser listUsers() { log.info(获取用户列表请求到达); // 业务逻辑 } }7. 性能优化建议7.1 数据库层面添加必要索引ALTER TABLE user ADD INDEX idx_email (email);使用连接池配置spring: datasource: hikari: maximum-pool-size: 10 minimum-idle: 5 connection-timeout: 300007.2 接口层面分页查询实现GetMapping(/users) public ResultPageUser listUsers( RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize) { PageUser page new Page(pageNum, pageSize); return Result.success(userService.page(page)); }前端分页参数axios.get(/users, { params: { pageNum: 1, pageSize: 10 } })8. 项目部署联调8.1 打包与部署前端打包npm run build后端打包mvn clean package统一部署结构project/ ├── backend/ # Spring Boot jar ├── frontend/ # dist目录 └── docker-compose.yml8.2 Docker集成方案docker-compose.yml示例version: 3 services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: 123456 MYSQL_DATABASE: your_db ports: - 3306:3306 volumes: - ./mysql/data:/var/lib/mysql - ./mysql/init:/docker-entrypoint-initdb.d backend: build: ./backend ports: - 8080:8080 depends_on: - mysql frontend: image: nginx ports: - 80:80 volumes: - ./frontend/dist:/usr/share/nginx/html9. 版本控制策略9.1 Git分支管理推荐的分支策略main - 仅存放稳定版本 develop - 主要开发分支 feature/* - 功能开发分支 hotfix/* - 紧急修复分支9.2 提交规范使用Angular提交规范feat: 添加用户登录功能 fix: 修复分页查询bug docs: 更新接口文档 style: 调整代码格式 refactor: 重构用户模块10. 毕业设计特别提示文档记录要点记录所有接口变更保存关键联调截图记录遇到的问题及解决方案答辩准备建议准备Swagger文档演示展示Postman测试集合准备数据库ER图时间管理技巧联调阶段预留至少2周缓冲时间每日进行进度同步使用看板管理任务在实际联调过程中我发现最有效的沟通方式是定期面对面会议配合在线文档记录。建议每天固定时间进行15分钟的站立会议同步进展和问题。使用腾讯文档或飞书文档实时记录接口变更避免前后端信息不同步。