MVC架构的基本组成
MVC是Model-View-Controller的缩写，是一种广泛使用的软件设计模式，尤其在Web开发中非常常见。它把应用程序分成三个核心部分：Model（模型）负责数据和业务逻辑；View（视图）负责展示界面；Controller（控制器）则充当两者之间的协调者。
比如你在用一个购物网站时，点击“查看订单”按钮，页面会列出你买过的商品。这个过程背后，其实就是MVC在默默工作：你看到的订单列表是View，订单数据来自数据库由Model管理，而点击按钮后触发的请求处理则是Controller完成的。
前端发起请求
交互通常从前端开始。用户在浏览器里操作，比如点击链接、提交表单，前端JavaScript就会发送HTTP请求到服务器。这个请求一般指向某个URL，比如 /api/orders，并可能携带参数。
现代前端常用Ajax或Fetch API来异步获取数据，避免整页刷新。例如：
fetch('/api/orders')
.then(response => response.json())
.then(data => {
// 更新页面内容
document.getElementById('order-list').innerHTML = data.map(order =>
'<li>' + order.name + ' - ¥' + order.price + '</li>'
).join('');
});请求进入Controller
服务器接收到请求后，路由机制会根据URL将请求分发给对应的Controller方法。比如Spring MVC中的 @RequestMapping 或Express.js里的路由配置。
Controller的作用是接收前端传来的参数，调用合适的Model处理业务，并决定返回什么数据或跳转到哪个视图。它不直接操作数据库，也不关心页面长什么样，只负责“调度”。
以Java Spring为例：
@RestController
public class OrderController {
@Autowired
private OrderService orderService;
@GetMapping("/api/orders")
public List<Order> getUserOrders() {
return orderService.getOrdersByUser();
}
}Model处理数据
Controller调用Model进行具体的数据操作。Model会连接数据库，执行查询、更新等操作。比如通过MyBatis或JPA访问MySQL，获取用户的订单记录。
这一层封装了所有与数据相关的逻辑，比如验证订单状态、计算总价、检查库存等。处理完成后，Model把结果返回给Controller。
如果数据需要缓存，Model也可能先查Redis，没有再回源数据库，提升响应速度。
返回响应给前端
Controller拿到Model返回的数据后，将其组织成JSON格式，通过HTTP响应返回给前端。现在的Web应用大多采用前后端分离架构，所以Controller通常不返回HTML页面，而是纯数据。
前端收到JSON后，JavaScript动态更新DOM，完成界面刷新。整个过程用户几乎感觉不到页面跳转，体验更流畅。
传统服务端渲染的情况
在非前后端分离的老式项目中，Controller处理完可能会直接返回一个视图名称，比如 "order/list"，然后模板引擎（如JSP、Thymeleaf、Freemarker）会把数据填充进HTML模板，生成完整的页面，再由服务器发送给浏览器。
这种方式的好处是首屏加载快，适合SEO，但灵活性不如现在主流的分离架构。
实际开发中的协作方式
在团队开发中，前端和后端可以基于API文档并行工作。后端定义好接口返回的JSON结构，前端模拟数据先行开发界面。等接口就绪后，只需切换请求地址即可对接真实数据。
比如约定好订单接口返回：
{
"orders": [
{ "id": 1, "name": "手机", "price": 2999 },
{ "id": 2, "name": "耳机", "price": 199 }
]
}前端就可以提前写好解析逻辑，减少等待时间。