24、单页应用与Play框架开发指南

单页应用与Play框架开发指南

1. 单页应用概述

在传统的MVC架构中，客户端 - 服务器的二元性增加了一定的复杂性。传统上，模型和控制器几乎完全在服务器上运行，服务器仅将相关的HTML视图推送给客户端。但随着客户端JavaScript框架（如AngularJS）的发展，越来越多的代码被放在客户端运行。控制器和模型的临时版本通常在客户端运行，服务器则作为Web API发挥作用。例如，当用户更新模型时，控制器会向服务器发送HTTP请求以通知其更改。

这种模式发展到极致就产生了单页应用（Single-Page Applications）。在单页应用中，客户端首次向服务器请求页面时，会收到构建整个应用框架所需的HTML和JavaScript。如果客户端需要从服务器获取更多数据，会向服务器的API发送请求，数据以JSON或XML格式返回。

以亚马逊网站为例，当用户在主页点击某个产品链接时，客户端应用知道如何通过HTML模板显示产品，但不知道要为所选产品的模型字段填充什么数据。因为在网站加载时无法预知用户会点击哪个产品，所以客户端会向服务器请求该产品的信息，服务器以JSON对象（或XML）响应，客户端更新模型后触发事件更新视图。

单页应用中客户端 - 服务器的通信流程如下：

graph LR
    A[客户端首次访问网站] --> B[接收HTML、CSS和JavaScript文件]
    B --> C[后续需要数据时向服务器API请求]
    C --> D[服务器返回JSON或XML数据]
    D --> E[客户端更新模型和视图]