Rails读书笔记第七章

最新推荐文章于 2022-11-21 18:01:08 发布

Geurney

最新推荐文章于 2022-11-21 18:01:08 发布

阅读量646

点赞数

本文链接：https://blog.csdn.net/Geurney/article/details/49093069

版权

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测试：