12 Rails的MVC架构之视图的职责

在上一章节中，我们探讨了 Rails 应用中的模型（Model）职责，理解了数据如何在应用内被管理和持久化。本章将深入讨论 视图（View） 在 MVC（Model-View-Controller） 架构中的角色和职责。视图是你应用的前端部分，它负责呈现数据给用户并处理用户的交互，但并不包含任何业务逻辑。

视图的基本职责

在 Rails 中，视图的主要职责包括：

1. 数据的展示：视图从控制器接收数据，并根据逻辑构建最终展示给用户的 HTML。
2. 用户界面的结构：视图定义用户界面的结构和样式，确保用户可以友好地与应用交互。
3. 处理用户输入：视图可以包含表单，用于接收用户输入的数据，并将其发送给控制器进行处理。

示例应用

假设我们正在构建一个简单的博客应用。我们的模型可能包含文章（Article）和作者（Author）。在这一部分，我们将专注于如何使用 Rails 的视图来展示这些文章。

创建视图

首先，我们会在 ArticlesController 中设置我们的 index 动作，以获取所有文章并将其传递给视图：

class ArticlesController < ApplicationController
  def index
    @articles = Article.all
  end
end

这段代码将所有文章从数据库中取出，并将其赋值给实例变量 @articles。接下来，我们需要创建视图文件来展示这些文章。

在 app/views/articles/index.html.erb 文件中，我们可以使用以下代码来展示文章列表：

<h1>文章列表</h1>

<% if @articles.any? %>
  <ul>
    <% @articles.each do |article| %>
      <li><%= link_to article.title, article_path(article) %></li>
    <% end %>
  </ul>
<% else %>
  <p>没有文章。</p>
<% end %>

在这段代码中，使用了 <%= ... %> 语法来输出 article.title，并且使用 link_to 方法创建文章的链接。<% ... %> 语法则用于执行控制逻辑，如循环和条件判断，这些都是典型的视图职责。

视图中的局部视图

为了提高代码的复用性，我们可以使用局部视图（Partial Views）。例如，我们可以将每个文章的展示单元提取到一个局部视图中。

首先，在 app/views/articles/_article.html.erb 文件中，添加如下代码：

<li><%= link_to article.title, article_path(article) %></li>

接着，在 index.html.erb 中，我们可以通过调用这个局部视图来简化代码：

<h1>文章列表</h1>

<% if @articles.any? %>
  <ul>
    <%= render @articles %>
  </ul>
<% else %>
  <p>没有文章。</p>
<% end %>

这里我们使用 <%= render @articles %> 来渲染每个文章的局部视图。这样，代码结构更加清晰，并且便于维护。

表单的创建

视图的另一个重要职责是处理用户输入，通常表现为表单。在我们的博客应用中，用户需要能够创建新的文章。我们在 ArticlesController 中添加一个 new 动作，并准备相应的视图。

def new
  @article = Article.new
end

在 app/views/articles/new.html.erb 中，我们可以使用以下代码构建一个表单：

<h1>新建文章</h1>

<%= form_with model: @article do |form| %>
  <div>
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>
  <div>
    <%= form.label :content %>
    <%= form.text_area :content %>
  </div>
  <div>
    <%= form.submit '创建文章' %>
  </div>
<% end %>

在这个示例中，form_with 辅助方法用于生成与模型绑定的表单。它将自动为我们创建相应的表单输入字段，并确保正确的路由和 HTTP 方法。

结论

在本章中，我们深入了解了 视图 在 Rails 应用中的职责。通过展示数据、构建用户界面以及处理用户输入，视图为用户提供了与应用交互的界面。接下来，我们将继续探讨 控制器（Controller） 的职责，它负责协调模型和视图之间的交互，确保应用按照预期响应用户的请求。