当前位置: 代码迷 >> 综合 >> Agile Web Development with Rails第八章笔记——任务C:商品目录显示
  详细解决方案

Agile Web Development with Rails第八章笔记——任务C:商品目录显示

热度:99   发布时间:2023-12-09 08:40:25.0


接下来的任务是——创建简单的商品目录显示网页。

迭代C1:创建商品目录清单

1、创建控制器store

前面已经通过脚手架创建了商品控制器,卖家可以用它来管理Depot应用程序。现在创建第二个控制器,它将用来与消费者进行互动,称为store。

rails generates controller store index

通过访问网址http://localhost:3000/store/index访问该行为。


2、更改根地址

为了简化用户操作,使该地址成为根地址,通过编辑文件config/routes.rb可以达到该效果。

[ruby] view plain copy
  1. Depot::Application.routes.draw do  
  2.   get "store/index"  
  3.   resources :products  
  4.   # ...  
  5.   # You can have the root of your site routed with "root"  
  6.   # just remember to delete public/index.html.  
  7.   # root :to => 'welcome#index'  
  8.   root to: "store#index", as: "store" #add  
  9.   # ...  
  10. end  
按上图注释内容提示,删除public/index.html文件

rm public/index.html

如图,输入根网址,直接弹出界面


3、编写控制器

需要得到商品清单而非源自数据库,且把它提供给显示清单的视图代码,这样需要修改/controllers/store_controller.rb。要在合适的抽象层面上编程,这样就先假定可以从模型中得到可销售的商品清单:

[ruby] view plain copy
  1. class StoreController < ApplicationController  
  2.   def index  
  3.      @products = Product.all  
  4.   end  
  5. end  

4、指定商品显示顺序

用字母顺序来显示。打开模型Product添加方法default_scope,默认范围(scopes)会作用于该模型的所有查询。

/app/models/product.rb

[ruby] view plain copy
  1. class Product < ActiveRecord::Base  
  2.   default_scope order: 'title'  
  3.     
  4.   # validates stuff ...  
  5. end  
4、编写视图模板。修改/app/views/store/index.html.erb:
[ruby] view plain copy
  1. <% if notice %>  
  2. <p id="notice"><%= notice %></p>  
  3. <% end %>  
  4. <h1>Your Pragmatic Catalog</h1>  
  5. <% @products.each do |product| %>  
  6.     <div class="entry">  
  7.         <% image_tag(product.image_url) %>  
  8.         <h3><%= product.title %></h3>  
  9.         <%= sanitize(product.description) %>  
  10.         <div class="price_line">  
  11.             <span class="price"><%= product.price %></span>  
  12.         </div>  
  13.     </div>  
  14. <% end %>  
这里要指出的是商品属性所用的方法sanitize:它允许安全地添加HTML风格代码,使客户对这一商品属性描述内容更有兴趣。



迭代C2:增加页面布局

1、修改页面布局文件application.html.erb。

在没有其他页面布局的情况下,所有控制器的视图都将使用这个布局。这个布局放到/app/views/layouts目录中,application.html.erb:

[ruby] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <title>Pragprog Books Online Store</title>  
  5. <!-- START:stylesheet -->  
  6.   <%= stylesheet_link_tag "scaffold" %>  
  7.   <%= stylesheet_link_tag "depot":media => "all" %><!-- <label id="code.slt"/> -->  
  8. <!-- END:stylesheet -->  
  9.   <%= javascript_include_tag :defaults %>  
  10.   <%= csrf_meta_tag %><!-- <label id="code.csrf"/> -->  
  11. </head>  
  12. <body id="store">  
  13.   <div id="banner">  
  14.     <%= image_tag("logo.png") %>  
  15.     <%= @page_title || "Pragmatic Bookshelf" %><!-- <label id="code.depot.e.title"/> -->  
  16.   </div>  
  17.   <div id="columns">  
  18.     <div id="side">  
  19.       <a href="http://www....">Home</a><br />  
  20.       <a href="http://www..../faq">Questions</a><br />  
  21.       <a href="http://www..../news">News</a><br />  
  22.       <a href="http://www..../contact">Contact</a><br />  
  23.     </div>  
  24.     <div id="main">  
  25.       <%= yield %><!-- <label id="code.depot.e.include"/> -->  
  26.     </div>  
  27.   </div>  
  28. </body>  
  29. </html>  

2、更改depot.css

[ruby] view plain copy
  1. #banner {   
  2.   background: #9c9;  
  3.   padding-top: 10px;  
  4.   padding-bottom: 10px;  
  5.   border-bottom: 2px solid;  
  6.   font: small-caps 40px/40px "Times New Roman", serif;  
  7.   color: #282;  
  8.   text-align: center;  
  9. }  
  10.   
  11. #banner img {   
  12.   float: left;  
  13. }  
  14.   
  15. #columns {   
  16.   background: #141;  
  17. }  
  18.   
  19. #main {   
  20.   margin-left: 17em;  
  21.   padding-top: 4ex;  
  22.   padding-left: 2em;  
  23.   background: white;  
  24. }  
  25.   
  26. #side {   
  27.   float: left;  
  28.   padding-top: 1em;  
  29.   padding-left: 1em;  
  30.   padding-bottom: 1em;  
  31.   width: 16em;  
  32.   background: #141;  
  33. }  
  34.   
  35. #side a {   
  36.   color: #bfb;  
  37.   font-size: small;  
  38. }  
3、重新查看效果

迭代C3:用帮助函数来调整价格格式

修改index.html.erb文件,使用帮助函数将价格以货币形式展现。

 <span class="price"><%=number_to_currency(product.price)%></span>






  相关解决方案