预计所需阅读时间:7分钟

乐高!

你已经十岁了,坐在你家的房间里,在你面前是一大桶乐高,有各种形状、大小。有些是蓝色、高大而且很长,就像拖拉机拖车一样,一些是红色的和几乎立方体的形状,有些是黄色的,像大宽大飞机翼,像玻璃片。有了所有这些这些类型的乐高,不知道你可以建立什么。

但惊喜的是,已经有一个请求request,你哥哥跑上前说:“嘿!帮我建造一个宇宙飞船!”

“好吧,”你认为,“宇宙飞船,实际上很酷!”

所以你开始工作,你开始找出你需要的乐高。有些大,有些小。飞船外部的颜色越来越多,发动机的颜色也越来越多,武器也有不同的颜色。

现在,你拥有所有的积木building blocks,是时候组装宇宙飞船。经过几个小时的辛苦工作,现在你面前有一艘宇宙飞船!

你跑去找你哥哥给他看成品。“哇,干得漂亮!”他想,“几个小时前我才问,不必做一件事,就在那儿,我希望一切都是容易的。”

如果我告诉你构建一个Web应用程序就像使用乐高构建一样,那该怎么办?

这一切都从请求request开始...

以乐高为例,是你哥哥让你建点东西。在Web应用中,用户输入 URL,请求查看特定页面。所以你的兄弟是用户。

请求到达控制器controller...

在刚刚的例子中,你是控制器。控制器负责抓取所有必要的构建基块,并在必要时对其进行组织。

这些构建基块被称为模型model...

不同类型的乐高是模型。你有所有不同的尺寸和形状,你找到你需要建立宇宙飞船的组件。在Web应用中,模型可帮助控制器从数据库中检索所需的所有信息。

所以请求来了...

控制器(您)收到请求。它进入模型 (乐高) 检索必要的项目。现在,一切都已经到位,以生产最终的产品。

最终产品称为视图view...

宇宙飞船就是视图。最终向提出请求的人(你的兄弟)展示的是最终产品。

在Web应用程序中,视图是用户在其浏览器中最后看到的页面。

总结...

用乐高建造时:

  1. 你哥哥要求你造宇宙飞船。
  2. 您收到请求。
  3. 你检索和组织建造宇宙飞船所需的所有乐高。
  4. 你用乐高建造宇宙飞船,把完工的宇宙飞船呈现给你的兄弟。mvc-lego

在Web应用中:

  1. 用户通过输入URL请求查看页面。
  2. 控制器收到该请求。
  3. 它使用模型检索所有必要的数据,组织它,并将其发送到视图。
  4. 视图然后使用该数据呈现在浏览器中呈现给用户的最终网页。

mvc_diagram_with_routes

从更技术的角度来看

总结MVC框架后,让我们深入了解一下所有这些,在更加技术层面上的运作方式。

当您在浏览器中键入URL,访问Web应用程序时,您正在请求查看应用程序中的某个页面。但是,应用程序如何知道要显示/呈现哪个页面呢?

构建 Web 应用时,可以定义所谓的路由。路由本质上是与不同页面关联的URL模式。因此,当有人输入URL时,在后台,应用程序会尝试将该URL与这些预定义的路由之一匹配。

因此,事实上,有四个主要组件在起作用:路由、模型、视图和控制器

路由routes

每个路由都与控制器相关联,具体来说,控制器中的特定函数,称为控制器操作。因此,当您输入URL时,应用程序将尝试查找匹配的路由,如果成功,它将调用该路由的关联控制器操作。

让我们以一个基本的Flask路由为例:

@app.route('/')
def main_page():
    pass

在这里,我们建立根路经/路由与main_page()关联的视图函数。

模型models与控制器controllers

在控制器操作中,通常发生两个主要事件:模型用于从数据库中读取所有必要的数据;二是将该数据传递到视图,并将视图渲染成请求的页面。通过模型读取的数据通常添加到数据结构(如列表或字典),这些数据是发送到视图的内容。

回到我们的Flask示例:

@app.route('/')
def main_page():
    """Searches the database for entries, then displays them."""
    db = get_db()
    cur = db.execute('select * from entries order by id desc')
    entries = cur.fetchall()
    return render_template('index.html', entries=entries)

现在,在视图函数中,我们从数据库中获取数据并执行一些基本逻辑。这将返回一个列表,我们分配给不同变量,该列表可在index.html模板中访问。

视图views

最后,在视图中,可以访问该数据结构,并且其中包含的信息将用于呈现用户最终在浏览器中看到的页面的HTML内容。
同样,回到我们的Flask应用程序,我们可以循环读取这些变量,并使用Jinja语法显示每个变量:

{% for entry in entries %}
  <li>
    <h2>{{ entry.title }}</h2>
    <div>{{ entry.text|safe }}</div>
  </li>
{% else %}
  <li><em>No entries yet. Add some!</em></li>
{% endfor %}

总结

因此,MVC请求过程的更详细的技术摘要如下:

  1. 用户通过输入URL请求查看页面。
  2. 网页应用程序将URL与预定义的路由匹配。
  3. 调用与路由关联的控制器操作。
  4. 控制器使用模型从数据库中读取所有必要的数据,将数据放到列表或字典中,加载到视图,并按数据结构传递变量。
  5. 视图访问数据结构,并用它来渲染请求的页面,然后在其浏览器中向用户显示该页面。

这是亚历克斯·科尔曼(Alex Coleman)的客座帖子,他是一名编码讲师,并咨询了网络开发人员。

原文链接:https://realpython.com/the-model-view-controller-mvc-paradigm-summarized-with-legos/

作者:Alex Coleman

博主翻译后,对部分用语略有调整。