1000 个小时学会 Rails 系列

上一回：004 神秘的 X 项目

首先这个神秘的五十一区，给我送上了一张海报，希望能让我在开发新微博的时候，

时刻的记著这微勃的精神：

一张苍老师代言的“深入浅出”Rails 海报。。。据说这是欧莱礼下一版的封面。。。

创建静态页面

静态页面，究竟要干啥的？我们的页面总需要添加一些，这网站谁做的阿 (about)，这网站怎么用阿 (help)，这网站怎么回首页阿 (home)。。。等等，这些比较不会变化的页面，吾人称之为静态页面。

首先就先来实现刚刚说的这些页面，让我们先来创一个平行时空吧，沈佳怡。。。：

git checkout -b static_pages

-b 是新建分支并切换到该分支。

再来让我们复习一下 MVC，当一个尊敬的用户，打开浏览器，浏览你的网站时，会发送请求给你，Rails 有一个 Rails 路由，看了看你要去哪，交给相对应的控制器的动作，控制器跟模型要资料（如果需要的话），模型去数据库取出来，丢回给控制器，控制器传给视图，视图返回 HTML 给控制器，控制器再丢回给尊敬的用户。

创建 HOME 与 HELP 页面

当你创建一个 Rails 应用时，路由已经是标配了，你所需要做的呢，是产生控制器、视图以及模型。好的，先让我们产生一个控制器，让它来帮我们处理这些静态页面的请求：

rails generate controller StaticPages home help --no-test-framework

就跟买咖啡一样，说你要什么、不要什么。。。我们产生了什么呢：

create app/controllers/static_pages_controller.rb route get "static_pages/help" route get "static_pages/home" invoke erb create app/views/static_pages create app/views/static_pages/home.html.erb create app/views/static_pages/help.html.erb invoke helper create app/helpers/static_pages_helper.rb invoke assets invoke coffee create app/assets/javascripts/static_pages.js.coffee invoke scss create app/assets/stylesheets/static_pages.css.scss

首先呢，产生了一个控制器，叫做 StaticPages 带有 home、help 动作，以及相对应的路由、视图，一个 helper、一个 coffeescript 及 sass 文件，不要缺省的测试框架，换了谭浩强来输入上面那条命令也是一样的结果，嘿嘿。。。

谭浩强：中国 C 语言之父。

假如有一天，你因为不明原因，只能用右手打字，哎呀、、、手误了，该怎么办？放心，有 generate 也有相对的 destroy 可以让你还原产生的东东：

rails destroy controller StaticPages home help 模型比照办理，如 rails destroy model Foo

让我们打开一下 config/routes.rb 看看，到底路由是加没加（注释暂时忽略）？

XWeibo::Application.routes.draw do get "static_pages/home"

get "static_pages/help" end

阿哈，它替我们创好了当有一个要到 URI static_pages/home 这样的 GET 请求时，把它交给 StaticPages 控制器的 home 动作处理。

HTTP 动词复习

这是用户（通常是浏览器，如火狐、Safari）与服务器（Apache、Nginx）之间的用语，请注意，你的电脑可以同时扮演两个角色。他们之间的沟通用语就是 GET, POST, PUT, DELETE。

• GET 请求： 读取 ，比如到某个网站的首页，要求页面
• POST 请求： 创建 ，比如填入表单所发送的请求
• PUT 请求： 更新 ，比如更新用户信息。
• DELETE 请求： 摧毁 ，比如不喜欢这个帐号？删除它。

有的人会说 PUT 跟 POST，也可以花插儿著用，恩可以，HTTP 允许 POST 来做更新。但在 Rails 应用的上下文里，POST 通常是拿来创建新东西。

好了，让我们再来看看控制器里有些什么：

class StaticPagesController < ApplicationController def home end

def help end end

这里可以看到，定义了一个类别 StaticPagesController 继承 (<) 自 ApplicationController，并带有两个方法，方法由 def 关键字定义，这其实隐含了很多 Rails 帮你写好的代码。

