{"name":"表现层","id":"软件工程-架构模式-表现层","content":"# 表现层\n\n表现层（Presentation Layer）是软件架构中最上层的部分，主要负责处理用户界面和用户交互。它也被称为展现层或UI层，是用户与系统交互的接口。\n\n## 定义与职责\n\n表现层的主要职责包括：\n\n- 接收用户输入并将其传递给下层处理\n- 将下层处理的结果以适当的形式展示给用户\n- 控制用户界面的流程和导航\n- 处理用户界面事件\n\n在分层架构中，表现层通常依赖于业务逻辑层（或应用层）来获取数据和执行业务操作，对用户隐藏了系统内部的复杂性。\n\n## 主要模式\n\n### MVC（Model-View-Controller）\n\n随着前后端分离以及后端微服务化的不断发展，传统的MVC已不适合现在的纯后端系统，Controller其实也是API，它代表了服务对外提供的接口，是一种合约\n\n- **Model**: 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器\n- **View**: 视图代表模型包含的数据的可视化\n- **Controller**: 控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开\n\n#### MVC模型演变\n\n**Model1模型**\n```mermaid\n---\ntitle: Model1模型\n---\nsequenceDiagram\n  客户端 ->> JSP: 请求\n  JSP ->> JavaBean: 请求\n  JavaBean ->> DAO: 数据库操作\n  DAO ->> JavaBean: 数据库操作\n  JavaBean ->> JSP: 返回\n  JSP ->> 客户端 : 返回\n```\n\n**Model2模型**\n```mermaid\n---\ntitle: Model2模型\n---\nsequenceDiagram\n  participant 客户端\n  participant 控制器 as Controller(Filter/Servlet)\n  participant 模型 as Model(JavaBean)\n  participant 视图 as View(JSP)\n\n  客户端 ->> 控制器: 请求\n  控制器 ->> 模型: 请求\n  控制器 ->> 视图: 请求\n  视图 ->> 模型: 请求\n  模型 ->> 数据库: 请求\n```\n\n#### MVC的优势与弊端\n\n**优势**\n- 清晰的职责划分\n- 组件独立，代码重用\n- 后期维护方便\n- 适合任何项目\n\n**弊端**\n- 展示数据慢（针对jsp）\n- 对开发者架构设计能力要求高\n- 异步交互不方便\n\n#### 控制器类型\n\n1. **页面控制器**: 为特定页面或动作处理请求的对象。控制器通过绑定请求来实现与用户的交互。其从请求中提取参数，对输入进行处理，执行业务逻辑，选择适当的视图以呈现结果。\n\n2. **前端控制器**: 处理所有请求的控制器，执行一些通用的行为，如身份验证和日志记录，并且这些行为可以在运行时动态修改\n\n3. **应用控制器**: 一个处理程序流的集中控制点，负责协调页面控制器与前端控制器之间的交互，确保请求在应用中的流转符合预期\n\n#### Model（业务数据模型）\n业务数据模型，Model层是高层策略，是技术无关逻辑的封装\n\n#### View（视图）\n当有用户的行为触发操作时，由控制器更新模型，并通知视图进行更新\n\n#### Controller（控制器）\n主要是接收用户请求，并负责协调Model与View\n\n### MVP（Model-View-Presenter）\n\n```mermaid\nstateDiagram-v2\n  View --> Presenter: User events\n  Presenter --> Model: Model update\n  Model --> Presenter: State changes\n  Presenter --> View: View update\n```\n\n- Presenter较为复杂，可以脱离view进行测试\n\n### MVVM（Model-View-ViewModel）\n\nMVVM是MVC模式的进一步演变，特别适用于现代前端开发，如Vue.js等框架。\n\n### BFF（Backend for Frontend）\n\n- 为前端而生的后端服务\n\n```mermaid\ngraph TB\n    subgraph \"Applications\"\n        WebApp[Web APP]\n        MobileApp[Mobile APP]\n        DesktopApp[Desktop APP]\n    end\n\n    subgraph \"Gateways\"\n        WebGateway[Web APP Gateway]\n        MobileGateway[Mobile APP Gateway]\n        DesktopGateway[Desktop APP Gateway]\n    end\n\n    subgraph \"Services\"\n        AccountService[Account Service]\n        PaymentService[Payment Service]\n        SecurityService[Security Service]\n        WarehouseService[Warehouse Service]\n    end\n\n    WebApp -- REST --> WebGateway\n    MobileApp -- RMI --> MobileGateway\n    DesktopApp -- gRPC --> DesktopGateway\n\n    WebGateway --> AccountService\n    WebGateway --> PaymentService\n    MobileGateway --> PaymentService\n    MobileGateway --> SecurityService\n    DesktopGateway --> SecurityService\n    DesktopGateway --> WarehouseService\n```\n\n## 与分层架构的关系\n\n在传统的分层架构中，表现层是系统架构的最上层，通常与业务逻辑层、数据访问层和数据库层形成依赖关系：\n\n```mermaid\ngraph TD\n    展现层[展现层]\n    业务逻辑层[业务逻辑层]\n    数据访问层[数据访问层]\n    数据库[(数据库)]\n\n    展现层 --> 业务逻辑层 --> 数据访问层 --> 数据库\n```\n\n在现代架构中，表现层与应用层、领域层和基础设施层形成更复杂的交互关系：\n\n```mermaid\ngraph TD\n    展现层[展现层]\n    应用层[应用层]\n    领域层[领域层]\n    基础设施层[基础设施层]\n\n    展现层 --> 应用层 --> 领域层\n    领域层 --> 基础设施层\n```\n\n## 视图与模型关系\n\n- 视图与模型关注点不同，视图侧重于可视化界面，而模型侧重于业务逻辑\n- 同样的模型可以有不同的视图\n- 模型更容易测试\n\n当系统有了一些不可见的逻辑时，就需要注意模型与视图分离。\n\n## 关联内容（自动生成）\n\n- [/软件工程/架构模式/分层架构.md](/软件工程/架构模式/分层架构.md) 分层架构是表现层所处的更大架构背景，表现层作为分层架构的最上层，与业务逻辑层、数据访问层之间有着明确的依赖关系\n- [/软件工程/架构模式/Web框架.md](/软件工程/架构模式/Web框架.md) Web框架通常采用MVC、MVP、MVVM等模式实现表现层，是表现层理论的具体实现\n- [/软件工程/架构/Web前端/前后端分离.md](/软件工程/架构/Web前端/前后端分离.md) 前后端分离架构改变了传统表现层的实现方式，BFF模式成为新的表现层形态\n- [/软件工程/架构/Web前端/Web前端.md](/软件工程/架构/Web前端/Web前端.md) 前端技术是现代表现层的重要组成部分，CSS作为表现层语言直接影响用户界面\n- [/软件工程/架构/系统设计/网关.md](/软件工程/架构/系统设计/网关.md) BFF（Backend for Frontend）作为面向前端的后端服务，是表现层架构的一种新模式\n- [/软件工程/微服务/集成.md](/软件工程/微服务/集成.md) 在微服务架构中，表现层与后端服务的集成方式对系统架构有重要影响\n","metadata":"tags: ['架构设计', '软件工程', '设计模式', 'web架构', '前端']","hasMoreCommit":false,"totalCommits":3,"commitList":[{"date":"2026-02-12T15:23:11+08:00","author":"MY","message":"docs(SUMMARY): 移除重复的目录项和SpringMVC文档","hash":"429e3cfcfae1b84b55a4103397b82ac21b6e9255"},{"date":"2026-02-12T14:59:02+08:00","author":"MY","message":"docs(架构模式): 更新表现层文档添加标签和关联内容","hash":"dba3dc46b2c10582168a5cabd7438f3372de7ad9"},{"date":"2025-12-08T15:17:37+08:00","author":"MY","message":"docs(architecture): 更新分层架构文档内容与结构","hash":"58283e0eb94f77ad30e8307b488e703d2f5f9038"}],"createTime":"2025-12-08T15:17:37+08:00"}