-
Notifications
You must be signed in to change notification settings - Fork 0
/
level3-zh.srt
728 lines (546 loc) · 13.9 KB
/
level3-zh.srt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
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