任務(wù)B
1、創(chuàng)建目錄清單
前面我們創(chuàng)建的是供賣方使用的管理界面，現(xiàn)在我們接著創(chuàng)建一個供買方使用的界面。
首先，我們使用如下語句：
ruby script/generate controller store index
在任務(wù)A中，我們使用的是ruby script/generate scaffold 來創(chuàng)建product的，而這里我們使用的generate controller 創(chuàng)建的是store，因?yàn)樵趧?chuàng)建product的時候，我們比較明確所需要做的內(nèi)容，但是在這里我們還不太明確所要做的東西，所以只是暫且搭一個框架出來。
我們打開http://localhost:3000/store后，可以看到是一個空的頁面，這時，我們應(yīng)該如何搭建它呢？
一般來說，我們需要在這個頁面中顯示的內(nèi)容應(yīng)該是從數(shù)據(jù)庫中提取出來的產(chǎn)品的清單，可供買方選擇的產(chǎn)品。所以，我們可以接下來這樣做：
在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 %>
???? 這時，就已經(jīng)創(chuàng)建好了一個簡單的產(chǎn)品目錄網(wǎng)頁。
2、創(chuàng)建一個頁面模板
?? 一般來說，網(wǎng)站中的頁面經(jīng)常都會有一個比較統(tǒng)一的樣式，在這里我們也需要做一個統(tǒng)一的樣式。這樣做的好處就是便于對網(wǎng)頁做整體的修改。在Rails中有很多中方法，現(xiàn)在我們選用一個最簡單的方法，就是在app/views/layouts目錄下創(chuàng)建一個和相應(yīng)控制器同名的的文件。這里的控制器是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" %>
#增加一個標(biāo)題
</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;
}
刷新頁面，就會看到相應(yīng)的變化了。
3、格式化price
??? 在數(shù)據(jù)庫中price是數(shù)值型的，但是我們在網(wǎng)頁顯示的時候，想讓它顯示成貨幣型的，也就是說帶有貨幣符號之類的，并且精確到分。
??? 在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網(wǎng)頁
??? 在我們所做的Catalog網(wǎng)頁中，在每個產(chǎn)品的旁邊沒有“Add to Cart”按鈕，這樣就無法將我們想要的產(chǎn)品放入到購物車中，所以接下來我們就需要解決這個問題。
??? 添加一個按鈕，首先第一種做法是使用link_to方法，在前面我們已經(jīng)展示過這個方法的使用了。但是這種方法有個缺點(diǎn)，就是link_to所用的HTML語言：<a href=……>只能獲取相應(yīng)的信息，但是卻不能更改信息（即，只讀型）
第二種方法是我們前面使用過的:method=>:delete這種方法。這種方法是可讀可寫型的
第三種方法是我們現(xiàn)在所要使用的button_to方法。這種方法所產(chǎn)生的效果是，當(dāng)我們點(diǎn)擊按鈕后，并不會跳轉(zhuǎn)到另一個網(wǎng)頁中，并修改其中的內(nèi)容，而是對我們所選中的產(chǎn)品做一個標(biāo)記。
那么如何實(shí)現(xiàn)button_to方法呢？
第一步，修改views/store/index.html.erb文件(在價(jià)格旁邊加一個按鈕)
<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網(wǎng)頁中看到“Add to Cart”按鈕，在price下面。但是，我們想把“Add to Cart”按鈕放在price的旁邊，而不是price的下面，那么該如何修改呢？
第二步，修改depot.css文件，在里面增加下面的語句
對于網(wǎng)頁中想要顯示的樣式，我們需要在depot.css文件中進(jìn)行修改。對于button_to方法來說，它所產(chǎn)生的樣式，有兩個HTML語言，即form和div。
所以要寫成：
#store.entry form,#stor.entry from div
而在div中有兩個參數(shù)，第一個參數(shù)表示顯示，display；第二個參數(shù)表示在同一行中
所以整個就寫成：
???????? #store .entry form, #store .entry form div {
display: inline;
}
1、創(chuàng)建目錄清單
前面我們創(chuàng)建的是供賣方使用的管理界面，現(xiàn)在我們接著創(chuàng)建一個供買方使用的界面。
首先，我們使用如下語句：
ruby script/generate controller store index
在任務(wù)A中，我們使用的是ruby script/generate scaffold 來創(chuàng)建product的，而這里我們使用的generate controller 創(chuàng)建的是store，因?yàn)樵趧?chuàng)建product的時候，我們比較明確所需要做的內(nèi)容，但是在這里我們還不太明確所要做的東西，所以只是暫且搭一個框架出來。
我們打開http://localhost:3000/store后，可以看到是一個空的頁面，這時，我們應(yīng)該如何搭建它呢？
一般來說，我們需要在這個頁面中顯示的內(nèi)容應(yīng)該是從數(shù)據(jù)庫中提取出來的產(chǎn)品的清單，可供買方選擇的產(chǎn)品。所以，我們可以接下來這樣做：
在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 %>
???? 這時，就已經(jīng)創(chuàng)建好了一個簡單的產(chǎn)品目錄網(wǎng)頁。
2、創(chuàng)建一個頁面模板
?? 一般來說，網(wǎng)站中的頁面經(jīng)常都會有一個比較統(tǒng)一的樣式，在這里我們也需要做一個統(tǒng)一的樣式。這樣做的好處就是便于對網(wǎng)頁做整體的修改。在Rails中有很多中方法，現(xiàn)在我們選用一個最簡單的方法，就是在app/views/layouts目錄下創(chuàng)建一個和相應(yīng)控制器同名的的文件。這里的控制器是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" %>
#增加一個標(biāo)題
</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;
}
刷新頁面，就會看到相應(yīng)的變化了。
3、格式化price
??? 在數(shù)據(jù)庫中price是數(shù)值型的，但是我們在網(wǎng)頁顯示的時候，想讓它顯示成貨幣型的，也就是說帶有貨幣符號之類的，并且精確到分。
??? 在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網(wǎng)頁
??? 在我們所做的Catalog網(wǎng)頁中，在每個產(chǎn)品的旁邊沒有“Add to Cart”按鈕，這樣就無法將我們想要的產(chǎn)品放入到購物車中，所以接下來我們就需要解決這個問題。
??? 添加一個按鈕，首先第一種做法是使用link_to方法，在前面我們已經(jīng)展示過這個方法的使用了。但是這種方法有個缺點(diǎn)，就是link_to所用的HTML語言：<a href=……>只能獲取相應(yīng)的信息，但是卻不能更改信息（即，只讀型）
第二種方法是我們前面使用過的:method=>:delete這種方法。這種方法是可讀可寫型的
第三種方法是我們現(xiàn)在所要使用的button_to方法。這種方法所產(chǎn)生的效果是，當(dāng)我們點(diǎn)擊按鈕后，并不會跳轉(zhuǎn)到另一個網(wǎng)頁中，并修改其中的內(nèi)容，而是對我們所選中的產(chǎn)品做一個標(biāo)記。
那么如何實(shí)現(xiàn)button_to方法呢？
第一步，修改views/store/index.html.erb文件(在價(jià)格旁邊加一個按鈕)
<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網(wǎng)頁中看到“Add to Cart”按鈕，在price下面。但是，我們想把“Add to Cart”按鈕放在price的旁邊，而不是price的下面，那么該如何修改呢？
第二步，修改depot.css文件，在里面增加下面的語句
對于網(wǎng)頁中想要顯示的樣式，我們需要在depot.css文件中進(jìn)行修改。對于button_to方法來說，它所產(chǎn)生的樣式，有兩個HTML語言，即form和div。
所以要寫成：
#store.entry form,#stor.entry from div
而在div中有兩個參數(shù)，第一個參數(shù)表示顯示，display；第二個參數(shù)表示在同一行中
所以整個就寫成：
???????? #store .entry form, #store .entry form div {
display: inline;
}
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
