2024-08-15发表2024-08-16更新软件开发 / Ruby框架6 分钟读完 (大约897个字)0次访问

20 视图和模板之了解视图层

在 Ruby on Rails 框架中，视图层是应用程序中处理用户界面的部分。视图负责呈现数据并与用户进行交互，它能够将控制器发送的数据以易于理解的格式展现出来。在本节中，我们将深入探讨 Rails 中的视图和模板，以及如何利用它们构建用户友好的界面。

视图的基础

在 Rails 中，每个控制器通常关联一个视图。视图文件存放在 app/views 目录下，通常以控制器名称为子目录。例如，如果有一个名为 PostsController 的控制器，其对应的视图文件夹将是 app/views/posts。

每个操作（或动作）都有一个与之相关联的视图模板。例如，PostsController 中的 index 动作将寻找 app/views/posts/index.html.erb 文件。这里的 .html.erb 是指该文件使用了 Ruby 的 ERB 模板引擎，允许在 HTML 中嵌入 Ruby 代码。

使用实例

假设我们有一个简单的博客应用。在 PostsController 中，我们有一个 index 动作，用于显示所有帖子。在该动作中，我们可能会获取所有的帖子并将其传递给视图：

class PostsController < ApplicationController
  def index
    @posts = Post.all
  end
end

在 app/views/posts/index.html.erb 文件中，我们可以使用如下代码呈现帖子列表：

<h1>所有帖子</h1>

<ul>
  <% @posts.each do |post| %>
    <li><%= post.title %></li>
  <% end %>
</ul>

在这个视图中，<% %> 用于执行 Ruby 代码，而 <%= %> 则用于输出结果。当用户访问 /posts 路由时，Rails 会渲染这个视图，并将所有帖子以列表的形式展示出来。

部分视图（Partial）

在实际应用中，多个视图可能会共享一些相同的代码。为了解决这个问题，Rails 提供了部分视图的概念。部分视图是可重用的模板，可以包含在其他视图中。

例如，我们可以创建一个部分视图 _post.html.erb，用于呈现单个帖子的内容：

1 2	<!-- app/views/posts/_post.html.erb --> <li><%= post.title %> - <%= link_to '查看', post_path(post) %></li>

然后在 index.html.erb 中，我们可以引用这个部分视图，避免代码重复：

<h1>所有帖子</h1>

<ul>
  <%= render @posts %>
</ul>

布局（Layout）

Rails 还支持布局（Layouts），用于定义整个应用的通用外观，如页眉和页脚。布局文件存放在 app/views/layouts 中，默认布局文件为 application.html.erb。

在布局文件中，我们可以使用 yield 方法来指定内容所在的位置：

<!-- app/views/layouts/application.html.erb -->
<!DOCTYPE html>
<html>
<head>
  <title>My Blog</title>
</head>
<body>
  <header>
    <h1>我的博客</h1>
  </header>

  <%= yield %>

  <footer>
    <p>版权所有 &copy; 2023 我的博客</p>
  </footer>
</body>
</html>

所有视图都会在布局文件中渲染，确保在每个页面上都有一致的结构。

总结

在 Rails 中，视图层通过 ERB 模板引擎将数据与 HTML 结合，帮助开发者构建出动态的用户界面。通过使用部分视图和布局，我们能够更好地管理视图代码，提高代码的重用性和可维护性。

在下一节中，我们将深入探讨 ERB 模板引擎的使用，它为我们的视图层添加了更多的动态功能。在这之前，确保你理解了视图层的基础知识以及如何在 Rails 应用中使用它们。

20 视图和模板之了解视图层

https://zglg.work/rails-zero/20/

作者

IT教程网(郭震)

发布于

2024-08-15

更新于

2024-08-16

许可协议

#Ruby框架

20 视图和模板之了解视图层

视图的基础

使用实例

部分视图（Partial）

布局（Layout）

总结

作者

发布于

更新于

许可协议

分享转发

学习下节

复习上节

交流

打卡评论