mvc中的mvc分别指什么_什么是MVC,它像三明治店吗?

mvc中的mvc分别指什么

by Adam Wattis

通过亚当·沃蒂斯(Adam Wattis)

什么是MVC,它像三明治店吗? (What is MVC, and how is it like a sandwich shop?)

In today’s Internet, websites tend to be interactive, dynamic, and serve some sort of function. They can be more than a static HTML and CSS page. Here’s where the Model View Controller (MVC) architectural pattern comes in.

在当今的Internet中,网站往往是交互式的,动态的,并具有某种功能。 它们不仅可以是静态HTML和CSS页面。 这就是模型视图控制器 (MVC)架构模式的用武之地。

User interaction enables use cases which would be impossible with only a statically loaded page. This is why, in modern web development, it is important to understand how dynamic pages are created. Perhaps the key to this is familiarity with the MVC architectural pattern.

通过用户交互,可以实现仅静态加载的页面无法实现的用例。 这就是为什么在现代Web开发中,重要的是要了解如何创建动态页面。 也许关键在于对MVC架构模式的熟悉。

If you are a beginner at web development, words such as “architectural pattern” may sound dauntingly complex and abstract. But the general idea behind MVC is actually very intuitive. I will do my best to explain it in such a way in this article.

如果您是Web开发的初学者,那么诸如“建筑模式”之类的词听起来可能令人生畏,复杂而抽象。 但是MVC背后的总体思路实际上是非常直观的。 我将尽力在本文中以这种方式进行解释。

了解MVC重要吗? (Is MVC important to understand?)

In my mind, the answer to this question is yes.

在我看来,这个问题的答案是肯定的。

MVC is important to understand because it is the basic structure which most web applications are built on. The same is also true for mobile apps and desktop programs.

了解MVC非常重要,因为它是大多数Web应用程序所基于的基本结构。 移动应用程序和桌面程序也是如此。

There are many variations around the basic idea of MVC. The initial conceptwas created around 1978 at Xerox PARC by Trygve Reenskaug. It was intended to help an end user manipulate and control an underlying computer system in a more visual and intuitive way.

关于MVC的基本概念有很多变体。 最初的概念是1978年左右由Trygve Reenskaug在施乐PARC创建的。 它旨在帮助最终用户以更直观和直观的方式来操纵和控制底层计算机系统。

MVC achieves this though letting a user interact with a User Interface. This allows for manipulation and control over the system.

MVC通过允许用户与用户界面进行交互来实现此目的。 这允许对系统进行操纵和控制。

高层次的概念 (The high-level concept)

Without using any fancy words, I will now explain the basic idea behind MVC through a simple use case.

现在,不用花哨的词,我将通过一个简单的用例来解释MVC背后的基本思想。

Imagine you are in a sandwich shop. You walk up to the counter and look at the menu.

想象你在一家三明治店里。 您走到柜台,看看菜单。

You decide you want the turkey sandwich (in fact, you can already imagine biting into it). So you tell the clerk your order.

您决定要土耳其三明治(实际上,您已经可以想象一下要咬它)。 所以你告诉店员你的订单。

The clerk knows exactly what you want when you order the turkey sandwich. He turns around to the sandwich-making station, and tells the people there what they need to know to fulfill your order.

当您订购火鸡肉三明治时,店员会确切地知道您想要什么。 他转身到三明治制作站,并告诉那里的人们要完成您的订单需要了解什么。

The sandwich-making team has many resources at their disposal. Ham, turkey, tuna, salad and cheese can all go in the sandwiches. They take the ingredients required for your order, and assemble them into the turkey sandwich that you have ordered.

三明治制作团队有很多资源可供使用。 火腿,火鸡,金枪鱼,沙拉和奶酪都可以放入三明治中。 他们采用您订购所需的食材,然后将它们组装到您订购的火鸡肉三明治中。

After the sandwich is complete, it is handed over to you. You now have the turkey sandwich you wanted.

三明治完成后,将其交给您。 现在,您有了想要的火鸡三明治。

一个解释 (An explanation)

In this previous example, there were three separate and distinct objects which all represent one part in our MVC:

在前面的示例中,有三个单独且不同的对象,它们全部代表我们的MVC中的一部分:

  • The sandwich-making station (Model)

    三明治制作台(型号)
  • The finished sandwich you received in the end (View)

    您最终收到的成品三明治(查看)
  • The clerk (Controller)

    业务员(控制器)

When you ordered your sandwich, you had a distinct idea of what you expected the end result to be: a turkey sandwich (view).

订购三明治时,您对预期的最终结果有不同的认识:火鸡三明治( 视图 )。

