3.1. Setting the Stage-阿里云开发者社区

3.1. Setting the Stage

2017-11-15 1053

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

这章中使用的示例，会延续上一章创建的Rails应用chapter2，但是我们会创建一个新的controller。在终端下执行：

script/generate controller chapter3 index get_time repeat reverse

这行命令生成了一个controller chapter3，4个action：index， get_time, repeat和reverse。

在上一章中，我们给出的示例页面都是平淡无奇的，这次我们用一个HTML layout和一个CSS文件把页面打扮一番。首先创建一个新的layout文件，app/view/layouts/application.rhtml，里面写一个基本的XHTML模板：

<!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" >
   < head >
     < title >Ajax on Rails </title>
     < %= javascript_include_tag :defaults % >
     < %= stylesheet_link_tag "application" % >
   </head>
   < body >
     < h1 >Ajax on Rails </h1>
     < %= yield % >
   </body>
</html>

在这个模板中我们实现了两个重要的目标，首先是通过javascript_include_tag :defaults这条语句包含了Prototype和script.aculo.us(具体包括prototype.js, effects.js, dragdrop.js和controls.js)，也有application.js, 第二个就是yield，这是插入action模板的地方。为了模板能更好看些，让我们来做一个简单的css文件，位于public/stylesheets/application.css:

body {
  background-color: #eee;
  color: #222;
  font-family: trebuchet;
  padding: 0;
  margin: 25px;
}
h1 {
  margin: -25px -25px 20px -25px;
  padding: 50px 0 8px 25px;
  border-bottom: 3px solid #666;
  background-color: #777;
  color: #fff;
  font: normal 28pt georgia;
  text-shadow: black 0px 0px 5px;
}
a { color: #229; }
.box {
  border: 1px solid;
  width: 100px; height: 100px;
  padding: 5px;
  font-size: .6em;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.pink {
  border-color: #f00;
  background-color: #fcc;
}
.green {
  border-color: #090;
  background-color: #cfc;
}
.hover {
  border-width: 5px;
  padding: 1px;
}
ul {
  background-color: #ccc;
  padding: 5px 0 5px 30px;
}

接着，我们来充实一下controller中的内容，编辑app/controllers/chapter3_controller.rb定义一些一会儿会用到的action：

class Chapter3Controller < ApplicationController

  def get_time
    sleep 1.second
    render :text => Time.now.to_s
  end

  def repeat
    render :text => params.inspect
  end

  def reverse
    @reversed_text = params[:text_to_reverse].reverse
  end

end

下一步就是添加视图模板中的内容

app/views/chapter3/index.rhtml 就一行代码：

<%= link_to "Check Time", :action => 'get_time' %>

这里应用了like_to这个helper，上章介绍过了，它相当于下面的html代码：

< a href ="/chapter3/get_time" >Check Time </a>

在浏览器中打开这个页面，就会看到下图所示的画面，点击链接，get_time这个action会呈递一个当前时间的文本。

link_to有几个注意的选项，首先， :confirm允许添加一个javascript的确认对话框，用户可以在执行之前选择取消，假设你有一个链接引发一个潜在的危险动作：

<%= link_to "Fire missile", { :action => 'fire' },
:confirm => "Are you quite sure?" %>

这里可以加一个适当的控制，用户可以选择终止这个动作。

其次，:method选项允许指明HTTP方法是:get, :post, :put, 还是:delete. 也许这些选项显得有点奇怪，因为一般链接只使用HTTP的GET方法，表单只能使用GET或者POST。那么为什么Rails这么做呢？其实这里有个小骗局，看看我为什么这么说：建立一个链接，并指定:method：

<%= link_to "Delete", "/people/1", :method => :delete %>

如果你查询一下helper产生的源代码，你会看到：

<a href="/people/1"
   f = document.createElement('form');
           f.style.display = 'none';
           this.parentNode.appendChild(f);
           f.method = 'POST';
           f.action = this.href;
           var m = document.createElement('input');
           m.setAttribute('type', 'hidden');
           m.setAttribute('name', '_method');
           m.setAttribute('value', 'delete');
           f.appendChild(m);
           f.submit(  );
           return false;">Delete </a>

这段代码截获了link的动作，所以当点击链接之后，幕后创建并且提交了一个表单。对于链接本身来说，这个:method只允许链接发起POST请求。那么PUT和DELETE呢？为了让他们工作，Rails使用POST方法来实现，你可以看到上面代码中生成的Javascript的那句，一个名为_method的字段添加到了隐藏的表单中。当Rails的服务器端收到这个参数，就会以这个参数提供的方法来解释执行这个请求。

对于正确使用HTTP 方法在第六章会深入讨论。

本文转自 fsjoy1983 51CTO博客，原文链接：http://blog.51cto.com/fsjoy/91136，如需转载请自行联系原作者