接上篇:

一.Sass 和 Asset Pipeline

Rails 中最有用的功能之一是 Asset Pipeline, 它极大地简化了静态资源文件(CSS、JavaScript 和图像)的生成和管理。咱先概述 Asset Pipeline 的作用, 然后说明如何使用 Sass 这个强大的 CSS 编写工具。

1.Asset Pipeline

Rails 开发者要理解 Asset Pipeline 的三个概念: 静态资源目录, 清单文件, 以及预处理器引擎。

(1). 静态资源目录

注:现在我们知道 custom.scss 存放位置的用意了: 因为 custom.scss 只在应用中使用,所以把它放在app/assets/stylesheets 目录中。

(2). 清单文件

把静态资源文件放在适当的目录中之后, 要通过清单文件(manifest file)告诉 Rails 怎么把它们合并成一个文件(通过 Sprockets gem 实现, 而且只合并 CSS 和 JavaScript 文件, 不会合并图像)。

举个例子, 我们来看一下应用默认的样式清单文件,如下代码所示:

打开文件:app/assets/stylesheets/application.css(应用的CSS清单文件)

这里关键的代码是几行 CSS 注释, Sprockets 通过这些注释引入相应的文件:

其中
*= require_tree .
会把 app/assets/stylesheets 目录中的所有 CSS 文件(包含子目录中的文件)都引入应用的 CSS 文件。
下面这行:
*= require_self
会把 application.css 这个文件中的 CSS 也加载进来。

注:关于这个Rails 提供的默认清单文件可以满足我们的需求,所以不会对其做任何修改。Rails 指南中有一篇专门介绍 Asset Pipeline 的文章, 说得更详细, 请自行百度。

(3).预处理器引擎

准备好静态资源文件后, Rails 会使用一些预处理器引擎来处理它们, 并通过清单文件将其合并, 然后发送给浏览器。我们通过扩展名告诉 Rails 使用哪个预处理器。三个最常用的扩展名是:Sass 文件的 .scss , Coffee-Script 文件的 .coffee , ERb 文件的 .erb 。我们在前面介绍过 ERb, 下面会介绍 Sass。咱不会使用CoffeeScript, 这是一门很小巧的语言, 可以编译成浏览器中执行的 JavaScript。

(4).Asset Pipeline带来的好处之一:效率

Asset Pipeline 带来的好处之一是, 能自动优化静态资源文件, 在生产环境中使用效果极佳。CSS 和 JavaScript 的传统组织方式是, 把不同功能的代码放在不同的文件中, 而且排版良好(有很多缩进)。这么做对编程人员很友好, 但在生产环境中使用却效率低下——加载大量的文件会明显增加页面的加载时间, 这是影响用户体验的最主要因素之一。使用 Asset Pipeline, 生产环境中应用的所有样式都集中到一个 CSS 文件中( appli-cation.css ), 所有 JavaScript 代码都集中到一个 JavaScript 文件中( application.js ),而且还会简化(minify)这些文件, 删除不必要的空格, 减小文件大小。这样我们就最好地平衡了两方面的需求——开发方便,线上高效。

2.句法强大的样式表 Sass

Sass 是一种编写 CSS 的语言,从多方面增强了 CSS 的功能。本节我们要介绍两个最主要的功能: 嵌套和变量。(还有一个功能是“混入”, 以后用到再说再介绍。)

前面简单说过, Sass 支持一种名为 SCSS 的格式(扩展名为 .scss ), 这是 CSS 的一个严格超集。SCSS只为 CSS 添加了一些功能, 而没有定义全新的句法。也就是说,所有有效的 CSS 文件都是有效的 SCSS 文件, 这对已经定义了样式的项目来说是件好事。在我们的应用中, 因为要使用 Bootstrap, 所以从一开始就使用了 SCSS。Rails 的 Asset Pipeline 会自动使用 Sass 预处理器处理扩展名为 .scss 的文件, 所以 custom.scss文件会首先经由 Sass 预处理器处理, 然后引入应用的样式表中,再发送给浏览器。

