我们的程序现在显示出来的画面还是那么的原始和难看，接下来我们要做一些工作来美化它。
首先，作为准备，我们需要现添加一些用来测试的数据。
执行下面的命令：
[quote]ruby script/generate migration add_test_data[/quote]
它会为我们创建一个用来添加数据的migration文件。但是这个rb文件生成出来是空的。方便起见，我们按照书中说的，下载本书配套的几个文件，包括一个migration的rb文件，几张数据需要的图片文件和一个CSS文件。
相关文件的下载链接如下：
Migration文件：
[url="http://media.pragprog.com/titles/rails3/code/depot_c/db/migrate/20080601000003_add_test_data.rb"][color=orange][b]Download:[/b][/color]depot/db/migrate/20080601000003_add_test_data.rb[/url]
图片文件：
[url="http://media.pragprog.com/titles/rails3/code/depot_c/public/images"][color=orange][b]Download:[/b][/color]depot/public/images[/url]
CSS式样表文件：
[url="http://media.pragprog.com/titles/rails3/code/depot_c/public/stylesheets/depot.css"][color=orange][b]Download:[/b][/color]depot/public/stylesheets/depot.css[/url]
这些文件下载之后，Migration文件修改成我们生成那个文件同名后，替换生成的文件。
图片文件拷贝到public/images目录下，CSS文件拷贝到public/stylesheets目录下。
接下来，我们要把Migration文件中的数据提交到我们的数据库表中。
（注意：根据Migration文件中up方法第一行的代码，它将会清除掉我们之前提交到数据库表中的数据。）
执行下面的命令：
[quote]rake db:migrate[/quote]
好，现在用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里定义的样式。至于该页面应该长什么样子，其实怎么都行，看你的喜好了。作为实验，我还是从书中给的链接下载已经写好的代码了。代码的下载链接如下：
[url="http://media.pragprog.com/titles/rails3/code/depot_c/app/views/products/index.html.erb"][color=orange][b]Download:[/b][/color]depot/app/views/products/index.html.erb[/url]
现在，启动我们的服务，在浏览器的地址栏中键入“http://localhost:3000/products”，我们就可以看到我们美化后的页面了。哈哈，确实要比之前的好看多了。下面就是美化后的效果，大家看看吧。 :D
[img]http://dl.iteye.com/upload/attachment/236309/00099ee9-dd87-3fb0-aeec-4a2e086e64b8.jpg[/img]
首先，作为准备，我们需要现添加一些用来测试的数据。
执行下面的命令：
[quote]ruby script/generate migration add_test_data[/quote]
它会为我们创建一个用来添加数据的migration文件。但是这个rb文件生成出来是空的。方便起见，我们按照书中说的，下载本书配套的几个文件，包括一个migration的rb文件，几张数据需要的图片文件和一个CSS文件。
相关文件的下载链接如下：
Migration文件：
[url="http://media.pragprog.com/titles/rails3/code/depot_c/db/migrate/20080601000003_add_test_data.rb"][color=orange][b]Download:[/b][/color]depot/db/migrate/20080601000003_add_test_data.rb[/url]
图片文件：
[url="http://media.pragprog.com/titles/rails3/code/depot_c/public/images"][color=orange][b]Download:[/b][/color]depot/public/images[/url]
CSS式样表文件：
[url="http://media.pragprog.com/titles/rails3/code/depot_c/public/stylesheets/depot.css"][color=orange][b]Download:[/b][/color]depot/public/stylesheets/depot.css[/url]
这些文件下载之后，Migration文件修改成我们生成那个文件同名后，替换生成的文件。
图片文件拷贝到public/images目录下，CSS文件拷贝到public/stylesheets目录下。
接下来，我们要把Migration文件中的数据提交到我们的数据库表中。
（注意：根据Migration文件中up方法第一行的代码，它将会清除掉我们之前提交到数据库表中的数据。）
执行下面的命令：
[quote]rake db:migrate[/quote]
好，现在用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里定义的样式。至于该页面应该长什么样子，其实怎么都行，看你的喜好了。作为实验，我还是从书中给的链接下载已经写好的代码了。代码的下载链接如下：
[url="http://media.pragprog.com/titles/rails3/code/depot_c/app/views/products/index.html.erb"][color=orange][b]Download:[/b][/color]depot/app/views/products/index.html.erb[/url]
现在，启动我们的服务，在浏览器的地址栏中键入“http://localhost:3000/products”，我们就可以看到我们美化后的页面了。哈哈，确实要比之前的好看多了。下面就是美化后的效果，大家看看吧。 :D
[img]http://dl.iteye.com/upload/attachment/236309/00099ee9-dd87-3fb0-aeec-4a2e086e64b8.jpg[/img]
扫一扫
87
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
