ROR 第五章完善布局(二)

5.2 Sass和asset pipeline

5.2.1 Asset pipeline

Asset pipeline对Rails做了很多改动，但对Rails开发者只需要了解：资源目录，清单文件，预处理器引擎。

资源目录

Rails 3.0之前，静态文件分别放在如下的public/目录中：

·public/stylesheets

·public/javascripts

.public/images

这些文件夹中的文件通过请求http://example.com/stylesheets等地质发送给浏览器，3.0之后的版本也可以这么做

从Rails3.1开始到Rails 4，静态文件存放在：

·app/assets:存放当前应用程序用到的资源文件

·lib/assets:存放开发团队自己开发的代码库用到的资源文件

·vendor/assets:存放第三方代码库用到的资源文件

清单文件

略过。

预处理引擎

以文件后缀名识别，处理过程从右到左。例如：custom.scss.erb 先处理erb再处理scss

5.2.2 句法强大的样式表

Sass是一种编写CSS的语言，扩展名.scss

嵌套

.center{
  text-align:center;
}

.center h1{
  margin-bottom:10px;
}
使用Sass可改写为
.center{
  text-align:center;
  h1{
      margin-bottom:10px;
   }
}

变量

footer{
  color:#999;
}

可改写为
$lightGray:#999

footer{
  color:$lightGray
}

5.3 布局中的链接

先添加一个“联系”页面：

1.先更新路由配置

2.StaticPages控制器中添加contact动作

3.再编写联系页面的视图

5.3.1 具名路由测试

把
visit '/static_pages/about'
修改为
visit about_path

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 root_path 
      expect(page).to have_content('Sample App')
    end

    it "should have the base title" do
      visit root_path
      expect(page).to have_title("Ruby on Rails Tutorial Sample App")
    end

    it "should not have a custom page title" do
      visit '/static_pages/home'
      expect(page).not_to have_title("| Home")
    end
   end

  describe "Help page" do
    it "should have the h1 'Help'" do
      visit help_path
      expect(page).to have_content('Help')
    end

    it "should have the title 'Help'" do
      visit help_path
      expect(page).to have_title("Ruby on Rails Tutorial Sample App | Help")
    end
  end

  describe "About page" do
    it "should have the h1 'About Us'" do
      visit about_path
      expect(page).to have_content('About Us')
    end
    
    it "shoule have the title 'About Us'" do
      visit about_path
      expect(page).to have_title("Ruby on Rails Tutorial Sample App | About Us")
    end
  end

  describe "Contact page" do
    it "should have the content 'Contact'" do
      visit contact_path
      expect(page).to have_content('Contact')
    end

    it "should have the title 'Contact'" do
      visit contact_path 
      expect(page).to have_title("Ruby on Rails Tutorial Sample App | Contact")
    end
  end
end

5.3.2 Rails路由

定义具名路由，要把
get 'static_pages/help'
修改为
match '/help',to:'static_pages#help',via:'get'

这样在/help地址上就有一个可访问的页面(响应get请求)，也定义了help_path的具名路由，

该函数会返回相应页面的地址。

config/routes.rb

SampleApp::Application.routes.draw do
  root to:'static_pages#home'
  match '/help',   to:'static_pages#help',    via:'get'
  match '/about',  to:'static_pages#about',   via:'get'
  match '/contact', to:'static_pages#contact',via:'get'

match '/about' 会自动创建：

about_path -> '/about'

about_url -> 'http://localhost:3000/about'

注意home页面使用root

root_path -> '/'g

root_url -> 'http://localhost:3000/'

以前访问home页面是http://localhost:3000/static_pages/home

现在只需要http://localhost:3000/就可以了

5.3.3 具名路由

<%= link_to "About", '#'%>
改为
<% link_to "About",about_path%>

其他链接类推，将占位符改为真实链接。。

修改头部局部视图

app/views/layouts/_header.html.erb

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="navbar-inner">
    <div class="container">
    <%=link_to "sample app",root_path,id:"logo"%>
    <nav>
      <ul class="nav pull-right">
        <li><%=link_to "Home",root_path%></li>
        <li><%=link_to "Help",help_path%></li>
        <li><%=link_to "Sign in",'#'%></li>
     </ul>
    <nav>
    </div>
   </div>
</header>

修改头部局部视图

app/views/layouts/_footer.html.erb

<footer class="footer">
  <small>
    <a href="http://railstutorial.org/">Rails Tutorial</a>
    by Michael Hartl
  </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>

5.3.4 简化RSpec测试代码

before {visit root_path}
可以避免重复
visit root_path

subject{ page }     
it {should have_content('Sample App')}
指明subject{ page }  调用should时自动使用Capybara提供的page变量

spec/support/utilities.rb 定义一个通用函数

def full_title(page_title)
  base_title = "Ruby on Rails Tutorial Sample App"
  if page_title.empty?
    base_title
  else
    "#{base_title} | #{page_title}"
  end
end

简化后的静态页面测试

spec/requests/static_pages_spec.rb

require 'spec_helper'
describe "Static pages" do
subject { page }
describe "Home page" do
    before { visit root_path}
    it {should have_content('Sample App')}
    it {should have_title(full_title(''))}
    it {should_not have_title('| Home')}
end

describe "Help page" do
    before { visit help_path}
    it { should have_content('Help')}
    it { should have_title(full_title('Help'))}
end

describe "About page" do
    before { visit about_path }
    it { should have_content('About')}
    it { should have_title(full_title('About Us'))}
end

describe "Contact page" do
    before { visit contact_path }
    it { should have_content('Contact')}
    it { should have_title(full_title('Contact'))}
end
end

5.4 用户注册：第一步

5.4.1 Users控制器

生成users控制器(包含new动作)

$rails generate controller Users new --no-test-framework

5.4.2 “注册”页面的URL地址

生成集成测试

$ rails generate integration_test user_pages

Users控制器的测试代码

spec/requests/user_pages_spec.rb

require 'spec_helper'

describe "UserPages" do
  subject { page }
  describe "signup page" do
    before { visit signup_path }
    it { should have_content('Sign up')}
    it { should have_title(full_title('Sign Up'))}
  end
end

注册页面的路由设置

config/routes.rb

SampleApp::Application.routes.draw do
  get "users/new"
  root to:'static_pages#home'

match '/signup', to:'users#new', via:'get'

  match '/help',   to:'static_pages#help',    via:'get'
  match '/about',  to:'static_pages#about',   via:'get'
  match '/contact', to:'static_pages#contact',via:'get'

注册页面视图

app/views/users/new.html.erb

<% proviide(:title,'Sign Up')%>
<h1>Sign up</h1>
<p>Find me in app/views/users/new.html.erb</p>

把按钮链接到“注册”页面

app/views/static_pages/home.html.erb

<div class="center hero-unit">
  <h1>Welcome to the Sample App</h1>

  <h2>
        This is the home page for the
        <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a>
        sample application.
  </h2>

  <%= link_to "Sign up now!",signup_path,class:"btn btn-large btn-primary"%>
</div>
<%= link_to image_tag("rails.png",alt:"Rails"),'http://rubyonrails.org/'%>

posted @ 2013-12-04 18:22 salembe 阅读(186) 评论(0) 收藏举报

刷新页面返回顶部

salembe

ROR 第五章 完善布局(二)