level3-zh.srt

1
00:00:00,350 --> 00:00:01,900
我是 Gregg Pollack，您正在收看的是

2
00:00:01,900 --> 00:00:03,980
“僵尸学 Rails”第三课

3
00:00:04,800 --> 00:00:07,670
（唱）丢掉手上的脑子和肠子

4
00:00:07,670 --> 00:00:10,800
要停止兽性，学习一点 Rails 知识了

5
00:00:10,800 --> 00:00:13,780
因为我们要与时俱进

6
00:00:13,780 --> 00:00:17,500
这是 Envy Labs 出品的“僵尸学 Rails”教学视频

7
00:00:18,830 --> 00:00:21,010
本课我们要学习“视图”

8
00:00:21,010 --> 00:00:24,620
视图总是很好看的，特别是吃脑子时

9
00:00:26,200 --> 00:00:28,400
当请求到达 Rails 程序时

10
00:00:28,400 --> 00:00:31,900
要经过4个部件的处理

11
00:00:32,080 --> 00:00:35,960
我们已经介绍过最底层的组件“模型”了

12
00:00:35,960 --> 00:00:39,300
现在我们要介绍的是“视图”，位置如图所示

13
00:00:41,280 --> 00:00:45,300
先来看看我们要开发的程序的目录结构

14
00:00:45,480 --> 00:00:47,060
大概的结构是这样的

15
00:00:47,060 --> 00:00:48,920
可以看到，有一个 app 目录

16
00:00:48,920 --> 00:00:50,620
其中包含了 views 子目录

17
00:00:50,940 --> 00:00:54,200
views 中有 zombies 目录和 tweets 目录

18
00:00:54,380 --> 00:00:58,100
在 tweets 目录中有一个 index.html.erb 文件

19
00:00:58,100 --> 00:01:00,300
还有一个 show.html.erb 文件

20
00:01:00,300 --> 00:01:04,190
前者显示所有的微博，后者显示单篇微博

21
00:01:05,290 --> 00:01:08,830
这两个文件的扩展名是 .html.erb

22
00:01:08,830 --> 00:01:12,400
我知道你会认为 erb 的意思是“食用腐尸”

23
00:01:12,720 --> 00:01:13,870
其实，完全不是这个意思

24
00:01:13,870 --> 00:01:16,640
erb 的意思是“嵌入式 Ruby”

25
00:01:16,640 --> 00:01:20,200
简单来说，就是在 HTML 中插入 Ruby 代码

26
00:01:22,430 --> 00:01:25,420
现在来看一下显示微博的动作

27
00:01:25,970 --> 00:01:27,820
上面是在浏览器中显示的样子

28
00:01:28,180 --> 00:01:30,360
页面中显示了微博的状态文本

29
00:01:30,360 --> 00:01:33,100
还显示了发布微博的僵尸名

30
00:01:34,110 --> 00:01:40,750
在 Rails 程序的 erb 文件中可以使用两个新 HTML 标签

31
00:01:40,750 --> 00:01:44,250
第一标签个是 <% %>

32
00:01:44,250 --> 00:01:49,110
这个标签中包含的内容会被当做 Ruby 代码执行

33
00:01:49,110 --> 00:01:52,530
第二个标签是 <%= %>

34
00:01:52,530 --> 00:01:54,180
这个标签也会执行所包含的代码

35
00:01:54,180 --> 00:01:57,810
不管得到什么返回值，都会输出到页面中

36
00:01:59,160 --> 00:02:03,260
打开 show.html.erb 文件，内容可能是这样的

37
00:02:03,260 --> 00:02:07,580
会看到为页面头部编写的基本 HTML

38
00:02:07,580 --> 00:02:10,960
然后是 tweet = Tweet.find(1)

39
00:02:10,960 --> 00:02:11,780
我们已经很熟悉这行代码了

40
00:02:11,780 --> 00:02:14,560
执行这行代码会读取对应的微博对象

41
00:02:15,180 --> 00:02:18,230
接着是一个标头，内容为微博的状态文本

42
00:02:18,230 --> 00:02:21,310
再接着，我们说这篇微博是由 tweet.zombie.name 发布的

43
00:02:22,410 --> 00:02:24,040
小心，突然浮现了一个僵尸

44
00:02:24,040 --> 00:02:26,070
警告我们代码写的太烂了

45
00:02:26,070 --> 00:02:27,260
也确实有点烂

