【ror学习笔记2】数据表和界面
一。配置应用程序
1.rails depot
2.mysqladmin -u root create depot_development 用mysqladmin这个命令行客户端工具来创建数据库depot_development
此时config/database.yml会增加下面代码：
development:
adapter: mysql
database: depot_development
username: root
password:
host: localhost
3.rake:db migrate
二。创建模型类和数据表
（1）创建模型类和数据库表
1.ruby script/generate model product 创建product模型（模型类：Product，数据库表：products），生成模型类（product.rb），
迁移任务（001_create_products.rb）
2.修改刚创建的迁移任务db\migrate\001_create_products.rb，创建products表
class CreateProducts < ActiveRecord::Migration
def self.up
create_table :products do |t|
t.column :title, :string
t.column:description, :text
t.column:image_url, :string
end
end
def self.down
drop_table :products
end
end
3.rake db:migrate 实施迁移任务
（2）修改数据库表
1.ruby script/generate migration add_price
2.修改生成的db\migrate\002_add_price.rb
class AddPrice < ActiveRecord::Migration
def self.up
add_column :products,:price,:decimal,:precision=>8,:scale=>2,:default=>0
end
def self.down
remove_column:products,:price
end
end
3.rake db:migrate
(3)添加检测
修改（1）中生成的模型类product.rb
class Product < ActiveRecord::Base
validates_presence_of:title,:description,:image_url
validates_numericality_of:price
validates_uniqueness_of:title
validates_format_of:image_url,
:with =>%r{\.(gif|jpg|png)$}i,
:message =>"must be a URL for a GIF,JPG, or PNG image"
protected
def validate
errors.add(:price,"should be at least 0.01") if price.nil?||price<0.01
end
end
三。脚手架
(1)动态脚手架
1.ruby script/generate controller admin 创建控制器
2.修改app\controllers\admin_controller.rb
class AdminController<ApplicationController
scaffold:product
end
（2）静态脚手架
1.ruby script/generate scaffold product admin 脚手架生成器接受两个参数：模型名称，控制器名称
2.创建public\stylesheets\depot.css
3.修改app\views\layouts\admin.rhtml，在<%= stylesheet_link_tag 'scaffold' %>加上'depot'，既添加上depot.css到配置中
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Admin: <%= controller.action_name %></title>
<%= stylesheet_link_tag 'scaffold','depot' %>
</head>
<body>
<p style="color: green"><%= flash[:notice] %></p>
<%= yield %>
</body>
</html>
4.修改app\views\admin\list.rhtml，让它只是个简单的表格状模板，利用了depot.css
代码
<div id="product-list">
<h1>Listing products</h1>
<table cellpadding="5" cellspacing="0">
<% for product in @products %>
<tr valign="top" class=<%=cycle('list-line-odd','list-line-even')%>">
<td>
<img class="list-image" src="<%=product.image_url%>"/>
</td>
<td width="60%">
<span class="list-title"><%=h(product.title)%></span><br/>
</td>
<td class="list-actions">
<%= link_to 'Show', :action => 'show', :id => product %>
<%= link_to 'Edit', :action => 'edit', :id => product %>
<%= link_to 'Destroy', { :action => 'destroy', :id => product }, :confirm => 'Are you sure?', :method => :post %>
</td>
</tr>
<% end %>
</table>
</div>
<%= link_to 'Previous page', { :page => @product_pages.current.previous } if @product_pages.current.previous %>
<%= link_to 'Next page', { :page => @product_pages.current.next } if @product_pages.current.next %>
<br />
<%= link_to 'New product', :action => 'new' %>
5.ruby script/generate migration add_test_data 这一步可做不做，只是加上一个固定测试数据，免得以后老是要输入测试数据
修改生成的db\migrate\003_add_test_data.rb，利用模型类Product的create()方法添加数据
class AddTestData < ActiveRecord::Migration
def self.up
Product.delete_all
Product.create(:title=>'PVC',
:description=>%{<p>blallla</p>},
:image_url=>'/images/svn.jpg',
:price =>28.50)
end
def self.down
Product.delete_all
end
end
rake db:migrate
代码
/* Global styles */
#notice {
border: 2px solid red;
padding: 1em;
margin-bottom:2em;
background-color:#f0f0f0 ;
font:bold smaller sans-serif;
}
/* Styles for admin/list */
#product-list .list-title {
color: #244 ;
font-weight: bold;
font-size: larger;
}
#product-list .list-image {
width: 60px;
height: 70px;
}
#product-list .list-action {
font-size: x-small ;
text-align: right ;
padding-left:lem ;
}
#product-list .list-line-even {
background: #e0f8f8 ;
}
#product-list .list-line-odd{
background: #f8b0f8;
}
/* Styles for main page */
#banner {
background: #9c9;
padding-top: 10px;
padding-bottom: 10px;
font: small-caps 40px/40px "Times New Roman",serif;
color: #282 ;
text-align:center;
}
#banner img{
float: left;
}
#columns {
background: #141;
}
#main {
margin-left:15em;
padding-top: 4ex;
padding-left: 2em;
background: white;
}
#side {
float: left;
padding-top:lem;
padding-left: lem;
padding-bottom: lem;
width: 14em;
background: #141;
}
#side a {
color: #bfb ;
font-size: small;
}
#h1 {
font: 150% sans-serif;
color:#226 ;
border-bottom: 3px dotted #77d;
}
/* and entry in the store catalog*/
#store .entry{
border-bottom: 1px dotted #77d ;
margin-top:20px;
}
#store .title {
font-size:120%;
font-family: sans-serif;
}
#store .entry img{
width:75px;
float:left;
}
#store .entry h3{
margin-bottom:2px;
color: #227 ;
}
#store .entry p{
margin-top:0px;
margin-bottom: 0.8em;
}
#store .entry .price-line{
}
#store .entry .add-to-cart{
position: relative;
}
#sore .entry .price{
color:#44a;
font-weight: bold;
margin-right:2em;
}
#store .entry form,#store .entry form div {
display: block;
}
/*styles for the cart in the main page and the sidebar*/
.cart-title{
font:120% bold;
}
.item-price, .total-line {
text-align:right
}
.total=price, .total-cell {
font-weight: right;
border-top: 1px solid #595;
}
/* Styles for the cart in the sidebar*/
#cart, #cart table{
font-size: smaller;
color:white;
}
#cart table {
border-top: 1px dotted #595 ;
border-bottom: 1px dotted #595;
margin-bottom: 10px;
}
/* Styles for order form*/
.depot-form fieldset {
background: #efe;
}
.depot-form legend {
color: #dfd;
background: #141;
font-family:sans-serif;
padding:0.2em 1em;
}
.depot-form label {
width:5em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
}
.depot-form .submit {
margin-left: 5.5em;
}
/* The error box */
.fieldWidthErrors {
padding: 2px;
background-color:red;
display: table;
}
#errorExplanation {
width: 400px;
border:2px solid red;
padding: 7px;
padding-bottom:12px;
margin-bottom:20px;
background-color:#f0f0f0;
}
#errorExplanation h2 {
text-align: left;
font-weight: bold;
padding:5px 5px 5px 15px;
font-size:12px;
margin:-7px;
background-color:#c00;
color:#fff ;
}
#errorExplanation p {
color: #333 ;
margin-bottom: 0;
padding:5px;
}
#errorExplanation ul li {
font-size:12px;
list-style:square;
}