(1). 嵌套

样式表中经常会定义嵌套元素的样式,例如, 在如下代码中, 我们定义了 .center 和 .center h1 两个样式:

使用 Sass 可将其改写成

注:内层的 h1 会自动放入 .center 上下文中。

嵌套还有一种形式,句法稍有不同。在下图代码中, 有如下的代码:

其中徽标的 ID #logo 出现了两次, 一次单独出现, 另一次和 hover 伪类一起出现(鼠标悬停其上时的样式)。如果要嵌套第二组规则, 我们要引用父级元素 #logo 。在 SCSS 中,这使用 & 符号实现:

注:把 SCSS 转换成 CSS 时,Sass 会把 &:hover 编译成 #logo:hover 。

这两种嵌套方式都可以用在如下代码中的页脚样式上, 将其改写成:

注:改完后应该验证一下 CSS 是否还能正常使用

(2).变量

Sass 允许自定义变量来避免重复, 这样也可以写出更具表现力的代码。例如,如下代码中重复使用了同一个颜色代码:

注:上面代码中的 #777 是淡灰色, 我们可以把它定义成一个变量:

然后可以这样来写 CSS:

因为像 $light-gray 这样的变量名比 #777 意思更明确, 所以把不重复使用的值定义成变量往往也是很有用的。

@import "bootstrap-sprockets";
@import "bootstrap"; $gray-light: #777;
$gray-medium-light: #eaeaea;
$gray-darker: #555; /*universal*/ body{
padding-top: 60px;
} section{
overflow: auto;
} textarea{
resize: vertical;
} .center{
text-align: center;
h1{
margin-bottom: 10px;
}
} /*typography*/ h1, h2, h3, h4, h5, h6{
line-height:;
} h1{
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
} h2{
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: $gray-light;
} p{
font-size: 1.1em;
line-height: 1.7em;
} /*header*/ #logo{
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
&:hover{
color: #fff;
text-decoration: none;
}
} ///*image*/
//
//img{
// display: none;
//} /*footer*/ footer{
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid $gray-medium-light;
color: $gray-light;
a{
color: $gray-darker;
&:hover{
color: $gray-darker;
}
}
} footer small{
float: left;
} footer ul{
float: right;
list-style: none;
margin-top: -1px;
li{
float: left;
margin-left: 15px;
}
}

使用嵌套和变量改写后的 SCSS 文件

注:Sass 提供了很多简化样式表的功能, 上面的代码中只用到了最主要的功能, 这是个好的开始。想要了解的更多, 请自行百度。

二.布局中的链接

我们已经为网站的布局定义了看起来不错的样式, 下面要把链接中使用的占位符 # 换成真正的链接地址。当然, 我们可以像下面这样直接写链接:

<a href="/static_pages/about">About</a>

不过这样不太符合 Rails 之道。一者, “关于”页面的地址如果是 /about 而不是 /static_pages/about 就好了; 再者, Rails 习惯使用具名路由指定链接地址, 如下面的代码所示:

<%= link_to "About", about_path %>

注:使用这种方式, 代码的意图更明确,而且也更灵活。如果修改了 about_path 对应的 URL, 其他使用about_path 的地方都会自动使用新的 URL。

1.计划添加的链接如下表所示, 表中还列出了 URL 和路由的对应关系。

注:下面我们会定义好除最后一个之外的所有路由

2.Rails 路由

为了添加演示应用中静态页面的具名路由, 我们要修改 Rails 用来定义 URL 映射的路由文件, 即 config/routes.rb 。我们先分析一下特殊的首页路, 然后再定义其他静态页面的路由。

目前,我们见到了三种定义根路由的方式,
首先是:
root 'application#hello'
然后是:
root 'users#index'
最后是:
root 'static_pages#home'

