<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                # 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) 所示。 ![about page styled 3rd edition](https://box.kancloud.cn/2016-05-11_5732bd0565486.png)圖 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"` | `&lt;div&gt;foobar&lt;/div&gt;` | | `assert_select "div", "foobar"` | `&lt;div&gt;foobar&lt;/div&gt;` | | `assert_select "div.nav"` | `&lt;div class="nav"&gt;foobar&lt;/div&gt;` | | `assert_select "div#profile"` | `&lt;div id="profile"&gt;foobar&lt;/div&gt;` | | `assert_select "div[name=yo]"` | `&lt;div name="yo"&gt;hey&lt;/div&gt;` | | `assert_select "a[href=?]", ’/’, count: 1` | `&lt;a href="/"&gt;foo&lt;/a&gt;` | | `assert_select "a[href=?]", ’/’, text: "foo"` | `&lt;a href="/"&gt;foo&lt;/a&gt;` | 我們使用下面的 Rake 任務只運行集成測試,檢查[代碼清單 5.25](#listing-layout-links-test) 中的測試是否能通過: ##### 代碼清單 5.26:**GREEN** ``` $ bundle exec rake test:integration ``` 如果一切順利,你應該再運行整個測試組件,確保所有測試都能通過: ##### 代碼清單 5.27:**GREEN** ``` $ bundle exec rake test ``` 有了針對布局中鏈接的測試,我們就能使用測試組件快速捕捉回歸。
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看