46
00:02:27,260 --> 00:02:28,790
“烂”表现在两方面

47
00:02:28,790 --> 00:02:31,920
其一，如果看一下这段代码

48
00:02:31,920 --> 00:02:35,500
一眼就能看到页面头部和尾部的代码

49
00:02:35,500 --> 00:02:38,370
很显然，随着开发的深入，我们要把这两部分代码

50
00:02:38,370 --> 00:02:41,900
复制到所有页面中，这样做可不明智

51
00:02:41,900 --> 00:02:43,100
那么，首先我们要做的是

52
00:02:43,100 --> 00:02:45,130
把页面头部和尾部的代码摘出来

53
00:02:45,130 --> 00:02:52,900
写入 layouts 目录下的 application.html.erb 中

54
00:02:53,230 --> 00:02:57,830
现在显示内容的代码有了，布局也有了

55
00:02:57,830 --> 00:03:01,240
我们还要在布局中加入一点代码，就是 yield

56
00:03:01,790 --> 00:03:06,520
在 Rails 中，针对现在的情况，当我们看到 yield 时

57
00:03:06,520 --> 00:03:10,820
意思是把显示微博的视图代码插进来

58
00:03:12,590 --> 00:03:16,800
再看一下目录结构，会发现多了一个 layouts 目录

59
00:03:16,800 --> 00:03:22,500
其中有一个 application.html.erb 文件，是网站的布局

60
00:03:24,040 --> 00:03:28,080
在 Rails 默认提供的布局中，还有很多知识要说

61
00:03:28,080 --> 00:03:30,200
有一个引入样式表的标签

62
00:03:30,200 --> 00:03:32,080
一个引入 JavaScript 脚本的标签

63
00:03:32,080 --> 00:03:34,100
还有一个防跨站请求伪造的元标签

64
00:03:34,290 --> 00:03:37,100
下面来一一说明，让你理解这几个标签的作用

65
00:03:37,200 --> 00:03:39,500
先说 stylesheet_link_tag

66
00:03:39,680 --> 00:03:43,400
简单来说，这行代码会引入全部样式表

67
00:03:43,400 --> 00:03:50,300
引入 public/stylesheets 目录中所有的样式表

68
00:03:50,300 --> 00:03:52,530
生成如下所示的 HTML

69
00:03:55,610 --> 00:03:58,090
接下来介绍 javascript_include_tag

70
00:03:58,090 --> 00:04:01,370
这行代码会引入默认提供的所有脚本

71
00:04:01,370 --> 00:04:02,820
那么脚本存在哪儿了呢？

72
00:04:02,820 --> 00:04:06,010
引入的文件都在 public/javascripts 目录中

73
00:04:06,010 --> 00:04:10,650
默认情况下会引入其中所有的脚本

74
00:04:10,650 --> 00:04:14,800
你可能看出来了，这些脚本是 Prototype 框架

75
00:04:14,990 --> 00:04:18,690
不用担心，如果你喜欢 jQuery 或 MooTools

76
00:04:18,690 --> 00:04:23,800
可以很简便的把默认提供的库换成自己擅长的

77
00:04:25,130 --> 00:04:29,090
最后是跨站请求伪造元标签

78
00:04:29,090 --> 00:04:34,200
这个标签可以防止僵尸黑客向网站提交垃圾内容

79
00:04:34,200 --> 00:04:37,370
如果查看页面的源码会发现

80
00:04:37,370 --> 00:04:43,440
页面的头部有 csrf-param 和 csrf-token 两个标签

81
00:04:43,440 --> 00:04:47,950
而且程序中的每个表单都会自动加入这两个标签

82
00:04:47,950 --> 00:04:50,290
以防被黑客攻击

83
00:04:51,620 --> 00:04:55,150
接下来我们要介绍根路径和图片

84
00:04:55,150 --> 00:04:57,530
如果访客浏览你的 Rails 程序

85
00:04:57,530 --> 00:05:01,030
在根路径后面输入了一些内容

86
00:05:01,030 --> 00:05:05,880
首先会查看 public 目录下是否有请求的文件

87
00:05:05,880 --> 00:05:09,870
如果没有，再交由 Rails 处理

88
00:05:09,870 --> 00:05:13,640
对图片的请求是个很好地例子

89
00:05:13,640 --> 00:05:16,600
如果图片存在，就会直接渲染

90
00:05:18,180 --> 00:05:20,900
下面我们要学习如何在 Rails 视图中创建链接