不管哪一种方式, 我们都把根路径指向一个控制器和动作。像这样定义根路由有个重要的好处——创建了具名路由, 可以使用名称而不是原始的 URL 指代路由。对根路由来说, 创建的具名路由是 root_path 和 root_url 。二者之间唯一的区别是,后者是完整的 URL:

root_path -> '/'
root_url -> 'http://www.baidu.com/'

我们必须要遵守一个约定: 只有重定向使用 _url 形式, 其余都使用 _path 形式。(因为 HTTP 标准严格要求重定向的 URL 必须完整。不过在大多数浏览器中, 两种形式都可以正常使用。)

Rails默认生成的路由稍微有些繁琐, 借此机会我们为“帮助”页面、“关于”页面和“联系”页面定义具名路由。

与根路由一样, 这个规则也会定义两个具名路由, 分别是 help_path 和 help_url :

help_path -> '/help'
help_url -> 'http://www.example.com/help'

之后就是测试了:

先测一波

注:定义具名路由的时候还把 'static_pages/home' 路由删掉了, 因此我们以后都得使用 root_path 或 root_url 。前面的测试中用的是旧路由, 所以无法通过。为了让测试通过, 我们要更新路由, 如下图所示。注意, 借此机会, 我们还把具名路由改成了 *_path 形式。

然后,再测就通过了

注:使用 as: 选项可以修改默认生成的具名路由名称

3.使用具名路由

有上图中的路由, 我们就可以在网站的布局中使用具名路由了。我们只需在 link_to 函数的第二个参数中指定合适的具名路由。例如,我们要把:

<%= link_to "About", '#' %>
改为:
<%= link_to "About", about_path %>

注:接下来把链接都修改一下

打开文件:app/views/layouts/_header.html.erb(修改页头局部视图中的链接)

注:login还得等会,还没到准备写的时间,反正早晚得写,别着急

还有一个包含链接的文件是页脚局部视图 _footer.html.erb ,那里有指向“关于”页面和“联系”页面的链接。

4.布局中链接的测试

我们在布局中加入了几个链接, 最好再编写一些测试, 确保链接正常。我们可以在浏览器中手动测试, 先访问首页, 然后点击其他链接, 不过这么做很快就会变得繁琐。所以我们要使用集成测试, 编写端到端测试完成这些操作。首先, 生成测试模板, 名为 site_layout :

注:Rails 生成器会自动在文件名后面添加 _test 。

针对布局中链接的测试,要检查网站的 HTML 结构,步骤如下:
1. 访问根路径(首页);
2. 确认使用正确的模板渲染;
3. 检查指向首页、“帮助”页面、“关于”页面和“联系”页面的地址是否正确。

把上述步骤转换成 Rails 集成测试,得到的代码如下代码所示。其中 assert_template 方法检查首页是否使用正确的视图渲染。

打开文件:test/integration/site_layout_test.rb(测试布局中的链接)

上图代码用到了 assert_select 方法的一些高级用法。这里,我们同时指定标签名 a 和属性 href ,检查有没有指定的链接,如下所示:
assert_select "a[href=?]", about_path
Rails 会自动把问号替换成 about_path (如果需要还会转义特殊字符),检查有没有下面这样的 HTML 标签:
<a href="/about">...</a>
注意检查首页链接的那个断言,它确保页面中有两个指向首页的链接(徽标一个,导航栏中一个):
assert_select "a[href=?]", root_path, count: 2
上述代码确认代码清单前面代码中定义的两个首页链接都存在。
assert_select 的更多用法参见下图。虽然 assert_select 的用法很灵活,功能很强大(还有很多表中没介绍的用法),但经验告诉我们, 最好只测试不经常变动的 HTML 元素(例如网站布局中的链接)。

然后,测试:

$ rails test:integration

注:然后再试试全局测试

按照下面代码中的做法, 把 Application 辅助模块引入测试辅助文件, 这样可以在测试中使用full_title 辅助方法, 简化代码。

然后, 使用下图中的代码测试标题是否正确。

