Ruby on Rails Tutorial （Michael Hartl）中文翻译第三章静态页面（2）

iseesea

浏览: 46245 次
性别:
来自: 厦门

最近访客更多访客>>

renpingqing

zhangyanan_it

FondantMint

zhangcaiyanbeyond

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Rails翻译

Rails Ruby rspec Git 浏览器

3.1.1 真正的静态页面
让我们从真正的静态页面开始学习吧，回顾一下第1.2.5中关于每一个Rails程序一开始就就是一个非常小的程序（主要是Rails脚本的功劳，例如生成器）而且都有一个默认的欢迎页面（地址：http://localhost:3000/ (图1.3).）

（图1.3 第一章的图片，rails程序创建时默认的欢迎页面。）

图片3.2 public/index.html文件（默认欢迎页面）

看一下上图中代码，我们学习一下这个页面是从哪里来的。因为这个页面把样式直接包括进去，所以看起来有点乱，但是他的主要功能是：Rails将会把public文件夹下面的任何文件提供给浏览器。其中index.html文件是非常特别的，当你没有指定url地址的时候（http://localhost:3000/）他就是默认提供给浏览器的页面。当然你也可以包含它（http://localhost:3000/index.html）是没有区别的。
正如你所想的，如果我们喜欢，我们可以吧我们自己的静态网页像index.html文件一样放在public目录底下。所为例子，让我们创建一个问候用户的页面（代码3.3）。

$ mate public/hello.html

代码3.3 问候的HTML页面

<!DOCTYPE html>
<html>
  <head>
    <title>Greeting</title>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

在代码3.3中，我们看到一个典型的HTML文件：在头部声明document type（或者doctype），告诉浏览器HTML的版本（我们使用HTML5），在HTML的head中，我们设置“Greeting”作为title标签，在Body里面，我们在一个段落标签里放入了“Hello，world！”（上面的缩进可以不必理会，HTML的空格和tab键没影响。加上必要的排版可以让我们的文档更方便查看。）。好了，和上面说的一样，我们可访问地址:
http://localhost:3000/hello.html，Rails将会直接将页面返回给我们（图3.3）。
（HTML文本的title在浏览器的顶部。）

图3.3我们自己的静态网页
上述页面只是为了示范而已。它可不是我们程序的一部分，所以我们应该删除掉它。

$ rm public/hello.html

我们先把index.html文件放一边，当然我们最终是要删除掉它的，我们可不想我们程序的根目录总是如图1.3所示那样的Rails默认页面。我们将会在第5.2节中学习如何让我们的地址“http://localhost:3000/”不指向public/index.html

3.1.2 Rails静态页面

可以返回静态页面是值得让人兴奋地，但是这对于开发一个动态web程序的来说并不是很有用。在这一节，我们学习创建动态页面的第一步：创建一些Rails的action方法，这些方法定义URL的能力比静态页面强很多。Rails的action方法在控制器里。第二章惊鸿一瞥的REST架构，我们将要在第六章深入的学习。本质上，controller是一组网页页面（可能是动态）的容器。

我们从回忆第1.3.5节中，我们如何使用Git开始，将我们工作的内容单独放在一个分支里面比直接在master分支更值得我们借鉴。如果你使用Git版本控制，你可以运行一下代码

$ git checkout -b static-pages

Rails里面我们可以使用一个Generate的脚本来创建控制器；他的神奇之处就在于我们所要做的只是想一个控制器的名称。
由于我们的这个控制器主要用来处理静态页面，我们就叫他，Pages，而且我们希望给他几个action去响应Home page，contact page，和about page。我们可以在generate 脚本后面更上几个可选的参数作为actions，我们可以看到结果如下：
代码3.4 创建Pages控制器

$ rails generate controller Pages home contact
      create  app/controllers/pages_controller.rb
       route  get "pages/contact"
       route  get "pages/home"
      invoke  erb
      create    app/views/pages
      create    app/views/pages/home.html.erb
      create    app/views/pages/contact.html.erb
      invoke  rspec
      create    spec/controllers/pages_controller_spec.rb
      create    spec/views/pages
      create    spec/views/pages/home.html.erb_spec.rb
      create    spec/views/pages/contact.html.erb_spec.rb
      invoke  helper
      create    app/helpers/pages_helper.rb
      invoke    rspec

(注意，我们使用rails generate rspec：install来安装了Rspec所以，控制器自动在spec目录底下，生成了Rspec的测试文件。)。在这里，我故意遗忘了about page，我们可以在下一节3.2中学习如何手动添加它。
代码3.4中生成控制器的时候已经更新了routes的文件（位于config/routes.rb），Rails用该文件来查找URL和网页之间的对应关系。这是我们第一次遇到config这个文件夹，所以我们应该来快速的过一遍这个文件夹(如图3.4)。这个文件夹是rails放置一些配置文件的目录，故称其名。

图3.4 实例程序中config文件夹的目录内容

由于我们生成了home和contact的action方法，所以，routes文件已经为每一个action配置好了规则，如代码3.5：
代码3.5 page控制器中home和contact的路由规则
config/routes.rb

