MVC是一个缩写,代表着模型、视图和控制器。这种架构模式创建于20世纪70年代末,用于制作桌面应用程序,但它现在被广泛用于Web应用开发。
在这篇文章中,我将深入探讨MVC的含义以及它的3个组成部分,以便你能理解它。
我还准备了一个信息图,可以帮助你更好地理解MVC,但你必须先阅读这篇文章。
我们将讨论的内容
什么是MVC,为什么使用它?
在计算机科学中,MVC是一种软件设计模式,将应用程序代码组织成三个相互交织的部分--模型、视图和控制器。
模型是与数据库交互的逻辑,视图是用户交互的用户界面,而控制器是视图和模型之间的中介。
在许多情况下,视图从不与模型直接交互--控制器执行这一功能:

在其他一些框架中,模型可以直接与视图交互。

MVC设计模式的目的是将应用程序代码划分为各自的单元,所以维护和优化不会是一件麻烦事。这就是人们常说的 "关注点分离"。
哪些语言和框架使用MVC?
在过去,MVC只被用于制作桌面GUI。今天,许多编程语言和框架为网络应用程序开发实现了MVC。
有些框架甚至强迫你使用MVC,所以你可能一直在使用MVC而没有意识到你正在使用它。
例如,在一个全栈式的Express应用中,开发者通常会将代码分为模型、控制器和客户端(视图)文件夹:

这是我为我最喜欢的足球运动员建立的一个笑话发生器的文件夹结构。
使用MVC的编程语言的例子有C、C++、C#、Java、Ruby、Smalltalk等等。
使用MVC的框架有Angular, Express, Django, Flask, Laravel, Ruby on rails等。
什么是MVC中的模型?
模型组件包含负责从数据库中检索数据的逻辑。为此,你也可以用一个JSON文件来代替数据库。
例如,在电子商务应用的SQL数据库中,这可能是像product-data = db.get(SELECT * FROM products;)。
在许多情况下,模型与控制器进行通信,将数据发送到视图(用户界面)。在其他情况下,模型可以直接向视图发送数据。
什么是MVC中的视图?
视图组件是用户直接与之交互的部分。它与控制器通信,以显示用户用鼠标和键盘操作要求的内容。
像HTML、CSS和JavaScript这样的语言经常被用来实现这一部分。你也可以使用React、Vue和Svelte等框架。
一些开发者还使用模板引擎,如Handlebars、ejs和liquidjs来实现视图。
在一个eCormerce应用程序中,代码可能包含这样的内容:
<h1>{{product.name}}</h2>
<ul>
<p>{{product.description}}</p>
<p>{{product.delivery-modes}}</p>
什么是MVC中的控制器?
控制器组件是模型和视图之间的中介。它既不是模型也不是视图--它是连接它们的部分。
控制器对视图所做的是接收和处理用户的请求和对视图(用户界面)的操作。因此,它处理像GET 、POST 、PUT 或PATCH 和DELETE 这样的请求。
当控制器收到用户请求时,它与模型进行通信,以获得用户想要的东西,然后将其送回视图(用户界面)供用户查看。
下面的片段是控制器的一些伪代码:
if (success) {
show products;
} else {
show error;
}
总结
模型-视图-控制器模式已经成为一种广泛使用的架构模式,用于制作Web应用程序和其他软件产品。
一开始它可能会让人感到困惑,但坚持学习和实践应该可以帮助你解开困惑。
如果你仍然对什么是MVC感到困惑,可以这样看:
- 你给一家餐馆打电话订比萨饼--你是餐馆的老板。
view - 你把你的订单交给服务员- 服务员是
controller - 服务员从商店拿到你的比萨饼并交给你--商店是the
model
你可以看到,你,view ,从来没有去商店买过比萨,就像视图在很多情况下都没有直接从模型中检索数据一样。
谢谢你的阅读。