Ruby on Rails 学习手记（七）

总算集齐七个龙珠了~

可以召唤一只皮卡丘了

学习是有七天之痒的

大多数人坚持到现在或许就放弃了

幸好我不一样

到目前为止

我们已经搭建好了整个网站的框架

和用户注册相关的数据库

那么下一步就是设计用户注册页面了

老规矩

首先翻到本章末尾

大体了解一下今天的学习框架

我们可能会学到以下几点知识（认真的话）

初识Debug帝八哥

CSS重（虫）用

Rails的三大环境dev/stg/prod

REST URLs

Gravatars

表单小帮手form_for

注册页面错误信息展示

flash功能介绍

注册成功跳转

注册信息提交测试

SSL和Puma了解一下

一如既往的亚历山大

很正常

这是面对未知的恐惧

当你凝视深渊的时候

要做好被吞噬的准备

虽然这是一个针对初学者的教程

但是小小麻雀五脏俱全

很多其他读者评价说

这一章得看两遍

不妨拭目以待

第七章

第一节

轮刮眼眶

咦

好像走错片场了

ok

我们首先要建立一个页面

用来展示用户的个人信息

包括用户头像

基本信息

用户微博列表。。。

原教程里趁机乱入了一个lorem ipsum的小故事

然后我们就正式开始了

git checkout -b sign-up

建立一个分支

以本图为目标

开始星辰大海的冒险

大海航行靠剁手

。。。

双十一后遗症

舵手，舵手，舵手

代码运行靠debug

这里我们适时的开始了三大环境的介绍

debug是dev环境的好助手

test是staging环境的好搭档

reboot是prod环境的好伴侣

简单粗暴

不知道大家看懂没

这里@include box_sizing;

直接调用了css开头的