注:不过这么做不可靠, 哪怕标题中不动的部分有笔误(例如写成“Ruby on Rails Tutoial”), 测试都无法捕获。

为了修正这个问题, 编写一个测试, 直接测试 full_title 辅助方法。为此, 我们要创建一个用于测试 Application 辅助模块的文件, 然后写入指定的代码, 再把 FILL_IN 换成正确的代码。

使用 assert_equal <expected>, <actual> 验证预期值与真实值一样,这两个值使用 == 运算符比较。

三. 用户注册:第一步

1.Users 控制器

我们在前面创建了第一个控制器 — StaticPages 控制器。现在要创建第二个, Users 控制器。和之前一样, 我们使用 generate 命令创建所需的控制器骨架, 并且指定用户注册页面所需的动作。遵照 Rails 使用的REST 架构约定, 我们把这个动作命名为 new 。把 new 作为参数传给 generate 命令就可以自动创建这个动作, 如下代码所示:

(1).生成 Users 控制器(包含 new 动作)

上述命令会创建我们需要的 Users 控制器,以及其中的 new 动作

打开文件:app/controllers/users_controller.rb(默认生成的 Users 控制器,包含 new 动作)

和一个占位视图

打开文件:app/views/users/new.html.erb(默认生成的 new 视图)

除此之外还会为新建用户页面生成一个简单的测试

打开文件:test/controllers/users_controller_test.rb(新建用户页面的测试)

(2). 现在去测试应该可以通过

$ bundle exec guard    # Guard自动测试

1. “注册”页面的 URL

(1).“注册”页面的路由(RED)

打开文件:config/routes.rb

(2).更新 Users 控制器测试,使用注册页面的新路由(GREEN)

打开文件:test/controllers/users_controller_test.rb

接下来, 我们使用具名路由让首页中的按钮指向正确的地址。与其他路由一样, 添加 get '/signup' 后会得到具名路由 signup_path 。我们在下图中使用这个具名路由。

(3).把按钮链接到“注册”页面

打开文件:app/views/static_pages/home.html.erb

(4).“注册”页面的(临时)视图

打开文件:app/views/users/new.html.erb

新创建的“注册”页面,如图所示:

四. 做个总结

• 使用 HTML5 可以定义一个包括徽标、页头、页脚和主体内容的网站布局;
• 为了用起来方便,可以使用 Rails 局部视图把部分结构放到单独的文件中;
• 在 CSS 中可以使用类和 ID 编写样式;
• Bootstrap 框架能快速实现设计精美的网站;
• 使用 Sass 和 Asset Pipeline 能去除 CSS 中的重复,还能打包静态资源文件,提高在生产环境中的使用效率;
• 在 Rails 中可以自己定义路由规则,得到具名路由;
• 集成测试能高效模拟浏览器中的点击操作。