91
00:05:20,900 --> 00:05:24,920
这是视图的一部分，显示僵尸的名字

92
00:05:24,920 --> 00:05:29,100
如果想链接到僵尸的个人页面

93
00:05:29,190 --> 00:05:31,530
获取更多信息 该怎么办呢

94
00:05:32,120 --> 00:05:37,000
为此，我们可以使用 <%= 标签

95
00:05:37,000 --> 00:05:42,100
编写代码 link_to tweet.zombie.name

96
00:05:42,670 --> 00:05:46,560
路径为 zombie_path(tweet.zombie)

97
00:05:46,560 --> 00:05:50,880
这样链接文本和链接地址都有了

98
00:05:50,900 --> 00:05:54,360
渲染得到的是很常见的 HTML

99
00:05:54,360 --> 00:05:56,820
还有一种更简单的编写方法

100
00:05:56,820 --> 00:06:01,900
我们可以先写出链接文本，路径直接通过对象给出

101
00:06:01,900 --> 00:06:04,100
在这里就是一个僵尸对象

102
00:06:04,120 --> 00:06:10,070
Rails 会自动查找模型并找到显示该僵尸页面的地址

103
00:06:10,550 --> 00:06:13,360
link_to 帮助方法有很多选项

104
00:06:13,360 --> 00:06:17,600
你可能会问，我怎么知道有哪些选项呢

105
00:06:18,160 --> 00:06:20,540
有那么几种方法

106
00:06:20,740 --> 00:06:23,850
第一种，查看源码

107
00:06:24,070 --> 00:06:27,720
你可以执行 git clone 命令，克隆 Rails 源码

108
00:06:27,720 --> 00:06:31,920
进入 Rails 项目目录，打开常用的文本编辑器

109
00:06:31,920 --> 00:06:38,060
搜索 def link_to 定位方法定义，再详读代码

110
00:06:38,480 --> 00:06:42,730
第二种方法，浏览 api.rubyonrails.org

111
00:06:42,730 --> 00:06:45,050
这个网站是 Rails 的 API 文档

112
00:06:45,050 --> 00:06:48,000
显然，在浏览器中可以全文搜索

113
00:06:48,680 --> 00:06:53,710
第三种方法，浏览 apidock.com/rails

114
00:06:54,110 --> 00:06:55,500
这个网站的文档可以搜索

115
00:06:55,500 --> 00:06:58,780
但只能在线浏览，还有用户的注解

116
00:07:00,180 --> 00:07:04,100
第四种方法，浏览“Rails 可搜索 API 文档”

117
00:07:04,100 --> 00:07:06,100
地址为 railsapi.com

118
00:07:06,100 --> 00:07:09,430
你可以下载这些文档，或者直接在线使用

119
00:07:09,430 --> 00:07:11,960
这个网站的 Ajax 搜索体验不错

120
00:07:11,960 --> 00:07:15,500
浏览和阅读代码也很方便

121
00:07:15,500 --> 00:07:17,900
这里显示的是我们要查看的 link_to 文档

122
00:07:17,900 --> 00:07:19,740
link_to 的选项之一是

123
00:07:19,740 --> 00:07:23,900
用户点击链接后弹出确认对话框

124
00:07:23,900 --> 00:07:27,750
如果在链接中加入 :confirm => "Are you sure?"

125
00:07:27,750 --> 00:07:32,800
用户点击链接后就会弹出 JS 警告：Are you sure?

126
00:07:33,950 --> 00:07:37,500
以上介绍了显示单篇微博的 show 动作

127
00:07:37,500 --> 00:07:41,660
那么列出所有微博的 index 动作是什么样子的呢

128
00:07:42,120 --> 00:07:44,520
在浏览器中大概是这个样子

129
00:07:44,520 --> 00:07:46,540
我们会按照这种方式列出所有微博

130
00:07:46,540 --> 00:07:48,700
编写的代码是这些

131
00:07:48,700 --> 00:07:51,170
标头是“Listing tweets”

132
00:07:51,170 --> 00:07:52,470
使用一个表格

133
00:07:52,470 --> 00:07:57,040
然后调用 Tweet.all.each 遍历所有的微博

134
00:07:57,040 --> 00:07:59,500
下面是一个基本的代码块

135
00:07:59,500 --> 00:08:02,950
在块中，我们要显示微博的状态文本

