ROR新手上路之五用户注册
继续学习ROR，以下是我对《RailsSpace Web应用开发》书上的相关实例学习。
其实写一个用户注册页面还是比较简单，只需创建一个register操作，添加默认index，然后编辑register.rhtml文件即可
>ruby script/generate controller User index register --创建register 其包括一些验证在下面记录
在app/views/user/register.rhtmlz中添加如下代码
<h2>Register</h2>
<% form_for :user do |form| %>
<fieldset>
<legend>
Enter Your Drtails
</legend>
<%= error_messages_for "user" %>
<div class="form_row">
<label for="screen_name">Screen name:</label>
<%= form.text_field :screen_name, :size=>User::SCREEN_NAME_SIZE, :maxlength=>User::SCREEN_NAME_MAX_LENGTH %>
</div>
<div class="form_row">
<label for="email">Email:</label>
<%= form.text_field :email, :size=>User::EMAIL_SIZE, :maxlength=>User::EMAIL_MAX_LENGTH %>
</div>
<div class="form_row">
<label for="password">Password:</label>
<%= form.text_field :password, :size=>User::PASSWORD_SIZE, :maxlength=>User::PASSWORD_MAX_LENGTH %>
</div>
<div class="form_row">
<%= submit_tag "Rsgister!", :class=>"submit" %>
</div>
</fieldset>
<% end %>
然后在app/model/user.rb中添加如下代码
#视图显示的文本框的大小 SCREEN_NAME_SIZE=20 PASSWORD_SIZE=10 EMAIL_SIZE=30
设置默认index，将layouts/site.rhtml改名为application.rhtml设置默认layout文件，在app/controller/user_controller.rb中设置成
class UserController < ApplicationController
layout "application"
def index
@title="RailsSpace User Hub"
end
def register
@title="Register"
if request.post? and params[:user]
#logger.info params[:user].inspact 使用Ruby的logger函数，在开发日志文件中可以查询输出的信息！
#rails params[:user].inspact #将页面输出到浏览器中，其内容作为一个异常被触发
@user=User.new(params[:user])
if @user.save
flash[:notice]="User #{@user.screen_name} created!"
redirect_to :action=>"index"
# render :text=>"User created!"
end
end
end
end
减少导航链接中的重复代码，先设置app/helpers/application_helper.rb
def nav_link(text,controller,action="index")
#return可省略，符合rails习惯
return link_to_unless_current text, :controller=>controller, :action=>action
end
然后设置app/views/layouts/application.rhtml,代码清单如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/DTDT/xhtml1-strict.dtd">
<html>
<head>
<title><%=@title %></title>
<%=stylesheet_link_tag "site"%>
</head>
<body>
<div id="whole_page">
<div id="header">RailsSpace</div>
<div id="nav">
<%=nav_link "Home","site"%>|
<%=nav_link "About Us","site","about"%>|
<%=nav_link "Help","site","help"%>|
<%=nav_link "Register","user","register"%>
<%#= link_to_unless_current("Home",{:action=>"index",:controller=>"site"}) %>
<%#= link_to_unless_current("About US",{:action=>"about",:controller=>"site"}) %>
<%#= link_to_unless_current("Help",{:action=>"help",:controller=>"site"}) %>
<%#= link_to_unless_current("Register",{:action=>"register",:controller=>"user"}) %>
<%#*函数调用的圆括号是可选的，花括号作为最后一个参数时也是可选的,nav_link替换link_to_unless_current，在application_helper.rb中声明%>
</div>
<div id="content">
<% if flash[ :notice] -%>
<div id="notice"><%=flash[:notice]%></div>
<%end -%>
<%=yield%>
<%#*函数调用的圆括号是可选的，花括号作为最后一个参数时也是可选的%>
<%#=@content_for_layout%>
</div>
<% if ENV["RAILS_ENV"]=="development" %>
<%= debug(params)%>
<% end %>
</div>
</body>
</html>
此时我们可以通过http://localhost:3000/site/register来访问注册界面，当然页面美观方面可能不是让自己很满意，那就在public/stylesheets/dite.css中设置样式，参考书籍中的代码如下
代码
/*
Document : site
Created on : 2010-11-9, 11:09:56
Author : Administrator
Description:
Purpose of the stylesheet follows.
*/
/*
TODO customize this sample style
Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
root {
display: block;
}
body{
font-family: sans-serif;
background: gray;
margin: 0;
text-align: center;
}
/*使IE正确显示fieldset/legend*/
html fieldset{
position: relative;
margin-top: 1em;
padding-top: 2em;
padding-bottom: 2em;
}
html legend{
position: absolute;
top: -1em;
left: .5em;
}
/*表单styles*/
fieldset{
background: #ddd;
}
legend{
color: white;
background: maroon;
padding: .4em 1em;
}
label{
width: 10em;
float: left;
text-align: right;
margin-right: .2em;
display: block;
}
.form_row{
white-space: nowrap;
padding-bottom: .5em;
}
.submit{
margin-left: 12em;
}
#whole_page{
width: 50em;
margin: auto;
padding: 0;
text-align: left;
border-width: 0 1px 1px 1px;
border-color: black;
border-style: solid;
}
#header{
color: white;
background: maroon;
font-size: 24pt;
padding: 0.25em;
margin-bottom: 0;
}
#nav{
color: black;
font-size: 12pt;
font-weight: bold;
background: #ccc;
padding: 0.5em;
}
#nav a,#nav a:visited{
color: maroon;
text-decoration: none;
}
#nav a:hover{
border-bottom: 2px dotted maroon;
}
#content{
height: 100%;
background: white;
padding: 1em;
}
#content h1{
font-size: 18pt;
}
/* 调试信息的样式*/
.debug_dump{
text-align: left;
border-top: 1px dashed black;
background: #ccc;
margin: 0;
padding: 0.5em;
}
/*错误报告的样式*/
.fieldWithErrors{
margin: 2px;
padding: 2px;
background-color: red;
display: table;
}
#errorExplanation{
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: 15pt;
margin: -7px;
background-color: #c00;
color: #fff;
}
#errorExplanation p{
color: #333;
margin-bottom: 0;
padding: 5px;
}
#errorExplanation ul li{
font-size: 11pt;
list-style: square;
}
/*Flash notice 样式*/
#notice{
border: 1px solid green;
padding: 1em;
margin: 1em;
margin-bottom: 2em;
background-color:lightgray;
font: bold smaller sans-serif;
}
注意：需要关注多种浏览器之间对css的不同解释。
最后需要补充点的是可以设置下user/index.rhtml的内容。最后的显示页面如图所示（我使用ff浏览器接却的图片）
