Catalog Display
新建一个Store的controller,包含index动作:
rails generate controller Store index
这样就生成了controller、view,配置了route,并生成的test。
在routes中,我们做以下修改,将主页定义到Store的主页上:
Rails.application.routes.draw do
get 'store/index'
resources :products
root to: 'store#index', as: 'store'
end
然后删除掉public/index.html(如果有的话)。
在app/controllers/store_controller.rb文件中定义一个成员变量products:
class StoreController < ApplicationController
def index
@products = Product.order(:title)
end
end
@products就得到了按字母序的所有product。
编辑app/views/store/index.html.erb:
<% if notice %>
<p id="notice"><%= notice %></p>
<% end %>
<h1>Your Pragmatic Catalog</h1>
<% @products.each do |product| %> #使用在store_controller中定义的products成员变量
<div class="entry">
<%= image_tag(product.image_url) %> #生成img tag
<h3><%= product.title %></h3>
<p><%= sanitize(product.description) %></p> #将description变成成HTML形式,可能有安全漏洞。
<div class="price_line">
<span class="price"><%= number_to_currency(product.price) %></span> #格式化输出price
</div>
</div>
<% end %>
下面编辑app/assets/stylesheets/store.css.scss文件,添加格式:
.store {
h1 {
margin: 0;
padding-bottom: 0.5em;
font: 150% sans-serif;
color: #226;
border-bottom: 3px dotted #77d;
}
/* An entry in the store catalog */
.entry {
overflow: auto;
margin-top: 1em;
border-bottom: 1px dotted #77d;
min-height: 100px;
img {
width: 80px;
margin-right: 5px;
margin-bottom: 5px;
position: absolute;
}
h3 {
font-size: 120%;
font-family: sans-serif;
margin-left: 100px;
margin-top: 0;
margin-bottom: 2px;
color: #227;
}
p, div.price_line {
margin-left: 100px;
margin-top: 0.5em;
margin-bottom: 0.8em;
}
.price {
color: #44a;
font-weight: bold;
margin-right: 3em;
}
}
}
接下来我们修改整个application的layout,添加banner。
修改app/views/layouts/application.html.erb文件:
<!DOCTYPE html>
<html>
<head>
<title>MyApp</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body class="<%= controller.controller_name %>">
<div id="banner">
<%= image_tag("logo.png") %>
<%= @page_title || "Pragmatic Bookshelf" %>
</div>
<div id="columns">
<div id="side">
<ul>
<li><a href="http://www....">Home</a></li>
<li><a href="http://www..../faq">Questions</a></li>
<li><a href="http://www..../news">News</a></li>
<li><a href="http://www..../contact">Contact</a></li>
</ul>
</div>
<div id="main">
<%= yield %>
</div>
</div>
</body>
</html>
然后定义相应的CSS格式,将app/assets/stylesheets/application.css文件名改为app/assets/stylesheets/application.css.scss文件:
#banner {
background: #9c9;
padding: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #282;
text-align: center;
img {
float: left;
}
}
#notice {
color: #000 !important;
border: 2px solid red;
padding: 1em;
margin-bottom: 2em;
background-color: #f0f0f0;
font: bold smaller sans-serif;
}
#columns {
background: #141;
#main {
margin-left: 17em;
padding: 1em;
background: white;
}
#side {
float: left;
padding: 1em 2em;
width: 13em;
background: #141;
ul {
padding: 0;
li {
list-style: none;
a {
color: #bfb;
font-size: small;
}
}
}
}
}
接下来我们添加StoreController的Test:
修改test/controllers/store_controller_test.rb文件:
require 'test_helper'
class StoreControllerTest < ActionController::TestCase
test "should get index" do
get :index
assert_response :success
assert_select '#columns #side a', minimum: 4 #‘ ‘里的是css选择器,#选择id,.选择class
assert_select '#main .entry', 3 #在main中,要有3个entry
assert_select 'h3', 'Programming Ruby 1.9' #h3应该为书名, 根据fixture来的,one,two,ruby
assert_select '.price', /\$[,\d]+\.\d\d/ #pice应该显示为价格
end
end
然后跑functional测试:
rake test:functionals