2018/1/2

第十四天:最基本的 Rails 運作流程( 2018 iT邦幫忙鐵人賽-只要有心,人人都可以作卡米狗 )

markdown 這是目前我們理解的 HTTP 協定。 ![](https://1.bp.blogspot.com/-tgwIiqks87E/Wkp3iynOonI/AAAAAAAA_9A/ibC3elrpYTc9IyuGlKEWt6bAl98BaMYHgCLcBGAs/s1600/1.jpg) 今天會詳細說明 Rails 是怎麼處理一個 HTTP Request。 ![](https://2.bp.blogspot.com/-QBWMepj6AiA/Wkp3pfpcz1I/AAAAAAAA_9E/dmgzMaNzG48_pyEoXlN4OfPDJ23_8R9HACLcBGAs/s1600/2.jpg) 當我們在瀏覽器輸入一個網址時,會發出一個 Get Request 到網頁伺服器。網頁伺服器會根據這個網址,決定他應該要幹嘛。而 Rails 中的 Route 負責分析網址, Route 會決定要把 Request 發給哪一個 Controller 的 Action 來做回應。因為 Action 畫上去圖會很亂,所以就乾脆不畫了。 應該很難懂吧? 用人話來說:Route 就像大樓警衛,當有信件送進來,他要負責把信交給對應的住戶,所以 Controller 就是住家,Action 就是裡面的人。 ![](https://3.bp.blogspot.com/-ik0xUXewFzI/Wkp7EVmB5jI/AAAAAAAA_9Q/5z76c1Rys14LRSAmqvHydbtUFT7VrqQyQCLcBGAs/s1600/3.jpg) 當然,一棟大樓會有一間警衛室,以及有很多住戶,而且每一戶裡面還有住很多人,但是一封信只會寄給一個人。 # 所以我說那個警衛室在哪? 先打開 sublime text,然後點左上角的 `File`(檔案)。 ![](https://2.bp.blogspot.com/-SGqQPKds-Lk/WkqAsmxkl4I/AAAAAAAA_9g/Dx9lnxXqPy8xjc-ugabx_eE8hLsq19mngCLcBGAs/s1600/4.jpg) 選擇 `Open Folder...`(打開資料夾),選到我們的專案資料夾:`D:\只要有心,人人都可以作卡米狗\ironman`。 ![](https://4.bp.blogspot.com/-1FozZm40lpw/WkqBW8SxXII/AAAAAAAA_9o/0ZXM9wgeBWw1SHF4wm2VWZr8o-s1RgzkQCLcBGAs/s1600/5.jpg) 按下`選擇資料夾`。 ![](https://2.bp.blogspot.com/-u-vgwtug3GM/WkqB0Bwzo2I/AAAAAAAA_9w/MMQ5m9_TymoJs7V78srcv6cT402YXFA-QCLcBGAs/s1600/6.jpg) 左側多了一塊是資料夾目錄,那個灰色邊界是可以拖曳的,像這樣: ![](https://4.bp.blogspot.com/-ogAyEuwQlRM/WkqB5X8x7-I/AAAAAAAA_94/iXdKXZoYdTsYHcZ5Dl6rtxBm84OWu3krwCLcBGAs/s1600/7.jpg) 如果覺得空間不夠大,可以自行調整。 我們的警衛室在 `config/routes.rb`,先點左側的 `config` 資料夾,點一下會展開,再點一下會收合,然後再點一下 `routes.rb`。 ![](https://4.bp.blogspot.com/-3O6UgWbBf_U/WkqCjC1WRsI/AAAAAAAA_-E/mYGZp_NNv_w4Jsupz290yJxC1oyCLPihwCLcBGAs/s1600/8.jpg) 這樣就是空的。 # 那我們的住戶呢? 住戶在 `app/controllers`。 ![](https://2.bp.blogspot.com/-bxUu6FKSOoU/WkqDbpcX3aI/AAAAAAAA_-Q/rAA_8vt7jIoohyMc6R_mV7SInLW7iej6wCLcBGAs/s1600/9.jpg) 看到一個 concerns 空的資料夾和一個 application_controller.rb,現階段就當作沒看到這個檔案好了。 所以我們現在蓋的樓裡面根本沒住人!總之還是先弄個住戶進去再說。 # 做一個 Controller 先開啟 cmd 到我們的專案目錄: ``` D:\只要有心,人人都可以作卡米狗\ironman> ``` 輸入 `rails generate controller kamigo` ,請 rails 幫我們生成一個叫做 kamigo 的 controller。 ``` D:\只要有心,人人都可以作卡米狗\ironman>rails generate controller kamigo create app/controllers/kamigo_controller.rb invoke erb create app/views/kamigo invoke test_unit create test/controllers/kamigo_controller_test.rb invoke helper create app/helpers/kamigo_helper.rb invoke test_unit invoke assets invoke coffee create app/assets/javascripts/kamigo.coffee invoke scss create app/assets/stylesheets/kamigo.scss D:\只要有心,人人都可以作卡米狗\ironman> ``` 他幫我們產生了好多檔案,開頭有 create 的那些都是,但是其實我們只需要 `app/controllers/kamigo_controller.rb`。 ![](https://2.bp.blogspot.com/-n8ILLLx_RLo/WkqExZA8J9I/AAAAAAAA_-c/-fx_R60VLsUUX_LLzx1cSRBu-04u4q51gCLcBGAs/s1600/10.jpg) # 我後悔了想復原怎麼辦? 我們可以用 `rails destroy controller kamigo` 來刪除這些檔案。 ``` D:\只要有心,人人都可以作卡米狗\ironman>rails destroy controller kamigo remove app/controllers/kamigo_controller.rb invoke erb remove app/views/kamigo invoke test_unit remove test/controllers/kamigo_controller_test.rb invoke helper remove app/helpers/kamigo_helper.rb invoke test_unit invoke assets invoke coffee remove app/assets/javascripts/kamigo.coffee invoke scss remove app/assets/stylesheets/kamigo.scss D:\只要有心,人人都可以作卡米狗\ironman> ``` # 這次我們手動新增 controller 在左側的 `controllers` 目錄上按右鍵。 ![](https://1.bp.blogspot.com/-EkUfAIHeYYs/WkqGk79x5aI/AAAAAAAA_-o/S7BKL-5-krgDRqFXhj00w-40nOWyt0NDACLcBGAs/s1600/11.jpg) 選 `New File`。 ![](https://4.bp.blogspot.com/-vktX5toVKZc/WkqHL1QwpUI/AAAAAAAA_-w/Ig9CsD3qmXYMLTU8EdctwCuNxLCuvDtjwCLcBGAs/s1600/12.jpg) 在新的檔案裡填入我們想要的程式碼: ``` class KamigoController < ApplicationController end ``` 然後按下 `Ctrl`+`S` 存檔。 ![](https://3.bp.blogspot.com/-267PNfFZppU/WkqH3EgvAOI/AAAAAAAA_-8/ySRLTPeOXns2-HDpT17XVHURnNHUMz-tgCLcBGAs/s1600/14.jpg) 輸入檔名:`kamigo_controller.rb`,副檔名 `.rb` 是 ruby 的意思,這樣 sublime text 就能知道內文是 ruby 程式碼。 ![](https://3.bp.blogspot.com/-Ck1uPaBFejo/WkqIWx82ZJI/AAAAAAAA__E/8aXZkqqaB54kPiAA6YDEDsOB-ulutWG_ACLcBGAs/s1600/15.jpg) 自從我用了 sublime text 之後,人生就變成彩色的呢! 前面有提到 controller 是一戶,每一戶裡面還要有人,所以我們弄點人進去。 # 加入 action 我們定義一個叫做 `eat` 的空方法。 ``` class KamigoController < ApplicationController def eat end end ``` 注意看這裡: ![](https://2.bp.blogspot.com/-Ac6yNrDv4x0/WkqMX7W9f5I/AAAAAAAA__Q/YyE24XrF0-ALJogjqpS3ZQBr_2A-Lgz0QCLcBGAs/s1600/16.jpg) 他是一個灰色圈圈,代表這個檔案編輯過,但還沒存檔,按下 `Ctrl`+`S` 之後就會變成灰色X,像這樣: ![](https://3.bp.blogspot.com/-W1oQE--sO84/WkqMlJvxxwI/AAAAAAAA__U/j4ZQub4bEKQeWfnsdvVOnkzsFYdU9qBWACLcBGAs/s1600/17.jpg) 現在我們已經有一戶,而且住了一個人了,我們來請警衛幫我們轉信。 # 加入 route 我們把 `config/routes.rb` 改成這樣: ``` Rails.application.routes.draw do get '/kamigo/eat', to: 'kamigo#eat' end ``` `get '/kamigo/eat', to: 'kamigo#eat'` 的意思是當有人在瀏覽器輸入網址 `/kamigo/eat` 時,就把請求交給 kamigo 這個 controller 裡的 eat 方法來回應。 # 測試一下 在 cmd 輸入 `rails s` 開啟網頁伺服器: ``` D:\只要有心,人人都可以作卡米狗\ironman>rails s => Booting Puma => Rails 5.1.4 application starting in development => Run `rails server -h` for more startup options *** SIGUSR2 not implemented, signal based restart unavailable! *** SIGUSR1 not implemented, signal based restart unavailable! *** SIGHUP not implemented, signal based logs reopening unavailable! Puma starting in single mode... * Version 3.11.0 (ruby 2.4.2-p198), codename: Love Song * Min threads: 5, max threads: 5 * Environment: development * Listening on tcp://0.0.0.0:3000 Use Ctrl-C to stop ``` 用瀏覽器開啟這個網址:[http://localhost:3000/kamigo/eat](http://localhost:3000/kamigo/eat),然後就爆炸了: ![](https://1.bp.blogspot.com/-btXwuJkZQ1k/WkqO14SPUXI/AAAAAAAA__k/9L6XpbbJ5YcoMBUrn08QL_2t-qyhMJjEACLcBGAs/s1600/18.jpg) 是一個很眼熟的爆炸,這招我們在[第九天:作一個最簡單的 Rails 網站](https://ithelp.ithome.com.tw/articles/10194359)就玩過了。這是因為 Rails 找不到對應的 html 檔案,所以爆炸。可是我們並沒有在 eat 裡面要求 Rails 去找檔案呀!原來這是 Rails 的預設行為。要修好這個問題有兩個方法: - 在正確的地方新增一個網頁 - 為了避免 Rails 亂幫我們做事,我們得明確說明我們想幹嘛 兩種我們都要會。 ### 在正確的地方新增網頁 網頁應該要放在 `app/views/kamigo/` 下,檔名需要叫做 `eat.html` 或者 `eat.html.erb`。 在 sublime text 新增資料夾的方法是在 `views` 資料夾點右鍵: ![](https://4.bp.blogspot.com/-pxxjFc1De3E/WkqRH4QRmiI/AAAAAAAA__w/4LG5UPwAP8MhICBej0xRS66v4aqRNWHggCLcBGAs/s1600/20.jpg) 點選 `New Folder...`: ![](https://3.bp.blogspot.com/-Q3DaETwaqZ0/WkqRy_PXu6I/AAAAAAAA__4/vuoOu4WSl3wHrx49j6wZ3qo7aQuk1rLPACLcBGAs/s1600/21.jpg) 輸入 `kamigo` 後按 `Enter`,資料夾就新增完成了。如果你不喜歡這樣,你也可以回到檔案總管去新增資料夾。 然後新增 `eat.html` 檔案,在裡面寫你想要吃的東西。 ![](https://3.bp.blogspot.com/-wMBDDOu35Ts/WkqSba6-GbI/AAAAAAABAAA/X2NnD7upBjUDJsGd7VCwAT4p0XaXEEDiQCLcBGAs/s1600/22.jpg) 再開一次網址看他有沒有修好:[http://localhost:3000/kamigo/eat](http://localhost:3000/kamigo/eat) ![](https://3.bp.blogspot.com/-xIvDOpogRn4/WkqSvTvhaLI/AAAAAAABAAE/8__Cq3-RCdoKK6ecxalOMvIuwwGOURSNwCLcBGAs/s1600/23.jpg) 修好了! ### 為了避免 Rails 亂幫我們做事,我們得明確說明我們想幹嘛 把 `app/controllers/kamigo_controller.rb` 檔案改成下面的內容後存檔: ``` class KamigoController < ApplicationController def eat render plain: "吃土啦" end end ``` 我們加入了一行程式碼 `render plain: "吃土啦"`,意思是我們要用純文字`"吃土啦"`來回應這個請求,這樣 Rails 就不會用預設的網頁路徑作為回應了。 再開一次網址看他有沒有變化:[http://localhost:3000/kamigo/eat](http://localhost:3000/kamigo/eat)。 ![](https://1.bp.blogspot.com/-ezOm5rZe2a4/WkqUX2AIS8I/AAAAAAABAAU/1n3mnGnInJAMAmefCcz6PJpgRLhvynv6QCLcBGAs/s1600/24.jpg) 卡米狗好兇阿。 # 總結 - 今天了解到 Rails 最基本的運作流程 - 對於 Sublime Text 的操作又更加熟悉了 明天我們要從 Rails 的角度觀察 HTTP 協定。

沒有留言: