- 浏览: 30214 次
- 性别:
- 来自: 苏州
最新评论
我们的程序现在显示出来的画面还是那么的原始和难看,接下来我们要做一些工作来美化它。
首先,作为准备,我们需要现添加一些用来测试的数据。
执行下面的命令:
它会为我们创建一个用来添加数据的migration文件。但是这个rb文件生成出来是空的。方便起见,我们按照书中说的,下载本书配套的几个文件,包括一个migration的rb文件,几张数据需要的图片文件和一个CSS文件。
相关文件的下载链接如下:
Migration文件:
Download:depot/db/migrate/20080601000003_add_test_data.rb
图片文件:
Download:depot/public/images
CSS式样表文件:
Download:depot/public/stylesheets/depot.css
这些文件下载之后,Migration文件修改成我们生成那个文件同名后,替换生成的文件。
图片文件拷贝到public/images目录下,CSS文件拷贝到public/stylesheets目录下。
接下来,我们要把Migration文件中的数据提交到我们的数据库表中。
(注意:根据Migration文件中up方法第一行的代码,它将会清除掉我们之前提交到数据库表中的数据。)
执行下面的命令:
好,现在用MySQL的Query Browser查看products表,Migration文件中的3条数据已经提交到了我们的数据库中,而之前我们添加的数据也都清除掉了。并且,schema_migrations表中也又多了一条version数据,也就是我们刚才生成Migration文件开头的那个时间。
下面,我们要对我们的程序做一些修改,让我们添加的CSS发挥作用,并通过修改index.html.erb文件来改变我们程序的外观,使之变得美观一些。
首先,我们要使我们的CSS文件生效,就要修改app/views/layouts目录下的products.html.erb文件。所要做的其实仅仅是把CSS文件的文件名(去掉'.css')添加到该文件的第八行中。
修改前的内容是:
修改后的内容是:
因为这个文件其实是各个页面的框架文件,views目录下的页面文件其实会在运行时被加载到该文件第14行的位置。所以,我们只需要修改这一个文件就可以使得我们的每个页面加载时都能加载我们CSS文件,而不是要为每一个页面文件添加加载CSS的代码了。(哈哈,真的是太方便了。)
然后呢,我们不能只有CSS文件阿,还要修改以下我们的index.html.erb文件来改变一下页面的外观和使用CSS里定义的样式。至于该页面应该长什么样子,其实怎么都行,看你的喜好了。作为实验,我还是从书中给的链接下载已经写好的代码了。代码的下载链接如下:
Download:depot/app/views/products/index.html.erb
现在,启动我们的服务,在浏览器的地址栏中键入“http://localhost:3000/products”,我们就可以看到我们美化后的页面了。哈哈,确实要比之前的好看多了。下面就是美化后的效果,大家看看吧。
首先,作为准备,我们需要现添加一些用来测试的数据。
执行下面的命令:
引用
ruby script/generate migration add_test_data
它会为我们创建一个用来添加数据的migration文件。但是这个rb文件生成出来是空的。方便起见,我们按照书中说的,下载本书配套的几个文件,包括一个migration的rb文件,几张数据需要的图片文件和一个CSS文件。
相关文件的下载链接如下:
Migration文件:
Download:depot/db/migrate/20080601000003_add_test_data.rb
图片文件:
Download:depot/public/images
CSS式样表文件:
Download:depot/public/stylesheets/depot.css
这些文件下载之后,Migration文件修改成我们生成那个文件同名后,替换生成的文件。
图片文件拷贝到public/images目录下,CSS文件拷贝到public/stylesheets目录下。
接下来,我们要把Migration文件中的数据提交到我们的数据库表中。
(注意:根据Migration文件中up方法第一行的代码,它将会清除掉我们之前提交到数据库表中的数据。)
执行下面的命令:
引用
rake db:migrate
好,现在用MySQL的Query Browser查看products表,Migration文件中的3条数据已经提交到了我们的数据库中,而之前我们添加的数据也都清除掉了。并且,schema_migrations表中也又多了一条version数据,也就是我们刚才生成Migration文件开头的那个时间。
下面,我们要对我们的程序做一些修改,让我们添加的CSS发挥作用,并通过修改index.html.erb文件来改变我们程序的外观,使之变得美观一些。
首先,我们要使我们的CSS文件生效,就要修改app/views/layouts目录下的products.html.erb文件。所要做的其实仅仅是把CSS文件的文件名(去掉'.css')添加到该文件的第八行中。
修改前的内容是:
<%= stylesheet_link_tag 'scaffold' %>
修改后的内容是:
<%= stylesheet_link_tag 'scaffold', 'depot' %>
因为这个文件其实是各个页面的框架文件,views目录下的页面文件其实会在运行时被加载到该文件第14行的位置。所以,我们只需要修改这一个文件就可以使得我们的每个页面加载时都能加载我们CSS文件,而不是要为每一个页面文件添加加载CSS的代码了。(哈哈,真的是太方便了。)
然后呢,我们不能只有CSS文件阿,还要修改以下我们的index.html.erb文件来改变一下页面的外观和使用CSS里定义的样式。至于该页面应该长什么样子,其实怎么都行,看你的喜好了。作为实验,我还是从书中给的链接下载已经写好的代码了。代码的下载链接如下:
Download:depot/app/views/products/index.html.erb
现在,启动我们的服务,在浏览器的地址栏中键入“http://localhost:3000/products”,我们就可以看到我们美化后的页面了。哈哈,确实要比之前的好看多了。下面就是美化后的效果,大家看看吧。
发表评论
-
Agile Web Development with Rails 3nd Edition学习笔记-隐藏空的购物车
2010-04-29 23:19 1038到现在位置,我们已经完成了产品列表和购物车功能。虽然看起来已经 ... -
Agile Web Development with Rails 3nd Edition学习笔记-高亮显示改变
2010-04-28 22:24 871当客户点击了“Add to Cart“按钮之后,购物车的数据改 ... -
Agile Web Development with Rails 3nd Edition学习笔记-创建一个基于Ajax的购物车
2010-04-27 22:59 943上篇笔记中,我们通过partial把购物车信息放到了index ... -
Agile Web Development with Rails 3nd Edition学习笔记-使用Ajax将购物车放入Sidebar
2010-04-27 00:38 1059之前,当用户点击了“Add to Cart“按钮之后,页面会跳 ... -
Agile Web Development with Rails 3nd Edition学习笔记-完成购物车
2010-04-26 22:41 856这一篇,我们来完成我们的购物车的制作吧。 首先,为了客户能够很 ... -
Agile Web Development with Rails 3nd Edition学习笔记-错误处理
2010-04-26 22:07 845这一部分其实东西很少,这里不做过多的描述,仅仅是记录下来,以便 ... -
Agile Web Development with Rails 3nd Edition学习笔记-创建更智能的购物车
2010-04-25 17:05 811上篇笔记我们已经让我们的网站能够保存客户选购的产品了,但是,似 ... -
Agile Web Development with Rails 3nd Edition学习笔记-创建购物车
2010-04-23 22:06 890上篇笔记中,我们为保 ... -
Agile Web Development with Rails 3nd Edition学习笔记-把Sessions放进数据库
2010-04-21 22:21 1018depot在线商店需要一个能保存用户选购的各种各样的商品的地方 ... -
Agile Web Development with Rails 3nd Edition学习笔记-格式化价格和添加购物按钮
2010-04-19 22:42 1038这篇只有很少的一点内 ... -
Agile Web Development with Rails 3nd Edition学习笔记-创建页面布局模板
2010-04-19 01:32 1009典型的网站一般都具有 ... -
Agile Web Development with Rails 3nd Edition学习笔记-创建产品目录列表
2010-04-18 19:48 790按照书上的引导,我们 ... -
Agile Web Development with Rails 3nd Edition学习笔记-为数据增加校验处理
2010-04-18 00:23 977数据的校验是在model ... -
Agile Web Development with Rails 3nd Edition学习笔记-向数据库表追加字段
2010-04-18 00:07 927我们可以使用migration工具在存在的数据库表中追加字 ... -
Agile Web Development with Rails 3nd Edition学习笔记-创建Depot工程
2010-04-17 21:21 919开始学习ROR了,由于在开始跟着书做这个Depot工程 ...
相关推荐
Agile Web Development with Rails, 2nd Edition <br>有两份PDF文件,大小分别是7.39MB和6.55MB <br>作者: Dave Thomas , David Heinemeier Hansson , Leon Breedt , Mike Clark , James Duncan Davidson ,...
### 敏捷Web开发与Rails 3:关键知识点解析 #### 一、Rails版本与兼容性 本书《敏捷Web开发与Rails》第三版是基于Rails 2编写的。截至本书印刷时,当前可用的Rails Gem版本为2.1。书中所包含的所有代码均已在该...
文件列表中的《Agile Web Development with Rails 3nd Edition Beta.pdf》很可能是这本书的电子版,读者可以通过阅读此PDF文件获取完整的学习资料,包括详细的章节讲解、示例代码和练习题,以便在实践中不断巩固和...
《Agile Web Development with Rails》是一本经典的Rails开发指南,中文版的出版使得更多的中国开发者能够深入理解并应用敏捷开发方法与Ruby on Rails框架。这本书是Rails开发者的必备参考资料,它详细介绍了如何...
Ruby on Rails helps you produce high-quality, beautiful-looking web applications quickly. You concentrate on creating the application, and Rails takes care of the details., Tens of thousands of ...
Rails敏捷开发第三版,很不错的rails入门书,对初学rails的人很有用
《敏捷Web开发与Rails:程序指南 第四版》是一本深度探讨使用Ruby on Rails框架进行敏捷Web应用开发的专业书籍。本书旨在帮助开发者充分利用Rails 4的特性,提高开发效率,实现快速迭代和高质量的代码编写。 Rails是...
《Agile Web Development with Rails-Second Edition-Beta》是一本专注于使用Ruby on Rails进行敏捷Web开发的书籍。这本书的第二版beta版提供了关于如何利用Rails框架高效构建动态、响应式网站的深入指导。作者们...
《敏捷Web开发与Rails》第四版是一本专为软件开发者设计的权威指南,全面涵盖了使用Ruby on Rails框架进行敏捷Web应用开发的知识。Rails 3是该版本的重点,它引入了许多新特性和改进,使得开发过程更为高效且灵活。...
书中的"Pragmatic.Bookshelf.Agile.Web.Development.with.Rails.2nd.Edition.Dec.2006.eBook-BBL"可能是该书籍的电子版文件,它包含了全书的章节和内容。读者可以通过这个电子版深入学习Rails开发的各种技巧和最佳...
Agile Web Development with Rails 1-14节_ppt(老师发的修正版)
Agile Web Development with Rails, Third Edition by Sam Ruby, Dave Thomas, David Heinemeier Hansson Rails just keeps on changing. Rails 2, released in 2008, brings hundreds of improvements, including...
《敏捷Web开发与Rails 2nd Edition》源码解析 在Web开发领域,Rails框架以其高效、灵活和生产力提升的特点,成为了许多开发者首选的工具。《敏捷Web开发与Rails 2nd Edition》这本书深入浅出地介绍了如何使用Ruby ...
《敏捷Web开发与Rails》是一本深度探讨如何利用Ruby on Rails框架进行敏捷Web开发的指导书籍,由Dave Thomas、David Heinemeier Hansson等多位在Rails社区有着深厚贡献的作者共同编写。本书不仅覆盖了Rails的基本...