随着互联网技术的飞速发展，Web 应用的构建方式也在持续迭代升级。从早期单纯的页面内容展示，到如今具备复杂交互、实时响应的现代化应用，其背后依托着软件设计模式、前端技术与运行环境的不断革新。MVC 模式作为经典的后端软件设计范式，奠定了早期 Web 开发的基础；AJAX 技术的普及，催生了 SPA 单页面应用，彻底改变了前端交互形态；AngularJS、React、Vue.js 等前端框架的诞生，将前端开发带入 MV* 架构时代；而 Node.js 的广泛应用，则打破了前后端技术壁垒，开启了 JavaScript 全栈开发的全新阶段。
为有效降低 Web 开发的复杂度，业界以后端开发为核心出发点，推出了各类 MVC 架构框架，Spring MVC 便是 Java 后端生态中极具代表性的实现，这也标志着后端主导的 MVC 时代正式到来。MVC 全称为 Model-View-Controller，即模型 - 视图 - 控制器，核心是通过分层实现业务逻辑、数据与界面展示的解耦。
发起请求到前端控制器（DispatcherServlet）：用户在浏览器发起的所有请求，会首先统一进入 DispatcherServlet 前端控制器
前端控制器请求 HandlerMapping 查找 Handler：DispatcherServlet 会将请求转发至处理器映射器 HandlerMapping，匹配对应的请求处理器
处理器映射器 HandlerMapping 向前端控制器返回 Handler：HandlerMapping 完成路由匹配后，将对应的处理器信息返回给 DispatcherServlet
前端控制器调用处理器适配器执行 Handler：DispatcherServlet 通过处理器适配器，适配并调用目标处理器
处理器适配器执行 Handler：适配器执行 Handler 中具体的业务处理逻辑
Handler 执行完成给适配器返回 ModelAndView：处理器完成业务操作后，返回封装了数据模型与视图信息的 ModelAndView 对象
处理器适配器向前端控制器返回 ModelAndView：适配器将 ModelAndView 转发回 DispatcherServlet
前端控制器请求视图解析器进行视图解析：DispatcherServlet 调用视图解析器，解析 ModelAndView 中的视图名称
视图解析器向前端控制器返回 View：视图解析器完成解析后，返回可渲染的视图对象
前端控制器进行视图渲染：DispatcherServlet 将数据模型填充至视图中，完成页面渲染
前端控制器向用户响应结果：最终将渲染完成的静态 HTML 页面返回给用户浏览器
降低组件耦合度：模型、视图、控制器三层相互独立，减少代码依赖，大幅提升项目的可维护性与横向扩展性
前后端分工边界清晰：配合 Thymeleaf、Freemarker 等后端模板引擎，可明确划分前后端的工作职能
前端开发依赖服务端环境：前端页面调试、开发必须依托后端服务启动，无法独立运行
前后端职责易混淆：前端为实现交互，常会在模板中嵌入大量业务逻辑，导致职责边界模糊
前端能力发挥受限：前端性能优化、交互创新受限于后端框架规则，自主可控性较差
2005 年，AJAX（Asynchronous JavaScript And XML，异步 JavaScript 与 XML）技术被正式规范化并大规模应用，同时 CDN 成为静态资源的主流存储方案，JavaScript 重新成为前端核心技术，SPA（Single Page Application）单页面应用时代正式来临。SPA 的核心是在单个页面内通过异步请求完成局部更新，无需整页刷新，极大提升了用户交互体验。
前后端分工高度清晰：前端全权负责页面渲染、交互逻辑实现，后端仅提供数据接口，专注于业务逻辑与数据处理
浏览器端分层架构：前端借鉴后端 MVC 思想，搭建了专属的分层结构，用于管理复杂的前端交互与数据逻辑
前后端职责划分明确：清晰的职能分配，有效提升团队协作与开发效率
前后端可并行开发：前后端提前约定接口文档与数据格式，即可同步开展开发工作，缩短项目周期
接口依赖度较高：后端接口未开发完成或接口变更，会直接阻塞前端开发进度
前端代码复杂度难管控：SPA 应用中 JavaScript 代码量激增，缺乏规范架构易导致代码混乱、难以维护
首屏加载性能问题：所有静态资源需一次性加载，易出现首屏加载缓慢的问题
为解决 SPA 时代前端代码混乱、复杂度失控的问题，AngularJS、React、Vue.js、EmberJS 等现代化前端框架相继涌现。这类框架均遵循按类型分层、层内细粒度切分的设计原则，将前端开发带入了以 MV* 为核心的架构时代。MV* 是 MVC、MVP、MVVM 等架构范式的统称，均是为了优化前端视图与数据的交互逻辑。
MVC：经典同步通信架构，控制器直接操作模型与视图，适用于早期同步渲染场景
MVP：针对异步通信优化，Presenter 层作为中间层接管所有用户输入与数据交互，视图与模型完全解耦
MVVM：通过双向数据绑定机制，自动同步视图与模型数据，无需手动操作 DOM，是当前主流前端框架的核心范式
前后端职责彻底分离：前端专注交互体验，后端专注数据服务，分工明确且高效
前端开发复杂度可控：框架自带的分层与规范，让大规模前端项目更易维护
前端可独立部署：前端静态资源可单独打包部署，产品迭代速度大幅提升
前后端代码无法复用：前后端技术栈、数据处理逻辑相互独立，存在重复开发问题
SEO 优化难度大：SPA 应用依赖客户端渲染，搜索引擎爬虫难以抓取页面内容，影响搜索排名
移动端性能存在瓶颈：大量 JS 逻辑在客户端执行，低端移动设备易出现卡顿、加载慢问题
路由需后端配合：前端路由跳转需后端配置重定向规则，否则会出现页面 404 问题
Node.js 基于 Chrome V8 引擎的运行时特性，让 JavaScript 具备了服务端运行的能力，彻底打破了前后端的技术语言壁垒，催生了 JavaScript 全栈开发模式。开发人员可使用同一门语言完成前后端开发，实现代码共享与性能优化，也衍生出 BFF（Backend For Frontend）中间层架构。
前后端职责清晰：前端聚焦界面交互，Node.js 层处理接口聚合、数据适配，后端服务专注核心业务逻辑
代码高度可复用：工具函数、数据校验逻辑等可在前后端共享，减少重复编码
性能优化更灵活：Node.js 可直接处理异步 IO、接口聚合等操作，降低前端请求开销
技术栈统一，开发效率提升：全程使用 JavaScript 开发，减少语言切换成本，团队协作更顺畅
代码复用率高：公共逻辑无需重复编写，大幅缩减开发工作量
性能优化空间大：服务端可完成数据预处理、接口合并，减轻客户端渲染压力
部署方式灵活：前端、Node.js 层、后端服务可独立部署迭代，适配敏捷开发需求
技术栈要求更高：开发人员需同时掌握前端与服务端开发技能，学习成本上升
层间通信需优化：需妥善处理 Node.js 与后端微服务的通信、超时、容错问题
部署与运维复杂度提升：新增 Node.js 服务层，对服务器配置、运维监控提出更高要求
历史系统适配成本高：对接传统老旧系统时，需额外开发适配层，增加开发工作量
