MVC架构

Model

常译为「模型」,负责和资料库沟通。这里我们要先注意:应用程序和资料库是两个不同的东西,在应用程序里想要做「新增/浏览/修改/删除」的动作,就需要先有 Model 层帮忙去资料库里取出必要的资料,把资料放进应用程序里的某个程序物件,然後才能用 JavaScript 去操作该物件。

这种放资料、与资料库连动的物件,会被称为 Model 物件,由 Model 层来统一管理。

Model 管理的功能层被称做「逻辑层」,更明确一点说,是和「商业逻辑」有关的功能,例如:

电商网站:

会员购物有九折、订单超过一定的金额免运费
检查登入帐号的类型,并依此开放不同权限
社交网站:判断使用者彼此之间的友好程度

To-do List:过了期但没被执行的 to-dos 不能被删除

这些逻辑出自於产品本身的需求或是规则。它们是独立於网页介面的商业逻辑,如果之後又另外开发了如手机 App 等相关应用程序,这些商业逻辑在大部分情况是通用的。和这些逻辑相关的程序码应该被分类到对应的 Model 档案里。

View

View 常译为「视图」,View 所管理的功能层叫作「表现层 (presentation layer)」,顾名思义是负责管理画面的呈现,也就是 HTML 样板 (template)。

在开发框架里,因为 HTML template 会有需要以动态显示资料的情况 (也就是由 Model 取出的资料内容),所以 View 会再进一步运用样板引擎 (template engine) 将资料带入 template。我们很快就会在实作中看到相关细节。

HTML 语法教学,快速攻略网页HTML 标签的基本元素

Controller

Controller 常译为「控制器」,它掌握使用者互动逻辑,也是应用程序收发 request/response 的核心。来自路由的 request 会先被送到 Controller,再由 Controller 通知 Model 调度资料,并且把资料传递给 View 来产生样板 (template),并将呈现资料的 HTML 页面回传给客户端。

你可以把 Controller 想做是 MVC 架构的中间人,它决定了应用程序的工作流程 (workflow),并且蒐集不同元件的工作结果,统一回传给使用者。以下常见的设计问题,会由 Controller 来控制:

使用者是否需要先登入 (认证) 才可以看到网页内容?
使用者是否只能阅读资料,但不能修改或删除?
使用者新增了资料之後,会重新导向至哪个页面?
在 Controller 上会设置很多不同的「动作 (action)」,有点类似电视遥控器上的按钮,只要触发了不同的 action,Controller 就会启动後续一系列的行为。


<<:  如何用 SQL 去除重复资料 : Distint

>>:  从 React 开始,让你的网页material-ui起来 [Day 2] 差异性安装

【Day 25】JavaScript ajax

AJAX 是什麽? 维基提及,AJAX 英文为 Asynchronous JavaScript An...

Day.29 部署环境 - 监控系统状态(Percona Monitoring and Management)

在前面Day.3中我们把安装MYSQL Server的机器架在云端GCP上,所以在这边也以在GCP...

【终章】 Tailwind VS Bootstrap5 谁能称霸?

这趟 30 天旅程,让我对 CSS Components 与 Utility 的设计上有了更深入了...

鬼故事 - 灭证高手

鬼故事 - 灭证高手 Credit: Scooby-Doo 灵感来源:UCCU Hacker 故事开...

第6天~原来还有OKhttp这种语法

点餐~20220130再做一次 重点: 1-新增Activity 2-版面规划-使用参考线(用%这个...