用乐高解释模型-视图-控制器（MVC）框架

预计所需阅读时间：6分钟

乐高！

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

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

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

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

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

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

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

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

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

请求到达控制器controller...

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

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

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

所以请求来了...

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

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

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

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

总结...

用乐高建造时：

你哥哥要求你造宇宙飞船。
您收到请求。
你检索和组织建造宇宙飞船所需的所有乐高。
你用乐高建造宇宙飞船，把完工的宇宙飞船呈现给你的兄弟。

在Web应用中：

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

从更技术的角度来看

总结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 %}