然而这两个动作怎么啥都没有呢？在 Ruby 里，这两个方法啥也不干。在 Rails 呢，即便是没写内容的方法 home，最基本也会去渲染一个视图 ( app/views/static_pages/home.html.erb )。

让我们打开服务器一探究竟，我们总是有著无止尽的好奇心：

rails server

打开浏览器，看看这两个页面

http://localhost:3000/static_pages/home.html

http://localhost:3000/static_pages/help.html

这两个页面实际上就是 Rails 替我们产生的，相当简单的 HTML，各有一个 h1 标题标签，以及一个段落标签 p。

StaticPages#home

Find me in app/views/static_pages/home.html.erb

StaticPages#help

Find me in app/views/static_pages/help.html.erb

而 http://localhost:3000/ 是 Rails 标准的欢迎画面，相信你已经相当熟悉了。

很好、很好，到这里先存档一下吧、我得去上个厕所：

git add . git commit -m 'Add a StaticPages controller'

撰写第一个测试

厕所上回来啦。。。还买了罐啤酒，BDD (aka Beer-driven Development) 嘛。。。啤酒少不了的。

如同之前说过的，这个应用会是由 BDD 的方式来做开发。所以现在让我们来写测试吧，当然，不用先写测试也可以，要理解到，虽然写测试有很多好处，但是人是活的，码是死的，我管不住你。。。

之后的流程，我们会先写一个失败的测试，撰写代码使其通过，再进行重构。

测试、编码、修改、重构。

第一步让我们先来产生测试：

rails generate integration_test static_pages

可以看到 Rails 调用了 rspec 帮我们产生了一个测试文件：

invoke rspec create spec/requests/static_pages_spec.rb

让我们加入 Home 页面的测试代码，你会发现里面已经有代码了，使用如下代码替换：

spec/requests/static_pages_spec.rb

require 'spec_helper'

describe "Static pages" do

describe "Home page" do

it "should have the content '新微博'" do visit '/static_pages/home' page.should have_content('新微博') end end end

让我来解释一下这个测试，我们有一个测试静态页面的 describe 区块

describe "Static pages" do

首先我们测的是 Home 页面

describe "Home page" do

里面有一个测试：

it "should have the content '新微博'" do visit '/static_pages/home' page.should have_content('新微博') end

这个测试就跟英文一样，它说当我们来到 /static_pages/home 这个页面时，应该要看到新微博这个内容。这里的 visit 使用到了，我们之前安装的 capybara gem 的一个 visit 方法、page 也是由 capybara gem 提供的变量。

这些 describe, it 高抽象化的语言是 RSpec 写好，供你使用的 DSL 方法，搭配 capybara 使用来达到测试驱动开发的目的，一开始可能会觉得不太自在，但先不要纠结于是怎么实现的，用的熟练后回头看，自然而然就理解了。

OK，现在让我们来运行看看

bin/rspec spec/requests/static_pages_spec.rb

阿哈，我们有了第一个失败测试，很好，这样让我们知道下一步该怎么走。

错误信息告诉我们 Home 页面缺少了 新微博 这个内容，让我们打开 app/views/static_pages/home.html.erb ，并添加如下内容：

新微博

神秘的 X 项目新微博 Rails 示例教学

再运行一次测试：

bin/rspec spec/requests/static_pages_spec.rb

这时候应该看到测试通过：

接下来让我们加入帮助信息的页面，一样先写个测试，在 static_pages_spec.rb 的 describe "Static pages" 区块中加入：

describe "Help page" do

it "should have the content '帮助'" do visit '/static_pages/help' page.should have_content('帮助') end end

呵呵，这个测试基本上跟刚刚一样，只不过改了几个小地方，下一步要做什么呢？让我们运行测试看看：

bin/rspec spec/requests/static_pages_spec.rb

到这会儿你应该可以体会出，我很傻帽或者是测试带来的好处，首先我们构思我们的页面要实现什么功能，撰写一个测试，运行测试、编码。而每个测试之间的相似性很高，互相可以重用。

