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

转载于:https://www.cnblogs.com/lonelystarxing/articles/1880729.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值