Ruby Rails学习中:Sass 和 Asset Pipeline,布局中的链接(Rails路由,具名路由),用户注册: 第一步的更多相关文章

  1. duilib中的V和H布局中滚动条问题

    转自博客:http://blog.csdn.net/damingg/article/details/41149037 首先看一段xml代码 [html] view plaincopy <?xml ...

  2. ios中fixed元素在滚动布局中的延时渲染问题

    在之前做的一个demo中,有个视图是内滚动的,里边有个bar用了fixed,不是fixed在最外层视图的顶部和底部,在微信/safari/chrome/其他浏览器app上都没出现问题. 然后今天,我把 ...

  3. Rails的静态资源管理(二)—— 如何使用 Asset Pipeline

    官方文档:http://guides.ruby-china.org/asset_pipeline.html http://guides.rubyonrails.org/asset_pipeline.h ...

  4. 【转】在Android布局中使用include和merge标签

    内容转自:http://fengweipeng1208.blog.163.com/blog/static/21277318020138229754135/ 在我们开发android布局时,经常会有很多 ...

  5. Ruby Rails学习中:调试信息和 Rails 的三种环境,Users 资源,调试器,Gravatar 头像和侧边栏

    注册 一.调试信息和 Rails 环境 现在咱们要实现的用户资料页面是我们这个应用中第一个真正意义上的动态页面.虽然视图的代码不会动态改变, 不过每个用户资料页面显示的内容却是从数据库中读取的.添加动 ...

  6. Ruby Rails学习中:网站导航,Bootstrap和自定义的CSS,局部视图

    添加一些结构 一.网站导航 1.添加一些结构后的网站布局文件 打开文件:app/views/layouts/application.html.erb 简单介绍一下,添加的代码: 我们从上往下看一下这段 ...

  7. Ruby Rails学习中:注册表单,注册失败,注册成功

    接上篇 一. 注册表单 用户资料页面已经可以访问了, 但内容还不完整.下面我们要为网站创建一个注册表单. 1.使用 form_for 注册页面的核心是一个表单, 用于提交注册相关的信息(名字.电子邮件 ...

  8. Ruby Rails学习中:User 模型,验证用户数据

    用户建模 一. User 模型 实现用户注册功能的第一步是,创建一个数据结构,用于存取用户的信息. 在 Rails 中,数据模型的默认数据结构叫模型(model,MVC 中的 M).Rails 为解决 ...

  9. Ruby Rails学习中:Ruby内置的辅助方法,基础内容回顾补充

    一. Ruby内置的辅助方法 1.打开文件:app/views/layouts/application.html.erb(演示应用的网站布局) 来咱把注意力放在圈起来的那一行: 这行代码使用 Rail ...

随机推荐

  1. [bat]只更新svn部分文件夹

    游戏工程里的sdk文件夹,经常被svn认定为有毒文件. 后来关了权限之后,已拉取过的sdk文件夹还是会拉下来. 网上找了个方法,bat文件只更新部分文件. TortoiseProc /command: ...

  2. CodeForces 535C Tavas and Karafs —— 二分

    题意:给出一个无限长度的等差数列(递增),每次可以让从l开始的m个减少1,如果某个位置已经是0了,那么可以顺延到下一位减少1,这样的操作最多t次,问t次操作以后从l开始的最长0序列的最大右边界r是多少 ...

  3. linux下编译利用CMakeLists.txt 编译C++写的opencv程序

    https://hihozhou.com/blog/2017/05/11/linux-compile-opencv-c++-file.html cmake . make -j8

  4. 2018-2019-2 20165330《网络对抗技术》Exp7 网络欺诈防范

    目录 基础问题 相关知识 实验目的 实验内容 实验步骤 实验中遇到的问题 实验总结与体会 实验目的 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 返回目录 实验内容 简 ...

  5. CentOS 上 Jenkins 的安装

    Jenkins 的前身是 Hudson. Jenkins 是一款开源 CI&CD 软件,用于自动化各种任务,包括构建.测试和部署软件. Jenkins 支持各种运行方式,可通过系统包.Dock ...

  6. react-1

    react 创建方法 首先确定你的电脑上面已经安装了node和npm 检查方法:window键 输入cmd 输入node -v 或者 npm -v 在全局安装create-react-app这条命令 ...

  7. Thinkphp5 的sesssion在同一个控制器不同的方法无法获取session的原因和对策

    这一段在用thinkPHP5开发微信小程序接口的时候,在同一个控制器一个方法中存入session,在另一个方法中取出session,一直都是无法取出. 查阅各种资料得到原因:thinkPHP5里面的s ...

  8. 2.使用kubeadm快速搭建k8s集群

    准备工作: 时间同步 systemctl stop iptables.servicesystemctl stop firewalld.service 安装docker wget https://mir ...

  9. div固定在浏览器的最上方,不随滚动条滚动

    #topDIV { position: fixed; ; ; width: 100%; height: 35px; border-bottom: 1px solid #eee; background- ...

  10. Scala语法04 - 其他