@mixin box_sizing {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

根据教程

如果我们migrate production db

rails s -e production的话

应该可以看到以下画面

页面最下面应该有debug信息

然而

欢迎我们的是这样

这是当头一棒啊

咦，不对

这意思是如果在开发环境才显示debug

我们不需要现在运行生产环境

直接rails s就可以了

虚惊一场

不过也提出了一个疑问

为什么生产环境运行不起来

先存着

说不定以后自然就好了

收拾好行囊

继续上路

为了生成一个用户信息页面

我们必须在数据库里查询用户

那么问题来了

先有鸡还是先有蛋

没有用户注册

我们怎么显示用户信息

这时候我们想起来

第六章的时候

我们好像手动添加了一个用户

对

就是作者本人了

怎么展示他的信息呢

革命尚未成功，同志仍需努力

明明这里已经定义了show的model了啊

原来

mvc缺一不可

我们得新建一个show的view

再添加一个show的controller

这样

结果就能正常显示了

总算

这一章的学习算是上了正轨了

继续添加debug

然后刷新下users/1页面

结果页面不停转

就是没东西

别慌

帝八哥就是长这样的

切换到后台终端

byebug再见八阿哥出现了

类似于rails console

用来调试的

当你以后开发、修改碰到八阿哥的时候

就可以把debugger插入到可疑的地方

进一步了解当前状态

分析可能的故障原因

然后和八阿哥说再见

这算是和帝八哥打过招呼了

咱继续

除了用户名和密码外

我们最好还能添加用户头像

“globally recognized avatar”, or Gravatar

这名字

听起来耳熟啊

阿凡达嘛

不用问为什么

照做就是了

结果只有俩

成功

失败

失败了就得反思

然后google

很麻烦的

万幸

成功了

驾轻就熟

添加了sidebar

用户信息页面算是告一段落了

下面是用户注册页面设计

喝杯咖啡先

注册页面长这样

当然我们一路顺便翻译了一下

结果就是这样的

然后是动作分解

分解完毕还稍微提了一下附加题

现在不懂没关系

以后会慢慢懂的

和前一章用户信息的有效性判断一样

注册信息同样需要验证

不妨边调试边验证

不出所料

问题一堆

按照教程里的指示一步步修复好

按理说这里应该可以正常提交注册信息了

然而

定睛一看

这个错误信息有点眼熟啊

依稀记得第二章里有一模一样的故障信息

还是同样的配方

还是同样的解药

添加好protect_from_forgery后

一切正常了

但是这还不够

我们没有对数据有效性进行验证

照葫芦画瓢之后

人变成了猩猩

休息，休息一下

之后要面对的本章的大boss

作为Test Driven Develop的重要元素

Test贯穿开发的始终

然而

教材中没有的问题又出现了

在添加user sign up的test后

理应全部绿灯通过的测试

返回了4个错误

仔细一看

原来是翻译后的版本冲突了

test_should_get_home#StaticPagesControllerTest (4.91s)

Ruby on Rails Tutorial Sample App expected but was

不想长大系列教程RAILS篇

前面写的test期待的结果是英文的

结果我们改成中文了

看来

之前的我们还是太天真了

以为改了view就大功告成了

把这个static_pages_controller_test改好后

再test就没问题了

突然意识到

这是我们自己主动实施了一次TDD

学以致用的感觉真好

继续跟着教材学习

其实就是复制黏贴

最终运行的时候

出现了意料之外的error

哎

难道流年不利？

百思不得其解之际

直接rails s运行

好像

并没有什么影响。。。

运行得还挺顺畅。。。

这一定是神迹

我想想该去拜哪个神

等等。。。

突然发现因为这个test error

不能继续学习了

flash失效了

看来

还是得先解决这个test才行

继续万能的google

然后不出所料的

哈哈哈哈哈

我真傻。。。

更改完毕

结果

test是绿灯了

flash还是没出现。。。

卡住了。。。

怎么办

热锅上的蚂蚁

悬崖上的蜻蜓

海边的卡夫卡

咦

本章开头说啥来着

有个debugger

在redirect_to @user后插入一个

debugger

然后

(byebug) flash.each

#“Welcome to the Sample App!”}:each>

(byebug) flash[:success]

“Welcome to the Sample App!”

好像没什么问题

继续

def show

@user = User.find(params[:id])

debugger

end

(byebug) flash

#

好像

注册成功后跳转到用户信息页面时

flash的内容没有跟着传递过来

看来debugger也帮不了什么忙。。。

有史以来最严重的问题出现了

教程学到一半出问题了

还找不到人问

真尴尬

好吧

就当做是考验吧

用最笨的方法

一步步显示flash成功信息

看到底在哪一步丢了

分别在提交成功后

跳转成功后

重新加载用户信息页面前插入显示

结果

Cannot render console from 10.0.0.14!

Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255

好像这里出了什么岔子

flash信息丢了

要知道

默认flash是在cookie/session里只能活一集的龙套

不管出现啥问题

很可能就丢失了

有点开始慌了

不行，先深呼吸一口气

继续漫无目的的google了一番

发现这是某些Cloud IDE特有的现象。。。

某些

Cloud

特有

现象。。。

哎

白忙活了

为了验证这个是Cloud Studio的问题

打开本地terminal

新建一个sample_app文件夹

git init

git remote add origin git@gitlab.com:jackbu/sample_app.git

git pull origin master

把前七章的成果同步到本地

这个时候git版本控制的优势显露无疑

bundle install

rails db:migrate

rails s

手动注册一个用户

然后

当当当

一鸣惊人

再回头看debug信息

flash[:success]三次全部正常显示

经过这么一番折腾

这一章果然值得看两遍啊

最后的两道测试题相比前面的问题简直不值一提

这下我们学聪明了

assert_not flash.FILL_IN

这个Fill_in是要你自己填的

正确答案是nil?

验证flash非空

打完收工

commit一下push一下

commit的名字记录了我们今天遇到的问题

好了

今天就这样了

我们学习了注册页面的设计

并且成功解决了教材上没有的超纲题

成就感满满

后面会继续第八第九章的学习

注册之后是登录和登出

略期待啊

生命在于运动

技术改变生活

太阳比地球大

谷歌比百度好