136
00:08:02,950 --> 00:08:06,620
每篇微博所属的僵尸名字

137
00:08:08,680 --> 00:08:11,350
下面来分析一下这段代码

138
00:08:11,400 --> 00:08:15,300
调用首字母大写的 Tweet 得到的是一个类

139
00:08:15,300 --> 00:08:17,450
然后调用该类的 all 方法

140
00:08:17,450 --> 00:08:19,920
all 方法返回的是由所有微博组成的数组

141
00:08:19,920 --> 00:08:22,400
遍历微博时

142
00:08:22,400 --> 00:08:26,340
单篇微博存储在小写字母的变量 tweet 中

143
00:08:27,290 --> 00:08:29,450
如果我们想加入链接该怎么做呢

144
00:08:29,450 --> 00:08:34,210
我们要加入指向显示微博和显示僵尸的链接

145
00:08:34,730 --> 00:08:39,750
我们可以使用 link_to，地址为 tweet 对象

146
00:08:39,750 --> 00:08:44,300
然后再调用 link_to，地址为 zombie 对象

147
00:08:46,160 --> 00:08:48,300
让我们再加入一个功能

148
00:08:48,500 --> 00:08:51,900
现在，如果没有发布微博，列表中什么也不显示

149
00:08:51,900 --> 00:08:55,400
但我们想显示“No tweets found”

150
00:08:55,860 --> 00:08:57,370
下面就是实现此功能的代码

151
00:08:58,020 --> 00:09:01,500
首先，我们把 Tweet.all 移出

152
00:09:01,500 --> 00:09:04,570
赋值给变量 tweets

153
00:09:05,100 --> 00:09:09,710
然后在遍历微博的 .each 之前写上 tweets

154
00:09:10,370 --> 00:09:17,320
在底部写入....

155
00:09:18,420 --> 00:09:23,530
调用 empty? 方法可以简化这段代码

156
00:09:24,050 --> 00:09:26,960
如果返回值为真 就会显示“No tweets found”

157
00:09:27,000 --> 00:09:28,360
如你所见，确实显示了

158
00:09:29,680 --> 00:09:32,470
如果为了快速编辑和快速删除

159
00:09:32,470 --> 00:09:36,990
想加上编辑和删除链接该怎么做呢

160
00:09:36,990 --> 00:09:38,470
代码应该怎么写呢

161
00:09:39,310 --> 00:09:42,880
我们可以写 link_to "Edit"

162
00:09:42,880 --> 00:09:46,150
地址写成 edit_tweet_path(tweet)

163
00:09:46,950 --> 00:09:50,220
加入删除链接，可以写 link_to "Delete"

164
00:09:50,220 --> 00:09:54,890
指定要删除的微博，并设定请求方法为 delete

165
00:09:55,950 --> 00:10:00,100
下面总结一下在 Rails 的 link_to 中可能用到的地址

166
00:10:00,100 --> 00:10:02,860
这些地址在课后练习中也可能会用到

167
00:10:03,330 --> 00:10:06,830
要列出所有微博，使用 tweets_path

168
00:10:06,830 --> 00:10:09,870
生成的地址为 /tweets

169
00:10:09,870 --> 00:10:13,410
链接到新建微博的表单，使用 new_tweet_path

170
00:10:13,410 --> 00:10:14,780
生成这个地址

171
00:10:15,650 --> 00:10:19,310
在接下来的地址中，要指定具体是哪篇微博

172
00:10:19,310 --> 00:10:21,920
我们使用这个方法读取 ID 为 1 的微博

173
00:10:22,600 --> 00:10:26,610
显示这篇微博，直接传入这个微博对象

174
00:10:26,610 --> 00:10:28,300
生成这个地址

175
00:10:28,800 --> 00:10:32,670
编辑这篇微博，使用 edit_tweet_path(tweet)

176
00:10:32,670 --> 00:10:34,400
生成这个地址

177
00:10:34,490 --> 00:10:37,830
要删除这篇微博，直接指定这个微博对象

178
00:10:37,830 --> 00:10:40,000
并把请求方法设为 delete

179
00:10:40,600 --> 00:10:43,800
生成的链接是 /tweets/1

180
00:10:44,600 --> 00:10:46,600
接下来要做课后练习了

181
00:10:46,600 --> 00:10:49,180
一定要亲自动手编写代码哟

182
00:10:49,180 --> 00:10:52,900
翻译制作：@andor_chen on Twitter