好的，现在让我们打开 app/views/static_pages/help.html.erb，添加：

app/views/static_pages/help.html.erb

帮助

更多相关 Ruby on Rails 帮助，请莅临 Ruby-china. 本示例教程教学文章： 1000 小时学会 Rails 系列.

呵呵，有了测试以后就像是傻瓜开发一样，so simple!

我们的 Home 与 Help 页面做好啦！

加入关于页面

现在让我们加入一下关于页面，哎呀，看起来我刚刚似乎产生控制器的时候，忘了加入 about 页面了：

rails generate controller StaticPages home help --no-test-framework

呵呵，其实我是故意的，我们自己走一遍这个流程就可以了解 rails 命令背后到底偷偷摸摸干了啥，一样我们先来写个测试：

describe "About page" do it "should have the content '关于新微博" do visit '/static_pages/about' page.should have_content('关于新微博') end end

这个测试跟刚刚两个基本一模一样，将这个测试加至 static_pages_spec.rb ，你懂得，运行：

哦，这次的错误信息不太一样，报错的是没有相应的路由：

No route matches [GET] "/static_pages/about"

若是 Rails 自动帮我们产生的话，Rails 会自动替你加路由、加相应的控制器动作、对应的视图。

让我们现在把这个路由加上，打开 config/routes.rb ，添加：

get "static_pages/about"

若是使用了 Spork 进阶配置的朋友，可能得重启 DRb 服务器哦，亲！

再运行测试看看，相信聪明如你已经猜到我们还没实现控制器的 about 动作：

打开 app/controller/static_pages 添加 about 动作：

def about

end

现在先留白就很够用了，我们已经有从 Rails 的 ApplicationController 继承来的一堆东西可用了，这算不算是某种程度上的靠爸族呢。。。

添加缺少的视图，在 app/views/static_pages 目录下创建 about.html.erb ，并填入：

关于新微博

新微博是使用 Ruby on Rails 技术所开发的微博，网络新纪元，微博新时代，你今天微勃了吗？

OK! 现在运行测试：

bin/rspec spec/requests/static_pages_spec.rb

都变成绿油油的一片，没有红色可怕的 F 了！这也就是为什么这个流程叫做 Red-Green-Refactor 。

现在让我们来看看有哪儿可以重构的。。。

重构！将 DRY 进行到底。。。

恩，我们都不喜欢单调，尤其是姿势，点缀生活，网站当然也一样，你发现到我们的标题老是一样么？Home, Help, About 页面的标题都是一样的，这样有点闷...

让我们看看如何让不同的页面有不同的标题，我们想要的是

OK. 现在让我们看看如何实现这个功能，首先我们先写个测试，来免去手动刷新的开发范式 (paradigm)...

打开 spec/requests/static_pages_spec.rb ：

让我们添加一个新测试：

it "should have the title 'Home'" do visit '/static_pages/home' page.should have_selector('title', :text => "Home | X Weibo") end

这个测试该加在哪呢？这是一个关于 Home 页面的测试，合理地我们可以放在 describe "Home" 区块里。

我们首先访问首页 visit '/static_pages/home' ，页面应该有内容为 Home | X Weibo 的标题。

这个 have_selector 方法确认 title 标签的内容是不是 Home | X Weibo ...

这里 :text => "Home | X Weibo" 是 Ruby 的嘻哈哈希语法。

:text 是 Ruby 里的符号，作为哈希的键值使用。

另一件要提及的是代码的可读性。注意到：

page.should have_selector('title', :text => "Home | X Weibo")

我们将

:text => "Home | X Weibo"

移到第二行，增加可读性。适当的缩排是提高可读性的不二法门。Ruby 不在乎多出来的空白及新行，最好是保持 每行 < 72 个字符，否则有可能会被 Linus 喷的体无完肤，呵呵。

让我们也添加 Help, About 页面的测试，现在整个 static_pages_spec.rb 看起来：

