前后端分离是什么

理解前后端分离的概念、优势和实践中的问题

问题

什么是前后端分离？为什么需要前后端分离？

前后端分离就是前端与后端分开开发、分开部署。

传统的 Java Web 开发中，前后端是耦合在一起的：

Spring MVC 时代：前端使用 JSP 展示页面，后端用 Servlet 处理请求。

Spring Boot 时代：前端使用 Thymeleaf 或 FreeMarker 模板引擎，后端用 Controller 处理请求。

这些方案的共同问题是页面可以内嵌 Java 代码，导致前后端高度耦合。部署时前后端代码打包在同一个 war/jar 包中，任何修改都需要重新打包部署整个项目。

前后端分离的做法：

项目难以维护

项目越来越大时，前后端工程师需要在同一个页面上协作，沟通成本高。前端或后端任何改动都需要重新打包编译整个项目，项目越大耗时越长。

代码难以复用

页面中嵌入 Java 代码，复用后端接口时需要重新修改前端页面并添加相应代码，复用成本高。

性能和资源浪费

使用模板引擎需要先解析页面中的代码再渲染，比静态页面慢。扩展并发能力时只能整体部署多个实例，浪费服务器资源。

提升开发效率

前后端各自负责擅长的领域，只需约定好接口文档即可并行开发。前端可以用 Mock 数据测试，后端可以用 Postman 测试接口，开发进度互不影响。

简化更新维护

前端或后端有改动时，只需要打包部署对应的项目。招聘时也更容易找到专注单一职责的开发人员。

提高接口复用率

后端模块可以直接复用，不需要迁移页面中的 Java 代码。

加快页面加载

前端部署为静态页面，无需解析模板引擎代码，加载更快。可以引入 Node.js 作为中间层处理页面渲染，进一步提升性能。

优化资源利用

扩展并发能力时，可以只增加前端实例部署，做好负载均衡即可。只有后端接口 QPS 不足时才需要扩展后端服务。

跨域问题（CORS）

使用 Ajax 请求数据时会遇到跨域问题。解决方法是在后端返回的响应头中添加 Access-Control-Allow-Origin。

单点登录问题

对接 CAS 等单点认证系统时，登录请求直接发送到后端，前端无法正常获取登录后的 JWT。需要在后端将 token 和 jsessionid 写入前端认证页面，由前端完成页面跳转和后续认证流程。