从零构建分离式前后端交互（实战指南）

1. 为什么需要分离式前后端开发十年前我刚入行时前后端代码还混在一起写JSP里既有HTML标签又有Java代码维护起来简直是一场噩梦。现在主流的前后端分离架构就像把厨房和餐厅分开 - 后端专注数据处理厨房前端负责展示交互餐厅两边通过标准化接口传菜窗口沟通。这种架构最直观的好处是并行开发。我去年带的一个大学生团队前端用uni-app同时开发微信小程序和H5后端用SpringBoot提供统一接口两边同时开工项目周期直接缩短了40%。另外当需要App改版时后端接口完全不用动就像餐厅重新装修不影响厨房运作一样。实际开发中我推荐用契约先行的方式。比如先用Swagger定义好接口文档前后端都基于这个菜单来开发。有次紧急项目我们这样操作联调时问题减少了70%以上。下面这个对比表能清晰看出分离式开发的优势对比维度传统模式分离式开发开发效率前后端互相等待并行开发维护成本改一处可能影响全局模块清晰责任明确技术栈灵活性前后端技术绑定可独立升级技术栈团队协作需要深度耦合接口约定即可协作2. 搭建uni-app前端项目第一次用HBuilderX创建uni-app项目时我被各种目录搞晕了。后来发现只要重点关注这几个地方就够了pages目录- 每个页面都是一个.vue文件我习惯按功能模块分文件夹。比如用户中心相关页面放在pages/user/下static资源- 这里放图片字体等静态文件有个坑要注意小程序平台对图片大小有严格限制有次我们项目就栽在这个问题上manifest.json- 配置应用基本信息特别是微信小程序需要在这里配置AppID建议新手先用官方模板创建项目别急着上复杂UI库。我有次给团队演示5分钟就搭好了一个可运行的基础框架# 创建项目 vue create -p dcloudio/uni-preset-vue my-project # 安装必要依赖 npm install dcloudio/uni-ui axios发送请求时我强烈建议封装统一的http工具。这是我从三个项目中总结出来的最佳实践// utils/http.js import axios from axios const service axios.create({ baseURL: http://your-api-domain.com, timeout: 10000 }) // 请求拦截器 service.interceptors.request.use(config { config.headers[Token] getToken() return config }) // 响应拦截器 service.interceptors.response.use( response { return response.data }, error { return Promise.reject(error) } ) export default service在页面中使用时只需要import http from /utils/http export default { methods: { async fetchData() { try { const res await http.get(/api/data) console.log(获取数据成功, res) } catch (err) { console.error(请求失败, err) } } } }3. 构建SpringMVC后端服务新手用IDEA创建SpringMVC项目时最容易卡在项目结构配置上。记得我带的实习生小王花了整整一天才搞明白web模块怎么添加。其实关键步骤就这几步创建Maven项目时选择maven-archetype-webapp原型在Project Structure里手动添加Web模块确保web.xml放在src/main/webapp/WEB-INF/下pom.xml的依赖配置是另一个容易出错的地方。这是我优化过多次的配置模板dependencies !-- Spring核心 -- dependency groupIdorg.springframework/groupId artifactIdspring-webmvc/artifactId version5.3.18/version /dependency !-- JSON处理 -- dependency groupIdcom.fasterxml.jackson.core/groupId artifactIdjackson-databind/artifactId version2.13.3/version /dependency !-- 开发工具 -- dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId version1.18.24/version scopeprovided/scope /dependency /dependencies控制器开发有个实用技巧 - 使用RestControllerAdvice统一处理异常。上次项目上线后这个设计帮我们快速定位了多个线上问题RestControllerAdvice public class GlobalExceptionHandler { ExceptionHandler(Exception.class) public Result handleException(Exception e) { // 记录详细错误日志 log.error(系统异常, e); // 返回友好提示 return Result.error(系统繁忙请稍后再试); } }4. 前后端联调实战技巧联调阶段是最容易暴露问题的环节。我们团队现在遵循的三步联调法效果很不错接口模拟阶段前端先用Mock.js模拟数据不依赖后端进度单元对接阶段按接口文档逐个对接使用Postman验证集成测试阶段完整业务流程测试检查数据一致性跨域问题是必遇的坑。记得有次凌晨加班解决CORS问题最后发现是Spring Security配置冲突。这是经过验证的解决方案Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(GET, POST, PUT, DELETE) .allowedHeaders(*) .maxAge(3600); } }对于微信小程序开发还要特别注意域名必须备案且支持HTTPS请求头要包含content-type: application/json小程序后台要配置合法域名列表调试技巧方面推荐使用组合式日志前端在uni-app中使用uni.addInterceptor拦截请求/响应后端用AOP记录接口调用情况使用TraceID实现请求链路追踪Aspect Component public class ApiLogAspect { Around(execution(* com..controller.*.*(..))) public Object around(ProceedingJoinPoint joinPoint) throws Throwable { String methodName joinPoint.getSignature().getName(); long startTime System.currentTimeMillis(); log.info(API调用开始 {}, methodName); Object result joinPoint.proceed(); long endTime System.currentTimeMillis(); log.info(API调用结束 {} 耗时:{}ms, methodName, endTime - startTime); return result; } }