复习：动态页面……

Web开发模式

以下内容，对小白而言略有抽象，既可以作为预习，也可以作为复习。

没有模式

HTML标签和和（验证、跳转、运算、if...else等等的）逻辑代码都全部直接写在（.jsp/.php/.asp）页面上。

演示：jsp页面代码

Page-Model

这是飞哥自己取的名字（毕竟在那个年代，也没有谁想到过“模式”），其特点是：请求直接到达页面（Page），但表现和逻辑相分离：

• （.jsp/.php/.asp）页面上只有和呈现相关的简单逻辑，比如：循环的展现列表内容，哪部分内容显示哪部分不显示……
• 复杂的逻辑，比如：验证、运算、连接数据库等，由页面相应的、单独的类/对象处理

演示：JSP+JavaBean 或 ASP.NET WebForm/RazorPages

MVC

在Page-Model的基础上，将Model进一步拆分：

• Model：模型，只作为数据容器（Data Transfer Object）使用
• Controller：负责逻辑预算。

另外一个区别：请求不再直接到达Page，而是Controller，所有这时候Controller居于中心地位，而不是页面，页面也被称之为View（视图）。

但从url到controller，比如：/Code/261需要由CodeController处理，这中间一般都需要一个转换/映射，这个工作被称之为：route（路由）或者dispatch（分发）

演示：SpringMVC（Java）和ASP.NET MVC（C#）

更详细/常见的示意图：

MVVM

Model View ViewModel，其实就是用ViewModel替代了Controller。

ViewModel相比Controller最大的不同，就是能够在View和Model之间自动同步更新！即：

• 如果Model发生了改变，自动更新View；
• 如果View上Model绑定的元素发生了变化，自动的更新Model

在传统的B/S架构中，这其实是很难实现的，因为View在客户端浏览器上，Model在服务器端，相距过于遥远。直到Ajax问世，前后端分离……

所以是前端框架，比如：vue.js、react.js等采用了这种模式。

其他

组件（component）化：把页面切分成一个一个的组件（部分），甚至页面本身，也可以看做一个组件。

组件必然就有一个从无到有，再从有到无的过程，这个过程就被称之为组件的生命周期（life-cycle）。

管道（pipeline）和中间件（middleware）：将HTTP请求从到达到服务器，到响应生成的整个过程想象成穿越一个管道，管道中可以预置/自定义配置一个一个的中间件。

开发人员可以：

• 使用组件，实现最大限度的重用；
• 利用生命周期中暴露的“可插拔事件/方法”等为组件添加逻辑，更进一步的重用组件。比如，在组件初始化（init）的时候自定义的获取数据，在组件销毁时自动更新数据。
• 在管道中自定义引入/自定义添加中间件，控制框架对HTTP请求的处理，比如：在请求到达时新开一个数据库连接打开事务，在请求结束时自动的关闭数据库连接，提交事务。

前后端分离

复习

在学习完MVC之后，就很容易想到：把View放到前端，后端只需要Controller和Model，就可以前后端分离了。

事实也确实如此。

Swagger

可用于自动生成后端API的文档，解释：

1. 为什么需要文档？不然前端咋知道一个一个的uri究竟是干什么的？
2. 为什么要用swagger，把文档写在代码里？同步集中……

它遵循 OpenAPI Specification（OpenAPI 规范，也简称 OAS）

备忘

还可以抽取共同的原理：

MVC：route/View的生成（变量分支循环）/（配合Form表单的）Model绑定和验证/filter

Restful：CORS/

源栈学历

在当前系列 框架&架构 中继续学习：

多快好省！前端后端，线上线下，名师精讲

• 先学习，后付费；
• 不满意，不要钱。
• 编程培训班，我就选源栈

更多了解 加：