# 11.2 显示微博 尽管我们还没实现直接在网页中发布微博的功能（将在 [11.3.2 节](#creating-microposts)实现），不过还是有办法显示微博，并对显示的内容进行测试。我们将按照 Twitter 的方式，不在微博资源的 `index` 页面显示用户的微博，而在用户资源的 `show` 页面显示，构思图如[图 11.4](#fig-user-microposts-mockup) 所示。我们会先使用一些简单的 ERb 代码，在用户的资料页面显示微博，然后在 [9.3.2 节](chapter9.html#sample-users)的种子数据中添加一些微博，这样才有内容可以显示。 图 11.4：显示有微博的资料页面构思图 ## 11.2.1 渲染微博 我们计划在用户的资料页面（`show.html.erb`）显示用户的微博，还要显示用户发布了多少篇微博。你会发现，很多做法和 [9.3 节](chapter9.html#showing-all-users)列出所有用户时类似。 虽然 [11.3 节](#manipulating-microposts)才会用到微博控制器，但马上就需要使用视图，所以现在就要生成控制器： ``` $ rails generate controller Microposts ``` 这一节的主要目的是渲染用户发布的所有微博。[9.3.5 节](chapter9.html#partial-refactoring)用过这样的代码： ``` <ul class="users"> <%= render @users %> </ul> ``` 这段代码会自动使用局部视图 `_user.html.erb` 渲染 `@users` 变量中的每个用户。同样地，我们要编写 `_micropost.html.erb` 局部视图，使用类似的方式渲染微博集合： ``` <ol class="microposts"> <%= render @microposts %> </ol> ``` 注意，我们使用的是有序列表标签 `ol`（而不是无需列表 `ul`），因为微博是按照一定顺序显示的（按时间倒序）。相应的局部视图如[代码清单 11.21](#listing-micropost-partial) 所示。 ##### 代码清单 11.21：渲染单篇微博的局部视图 app/views/microposts/_micropost.html.erb ``` <li id="micropost-<%= micropost.id %>"> <%= link_to gravatar_for(micropost.user, size: 50), micropost.user %> <span class="user"><%= link_to micropost.user.name, micropost.user %></span> <span class="content"><%= micropost.content %></span> <span class="timestamp"> Posted <%= time_ago_in_words(micropost.created_at) %> ago. </span> </li> ``` 这个局部视图使用了 `time_ago_in_words` 辅助方法，这个方法的作用应该很明显，效果会在 [11.2.2 节](#sample-microposts)看到。[代码清单 11.21](#listing-micropost-partial) 还为每篇微博指定了 CSS ID： ``` <li id="micropost-<%= micropost.id %>"> ``` 这是好习惯，说不定以后要处理（例如使用 JavaScript）单篇微博呢。 接下来要解决显示大量微博的问题。我们可以使用 [9.3.3 节](chapter9.html#pagination)显示大量用户的方法来解决这个问题，即使用分页。和前面一样，我们要使用 `will_paginate` 方法： ``` <%= will_paginate @microposts %> ``` 如果和用户列表页面的代码（[代码清单 9.41](chapter9.html#listing-will-paginate-index-view)）比较的话，会发现之前使用的代码是： ``` <%= will_paginate %> ``` 前面之所以可以直接调用，是因为在用户控制器中，`will_paginate` 假定有一个名为 `@users` 的实例变量（[9.3.3 节](chapter9.html#pagination)说过，这个变量所属的类应该是 `AvtiveRecord::Relation`）。现在，因为还在用户控制器中，但是我们要分页显示微博，所以必须明确地把 `@microposts` 变量传给 `will_paginate` 方法。当然了，我们还要在 `show` 动作中定义 `@microposts` 变量，如[代码清单 11.22](#listing-user-show-microposts-instance) 所示。 ##### 代码清单 11.22：在用户控制器的 `show` 动作中定义 `@microposts` 变量 app/controllers/users_controller.rb ``` class UsersController < ApplicationController . . . def show @user = User.find(params[:id]) @microposts = @user.microposts.paginate(page: params[:page]) end . . . end ``` 注意看 `paginate` 方法是多么智能，甚至可以在关联上使用，从 `microposts` 表中取出每一页要显示的微博。 最后，还要显示用户发布的微博数量。我们可以使用 `count` 方法实现： ``` user.microposts.count ``` 和 `paginate` 方法一样，`count` 方法也可以在关联上使用。`count` 的计数过程不是把所有微博都从数据库中读取出来，然后再在所得的数组上调用 `length` 方法，如果这样做的话，微博数量一旦很多，效率就会降低。其实，`count` 方法直接在数据库层计算，让数据库统计指定的 `user_id` 拥有多少微博。（所有数据库都会对这种操作做性能优化。如果统计数量仍然是应用的性能瓶颈，可以使用“[计数缓存](http://railscasts.com/episodes/23-counter-cache-column)”进一步提速。） 综上所述，现在可以把微博添加到资料页面了，如[代码清单 11.23](#listing-user-show-microposts) 所示。注意，`if @user.microposts.any?`（在[代码清单 7.19](chapter7.html#listing-errors-partial) 中见过类似的用法）的作用是，如果用户没有发布微博，不显示一个空列表。 ##### 代码清单 11.23：在用户资料页面中加入微博 app/views/users/show.html.erb ``` <% provide(:title, @user.name) %> <div class="row"> <aside class="col-md-4"> <section class="user_info"> <h1> <%= gravatar_for @user %> <%= @user.name %> </h1> </section> </aside> <div class="col-md-8"> <% if @user.microposts.any? %> <h3>Microposts (<%= @user.microposts.count %>)</h3> <ol class="microposts"> <%= render @microposts %> </ol> <%= will_paginate @microposts %> <% end %> </div> </div> ``` 现在，我们可以查看一下修改后的用户资料页面，如[图 11.5](#fig-user-profile-no-microposts)。可能会出乎你的意料，不过也是理所当然的，因为现在还没有微博。下面我们就来改变这种状况。 图 11.5：添加显示微博的代码后用户的资料页面，但没有微博 ## 11.2.2 示例微博 在 [11.2.1 节](#rendering-microposts)，为了显示用户的微博，创建或修改了几个模板，但是结果有点不给力。为了改变这种状况，我们要在 [9.3.2 节](chapter9.html#sample-users)用到的种子数据中加入一些微博。 为所有用户添加示例微博要花很长时间，所以我们决定只为前六个用户添加。为此，要使用 `take` 方法： ``` User.order(:created_at).take(6) ``` 调用 `order` 方法的作用是按照创建用户的顺序查找六个用户。 我们要分别为这六个用户创建 50 篇微博（数量要多于 30 个才能分页）。为了生成微博的内容，我们要使用 Faker 提供的 [`Lorem.sentence`](http://rubydoc.info/gems/faker/1.3.0/Faker/Lorem) 方法。[[2](#fn-2)]添加示例微博后的种子数据如[代码清单 11.24](#listing-sample-microposts) 所示。 ##### 代码清单 11.24：添加示例微博 db/seeds.rb ``` . . . users = User.order(:created_at).take(6) 50.times do content = Faker::Lorem.sentence(5) users.each { |user| user.microposts.create!(content: content) } end ``` 然后，像之前一样重新把种子数据写入开发数据库： ``` $ bundle exec rake db:migrate:reset $ bundle exec rake db:seed ``` 完成后还要重启 Rails 开发服务器。 现在，我们能看到 [11.2.1 节](#rendering-microposts)的劳动成果了——用户资料页面显示了微博。[[3](#fn-3)]初步结果如[图 11.6](#fig-user-profile-microposts-no-styling) 所示。 图 11.6：用户资料页面显示的微博，还没添加样式 [图 11.6](#fig-user-profile-microposts-no-styling) 中显示的微博还没有样式，那我们就加入一些样式，如[代码清单 11.25](#listing-micropost-css) 所示，[[4](#fn-4)]然后再看一下页面显示的效果。 ##### 代码清单 11.25：微博的样式（包含本章要使用的所有 CSS） app/assets/stylesheets/custom.css.scss ``` . . . /* microposts */ .microposts { list-style: none; padding: 0; li { padding: 10px 0; border-top: 1px solid #e8e8e8; } .user { margin-top: 5em; padding-top: 0; } .content { display: block; margin-left: 60px; img { display: block; padding: 5px 0; } } .timestamp { color: $gray-light; display: block; margin-left: 60px; } .gravatar { float: left; margin-right: 10px; margin-top: 5px; } } aside { textarea { height: 100px; margin-bottom: 5px; } } span.picture { margin-top: 10px; input { border: 0; } } ``` [图 11.7](#fig-user-profile-with-microposts) 是第一个用户的资料页面，[图 11.8](#fig-other-profile-with-microposts) 是另一个用户的资料页面，[图 11.9](#fig-user-profile-microposts) 是第一个用户资料页面的第 2 页，页面底部还显示了分页链接。注意观察这三幅图，可以看到，微博后面显示了距离发布的时间（例如，“Posted 1 minute ago.”），这就是[代码清单 11.21](#listing-micropost-partial) 中 `time_ago_in_words` 方法实现的效果。过一会再刷新页面，这些文字会根据当前时间自动更新。 图 11.7：显示有微博的用户资料页面（[/users/1](http://localhost:3000/users/1)）图 11.8：另一个用户的资料页面（[/users/5](http://localhost:3000/users/5)），也显示有微博图 11.9：微博分页链接（[/users/1?page=2](http://localhost:3000/users/1?page=2)） ## 11.2.3 资料页面中微博的测试 新激活的用户会重定向到资料页面，那时已经测试了资料页面是否能正确渲染（[代码清单 10.31](chapter10.html#listing-signup-with-account-activation-test)）。本节，我们要编写几个简短的集成测试，检查资料页面中的其他内容。首先，生成资料页面的集成测试文件： ``` $ rails generate integration_test users_profile invoke test_unit create test/integration/users_profile_test.rb ``` 为了测试资料页面中显示有微博，我们要把微博固件和用户关联起来。Rails 提供了一种便利的方法，可以在固件中建立关联，例如： ``` orange: content: "I just ate an orange!" created_at: <%= 10.minutes.ago %> user: michael ``` 把 `user` 的值设为 `michael` 后，Rails 会把这篇微博和指定的用户固件关联起来： ``` michael: name: Michael Example email: michael@example.com . . . ``` 为了测试微博分页，我们要使用[代码清单 9.43](chapter9.html#listing-users-fixtures-extra-users) 中用到的方法，通过嵌入式 Ruby 代码多生成一些微博固件： ``` <% 30.times do |n| %> micropost_<%= n %>: content: <%= Faker::Lorem.sentence(5) %> created_at: <%= 42.days.ago %> user: michael <% end %> ``` 综上，修改后的微博固件如[代码清单 11.26](#listing-updated-micropost-fixtures) 所示。 ##### 代码清单 11.26：添加关联用户后的微博固件 test/fixtures/microposts.yml ``` orange: content: "I just ate an orange!" created_at: <%= 10.minutes.ago %> user: michael tau_manifesto: content: "Check out the @tauday site by @mhartl: http://tauday.com" created_at: <%= 3.years.ago %> user: michael cat_video: content: "Sad cats are sad: http://youtu.be/PKffm2uI4dk" created_at: <%= 2.hours.ago %> user: michael most_recent: content: "Writing a short test" created_at: <%= Time.zone.now %> user: michael <% 30.times do |n| %> micropost_<%= n %>: content: <%= Faker::Lorem.sentence(5) %> created_at: <%= 42.days.ago %> user: michael <% end %> ``` 测试数据准备好了，测试本身也很简单：访问资料页面，检查页面的标题、用户的名字、Gravatar 头像、微博数量和分页显示的微博，如[代码清单 11.27](#listing-user-profile-test) 所示。注意，为了使用[代码清单 4.2](chapter4.html#listing-title-helper) 中的 `full_title` 辅助方法测试页面的标题，我们要把 `ApplicationHelper` 模块引入测试。[[5](#fn-5)] ##### 代码清单 11.27：用户资料页面的测试 GREEN test/integration/users_profile_test.rb ``` require 'test_helper' class UsersProfileTest < ActionDispatch::IntegrationTest include ApplicationHelper def setup @user = users(:michael) end test "profile display" do get user_path(@user) assert_template 'users/show' assert_select 'title', full_title(@user.name) assert_select 'h1', text: @user.name assert_select 'h1>img.gravatar' assert_match @user.microposts.count.to_s, response.body assert_select 'div.pagination' @user.microposts.paginate(page: 1).each do |micropost| assert_match micropost.content, response.body end end end ``` 检查微博数量时用到了 `response.body`，[第 10 章的练习](chapter10.html#account-activation-and-password-reset-exercises)中见过。别被名字迷惑了，其实 `response.body` 的值是整个页面的 HTML 源码（不只是 `body` 元素中的内容）。如果我们只关心页面中某处显示的微博数量，使用下面的断言找到匹配的内容即可： ``` assert_match @user.microposts.count.to_s, response.body ``` `assert_match` 没有 `assert_select` 的针对性强，无需指定要查找哪个 HTML 标签。 [代码清单 11.27](#listing-user-profile-test) 还在 `assert_select` 中使用了嵌套式句法： ``` assert_select 'h1>img.gravatar' ``` 这行代码的意思是，在 `h1` 标签中查找类为 `gravatar` 的 `img` 标签。 因为应用能正常运行，所以测试组件应该也能通过： ##### 代码清单 11.28：**GREEN** ``` $ bundle exec rake test ```