`
moqi1212
  • 浏览: 4222 次
  • 性别: Icon_minigender_2
  • 来自: Boston
最近访客 更多访客>>
社区版块
存档分类
最新评论

《Agile Web Development with Rails》读书笔记二

RailsWeb读书CSSRuby
阅读更多
任务B
1、创建目录清单
前面我们创建的是供卖方使用的管理界面，现在我们接着创建一个供买方使用的界面。
首先，我们使用如下语句：
ruby script/generate controller store index
在任务A中，我们使用的是ruby script/generate scaffold 来创建product的，而这里我们使用的generate controller 创建的是store，因为在创建product的时候，我们比较明确所需要做的内容，但是在这里我们还不太明确所要做的东西，所以只是暂且搭一个框架出来。
我们打开http://localhost:3000/store后，可以看到是一个空的页面，这时，我们应该如何搭建它呢？
一般来说，我们需要在这个页面中显示的内容应该是从数据库中提取出来的产品的清单，可供买方选择的产品。所以，我们可以接下来这样做：
在app/controllers/store_controller.rb文件中添加代码
class StoreController < ApplicationController
def index
@products = Product.find_products_for_sale
end
end
接着，我们再在app/models/product.rb中定义find_products_for_sale:
class Product < ActiveRecord::Base
def self.find_products_for_sale
find(:all,rder => "title" )
end     
最后，我们再编辑index界面，好让我们前面所做的东西能够显示出来。于是，在app/views/store中建立index.html.erb文件：
<h1>Your Pragmatic Catalog</h1>
<% for product in @products -%>
<div class="entry">
<%= image_tag(product.image_url) %>
<h3><%=h product.title %></h3>
<%= product.description %>
<div class="price-line">
<span class="price"><%= product.price %></span>
</div>
</div>
<% end %>
     这时，就已经创建好了一个简单的产品目录网页。

2、创建一个页面模板
   一般来说，网站中的页面经常都会有一个比较统一的样式，在这里我们也需要做一个统一的样式。这样做的好处就是便于对网页做整体的修改。在Rails中有很多中方法，现在我们选用一个最简单的方法，就是在app/views/layouts目录下创建一个和相应控制器同名的的文件。这里的控制器是store，所以我们的模板名就为store.html.erb。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html>
<head>
<title>Pragprog Books Online Store</title>
<%= stylesheet_link_tag "depot" , :media => "all" %>
#链接到depot.css文件上
</head>
<body id="store">
<div id="banner">
<%= image_tag("logo.png" ) %>
<%= @page_title || "Pragmatic Bookshelf" %>
#增加一个标题
</div>
<div id="columns">
<div id="side">
<a href="http://www....">Home</a><br />
<a href="http://www..../faq">Questions</a><br />
<a href="http://www..../news">News</a><br />
<a href="http://www..../contact">Contact</a><br />
</div>
<div id="main">
<%= yield :layout %> #这句话的作用是什么？
</div>
</div>
</body>
</html>
然后，我们还需要修改depot.css文件，在里面添加下面的代码：
/* Styles for main page */
#banner {
background: #9c9 ;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #282 ;
text-align: center;
}
#banner img {
float: left;
}
#columns {
background: #141 ;
}
#main {
margin-left: 13em;
padding-top: 4ex;
padding-left: 2em;
background: white;
}
#side {
float: left;
padding-top: 1em;
padding-left: 1em;
padding-bottom: 1em;
width: 12em;
background: #141 ;
}
#side a {
color: #bfb ;
font-size: small;
}
刷新页面，就会看到相应的变化了。

3、格式化price
    在数据库中price是数值型的，但是我们在网页显示的时候，想让它显示成货币型的，也就是说带有货币符号之类的，并且精确到分。
    在Rails中有一个number_to_currency方法能解决这个问题。所以我们需要在app/views/store目录中修改index.thml.erb文件。
将<span class="price" ><%= product.price %></span>这个语句中的<%=produtc.price%>语句修改为<%= number_to_currerncy(product.price)%>，即：
<span class="price" ><%= number_to_currency(product.price) %></span>

4、链接Cart网页
    在我们所做的Catalog网页中，在每个产品的旁边没有“Add to Cart”按钮，这样就无法将我们想要的产品放入到购物车中，所以接下来我们就需要解决这个问题。
    添加一个按钮，首先第一种做法是使用link_to方法，在前面我们已经展示过这个方法的使用了。但是这种方法有个缺点，就是link_to所用的HTML语言：<a href=……>只能获取相应的信息，但是却不能更改信息（即，只读型）
第二种方法是我们前面使用过的:method=>:delete这种方法。这种方法是可读可写型的
第三种方法是我们现在所要使用的button_to方法。这种方法所产生的效果是，当我们点击按钮后，并不会跳转到另一个网页中，并修改其中的内容，而是对我们所选中的产品做一个标记。
那么如何实现button_to方法呢？
第一步，修改views/store/index.html.erb文件(在价格旁边加一个按钮)
<h1>Your Pragmatic Catalog</h1>
<% for product in @products -%>
<div class="entry">
<%= image_tag(product.image_url) %>
<h3><%=h product.title %></h3>
<%= product.description %>
<div class="price-line">
<span class="price"><%= number_to_currency(product.price) %></span>
<%= button_to "Add to Cart" %>
#这就是我们需要增加的语句，使用的button_to方法
</div>
</div>
<% end %>
   这时，我们就会在store网页中看到“Add to Cart”按钮，在price下面。但是，我们想把“Add to Cart”按钮放在price的旁边，而不是price的下面，那么该如何修改呢？
第二步，修改depot.css文件，在里面增加下面的语句
对于网页中想要显示的样式，我们需要在depot.css文件中进行修改。对于button_to方法来说，它所产生的样式，有两个HTML语言，即form和div。
所以要写成：
#store.entry form,#stor.entry from div
而在div中有两个参数，第一个参数表示显示，display；第二个参数表示在同一行中
所以整个就写成：
         #store .entry form, #store .entry form div {
display: inline;
}

分享到：
| Java学习笔记（一）——面向对象
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics