以前以为网上说的30天从入门到精通是吹牛
现在觉得还是有一点可行性的
Day 5
目前进度是第五章
不出意外的话
可以14天从入门到入门
真好
话不多说
第五章看起来有点长
好像提到了html5
rails partials
css
Bootstrap
sass
routes
还有test
先喝一口果汁壮壮胆
在这双十一的日子
我们正式开始第五章的学习
这里说前面做出来的页面只有内容
没有样式
所以我们要来介绍一个样式框架
以及自己添加一些东西进去
同时还要添加用户注册页面
和最后的重要的集成测试
来确保我们app的链接都是正确的
首先
我们大概要把之前的页面重新设计成这样
对比一下
我们现在大概是这样。。。
任重道远啊
as usual
git checkout -b filling-in-layout
老规矩
开始新的工作前
为了避免之前的成果功亏一篑
先建个分支
然后
app/views/layouts/application.html.erb
直接把教程里的代码复制过去先
再慢慢解读每一个变更的
起因经过结果
写一篇600字的分析报告
。。。
有点飘远了
感觉把方向盘转回来
分析报告如下:
增加IE支持
增加了带三个class的header
为什么是三个
为什么选像navbar这样的名字
究竟是道德的沦丧
还是。。。
看来今天不在学习的状态
没办法
各大群都在直播双十一
就我认真在学习Bootstrap
对
Bootstrap是上面两个为什么的答案
接着link_to是用来添加超链接的
yield是用来插入layout的
这就算是改好了一个页面
接着继续改
app/views/static_pages/home.html.erb
依然是先复制再细看
复制完之后
我随手rails s了一下
结果出错了
因为太急了没下载logo图片
curl -o app/assets/images/rails.png -OL railstutorial.org/rails.png
看来还是要按部就班
对比一下教程里的截图
和自己的成果
一模一样
identical
然后这一小节就结束了
在练习模块里
猫咪乱入
It’s well-known that no web page is complete without a cat image.
说得好
无猫不成站
撸完猫
依依不舍的继续下一小节的学习
现在是凌晨一点多
这首歌已经单曲循环了几十次
我在研究bundle安装bootstrap
修改Gemfile
Bundle install
新建css文件
touch app/assets/stylesheets/custom.scss
@import调用bootstrap
这就是更新后的效果图
手动更新app/assets/stylesheets/custom.scss
再更新
再三更新
瞬间好看多了
略有所得
继续看Partials
这感觉就是把重复的代码块单独拿出来
作为一个partial来调用
有点意思
这很php
果然rails兼顾了很多语言的优点
利用partial的原理
我们把header
footer和shim单独做好
代码简洁多了
界面也好看多了
越来越像一个网站了
再看一下进度条
第五章已经看完一半了
到目前为止
不虚
继续asset pipeline
one of the most useful features of Rails
看概念有点抽象
再怎么抽象也得具象化一下
好吧
大概看懂了
基本就是用来优化(简化)css,script的
先看css
scss,兼容css,用sass写
同时更强大
因为scss支持nesting和variable
看这个light gay的例子
应该能理解
好
还剩三分之一了
趁热打铁
陈胜追击
吴广。。。抓兔子
关于页面的布局
基本讲的差不多了
现在还有一个小问题
就是页面里的超链接
好像都不能点啊
给他们赋值就好
添加完毕
rails s运行
一个一个点开
都没问题
现在网站小
还能人工一个个点
以后要是大了怎么办
不要紧
有专门的test来。。。
咦
怎么有种打脸的感觉
之前还说test浪费时间来着
rails generate integration_test site_layout
新建一个针对site_layout的集成test
修改test/integration/site_layout_test.rb
有点像css选择器啊
test了一下没有问题
迷迷糊糊继续往下看
练习题也是值得做一下的
不知不觉间
最后一小节了
前面基本就是优化了页面显示
添加了超链接
设置了test来验证这些链接
最后我们要开始接触用户注册功能了
rails generate controller Users new
然后一顿操作猛如虎
rails s
可以了
然而天都快亮了
但是还是得做好收尾工作
$ git add -A
$ git commit -m “Finish layout and routes”
$ git checkout master
$ git merge filling-in-layout
$ git push origin master
存档打卡
生命在于运动
技术改变生活
天大地大
睡觉最大