# 2.1 應用 scaffold 命令創建資源 ## 概要： 本課時詳細介紹 Rails 中的命令，以及使用 scaffold 命令創建的資源文件，如 erb 文件，測試文件，sass 文件等。 ## 知識點： 1. scaffold 1. sass/scss 1. coffeescript 1. erb 1. rspec ## 正文 ### 2.1.1 rails 命令 上一節，我們用 `new` 創建了一個 Rails 項目，并且使用了下面的命令，創建了商品（Product）這個資源： ~~~ % rails g scaffold product name price:decimal description:text ~~~ g 是 generate 的縮寫，Rails 還為我們提供了幾個類似的命令： ~~~ % rails -h generate 生成資源文件 (簡寫 "g") console 運行調試控制臺 (簡寫 "c") server 運行 Rails 服務 (簡寫 "s") dbconsole 運行數據庫調試控制臺 (簡寫 "db") new 創建新的 Rails 項目。 你也可以 "rails new ." 它會在當前目錄下創建 destroy 刪除 "generate" 創建的文件 (簡寫 "d") plugin new 創建一個 plugin runner 在 Rails 環境下，執行一段 Ruby 代碼 ~~~ 我們用 generate 可以創建資源，同樣也可以用 destroy 刪除這個資源，比如： ~~~ % rails destroy scaffold product ~~~ 我們已經使用 server 命令運行了項目，但是，有時候我們不一定要在 web 頁面上做操作，為了方便調試，我們可以已進入到互動終端，也就是 console 中： ~~~ % rails console > Product.first Product Load (0.2ms) SELECT "products".* FROM "products" ORDER BY "products"."id" ASC LIMIT 1 => nil > exit ~~~ 在 console 里，我們可以方便的操作數據庫，下一章我們會重點講解數據庫部分。 和 console 類似，dbconsole 可以進入到數據庫的互動終端里，具體的命令取決去使用的哪個數據庫，rails 只是為我們提供了一個方便的連接數據庫方式。 plugin 命令可以為一個獨立的功能創建專屬的代碼，并且存在與該 Rails 項目中，在 Rails 3 之后，越來越多的功能使用 gem 來實現，plugin 較少使用了。 和 console 的交互式操作不同，runner 可以執行一段代碼，相同的是，它們都擁有當前項目完整的 Rails 環境。我們可以使用執行一個文件，比如： ~~~ % rails runner lib/somefile.rb ~~~ 在這個 file 里，可以實現一些功能，這和 rake 的實現方式較接近。 ### 2.1.2 scaffold 命令 回到我們經常使用的 generate 命令，先查看幫助文檔： ~~~ % rails generate -h ~~~ 我們看到，generate 可以創建很多類型的文件，比如 model，controller，assets 文件等，這些都是一個 Rails 資源所需要。我們可以分別執行 generate 命令，也可以把它們一次都執行，這就是 scaffold。 scaffold 的中文稱呼是 “腳手架”，個人覺得它不是很形象，如果稱它為“一大堆 generator（生成器） 的集合”，似乎形象很多。Rails 為我們提供了一些 generator，我們也可以編寫自己的 generator。 再來看看 scaffold 的語法結構： ~~~ % rails g scaffold [資源名] [屬性列表] [選項] ~~~ 為了使我們的網店更接近實際應用，我們再增加一個資源：商品類型(Variant) ~~~ % rails g scaffold variants product_id:integer price:decimal{'8,2'} size ~~~ variants 是資源的名稱，它可以是單數，我們創建商品時用的就是單數形式。屬性列表里，屬性名稱和屬性的類型，使用 : 來分開，默認的類型是 string，所以 color 的后面沒有聲明它是什么類型，那么它就是 string 類型。 當我們創建價格類型的時候，decimal 可以增加兩個具體參數：precision 和 scale，每個數據庫的默認值是不同的，我們可以查看這里： [RMDB 的decimal 默認值](http://api.rubyonrails.org/classes/ActiveRecord/ConnectionAdapters/TableDefinition.html#method-i-column) 我們打開 `config/routes.rb`，可以看到這樣兩行代碼已經添加了： 生成文件的時候，我們注意到這一行： ~~~ ... resources :products resources :variants ... ~~~ 這就是我們定義的資源。其實，我們說 URL 中的 R 就是這個資源 Resource 的意思。我們可以這樣理解 Rails： > Rails 是從管理資源開始的。 我們還可以配置 scaffold，讓它跳過一些不必要的文件，配置寫在 `config/application.rb` 中： ~~~ class Application < Rails::Application ... config.generators do |cfg| cfg.stylesheets false cfg.javascripts false cfg.helpers false end ~~~ 這樣，scaffold 命令就不再創建 helper，css，js 文件了。但在我們學習初期階段，先不這么做。 ### 2.1.3 sass/scss 創建的文件中，我們看到了 `.scss` 的文件，其實，它是 `sass` 文件，一種 css 的預處理文件，它的后綴有兩種：`.scss` 和 `.sass`。`scss` 語法更接近 css 本身，你可以直接粘貼 css 來使用。sass 更加簡介，去掉了 `;` 和 `{}` 這些符號，并且使用空格，作為語法縮進。 使用 sass，可以使用預定義變量，使用語法嵌套，代碼混入等多種編程風格的代碼，編寫 css，并且在編譯成 css 文件的過程中，還可以進行語法檢查。 sass 和 scss 寫法上的不同，可以在 [http://sass-lang.com/guide](http://sass-lang.com/guide) ([中文文檔](http://sass.bootcss.com/))看到。 如果你想在兩種文件間轉換，可以使用這個命令： ~~~ # Convert Sass to SCSS % sass-convert style.sass style.scss # Convert SCSS to Sass % sass-convert style.scss style.sass ~~~ [SASS用法指南](http://www.ruanyifeng.com/blog/2012/06/sass.html) 一文里有更詳細的介紹。 Rails 默認使用的是 sass，這里是它 [github](https://github.com/rails/sass-rails) 的地址， 在我們的 css 文件中，經常會使用圖片文件，比如 background-image 屬性，但是我們的圖片是放在 assets 文件夾中的，我們可以有三種方式來使用圖片。 第一種，直接粘貼圖片地址，比如： ~~~ background-image: url("/assets/logo.png"); ~~~ 這是很不好的，它不能使用 digest 方式來使用圖片資源，也不夠靈活。 第二種，將圖片文件放到 public 下，比如： ~~~ background-image: url("/images/logo.png"); ~~~ 這需要我們在 public 下建立一個 images 文件夾來管理圖片文件，也不能使用 digest。 第三種，直接使用 sass-rails 提供的[輔助方法](https://github.com/rails/sass-rails#asset-helpers)： ~~~ background-image: asset-url('logo.png'); ~~~ 當然，我也見到過第四種方法，使用 erb 來重構 sass，文件可能是這樣的，`style.css.scss.erb`，這樣就可以在 scss 里插入 erb 的語法： ~~~ background-image: url(<%= asset_path 'logo.png' %>); ~~~ 在 Rails 里是可以這么寫的，它會先解析 erb 文件，再解析 sass 文件，生成 css。但是我不建議這么處理問題，在我們使用一個不熟悉的方法解決問題時，應該多耐心看一看它的文檔。不知道這里給出的眾多連接，大家是否查看了，他們都是對內容很好的補充。 和 sass 一樣，[Less](http://lesscss.org/) 也是 css 的預編譯工具，如果你留意 bootstrap 的介紹，它的 css 文件就是用 less 編寫的。 ### 2.1.4 coffeescript `.coffee` 是 js 的預處理文件，它是用 coffeescript 編寫的。學習它很簡單，只要看看[http://coffeescript.org/](http://coffeescript.org/) 就可以了，中文在 [http://coffee-script.org/](http://coffee-script.org/)。 scss 和 coffeescript 的目標，是讓代碼更簡潔，易維護。預處理還可以幫你檢查語法上的錯誤。 在我們安裝完 bootstrap 后，會給出一個 coffee 文件： ~~~ jQuery -> $("a[rel~=popover], .has-popover").popover() $("a[rel~=tooltip], .has-tooltip").tooltip() ~~~ ### 2.1.5 erb 最后，我們說說 erb。 erb 是 Ruby 的標準庫（Standard Library）之一， 它允許是把 Ruby 代碼簽入到 html 中。 一個簡單的例子，我們進入到 irb 中： ~~~ % require "erb" % name = "Ruby" % ERB.new("My name is #{name}").result => "My name is Ruby" ~~~ 好了，文件都介紹完了，我們看一下效果吧，我們使用下面的命令： ~~~ % rake db:migrate [1] % rails s [2] ~~~ - [1] 更新數據庫 - [2] 啟動 Rails 服務，s 是 server 的簡寫 訪問 `http://localhost:3000/products`，試試上面的按鈕，體驗一下如何增加，修改，刪除一個商品（Product）吧。 ### 2.1.6 測試 除了上面介紹的，scaffold 還為我們添加了測試文件 `test/models/product_test.rb` 和 `test/controllers/products_controller_test.rb`。 這里，Rails 默認使用的是 minitest，更多介紹可以看[這里](http://docs.seattlerb.org/minitest/)。我們也可以使用其他的測試框架，比如 Rspec。 我們可以修改 Gemfile ~~~ group :development, :test do gem 'rspec-rails' end ~~~ 運行 rspec 的 generator： ~~~ % rails generate rspec:install create .rspec create spec create spec/spec_helper.rb create spec/rails_helper.rb ~~~ 我們補上 Model 和 Controller 的測試文件： ~~~ rails generate rspec:model product rails generate rspec:controller products ~~~ 最后，我們在 Rails 項目文件夾中運行這個命令： ~~~ % rspec ** Pending: (Failures listed here are expected and do not affect your suite's status) 1) ProductsController # Not yet implemented # ./spec/controllers/products_controller_spec.rb:4 2) Product add some examples to (or delete) /Users/liwei/Desktop/Rails_practice_p1_0/code/chapter_2/shop/spec/models/product_spec.rb # Not yet implemented # ./spec/models/product_spec.rb:4 Finished in 0.00058 seconds (files took 1.6 seconds to load) ~~~ 我們看到測試文件已經可以運行了，雖然我們還未給它寫一行測試用例（Test Case）。 在后面 MVC 開發的部分，我們會繼續添加它的代碼。Rspec 的代碼和文檔在這里： [https://github.com/rspec/rspec](https://github.com/rspec/rspec) 讓 Rspec 集成到 Rails 中的方法是安裝 `rspec-rails`： ~~~ group :development, :test do gem 'rspec-rails', '~> 3.0' end ~~~ [https://github.com/rspec/rspec-rails](https://github.com/rspec/rspec-rails) 下一節，我們將深入 Rails 中，了解它的核心概念：REST。