继续学习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浏览器接却的图片)