在过去的 20 年中，网站已经从带有 CSS 的简单页面变成了更加复杂和功能强大的应用程序。
为了使这些应用程序更易于开发，程序员们使用了不同的模式和软件架构，以减少代码的复杂性。
但是，首先，什么是软件架构？
架构是描述软件的系统方法，它还描述了软件与其他软件的关系，以及软件之间如何相互影响。
软件架构还包括其他因素，例如业务策略、质量属性、人员动态、设计和 IT 环境。
换句话说，软件架构是系统的蓝图。
Model-View-Controller（ MVC）架构
目前最流行的软件架构是 Model-View-Controller 架构，简称 MVC。
MVC 将任何大型应用程序分为三个部分：
- Model（模型）
- View（视图）
- Controller（控制器）
这些组件中的每个组件都是为处理应用程序的特定方面而构建的，并且具有不同的用途。
Model
Model 包含用户使用的所有与数据相关的逻辑，例如项目的模式和接口、数据库及其字段。
例如，客户对象将从数据库中检索客户信息，操纵或更新他们在数据库中的记录，或使用它来呈现数据。
View
View 包含应用程序的 UI 和呈现。
例如，View 将包括所有 UI 组件，例如文本框、下拉菜单以及用户与之交互的其他内容。
Controller
最后，Controller 包含所有与业务相关的逻辑并处理传入的请求。它是 Model 和 View 之间的接口。
例如，Controller 将处理来自 View 的所有交互和输入，并使用 Model 更新数据库。使用同一 Controller 查看用户数据。
这个示意图将 MVC 架构可视化，并展示如何协同工作：
MVC 架构如何运行
首先，浏览器向 Controller 发送请求。 然后，Controller 与 Model 进行交互以发送和接收数据。
然后，Controller 与 View 交互以呈现数据。View 仅关注如何呈现信息，而不关注最终呈现。这将是一个动态 HTML 文件，它根据 Controller 发送的数据呈现数据。
最终，View 将其最终呈现发送到 Controller，而 Controller 将该最终数据发送到用户输出。
重要的是 View 和 Model 永远不会相互影响。它们之间唯一发生的交互是通过 Controller。
这意味着应用程序和接口的逻辑永远不会相互影响，这使得编写复杂的应用程序更加容易。
让我们看一个简单的例子：
让我们看看这里发生了什么。首先，用户通过 Web 浏览器或移动应用程序输入他们想要的电影列表。
然后，浏览器将请求发送到 Controller 以获取电影列表。
接下来，Controller 将要求模型从数据库中查找电影列表。
router.get('/',ensureAuth, async (req,res)=>{
try{
const movies = await Movies.find() (*)
res.render('movies/index',{ movies })
}
catch(err){ console.error(err)
res.render('error/500') } }) 然后，Model 搜索数据库，并将电影列表返回给 Controller。
const mongoose = require('mongoose')
const MovieSchema = new mongoose.Schema
({
name:{
type:String,
required:true
},
description:{
type:String
}
})
module.exports = mongoose.model('Movies',MovieSchema)如果 Controller 从 Model 中获取电影列表，则 Controller 将要求 View 显示电影列表。
router.get('/',ensureAuth, async (req,res)=>{
try{ const movies = await Movies.find()
res.render('movies/index', { movies (*) }) }
catch(err){
console.error(err) res.render('error/500') }
})然后，View 将接收请求，并将渲染的电影列表以 HTML 格式返回给 Controller。
<div class="col" style="margin-top:20px;padding-bottom:20px">
<div class="ui fluid card">
<div class="content">
<div class="header">{{movie.title}}</div>
</div> <div class="extra content">
<a href="/movies/{{movie._id}}" class="ui blue button"> More from {{movie.description}} </a>
</div>
</div>
</div>最后，Controller 将获取该 HTML 文件，并将其返回给用户，从而获得电影列表作为输出。
总结
有很多不同的软件架构，但是 Model-View-Controller 是最受欢迎的，被广泛使用。它降低了代码复杂度，使软件易于理解。
现在你明白了 Model-View-Controller 背后的概念。
祝大家学习愉快！
原文：How Model-View-Controller Architecture Works，作者：Nishant Kumar