Ruby on Rails 入门教程：视图与模板引擎

Ruby on Rails（通常简称为 Rails）是一个强大的 web 应用框架，它遵循 MVC（模型-视图-控制器）架构模式。在 Rails 中，视图负责呈现数据并与用户交互。视图通常使用模板引擎来生成 HTML 内容。本文将深入探讨 Rails 中的视图与模板引擎，帮助你掌握如何创建动态网页。

1. 视图的基本概念

在 Rails 中，视图是用户界面的一部分，负责将数据呈现给用户。视图通常与控制器配合使用，控制器从模型中获取数据，并将其传递给视图进行渲染。

1.1 视图文件的结构

Rails 视图文件通常位于 app/views 目录下。每个控制器都有一个对应的视图文件夹，文件名与控制器的动作相对应。例如，PostsController 的视图文件夹为 app/views/posts，其中包含与 PostsController 中的动作相对应的视图文件。

1.2 视图文件的扩展名

Rails 默认使用 ERB（Embedded Ruby）作为模板引擎，视图文件的扩展名为 .html.erb。ERB 允许你在 HTML 中嵌入 Ruby 代码。

示例代码

# app/controllers/posts_controller.rb
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>

2. 模板引擎

Rails 支持多种模板引擎，最常用的是 ERB 和 Haml。每种模板引擎都有其优缺点，适合不同的开发需求。

2.1 ERB（Embedded Ruby）

ERB 是 Rails 的默认模板引擎，允许在 HTML 中嵌入 Ruby 代码。它的语法简单易懂，适合初学者。

优点

易于学习：ERB 的语法与 HTML 非常相似，容易上手。
灵活性：可以在 HTML 中直接嵌入 Ruby 代码，适合动态内容生成。

缺点

可读性：当 Ruby 代码嵌入过多时，可能导致视图文件变得难以阅读。
性能：ERB 的性能相对较低，尤其是在复杂的视图中。

示例代码

<!-- app/views/posts/show.html.erb -->
<h1><%= @post.title %></h1>
<p><%= @post.content %></p>

2.2 Haml

Haml 是一种更简洁的模板引擎，使用缩进而不是 HTML 标签来表示结构。它可以减少代码量，提高可读性。

优点

简洁性：Haml 的语法更简洁，减少了冗余的 HTML 标签。
可读性：通过缩进表示层级关系，使得代码更易于阅读。

缺点

学习曲线：对于习惯于 HTML 的开发者，Haml 可能需要一些时间来适应。
调试困难：由于没有明确的 HTML 标签，调试时可能不如 ERB 直观。

示例代码

# app/views/posts/show.haml
%h1= @post.title
%p= @post.content

3. 视图中的辅助方法

Rails 提供了许多辅助方法来简化视图的开发。辅助方法通常定义在 app/helpers 目录下的模块中。

3.1 创建辅助方法

你可以创建自定义的辅助方法来处理视图中的常见任务。例如，创建一个格式化日期的辅助方法。

示例代码

# app/helpers/posts_helper.rb
module PostsHelper
  def format_date(date)
    date.strftime("%Y年%m月%d日")
  end
end

<!-- app/views/posts/show.html.erb -->
<p>发布日期: <%= format_date(@post.created_at) %></p>

3.2 使用 Rails 内置辅助方法

Rails 提供了许多内置的辅助方法，例如 link_to 和 form_for，可以帮助你快速生成链接和表单。

示例代码

<!-- app/views/posts/index.html.erb -->
<%= link_to '创建新文章', new_post_path %>

4. 视图布局

Rails 允许你为应用程序定义布局，以便在多个视图之间共享相同的 HTML 结构。布局文件通常位于 app/views/layouts 目录下。

4.1 创建布局

你可以创建一个布局文件，例如 application.html.erb，并在其中定义页面的基本结构。

示例代码

<!-- app/views/layouts/application.html.erb -->
<!DOCTYPE html>
<html>
<head>
  <title>我的博客</title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= stylesheet_link_tag 'application', media: 'all' %>
  <%= javascript_pack_tag 'application' %>
</head>
<body>
  <header>
    <h1>我的博客</h1>
    <nav>
      <%= link_to '首页', posts_path %>
      <%= link_to '创建新文章', new_post_path %>
    </nav>
  </header>
  <%= yield %>
  <footer>
    <p>版权所有 &copy; 2023</p>
  </footer>
</body>
</html>

4.2 使用布局

在控制器中，你可以指定使用哪个布局。默认情况下，Rails 会使用 application.html.erb 作为布局。

示例代码

# app/controllers/posts_controller.rb
class PostsController < ApplicationController
  layout 'application'

  def index
    @posts = Post.all
  end
end

5. 视图中的部分（Partial）

部分是可以重用的视图片段，通常用于减少代码重复。部分文件以 _ 开头，放在 app/views 目录下。

5.1 创建部分

你可以创建一个部分来显示文章的摘要。

示例代码

<!-- app/views/posts/_post.html.erb -->
<div class="post">
  <h2><%= post.title %></h2>
  <p><%= post.content.truncate(100) %></p>
</div>

5.2 渲染部分

在主视图中，你可以使用 render 方法来渲染部分。

示例代码

<!-- app/views/posts/index.html.erb -->
<h1>所有文章</h1>
<% @posts.each do |post| %>
  <%= render 'post', post: post %>
<% end %>

6. 注意事项

保持视图简洁：尽量将复杂的逻辑放在控制器或模型中，保持视图的简洁性。
使用部分：当你发现自己在多个视图中重复相同的代码时，考虑使用部分来重用代码。
性能优化：对于复杂的视图，考虑使用缓存来提高性能。

结论

在本教程中，我们深入探讨了 Ruby on Rails 中的视图与模板引擎。我们学习了如何创建视图、使用模板引擎、定义辅助方法、创建布局和部分。掌握这些知识将帮助你构建更高效、可维护的 Rails 应用程序。希望你能在实际开发中灵活运用这些技巧，提升你的开发效率。