This is the same as when you’re on a website. For example, on Facebook you can press the ‘Friends’ button to see a list of your friends. You would expect your friend list to appear, and can already visualize it in your mind.

这与您在网站上的情况相同。 例如,在Facebook上,您可以按“朋友”按钮以查看您的朋友列表。 您希望您的朋友列表出现,并且可以在您的脑海中将其可视化。

When you press the ‘Friends’ button, you make a request to Facebook’s servers. The request is to serve you with your friends list, just like you requested your sandwich to the clerk (controller).

当您按下“朋友”按钮时,您向Facebook的服务器发出请求。 该请求是为你和你的朋友列表,就像你要求你的三明治店员( 控制器 )。

Your request arrives at Facebook’s servers. It hits their controller, which tries to resolve it. It then grabs all your friends from a database, just like the sandwich-maker (model) grabs all the ingredients.

您的请求到达了Facebook的服务器。 它命中了他们的控制器,试图解决它。 然后,它从数据库中获取所有朋友,就像三明治制造商( 模型 )获取所有成分一样。

These resources (your friends list data) is assembled into a response. This is similar to how the sandwich-maker assembled all the ingredients into a finished sandwich (view).

这些资源(您的朋友列出数据)被组合成一个响应。 这类似于三明治制造商将所有配料组装成成品三明治的方式( 视图 )。

This friends list is then sent to you for consumption, like the sandwich was in the end of your order.

然后,此朋友列表会发送给您供您消费,就像三明治在您的订单末尾一样。

摘要 (Summary)

The clerk is the controller:

业务员是控制者:

  • He knows all the possible combinations of sandwiches you can order

    他知道您可以订购的所有可能的三明治组合
  • He gathers your info and sends an order back to be resolved

    他收集了您的信息并发回订单以解决

The sandwich-makers are the models:

三明治机是以下型号:

  • They know what items are needed to assemble your finished sandwich

    他们知道组装成品三明治需要哪些物品

The sandwich is the view:

三明治是这样的:

  • It is the ‘thing’ the end user finally receives

    这是最终用户最终获得的“东西”

使用网络框架 (Using a web framework)

Controller:The controller handles incoming requests. In a web framework, this would be a declaration of specific URLs that map to specific functionality that composes your request.

控制器:控制器处理传入的请求。 在Web框架中,这是对特定URL的声明,这些URL映射到构成您的请求的特定功能。

Example URLswebsite.com/profile/ --> returns your profilewebsite.com/friends/ --> returns list of friendswebsite.com/friend={userName}/ --> returns specific friend

Model:This is what your data looks like on the back end.

模型:这就是您的数据在后端的外观。

User:- userName- firstName- lastName- friends

View:This is the HTML template that is returned after your request is resolved. If the request is successful, you should get a page with your friends. Otherwise, you might get a 404 ‘Not found’ page.

视图:这是在您的请求得到解决后返回HTML模板。 如果请求成功,您应该和您的朋友一起获得一个页面。 否则,您可能会看到404“未找到”页面。

<ul>  <li>Friend 1: {friendList[0].userName}</li>  <li>Friend 2: {friendList[1].userName}</li>  <li>Friend 3: {friendList[2].userName}</li>  ...</ul>

结论 (Conclusion)

When interacting with a system, you are usually able to Create, Retreive, Update and Delete objects in the underlying database. This is often abbreviated to “CRUD.” Here, we have looked at retrieving data.

当与系统交互,则通常能够至C reate,R etreive,U PDATE和在底层数据库d elete对象。 这通常缩写为“ CRUD” 。 在这里,我们已经研究了检索数据。

I did not explain here how a user can modify the data in the database (the C, U and D in CRUD). Usually, you are able to add, update and delete things on a website.

我在这里没有解释用户如何修改数据库中的数据( CRUD中CUD )。 通常,您可以在网站上添加,更新和删除内容。

The functionality for this is pretty much the same as explained above. The difference is, your data is attached to your request to the controller.

其功能与上面说明的几乎相同。 区别在于,您的数据将附加到您对控制器的请求中。

I hope that you now have a clearer understanding of what MVC architecture is and how it might work.

我希望您现在对MVC架构及其工作原理有更清晰的了解。

If you thought this explanation was helpful, or have any questions or thought about how to improve this article, please feel free to comment!

如果您认为此说明有用,或者对如何改进本文有任何疑问或想法,请随时发表评论!

翻译自: https://www.freecodecamp.org/news/simplified-explanation-to-mvc-5d307796df30/

mvc中的mvc分别指什么

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值