SampleApp::Application.routes.draw do
  get "pages/home"
  get "pages/contact"
  .
  .
  .
end

规则：

引用

get "pages/home"

映射了请求url：pages/home到Pages控制器的home方法。此外，使用get我们制定这个路由只会响应GET(一种HTTP协议（见Box3.1）支持的基础HTTP动作)的请求。对我们来说，我们在Pages的控制器中创建一个home的方法之后就自动的获得了一个页面地址“pages/home”，可以用Ctrl+C关闭服务器之后，重新启动（其实可以不用重启，rails的可以动态载入这些方法），然后访问pages/home（见图3.5）

图3.5 有Rails生成的原始home页面（pages/home）

引用

Box 3.1.GET和其他.
HTTP协议定义了四种基本操作方式，分别是get，post, put, 和delete。这些是指在客户端和服务端之间的操作。（这个非常的重要，在开发中，一般客户端和服务器是同台机器，但是一般情况下，他们是不同的），强调HTTP动作是web框架（包括Rails）被REST架构影响的一个非常典型的特征。好处可以参考第2章，第八章会有深入的了解。
GET is the most common HTTP operation, used for reading data on the web;
get是HTTP操作中最常用的一个，一般用于请求数据。
it just means “get a page”, and every time you visit a site like google.com or craigslist.org your browser is submitting a GET request.
它的意思就是“获取页面”，所以每次你访问google.com 或者craigslist.org 的时候，你的浏览器都是提交一个Get的请求。

POST is the next most common operation; it is the request sent by your browser when you submit a form.
下一个常用的操作是Post，它一般在提交一个表单的时候使用。

In Rails applications, POST requests are typically used for creating things (although HTTP also allows POST to perform updates);
在rails里面Post的请求一般用于创建数据（尽管HTTP也允许post去实现更新。）

for example, the POST request sent when you submit a registration form creates a new user on the remote site.
比如，当你提交一个注册表单之后就会在服务器那边创建一个新的用户。
The other two verbs, PUT and DELETE, are designed for updating and destroying things on the remote server.
另外2个操作时put和delete，前者用来更新远程服务器数据，后者用来删除数据。
These requests are less common than GET and POST since browsers are incapable of sending them natively, but some web frameworks (including Ruby on Rails) have clever ways of making it seem like browsers are issuing such requests.
这2个没有前面2个操作那么普遍，有的浏览器没有支持发送这样的请求，但是一些web的框架（包括rails）有自己的方法去实现，让他发送这中请求。

++++++++++++++++++++++++++++++++华丽的分割线(更新)++++++++++++++++++++++++++++++++++++++
让我们从Pages的控制器开始看看，这些页面是哪里来的。如代码3.6所示（你可能注意到，这个和第二章中的Users和Microposts控制器有区别，这个控制器并没有遵循REST规则。）
代码 3.6 代码3.4产生的控制器代码。
app/controllers/pages_controller.rb

class PagesController < ApplicationController

  def home
  end

  def contact
  end
end

我们看到pages_contoller.rb文件中定义了PagesController类。类是把功能（或方法，就像用def定义的home和contact方法一样。）组织起来的一种简单方法。尖括号“<”便是PacgesController从Rails的ApplicationContoller类；
正如我们将看到，这说明了我们的网页装备了大量的Rails的特定功能（我们将会在第4.4节中学习类个继承。）
在这里，控制器中页面的方法都是空的。
在ruby里，这些方法什么都不做，但是在Rails里面却有点却别。PagesController是一个Ruby的类，但是由于他继承自ApplicationController。所以他的方法有一些特别。当我们访问URL /pages/home、 Rails寻找Pages的控制器，然后执行home的方法，然后渲染页面响应页面的动作。因为在上面home的方法是空的，所以他除了渲染页面之外什么也没做。所以页面应该什么样子，我们应该如何找到它呢。
如果你再看看代码3.4的输出，你可能会猜出页面和方法之间的关系：一个方法如home页面对应一个视图如home.html.erb。我们将会在3.3中学“.erb”的意义。从".html"部分你也不用惊讶它看起来是基于HTML。
代码3.7 自动产生的Home页面
app/views/pages/contact.html.erb

<h1>Pages#contact</h1>
<p>Find me in app/views/pages/contact.html.erb</p>

contact方法类似：
代码3.8 生成的Contact页面
app/views/pages/contact.html.erb

<h1>Pages#contact</h1>
<p>Find me in app/views/pages/contact.html.erb</p>

以上2个页面就类似占位符：一个顶级的h1标签，和一个包含了相关文件绝对路径的的P标签。我们从第3.3节开始学习添加一些动态（少量）的内容，但是他们说明了一个重要的知识：Rails的页面可以使只含有静态HTML的。只要浏览器链接，就很难区别开到底是由3.1.1中的静态页面显示，还是由控制器方法提供页面：因为浏览器都只看到HTML。
在这一章剩下的内容，我们将学习在3.1.2中故意遗漏的“about”，添加非常少的动态内容，然后第一次涉及页面的CSS样式。在进入下面的学习之前，我们应该将变动添加到Git的库里面去。

引用

$ git add .
$ git commit -am "Added a Pages controller"