模型视图控制器体系结构如何工作– MVC解释了

作者:尼桑·库玛(Nishant Kumar)

在过去的20年中,网站已经从带有CSS的简单页面变成了更加复杂和功能强大的应用程序。

为了使这些应用程序更易于开发,程序员使用了不同的模式和软件体系结构,以减少代码的复杂度。

但是首先,什么是软件架构?

架构是描述软件的系统方法。它还涉及到它与其他软件的关系,以及它们如何相互影响。

软件体系结构还包括其他因素,例如业务战略,质量属性,人员动态,设计和IT环境。

换句话说,体系结构充当系统蓝图

模型-视图-控制器(MVC)架构

到目前为止,最流行的软件体系结构是Model-View-Controller或MVC。

MVC将任何大型应用程序分为三个部分:

  1. 该模型
  2. 风景
  3. 控制器

这些组件中的每个组件都是为处理应用程序的特定方面而构建的,并且具有不同的用途。

该模型

该模型包含用户使用的所有与数据相关的逻辑,例如项目的模式和接口,数据库及其字段。

例如,客户对象将从数据库中检索客户信息,操纵或更新他们在数据库中的记录,或使用它来呈现数据。

风景

该视图包含用户界面和应用程序的表示形式。

例如,客户视图将包括所有UI组件,例如文本框,下拉列表以及用户与之交互的其他内容。

控制器

最后,控制器包含所有与业务相关的逻辑并处理传入的请求。它是模型和视图之间的接口。

例如,客户控制器将处理来自客户视图的所有交互和输入,并使用客户模型更新数据库。将使用相同的控制器来查看客户数据。

这是一个有助于可视化MVC架构以及一切如何协同工作的图表:

1

模型视图控制器体系结构如何工作– MVC解释了
模型视图控制器的流程图

MVC体系结构如何工作

首先,浏览器向控制器发送请求。然后,控制器与模型进行交互以发送和接收数据。

然后,Controller与View交互以呈现数据。视图仅关注如何呈现信息,而不关注最终呈现。这将是一个动态HTML文件,它根据Controller发送的数据来呈现数据。

最终,View将其最终呈现发送到Controller,而Controller将该最终数据发送到用户输出。

重要的是视图和模型永远不会相互影响。它们之间唯一发生的交互是通过控制器。

这意味着应用程序和接口的逻辑永远不会相互影响,这使得编写复杂的应用程序变得更加容易。

让我们看一个简单的例子:

2

让我们看看这里发生了什么。首先,用户通过Web浏览器或移动应用程序输入他们想要的电影列表。

然后,浏览器将请求发送到控制器以获取电影列表。

接下来,控制器将要求模型从数据库中查找电影列表。

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') } })     
控制器发送请求以请求影片列表(行号*)‌

然后,模型搜索数据库,并将电影列表返回给控制器。

const mongoose = require('mongoose') 
const MovieSchema = new mongoose.Schema
({ 
	name:{ 
        type:String, 
        required:true 
    }, 
	description:{ 
    	type:String 
    } 
}) 

module.exports = mongoose.model('Movies',MovieSchema)
电影模型架构。

如果控制器从模型中获取电影列表,则控制器将要求视图显示电影列表。

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格式返回给控制器。

<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>
以HTML形式显示的“电影返回视图”列表。

最后,控制器将获取该HTML并将其返回给用户,从而获得电影列表作为输出。

包起来

那里有很多软件体系结构,但是Model-View-Controller是最流行和广泛使用的。它降低了代码复杂度,并使软件易于理解。

现在您知道了Model-View-Controller背后的概念。

点击阅读原文

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/5103.html

发表评论

登录后才能评论