<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國際加速解決方案。 廣告
                # 3.4 有點動態內容的頁面 我們已經為一些靜態頁面創建了動作和視圖,現在要稍微添加一些動態內容,根據所在的頁面不同而變化:我們要讓標題根據頁面的內容變化。改變標題到底算不算真正動態還有爭議,這么做能為[第 7 章](chapter7.html#sign-up)實現的真正動態內容打下基礎。 我們的計劃是修改首頁、“幫助”頁面和“關于”頁面,讓每頁顯示的標題都不一樣。為此,我們要在頁面的視圖中使用 `&lt;title&gt;` 標簽。大多數瀏覽器都會在瀏覽器窗口的頂部顯示標題中的內容,而且標題對“搜索引擎優化”(Search-Engine Optimization,簡稱 SEO)也有好處。我們要使用完整的“遇紅-變綠-重構”循環:先為頁面的標題編寫一些簡單的測試(**遇紅**),然后分別在三個頁面中添加標題(**變綠**),最后使用布局文件去除重復內容(重構)。本節結束時,三個靜態頁面的標題都會變成“&lt;頁面的名字&gt; | Ruby on Rails Tutorial Sample App”這種形式([表 3.2](#table-static-pages))。 `rails new` 命令會創建一個布局文件,不過現在最好不用。我們重命名這個文件: ``` $ mv app/views/layouts/application.html.erb layout_file # 臨時移動 ``` 在真實的應用中你不需要這么做,不過沒有這個文件能讓你更好地理解它的作用。 表 3.2:演示應用中基本上是靜態內容的頁面 | 頁面 | URL | 基本標題 | 變動部分 | | --- | --- | --- | --- | | 首頁 | /static_pages/home | `"Ruby on Rails Tutorial Sample App"` | `"Home"` | | 幫助 | /static_pages/help | `"Ruby on Rails Tutorial Sample App"` | `"Help"` | | 關于 | /static_pages/about | `"Ruby on Rails Tutorial Sample App"` | `"About"` | ## 3.4.1 測試標題(遇紅) 添加標題之前,我們要學習網頁的一般結構,如[代碼清單 3.21](#listing-html-structure) 所示。 ##### 代碼清單 3.21:網頁一般的 HTML 結構 ``` <!DOCTYPE html> <html> <head> <title>Greeting</title> </head> <body> <p>Hello, world!</p> </body> </html> ``` 這段代碼的最頂部是“文檔類型聲明”(document type declaration,簡稱 doctype),告訴瀏覽器使用哪個 HTML 版本(本例使用 [HTML5](http://en.wikipedia.org/wiki/HTML5))[[8](#fn-8)]。隨后是 `head` 部分,包含一個 `title` 標簽,其中的內容是“Greeting”。然后是 `body` 部分,包含一個 `p` 標簽(段落),其中的內容是“Hello, world!”。(內容的縮進是可選的,HTML 不會特別對待空白,制表符和空格都會被忽略,但縮進可以讓文檔結構更清晰。) 我們要使用 `assert_select` 方法分別為[表 3.2](#table-static-pages) 中的每個標題編寫簡單的測試,合并到[代碼清單 3.13](#listing-about-test) 的測試中。`assert_select` 方法的作用是檢查有沒有指定的 HTML 標簽。這種方法有時也叫“選擇符”,從方法名可以看出這一點。[[9](#fn-9)] ``` assert_select "title", "Home | Ruby on Rails Tutorial Sample App" ``` 這行代碼的作用是檢查有沒有 `&lt;title&gt;` 標簽,以及其中的內容是不是字符串“Home | Ruby on Rails Tutorial Sample App”。把這樣的代碼分別放到三個頁面的測試中,得到的結果如[代碼清單 3.22](#listing-title-tests) 所示。 ##### 代碼清單 3.22:加入標題測試后的靜態頁面控制器測試 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", "Home | 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 end ``` (如果你覺得在標題中重復使用“Ruby on Rails Tutorial Sample App”不妥,可以看一下 [3.6 節](#mostly-static-pages-exercises)的練習。) 寫好測試之后,應該確認一下現在測試組件是失敗的(**RED**): ##### 代碼清單 3.23:**RED** ``` $ bundle exec rake test 3 tests, 6 assertions, 3 failures, 0 errors, 0 skips ``` ## 3.4.2 添加頁面標題(變綠) 現在,我們要為每個頁面添加標題,讓前一節的測試通過。參照[代碼清單 3.21](#listing-html-structure) 中的 HTML 結構,把[代碼清單 3.9](#listing-custom-home-page) 中的首頁內容換成[代碼清單 3.24](#listing-home-view-full-html) 中的內容。 ##### 代碼清單 3.24:具有完整 HTML 結構的首頁 RED app/views/static_pages/home.html.erb ``` <!DOCTYPE html> <html> <head> <title>Home | Ruby on Rails Tutorial Sample App</title> </head> <body> <h1>Sample App</h1> <p> This is the home page for the <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a> sample application. </p> </body> </html> ``` 修改之后,首頁如[圖 3.6](#fig-home-view-full-html) 所示。[[10](#fn-10)] ![home view full html](https://box.kancloud.cn/2016-05-11_5732bcf7efa31.png)圖 3.6:添加標題后的首頁 然后使用類似的方式修改“幫助”頁面和“關于”頁面,得到的代碼如[代碼清單 3.25](#listing-help-view-full-html) 和[代碼清單 3.26](#listing-about-view-full-html) 所示。 ##### 代碼清單 3.25:具有完整 HTML 結構的“幫助”頁面 RED app/views/static_pages/help.html.erb ``` <!DOCTYPE html> <html> <head> <title>Help | Ruby on Rails Tutorial Sample App</title> </head> <body> <h1>Help</h1> <p> Get help on the Ruby on Rails Tutorial at the <a href="http://www.railstutorial.org/#help">Rails Tutorial help section</a>. To get help on this sample app, see the <a href="http://www.railstutorial.org/book"><em>Ruby on Rails Tutorial</em> book</a>. </p> </body> </html> ``` ##### 代碼清單 3.26:具有完整 HTML 結構的“關于”頁面 GREEN app/views/static_pages/about.html.erb ``` <!DOCTYPE html> <html> <head> <title>About | Ruby on Rails Tutorial Sample App</title> </head> <body> <h1>About</h1> <p> The <a href="http://www.railstutorial.org/"><em>Ruby on Rails Tutorial</em></a> is a <a href="http://www.railstutorial.org/book">book</a> and <a href="http://screencasts.railstutorial.org/">screencast series</a> to teach web development with <a href="http://rubyonrails.org/">Ruby on Rails</a>. This is the sample application for the tutorial. </p> </body> </html> ``` 現在,測試組件能通過了(**GREEN**): ##### 代碼清單 3.27:**GREEN** ``` $ bundle exec rake test 3 tests, 6 assertions, 0 failures, 0 errors, 0 skips ``` ## 3.4.3 布局和嵌入式 Ruby(重構) 到目前為止,本節已經做了很多事情,我們使用 Rails 控制器和動作生成了三個可用的頁面,不過這些頁面中的內容都是純靜態的 HTML,沒有體現出 Rails 的強大之處。而且,代碼中有著大量重復: * 頁面的標題幾乎(但不完全)是一模一樣的; * 每個標題中都有“Ruby on Rails Tutorial Sample App”; * 整個 HTML 結構在每個頁面都重復地出現了。 重復的代碼違反了很重要的“不要自我重復”(Don’t Repeat Yourself,簡稱 DRY)原則。本節要遵照 DRY 原則,去掉重復的代碼。最后,我們要運行前一節編寫的測試,確認顯示的標題仍然正確。 不過,去除重復的第一步卻是要增加一些代碼,讓頁面的標題看起來是一樣的。這樣我們就能更容易地去掉重復的代碼了。 在這個過程中,要在視圖中使用嵌入式 Ruby(Embedded Ruby)。既然首頁、“幫助”頁面和“關于”頁面的標題中有一個變動的部分,那我們就使用 Rails 提供的一個特別的函數 `provide`,在每個頁面中設定不同的標題。通過把 `home.html.erb` 視圖中標題的“Home”換成[代碼清單 3.28](#listing-home-view-erb-title) 所示的代碼,我們可以看一下這個函數的作用。 ##### 代碼清單 3.28:標題中使用了嵌入式 Ruby 代碼的首頁視圖 GREEN app/views/static_pages/home.html.erb ``` <% provide(:title, "Home") %> <!DOCTYPE html> <html> <head> <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title> </head> <body> <h1>Sample App</h1> <p> This is the home page for the <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a> sample application. </p> </body> </html> ``` 在這段代碼中我們第一次使用了嵌入式 Ruby,或者簡稱 ERb。(現在你應該知道為什么 HTML 視圖文件的擴展名是 `.html.erb` 了。)ERb 是為網頁添加動態內容主要使用的模板系統。[[11](#fn-11)]下面的代碼 ``` <% provide(:title, 'Home') %> ``` 通過 `&lt;% …? %&gt;` 調用 Rails 中的 `provide` 函數,把字符串 `"Home"` 賦給 `:title`。[[12](#fn-12)]然后,在標題中,我們使用類似的符號 `&lt;%= …? %&gt;`,通過 Ruby 的 `yield` 函數把標題插入模板中:[[13](#fn-13)] ``` <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title> ``` (這兩種嵌入 Ruby 代碼的方式區別在于,`&lt;% …? %&gt;` 只**執行**其中的代碼;`&lt;%= …? %&gt;` 也會執行其中的代碼,而且會把執行的結果**插入**模板中。)最終得到的頁面和以前一樣,不過,現在標題中變動的部分通過 ERb 動態生成。 我們可以運行前一節編寫的測試確認一下——測試還能通過(**GREEN**): ##### 代碼清單 3.29:**GREEN** ``` $ bundle exec rake test 3 tests, 6 assertions, 0 failures, 0 errors, 0 skips ``` 然后,按照相同的方式修改“幫助”([代碼清單 3.30](#listing-help-view-erb-title))和“關于”頁面([代碼清單 3.31](#listing-about-view-erb-title))。 ##### 代碼清單 3.30:標題中使用了嵌入式 Ruby 代碼的“幫助”頁面視圖 GREEN app/views/static_pages/help.html.erb ``` <% provide(:title, "Help") %> <!DOCTYPE html> <html> <head> <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title> </head> <body> <h1>Help</h1> <p> Get help on the Ruby on Rails Tutorial at the <a href="http://www.railstutorial.org/#help">Rails Tutorial help section</a>. To get help on this sample app, see the <a href="http://www.railstutorial.org/book"><em>Ruby on Rails Tutorial</em> book</a>. </p> </body> </html> ``` ##### 代碼清單 3.31:標題中使用了嵌入式 Ruby 代碼的“關于”頁面視圖 GREEN app/views/static_pages/about.html.erb ``` <% provide(:title, "About") %> <!DOCTYPE html> <html> <head> <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title> </head> <body> <h1>About</h1> <p> The <a href="http://www.railstutorial.org/"><em>Ruby on Rails Tutorial</em></a> is a <a href="http://www.railstutorial.org/book">book</a> and <a href="http://screencasts.railstutorial.org/">screencast series</a> to teach web development with <a href="http://rubyonrails.org/">Ruby on Rails</a>. This is the sample application for the tutorial. </p> </body> </html> ``` 至此,我們把頁面標題中的變動部分都換成了 ERb。現在,各個頁面的內容類似下面這樣: ``` <% provide(:title, "The Title") %> <!DOCTYPE html> <html> <head> <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title> </head> <body> Contents </body> </html> ``` 也就是說,所有的頁面結構都是一致的,包括 `title` 標簽中的內容,只有 `body` 標簽中的內容有些差別。 為了提取出共用的結構,Rails 提供了一個特別的布局文件,名為 `application.html.erb`。我們在 [3.4 節](#slightly-dynamic-pages)重命名了這個文件,現在改回來: ``` $ mv layout_file app/views/layouts/application.html.erb ``` 若想使用這個布局,我們要把默認的標題換成前面幾段代碼中使用的嵌入式 Ruby: ``` <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title> ``` 修改后得到的布局文件如[代碼清單 3.32](#listing-application-layout) 所示。 ##### 代碼清單 3.32:這個演示應用的網站布局 GREEN app/views/layouts/application.html.erb ``` <!DOCTYPE html> <html> <head> <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <%= yield %> </body> </html> ``` 注意,其中有一行比較特殊: ``` <%= yield %> ``` 這行代碼的作用是,把每個頁面的內容插入布局中。沒必要了解它的具體實現過程,我們只需知道,在布局中使用這行代碼后,訪問 /static_pages/home 時會把 `home.html.erb` 中的內容轉換成 HTML,然后插入 `&lt;%= yield %&gt;` 所在的位置。 還要注意,默認的 Rails 布局文件中還有下面這幾行代碼: ``` <%= stylesheet_link_tag ... %> <%= javascript_include_tag "application", ... %> <%= csrf_meta_tags %> ``` 這幾行代碼的作用是,引入應用的樣式表和 JavaScript 文件(Asset Pipeline 的一部分,[5.2.1 節](chapter5.html#the-asset-pipeline)會介紹);Rails 中的 `csrf_meta_tags` 方法,作用是避免“跨站請求偽造”(Cross-Site Request Forgery,簡稱 CSRF,一種惡意網絡攻擊)。 現在,[代碼清單 3.28](#listing-home-view-erb-title)、[代碼清單 3.30](#listing-help-view-erb-title) 和 [代碼清單 3.31](#listing-about-view-erb-title) 的內容還是和布局文件中類似的 HTML 結構,所以我們要把完整的結構刪除,只保留需要的內容。清理后的視圖如[代碼清單 3.33](#listing-home-view-interior)、[代碼清單 3.34](#listing-help-view-interior) 和 [代碼清單 3.35](#listing-about-view-interior) 所示。 ##### 代碼清單 3.33:去除完整的 HTML 結構后的首頁 GREEN app/views/static_pages/home.html.erb ``` <% provide(:title, "Home") %> <h1>Sample App</h1> <p> This is the home page for the <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a> sample application. </p> ``` ##### 代碼清單 3.34:去除完整的 HTML 結構后的“幫助”頁面 GREEN app/views/static_pages/help.html.erb ``` <% provide(:title, "Help") %> <h1>Help</h1> <p> Get help on the Ruby on Rails Tutorial at the <a href="http://www.railstutorial.org/#help">Rails Tutorial help section</a>. To get help on this sample app, see the <a href="http://www.railstutorial.org/book"><em>Ruby on Rails Tutorial</em> book</a>. </p> ``` ##### 代碼清單 3.35:去除完整的 HTML 結構后的“關于”頁面 GREEN app/views/static_pages/about.html.erb ``` <% provide(:title, "About") %> <h1>About</h1> <p> The <a href="http://www.railstutorial.org/"><em>Ruby on Rails Tutorial</em></a> is a <a href="http://www.railstutorial.org/book">book</a> and <a href="http://screencasts.railstutorial.org/">screencast series</a> to teach web development with <a href="http://rubyonrails.org/">Ruby on Rails</a>. This is the sample application for the tutorial. </p> ``` 修改這幾個視圖后,首頁、“幫助”頁面和“關于”頁面顯示的內容還和之前一樣,但是沒有多少重復內容了。 經驗告訴我們,即便是十分簡單的重構,也容易出錯,所以才要認真編寫測試組件。有了測試,我們就無需手動檢查每個頁面,看有沒有錯誤。初期階段手動檢查還不算難,但是當應用不斷變大之后,情況就不同了。我們只需驗證測試組件是否還能通過即可: ##### 代碼清單 3.36:**GREEN** ``` $ bundle exec rake test 3 tests, 6 assertions, 0 failures, 0 errors, 0 skips ``` 測試不能證明代碼完全正確,但至少能提高正確的可能性,而且還提供了安全防護措施,避免以后出現問題。 ## 3.4.4 設置根路由 我們修改了網站中的頁面,也順利開始編寫測試了,在繼續之前,我們要設置應用的根路由。與 [1.3.4 節](chapter1.html#hello-world)和 [2.2.2 節](chapter2.html#mvc-in-action)的做法一樣,我們要修改 `routes.rb` 文件,把根路徑 `/` 指向我們選擇的頁面。這里我們要指向前面創建的首頁。(我還建議把 [3.1 節](#sample-app-setup)添加的 `hello` 動作從應用的控制器中刪除。)如[代碼清單 3.37](#listing-home-root-route) 所示,我們要把自動生成的 `get` 規則([代碼清單 3.5](#listing-pages-routes))改成: ``` root 'static_pages#home' ``` 我們把 `static_pages/home` 改成 `static_pages#home`,確保通過 `GET` 請求訪問 `/` 時,會交給靜態頁面路由器中的 `home` 動作處理。修改路由后,首頁如[圖 3.7](#fig-home-root-route) 所示。(注意,修改路由之后,/static_pages/home 就無法訪問了。) ##### 代碼清單 3.37:把根路由指向首頁 config/routes.rb ``` Rails.application.routes.draw do root 'static_pages#home' get 'static_pages/help' get 'static_pages/about' end ``` ![home root route](https://box.kancloud.cn/2016-05-11_5732bcf810cf4.png)圖 3.7:在根路由上顯示的首頁
                  <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>

                              哎呀哎呀视频在线观看