20、构建Mighty Gumball销售数据展示Web应用全解析

构建Mighty Gumball销售数据展示Web应用全解析

1. Mighty Gumball业务概述

Mighty Gumball在全国范围内部署了众多口香糖售卖机，这些售卖机会将销售报告发送到中央服务器。服务器会汇总这些报告，并通过网络服务提供数据。现在需要构建一个Web应用，为销售团队在浏览器中展示销售数据，并且该报告需要随着销售数据的变化实时更新。

1.1 系统架构流程

• 售卖机分布在全国各地，持续向中央服务器发送销售信息。
• 服务器汇总所有销售信息，并通过网络服务提供访问接口。
• 浏览器加载Web应用，包括HTML标记、CSS样式和JavaScript脚本。
• 应用向服务器发送Web请求，获取汇总的销售数据。
• 应用接收服务器返回的数据。
• 应用分析数据，并更新页面的DOM结构，以反映最新的销售数据。
• 浏览器根据更新后的DOM结构更新页面，用户可以看到最新的销售结果。
• 应用会不断重复步骤4 - 7，实现页面的近实时更新。

以下是该流程的mermaid流程图：

graph LR
    A[售卖机] --> B[中央服务器]
    C[浏览器] --> D[Web应用]
    D --> E(发送请求)
    E --> B
    B --> F(返回数据)
    F --> D
    D --> G(更新DOM)
    G -