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

22 部分视图和布局

在 Ruby on Rails 中，视图和模板的设计是构建用户界面的重要组成部分。在前一篇中，我们介绍了如何使用 ERB 模板引擎来渲染视图。在本篇中，我们将深入探讨如何创建部分视图和布局，以提高代码的重用性和可维护性。

什么是部分视图？

部分视图（Partial）是用于将视图划分为更小、更可重用组件的视图。部分视图的主要目的是减少重复代码，并使代码结构更加清晰。你可以将一些可以共享的元素提取到单独的部分视图中，从而在不同的视图中重用它们。

创建部分视图

要创建部分视图，我们首先需要在视图目录中创建一个以下划线开头的文件，例如 _form.html.erb。下面是一个创建部分视图的步骤：

创建部分视图文件
在 app/views/posts/ 目录下创建一个文件 _form.html.erb，这个部分视图将用于显示一个表单。

<div class="post-form">
  <%= form_with model: @post do |form| %>
    <div class="form-group">
      <%= form.label :title %>
      <%= form.text_field :title, class: "form-control" %>
    </div>
    <div class="form-group">
      <%= form.label :content %>
      <%= form.text_area :content, class: "form-control" %>
    </div>
    <%= form.submit "提交", class: "btn btn-primary" %>
  <% end %>
</div>

在主视图中渲染部分视图
在 app/views/posts/new.html.erb 和 app/views/posts/edit.html.erb 中，我们可以使用 render 方法来引入这个部分视图，示例如下：
1
2
<h1>创建新帖子</h1>
<%= render 'form' %>
1
2
<h1>编辑帖子</h1>
<%= render 'form' %>

这种方式使得我们可以复用相同的表单代码，而不需要在每个视图中重复书写。

布局（Layouts）

布局是指在额外的视图外部添加的结构和样式。布局可以定义整个应用程序的页面框架，例如头部、脚部和导航菜单。每个视图都可以系统地使用相同的布局，从而提供一致的用户体验。

创建布局

在 Rails 中，布局文件通常位于 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>
      <ul>
        <li><%= link_to '首页', root_path %></li>
        <li><%= link_to '创建帖子', new_post_path %></li>
      </ul>
    </nav>
  </header>

  <main>
    <%= yield %> <!-- 视图内容将在这里插入 -->
  </main>

  <footer>
    <p>&copy; <%= Time.now.year %> 我的博客</p>
  </footer>
</body>
</html>

在这个布局中，我们使用了 yield 关键字来指示在布局中插入的视图内容。每个视图都将会在 <main> 标签内展示。

使用布局

默认情况下，Rails 会使用 application.html.erb 作为所有视图的布局文件。如果你需要为特定的视图使用不同的布局，可以在控制器中指定。例如：

class PostsController < ApplicationController
  layout "special_layout", only: [:show]
  
  # 其他控制器代码...
end

在这个例子中，show 动作将使用名为 special_layout.html.erb 的布局文件，而其他动作将继续使用默认的布局文件。

案例结合

假设我们已经创建了一个 Posts 控制器，并在控制器中定义了 new 和 edit 方法，来分别处理新帖子创建和帖子编辑的请求。现在，我们可以结合上述部分视图和布局的使用，来实现一个完整的功能。

class PostsController < ApplicationController
  def new
    @post = Post.new
  end

  def create
    @post = Post.new(post_params)
    if @post.save
      redirect_to @post, notice: '帖子创建成功！'
    else
      render :new
    end
  end
  
  def edit
    @post = Post.find(params[:id])
  end

  def update
    @post = Post.find(params[:id])
    if @post.update(post_params)
      redirect_to @post, notice: '帖子更新成功！'
    else
      render :edit
    end
  end

  private

  def post_params
    params.require(:post).permit(:title, :content)
  end
end

在 new.html.erb 和 edit.html.erb 中，我们分别渲染了 _form.html.erb 部分视图，使用布局来提供页面的整体结构，从而实现了代码的组织和界面的一致性。

小结

在这一节中，我们探讨了如何使用部分视图和布局来构建更灵活、可重用的视图。在实际开发中，这种结构将有助于减少代码重复，提高维护性。在下一篇教程中，我们将继续研究如何处理表单，创建用户输入的表单以支持动态数据输入。

22 部分视图和布局

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

作者

IT教程网(郭震)

发布于

2024-08-15

更新于

2024-08-16

许可协议

#Ruby框架

22 部分视图和布局

什么是部分视图？

创建部分视图

布局（Layouts）

创建布局

使用布局

案例结合

小结

作者

发布于

更新于

许可协议

分享转发

学习下节

复习上节

交流

打卡评论