Agile Web Development with Rails 3nd Edition學習筆記-美化我們的程序

我們的程序現在顯示出來的畫面還是那麼的原始和難看,接下來我們要做一些工作來美化它。
首先,作爲準備,我們需要現添加一些用來測試的數據。
執行下面的命令:
[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]
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章