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/'%>