# 5.3 布局中的鏈接
我們已經為網站的布局定義了看起來不錯的樣式,下面要把鏈接中使用的占位符 `#` 換成真正的鏈接地址。當然,我們可以像下面這樣硬編碼鏈接:
```
<a href="/static_pages/about">About</a>
```
不過這樣不太符合 Rails 之道。一者,“關于”頁面的地址如果是 /about 而不是 /static_pages/about 就好了;再者,Rails 習慣使用具名路由指定鏈接地址,如下面的代碼所示:
```
<%= link_to "About", about_path %>
```
使用這種方式,代碼的意圖更明確,而且也更靈活,如果修改了 `about_path` 對應的 URL,其他使用 `about_path` 的地方都會自動使用新的 URL。
我們計劃添加的鏈接如[表 5.1](#table-url-mapping) 所示,表中還列出了 URL 和路由的對應關系。第一個路由在 [3.4.4 節](chapter3.html#setting-the-root-route)已經設定,本章結束時,我們會定義好除最后一個之外的所有路由。最后一個路由在[第 8 章](chapter8.html#log-in-log-out)定義。
表 5.1:網站中鏈接的路由和 URL 地址的映射關系
| 頁面 | URL | 具名路由 |
| --- | --- | --- |
| “首頁” | / | `root_path` |
| “關于” | /about | `about_path` |
| “幫助” | /help | `help_path` |
| “聯系” | /contact | `contact_path` |
| “注冊” | /signup | `signup_path` |
| “登錄” | /login | `login_path` |
## 5.3.1 “聯系”頁面
繼續之前,我們要先添加一個“聯系”頁面([3.6 節](chapter3.html#mostly-static-pages-exercises)的練習題),測試如[代碼清單 5.16](#listing-contact-page-test) 所示,形式和[代碼清單 3.22](chapter3.html#listing-title-tests) 差不多。(如果你做了[3.6 節](chapter3.html#mostly-static-pages-exercises)的練習,測試中可能會使用 `@base_title` 變量,你可以在[代碼清單 5.16](#listing-contact-page-test) 中使用。)
##### 代碼清單 5.16:“聯系”頁面的測試 RED
test/controllers/static_pages_controller_test.rb
```
require 'test_helper'
class StaticPagesControllerTest < ActionController::TestCase
test "should get home" do
get :home
assert_response :success
assert_select "title", "Ruby on Rails Tutorial Sample App"
end
test "should get help" do
get :help
assert_response :success
assert_select "title", "Help | Ruby on Rails Tutorial Sample App"
end
test "should get about" do
get :about
assert_response :success
assert_select "title", "About | Ruby on Rails Tutorial Sample App"
end
test "should get contact" do get :contact assert_response :success assert_select "title", "Contact | Ruby on Rails Tutorial Sample App" end end
```
現在,[代碼清單 5.16](#listing-contact-page-test) 中的測試應該失敗:
##### 代碼清單 5.17:**RED**
```
$ bundle exec rake test
```
我們按照 [3.3 節](chapter3.html#getting-started-with-testing)的做法添加“聯系”頁面:首先更新路由([代碼清單 5.18](#listing-contact-route)),然后在靜態頁面控制器中添加一個 `contact` 動作([代碼清單 5.19](#listing-contact-action)),最后創建“聯系”頁面的視圖([代碼清單 5.20](#listing-contact-view))。
##### 代碼清單 5.18:添加“聯系”頁面的路由 RED
config/routes.rb
```
Rails.application.routes.draw do
root 'static_pages#home'
get 'static_pages/help'
get 'static_pages/about'
get 'static_pages/contact' end
```
##### 代碼清單 5.19:添加“聯系”頁面的動作 RED
app/controllers/static_pages_controller.rb
```
class StaticPagesController < ApplicationController
.
.
.
def contact
end
end
```
##### 代碼清單 5.20:“聯系”頁面的視圖 GREEN
app/views/static_pages/contact.html.erb
```
<% provide(:title, 'Contact') %>
<h1>Contact</h1>
<p>
Contact the Ruby on Rails Tutorial about the sample app at the
<a href="http://www.railstutorial.org/#contact">contact page</a>.
</p>
```
現在,確認測試可以通過:
##### 代碼清單 5.21:**GREEN**
```
$ bundle exec rake test
```
## 5.3.2 Rails 路由
為了添加演示應用中靜態頁面的具名路由,我們要修改 Rails 用來定義 URL 映射的路由文件,即 `config/routes.rb`。我們先分析一下特殊的首頁路由([3.4.4 節](chapter3.html#setting-the-root-route)定義),然后定義其他靜態頁面的路由。
目前,我們見到了三種定義根路由的方式,首先是 `hello_app` 中的([代碼清單 1.10](chapter1.html#listing-hello-root-route))
```
root 'application#hello'
```
然后是 `toy_app` 中的([代碼清單 2.3](chapter2.html#listing-rails-routes-root-route))
```
root 'users#index'
```
最后是 `sample_app` 中的([代碼清單 3.37](chapter3.html#listing-home-root-route))
```
root 'static_pages#home'
```
不管哪一種方式,我們都把根路徑 / 指向一個控制器和動作。像這樣定義根路由有個重要的好處——創建了具名路由,可以使用名字而不是原始的 URL 指代路由。對根路由來說,創建的具名路由是 `root_path` 和 `root_url`,二者之間唯一的區別是,后者是完整的 URL:
```
root_path -> '/'
root_url -> 'http://www.example.com/'
```
本書遵守一個約定,只有重定向使用 `_url` 形式,其余都使用 `_path` 形式。(因為 HTTP 標準嚴格要求重定向的 URL 必須完整。不過在大多數瀏覽器中,兩種形式都可以正常使用。)
為了定義“幫助”頁面、“關于”頁面和“聯系”頁面的具名路由,我們要把[代碼清單 5.18](#listing-contact-route) 中的 `get` 規則
```
get 'static_pages/help'
```
改成
```
get 'help' => 'static_pages#help'
```
后一種形式把發給 /help 的 `GET` 請求交給靜態頁面控制器中的 `help` 動作處理,所以我們可以把 /static_pages/help 簡化成 /help。和根路由一樣,這個規則也會定義兩個具名路由,分別是 `help_path` 和 `help_url`:
```
help_path -> '/help'
help_url -> 'http://www.example.com/help'
```
按照同樣的方式修改其他靜態頁面的路由,把[代碼清單 5.18](#listing-contact-route) 中的內容改成[代碼清單 5.22](#listing-static-page-routes)。
##### 代碼清單 5.22:靜態頁面的路由
config/routes.rb
```
Rails.application.routes.draw do
root 'static_pages#home'
get 'help' => 'static_pages#help'
get 'about' => 'static_pages#about'
get 'contact' => 'static_pages#contact'
end
```
## 5.3.3 使用具名路由
有了[代碼清單 5.22](#listing-static-page-routes) 中的路由,我們就可以在網站的布局中使用具名路由了。我們只需在 `link_to` 函數的第二個參數中指定合適的具名路由。例如,我們要把
```
<%= link_to "About", '#' %>
```
改成
```
<%= link_to "About", about_path %>
```
以此類推。
我們先來修改頭部局部視圖 `_header.html.erb`,其中有指向首頁和“幫助”頁面的鏈接。同時,我們還要按照通用約定,把 LOGO 指向首頁。修改后的視圖如[代碼清單 5.23](#listing-header-partial-links) 所示。
##### 代碼清單 5.23:修改頭部局部視圖中的鏈接
app/views/layouts/_header.html.erb
```
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<%= link_to "sample app", root_path, id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", root_path %></li>
<li><%= link_to "Help", help_path %></li>
<li><%= link_to "Log in", '#' %></li>
</ul>
</nav>
</div>
</header>
```
[第 8 章](chapter8.html#log-in-log-out)才會為“注冊”頁面設置具名路由,所以現在還用占位符 `#`。
還有一個包含鏈接的文件是底部局部視圖 `_footer.html.erb`,有指向“關于”頁面和“聯系”頁面的鏈接。修改后如[代碼清單 5.24](#listing-footer-partial-links) 所示。
##### 代碼清單 5.24:修改底部局部視圖中的鏈接
app/views/layouts/_footer.html.erb
```
<footer class="footer">
<small>
The <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
</small>
<nav>
<ul>
<li><%= link_to "About", about_path %></li>
<li><%= link_to "Contact", contact_path %></li>
<li><a href="http://news.railstutorial.org/">News</a></li>
</ul>
</nav>
</footer>
```
如此一來,[第 3 章](chapter3.html#mostly-static-pages)創建的所有靜態頁面都添加到布局中了。以“關于”頁面為例,訪問 [/about](http://localhost:3000/about) 會打開網站的“關于”頁面,如[圖 5.8](#fig-about-page) 所示。
圖 5.8:[/about](http://localhost:3000/about) 地址上的“關于”頁面
## 5.3.4 布局中鏈接的測試
我們在布局中加入了幾個鏈接,最好再編寫一些測試,確保鏈接正常。我們可以在瀏覽器中手動測試,先訪問首頁,然后點擊其他鏈接,不過這么做很快就會變得繁瑣。所以我們要使用集成測試,編寫端到端測試完成這些操作。首先,生成測試模板,名為 `site_layout`:
```
$ rails generate integration_test site_layout
invoke test_unit
create test/integration/site_layout_test.rb
```
注意,Rails 生成器會自動在文件名后面添加 `_test`。
針對布局中鏈接的測試,要檢查網站的 HTML 結構:
1. 訪問根路由(首頁);
2. 確認使用正確的模板渲染;
3. 檢查指向首頁、“幫助”頁面、“關于”頁面和“聯系”頁面的地址是否正確。
使用 Rails 集成測試把上述步驟轉換成代碼,如[代碼清單 5.25](#listing-layout-links-test) 所示。其中 `assert_template` 方法檢查首頁是否使用正確的視圖渲染。[[13](#fn-13)]
##### 代碼清單 5.25:測試布局中的鏈接 GREEN
test/integration/site_layout_test.rb
```
require 'test_helper'
class SiteLayoutTest < ActionDispatch::IntegrationTest
test "layout links" do
get root_path
assert_template 'static_pages/home'
assert_select "a[href=?]", root_path, count: 2
assert_select "a[href=?]", help_path
assert_select "a[href=?]", about_path
assert_select "a[href=?]", contact_path
end
end
```
[代碼清單 5.25](#listing-layout-links-test) 使用了 `assert_select` 方法的一些高級用法,同時指定標簽名 `a` 和屬性 `href`,檢查有沒有指定的鏈接,如下所示:
```
assert_select "a[href=?]", about_path
```
Rails 會自動把問號替換成 `about_path`(如果需要還會轉義特殊字符),檢查有沒有下面這樣的 HTML 元素:
```
<a href="/about">...</a>
```
注意檢查首頁鏈接的那個斷言,確保頁面中有兩個指向首頁的鏈接(LOGO 一個,導航條中一個):
```
assert_select "a[href=?]", root_path, count: 2
```
以此確認[代碼清單 5.23](#listing-header-partial-links) 中定義的兩個首頁鏈接都存在。
`assert_select` 的更多用法參見[表 5.2](#table-assert-select)。雖然 `assert_select` 的用法很靈活,功能很強大(還有很多表中沒介紹的用法),但經驗告訴我們,最好只測試不會經常變動的 HTML 元素(例如布局中的鏈接)。
表 5.2:`assert_select` 的一些用法
| 代碼 | 匹配的 HTML |
| --- | --- |
| `assert_select "div"` | `<div>foobar</div>` |
| `assert_select "div", "foobar"` | `<div>foobar</div>` |
| `assert_select "div.nav"` | `<div class="nav">foobar</div>` |
| `assert_select "div#profile"` | `<div id="profile">foobar</div>` |
| `assert_select "div[name=yo]"` | `<div name="yo">hey</div>` |
| `assert_select "a[href=?]", ’/’, count: 1` | `<a href="/">foo</a>` |
| `assert_select "a[href=?]", ’/’, text: "foo"` | `<a href="/">foo</a>` |
我們使用下面的 Rake 任務只運行集成測試,檢查[代碼清單 5.25](#listing-layout-links-test) 中的測試是否能通過:
##### 代碼清單 5.26:**GREEN**
```
$ bundle exec rake test:integration
```
如果一切順利,你應該再運行整個測試組件,確保所有測試都能通過:
##### 代碼清單 5.27:**GREEN**
```
$ bundle exec rake test
```
有了針對布局中鏈接的測試,我們就能使用測試組件快速捕捉回歸。
- Ruby on Rails 教程
- 致中國讀者
- 序
- 致謝
- 作者譯者簡介
- 版權和代碼授權協議
- 第 1 章 從零開始,完成一次部署
- 1.1 簡介
- 1.2 搭建環境
- 1.3 第一個應用
- 1.4 使用 Git 做版本控制
- 1.5 部署
- 1.6 小結
- 1.7 練習
- 第 2 章 玩具應用
- 2.1 規劃應用
- 2.2 用戶資源
- 2.3 微博資源
- 2.4 小結
- 2.5 練習
- 第 3 章 基本靜態的頁面
- 3.1 創建演示應用
- 3.2 靜態頁面
- 3.3 開始測試
- 3.4 有點動態內容的頁面
- 3.5 小結
- 3.6 練習
- 3.7 高級測試技術
- 第 4 章 Rails 背后的 Ruby
- 4.1 導言
- 4.2 字符串和方法
- 4.3 其他數據類型
- 4.4 Ruby 類
- 4.5 小結
- 4.6 練習
- 第 5 章 完善布局
- 5.1 添加一些結構
- 5.2 Sass 和 Asset Pipeline
- 5.3 布局中的鏈接
- 5.4 用戶注冊:第一步
- 5.5 小結
- 5.6 練習
- 第 6 章 用戶模型
- 6.1 用戶模型
- 6.2 用戶數據驗證
- 6.3 添加安全密碼
- 6.4 小結
- 6.5 練習
- 第 7 章 注冊
- 7.1 顯示用戶的信息
- 7.2 注冊表單
- 7.3 注冊失敗
- 7.4 注冊成功
- 7.5 專業部署方案
- 7.6 小結
- 7.7 練習
- 第 8 章 登錄和退出
- 8.1 會話
- 8.2 登錄
- 8.3 退出
- 8.4 記住我
- 8.5 小結
- 8.6 練習
- 第 9 章 更新,顯示和刪除用戶
- 9.1 更新用戶
- 9.2 權限系統
- 9.3 列出所有用戶
- 9.4 刪除用戶
- 9.5 小結
- 9.6 練習
- 第 10 章 賬戶激活和密碼重設
- 10.1 賬戶激活
- 10.2 密碼重設
- 10.3 在生產環境中發送郵件
- 10.4 小結
- 10.5 練習
- 10.6 證明超時失效的比較算式
- 第 11 章 用戶的微博
- 11.1 微博模型
- 11.2 顯示微博
- 11.3 微博相關的操作
- 11.4 微博中的圖片
- 11.5 小結
- 11.6 練習
- 第 12 章 關注用戶
- 12.1 “關系”模型
- 12.2 關注用戶的網頁界面
- 12.3 動態流
- 12.4 小結
- 12.5 練習