ROR 第三章 基本静态的页面(二)

重构

3.3 有点儿动态内容的页面

rails new命令创建了布局文件，暂时重命名。

$ mv app/views/layouts/application.html.erb  foobar

添加标题测试:

$ vim spec/requests/static_pages_spec.rb

require 'spec_helper'

describe "Static pages" do
  describe "Home page" do
    it "should have the content 'Sample App'" do
      visit '/static_pages/home'
      expect(page).to have_content('Sample App')
    end

    it "should have the title 'Home'" do
      visit '/static_pages/home'
      expect(page).to have_title("Ruby on Rails Tutorial Sample App | Home")
    end
  end
  describe "Help page" do
    it "should have the content 'Help'" do
      visit '/static_pages/help'
      expect(page).to have_content('Help')
    end

    it "should have the title 'Help'" do
      visit '/static_pages/help'
      expect(page).to have_title("Ruby on Rails Tutorial Sample App | Help")
    end
  end
  describe "About page" do
    it "should have the content 'About Us'" do
      visit '/static_pages/about'
      expect(page).to have_content('About Us')
    end
    it "should have the title 'About Us'" do
      visit '/static_pages/about'
      expect(page).to have_title("Ruby on Rails Tutorial Sample App | About Us")
    end
  end
end

$ bundle exec rspec spec/requests/static_pages_spec.rb  出现红色错误，因为我们的标题未包含关键字

 

让标题测试通过

首页完整HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Ruby on Rails Tutorial Sample App | Home</title>
  </head>
  <body>
    <h1>Sample App</h1>
    <p>
        This is the home page for the
        <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a>
        sample application.
    </p>
  </body>
</html>

帮助页面HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Ruby on Rails Tutorial Sample App | Help</title>
  </head>
  <body>
    <h1>Help</h1>
    <p>
        Get help on the Ruby on Rails Tutorial at the
        <a href="http://railstutorial.org/help">Ruby on Rails Tutorial</a>
        To get help on this sample app,see the
        <a href="http://railstutorial.org/book">Rails Tutorial book</a>
    </p>
  </body>
</html>

关于页面HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Ruby on Rails Tutorial Sample App | About Us</title>
  </head>
  <body>
    <h1>About Us</h1>
    <p>
        The <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a>
        is a project to make a book and screencasts to teach web development
        with <a href="http://railstutorial.org/">Ruby On Rails</a> This
        is the sample application for the tutorial.
    </p>
  </body>
</html>

现在执行bundle exec rspec spec/requests/static_pages_spec.rb  可以通过测试了。。

 

3.3.3 嵌入Ruby

去除三个页面中的重复部分

<% provide(:title,'Home')%>   
<%=yield(:title)%>

通过这两句改变标题中的名称home help about

3.3.4 使用布局文件来消除重复

由于三个页面的结构一致，使用application.html.erb来消除布局上的重复

恢复application.html.erb文件

$ mv foobar app/views/layouts/application.html.erb
把布局文件中的title部分改成跟前三个页面一样

<title>Ruby on Rails Tutorial Sample App | <%=yield(:title)%></title>

然后调整三个页面结构

首页：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://railstutorial.org/">Ruby on Rails Tutorial</a>
        sample application.
 </p>

帮助页面：

<%provide(:title,'Help')%>
<h1>Help</h1>
<p>
        Get help on the Ruby on Rails Tutorial at the
        <a href="http://railstutorial.org/help">Ruby on Rails Tutorial</a>
        To get help on this sample app,see the
        <a href="http://railstutorial.org/book">Rails Tutorial book</a>
</p>

about页面：

<%provide(:title,'About Us')%>
<h1>About Us</h1>
<p>
        The <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a>
        is a project to make a book and screencasts to teach web development
        with <a href="http://railstutorial.org/">Ruby On Rails</a> This
        is the sample application for the tutorial.
</p>

现在执行bundle exec rspec spec/requests/static_pages_spec.rb  可以通过测试了。。页面精简了很多啊。

提交一下搞定：

git add.    
git commit -m "Finish static pages"
git checkout master
git merge static-pages
git push -u origin master
git push heroku    //推送到heroku云
posted @ 2013-11-27 16:00  salembe  阅读(183)  评论(0)    收藏  举报