5.3 布局中的链接
最后更新于：2022-04-01 22:28:49
# 5.3 布局中的链接
我们已经为网站的布局定义了看起来不错的样式，下面要把链接中使用的占位符 `#` 换成真正的链接地址。当然，我们可以像下面这样硬编码链接：
```
About
```
不过这样不太符合 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') %>
```
[第 8 章](chapter8.html#log-in-log-out)才会为“注册”页面设置具名路由，所以现在还用占位符 `#`。
还有一个包含链接的文件是底部局部视图 `_footer.html.erb`，有指向“关于”页面和“联系”页面的链接。修改后如[代码清单 5.24](#listing-footer-partial-links) 所示。
##### 代码清单 5.24：修改底部局部视图中的链接
app/views/layouts/_footer.html.erb
```
```
如此一来，[第 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 元素：
```
...
```
注意检查首页链接的那个断言，确保页面中有两个指向首页的链接（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
```
有了针对布局中链接的测试，我们就能使用测试组件快速捕捉回归。
';
Contact
Contact the Ruby on Rails Tutorial about the sample app at the contact page.
``` 现在，确认测试可以通过： ##### 代码清单 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 ```
<%= link_to "sample app", root_path, id: "logo" %>