spec/requests/static_pages_spec.rb

# encoding: UTF-8

require 'spec_helper'

describe "Static pages" do

describe "Home page" do

it "should have the h1 '新微博'" do visit '/static_pages/home' page.should have_selector('h1', :text => '新微博') end

it "should have the title 'Home'" do visit '/static_pages/home' page.should have_selector('title', :text => "Home | X Weibo") end end

describe "Help page" do

it "should have the h1 '帮助'" do visit '/static_pages/help' page.should have_selector('h1', :text => '帮助') end

it "should have the title 'Help'" do visit '/static_pages/help' page.should have_selector('title', :text => "Help | X Weibo") end end

describe "About page" do

it "should have the h1 '关于新微博'" do visit '/static_pages/about' page.should have_selector('h1', :text => '关于新微博') end

it "should have the title 'About'" do visit '/static_pages/about' page.should have_selector('title', :text => "About | X Weibo") end end

end

注意我把每个页面比较暧昧不明的 have_content 换成 have_selector 。

好了，让我们运行测试看看：

bin/rspec spec/requests/static_pages_spec.rb

会看到三个测试 Fail 了，有著相似的错误信息：

Failure/Error: page.should have_selector('title', expected css "title" with text "Home | X Weibo" to return something

阿哈，我们要对红通通失败的测试感到开心，因为我们知道错在那，可以改，不像谈恋爱那般。。。

在这之前，让我们回想一下之前，我们创建项目时输入的命令么：

rails new x_weibo --skip-test-unit --skip-bundle

这个命令也替我们产生了一个 app/views/layouts/application.html.erb layout 文件：

app/views/static_pages/application.html.erb

<!DOCTYPE html>

XWeibo <%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %>

<%= yield %>

这个文件就是咱 Rails 应用的骨架了，注意到中间的 <%= yield %>，我们的 Home, Help, About 页面会在调用 yield 时产生出来，这是 Rails 能够摆脱 那些年我们一起在网页里塞 PHP 代码 的精妙之处。

让我们先暂时把这个文件更名一下，先让它不起作用

mv app/views/layouts/application.html.erb foo

Windows 的命令貌似是 rename，不那么 Geek 手动更名也成。

好了，现在你启动服务器 (rails s)，打开每个页面看看：

http://localhost:3000/static_pages/home http://localhost:3000/static_pages/help http://localhost:3000/static_pages/about

可以看到本来一样的标题都不见了，检视原始码发现甚至 HTML, DOCTYPE 那些标签都没了，相信你已经知道是怎么回事儿了，呵呵。

现在让我们分别实现每个页面的标题，首先是 Home 页面，打开 app/views/static_pages/home.html.erb ，让我们加上需要的 HTML，让它成为一个完整的网页，并把标题改为我们要的样子：

app/views/static_pages/home.html.erb

<!DOCTYPE html>

Home | X Weibo

新微博

神秘的 X 项目新微博 Rails 示例教学

现在运行测试会发现失败的测试少了一个，让我们依样画葫芦改动 About 以及 Help 页面：

app/views/static_pages/help.html.erb

<!DOCTYPE html>

Help | X Weibo

帮助

更多相关 Ruby on Rails 帮助，请莅临 Ruby-china. 本示例教程教学文章： 1000 小时学会 Rails 系列.

app/views/static_pages/about.html.erb

<!DOCTYPE html>

About | X Weibo

关于新微博

新微博是使用 Ruby on Rails 技术所开发的微博，网络新纪元，微博新时代，你今天微勃了吗？

这时你再运行测试，会发现是绿油油的通过：

但是，这样子我们不是大大的重复了代码么？没错，现在让我们看看如何 DRY...(Don't Repeat Yourself)

有一个 Rails 提供的函数叫做 provide，怎么用呢：

app/views/static_pages/home.html.erb

<% provide(:title, 'Home') %> <!DOCTYPE html>

<%= yield(:title) %> | X Weibo

新微博

神秘的 X 项目新微博 Rails 示例教学

上面我们使用了 Rails 给的 provide 方法来把 :title 与传入的字串做关联。

这样到这行的时候：

<%= yield(:title) %> | X Weibo

就会替换成

Home | X Weibo

<%= ... %> 会将结果显示至页面、<% %> 不会。

运行测试看看对不对：

bin/rspec spec/requests/static_pages_spec.rb

绿色！正是我们想要的结果，让我们再次依样画葫芦改动 About, Help 页面：

app/views/static_pages/about.html.erb

<% provide(:title, 'About') %> <!DOCTYPE html>

<%= yield(:title) %> | X Weibo

关于新微博

新微博是使用 Ruby on Rails 技术所开发的微博，网络新纪元，微博新时代，你今天微勃了吗？

app/views/static_pages/help.html.erb

<% provide(:title, 'Help') %> <!DOCTYPE html>

<%= yield(:title) %> | X Weibo

帮助

更多相关 Ruby on Rails 帮助，请莅临 Ruby-china. 本示例教程教学文章： 1000 小时学会 Rails 系列.

运行测试看看是否有打错字：

bin/rspec spec/requests/static_pages.spec.rb

......

Finished in 0.50721 seconds 6 examples, 0 failures

OK! 没有打错字或是奇怪的错误。

但是我们还是大大的重复了代码，每一页我们都重复了一堆相同的 HTML 代码，这就是为什么我们有一个 application.html.erb，现在我们先把刚刚更名的名字换回来 application.html.erb，：

mv foo app/views/layouts/application.html.erb

并依照刚刚的逻辑把 application.html.erb 改为：

<!DOCTYPE html>

<%= yield(:title) %> | X Weibo <%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %>

<%= yield %>

我们一样在 title 标签 yield 不同的标题出来。

接下来把之前重复的部份拿掉，拿掉后的 Home, Help, About 页面：

app/views/static_pages/home.html.erb

<% provide(:title, 'Home') %>

新微博

神秘的 X 项目新微博 Rails 示例教学

app/views/static_pages/help.html.erb

<% provide(:title, 'Help') %>

帮助

更多相关 Ruby on Rails 帮助，请莅临 Ruby-china. 本示例教程教学文章： 1000 小时学会 Rails 系列.

app/views/static_pages/about.html.erb

<% provide(:title, 'About') %>

关于新微博

新微博是使用 Ruby on Rails 技术所开发的微博，网络新纪元，微博新时代，你今天微勃了吗？

运行测试依旧是青山绿水一片：

......

Finished in 0.52661 seconds 6 examples, 0 failures

好了，这样子我们的静态页面就做好了，有三个页面：Home, Help, About、并有不同的标题。。。

先存个档，存档之前记得先运行所有的测试确保无误：

git add . git commit -m "Finish static pages" git checkout master git merge static_pages

喔耶！我们首先 commit, 切回主分支 (master)，并把劳动成果都合并过来。

接下来 push 到 Github 上：

git push

这个示例项目可以在 Github 上找到：神秘的 X 项目 Github

演示页面：神秘的 X 项目 Heroku （拜托不要给太多人知道，流量暴了会收钱的）

存档完毕。

不过现在还是弱暴了，但是慢慢来，不著急，还有 920 个小时。。。

让我们继续看看如何实现........

等等，五十一区的暴乳摔角格斗开始了，我要去观赛啦，今天就到这儿啦。。。

待续。。。

习题：

1. 依照刚刚的思路写一个 contact 页面，先写个测试、创建 contact.html.erb、根据测试的报错慢慢调试、并加入适当的 title： Contact | X Weibo 。

2. 我们的 static_pages_spec.rb 有著重复的基本标题用例：| X Weibo，试著去查询 RSpec 的 let 方法，看要怎么样 DRY。

3. （选择性）参考 004 文章，将你的应用布署至 Heroku，你可能得用 PostgreSQL 才行，并在回应晒出你的 URL。

习题解答下回给出。