iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 14
7
Modern Web

只要有心,人人都可以做卡米狗系列 第 14

第十四天:最基本的 Rails 運作流程

這是目前我們理解的 HTTP 協定。

今天會詳細說明 Rails 是怎麼處理一個 HTTP Request。

當我們在瀏覽器輸入一個網址時,會發出一個 Get Request 到網頁伺服器。網頁伺服器會根據這個網址,決定他應該要幹嘛。而 Rails 中的 Route 負責分析網址, Route 會決定要把 Request 發給哪一個 Controller 的 Action 來做回應。因為 Action 畫上去圖會很亂,所以就乾脆不畫了。

應該很難懂吧?

用人話來說:Route 就像大樓警衛,當有信件送進來,他要負責把信交給對應的住戶,所以 Controller 就是住家,Action 就是裡面的人。

當然,一棟大樓會有一間警衛室,以及有很多住戶,而且每一戶裡面還有住很多人,但是一封信只會寄給一個人。

所以我說那個警衛室在哪?

先打開 sublime text,然後點左上角的 File(檔案)。

選擇 Open Folder...(打開資料夾),選到我們的專案資料夾:D:\只要有心,人人都可以作卡米狗\ironman

按下選擇資料夾

左側多了一塊是資料夾目錄,那個灰色邊界是可以拖曳的,像這樣:

如果覺得空間不夠大,可以自行調整。

我們的警衛室在 config/routes.rb,先點左側的 config 資料夾,點一下會展開,再點一下會收合,然後再點一下 routes.rb

這樣就是空的。

那我們的住戶呢?

住戶在 app/controllers

看到一個 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

我後悔了想復原怎麼辦?

我們可以用 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 目錄上按右鍵。

New File

在新的檔案裡填入我們想要的程式碼:

class KamigoController < ApplicationController
end

然後按下 Ctrl+S 存檔。

輸入檔名:kamigo_controller.rb,副檔名 .rb 是 ruby 的意思,這樣 sublime text 就能知道內文是 ruby 程式碼。

自從我用了 sublime text 之後,人生就變成彩色的呢!

前面有提到 controller 是一戶,每一戶裡面還要有人,所以我們弄點人進去。

加入 action

我們定義一個叫做 eat 的空方法。

class KamigoController < ApplicationController
  def eat
  end
end

注意看這裡:

他是一個灰色圈圈,代表這個檔案編輯過,但還沒存檔,按下 Ctrl+S 之後就會變成灰色X,像這樣:

現在我們已經有一戶,而且住了一個人了,我們來請警衛幫我們轉信。

加入 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,然後就爆炸了:

是一個很眼熟的爆炸,這招我們在第九天:作一個最簡單的 Rails 網站就玩過了。這是因為 Rails 找不到對應的 html 檔案,所以爆炸。可是我們並沒有在 eat 裡面要求 Rails 去找檔案呀!原來這是 Rails 的預設行為。要修好這個問題有兩個方法:

  • 在正確的地方新增一個網頁
  • 為了避免 Rails 亂幫我們做事,我們得明確說明我們想幹嘛

兩種我們都要會。

在正確的地方新增網頁

網頁應該要放在 app/views/kamigo/ 下,檔名需要叫做 eat.html 或者 eat.html.erb

在 sublime text 新增資料夾的方法是在 views 資料夾點右鍵:

點選 New Folder...

輸入 kamigo 後按 Enter,資料夾就新增完成了。如果你不喜歡這樣,你也可以回到檔案總管去新增資料夾。

然後新增 eat.html 檔案,在裡面寫你想要吃的東西。

再開一次網址看他有沒有修好:http://localhost:3000/kamigo/eat

修好了!

為了避免 Rails 亂幫我們做事,我們得明確說明我們想幹嘛

app/controllers/kamigo_controller.rb 檔案改成下面的內容後存檔:

class KamigoController < ApplicationController
  def eat
    render plain: "吃土啦"
  end 
end

我們加入了一行程式碼 render plain: "吃土啦",意思是我們要用純文字"吃土啦"來回應這個請求,這樣 Rails 就不會用預設的網頁路徑作為回應了。

再開一次網址看他有沒有變化:http://localhost:3000/kamigo/eat

卡米狗好兇阿。

總結

  • 今天了解到 Rails 最基本的運作流程
  • 對於 Sublime Text 的操作又更加熟悉了

明天我們要從 Rails 的角度觀察 HTTP 協定。


上一篇
第十三天:認識 Ruby 的資料型態
下一篇
第十五天:從 Rails 認識 HTTP 協定
系列文
只要有心,人人都可以做卡米狗33
5
taiansu
iT邦新手 5 級 ‧ 2018-01-02 04:25:56

居然在這種時間貼文 (雖然我也沒資格講你) /images/emoticon/emoticon37.gif

/images/emoticon/emoticon02.gif

2
畢卡皮
iT邦新手 5 級 ‧ 2018-01-03 11:33:39

程式大小寫打相反找了超久才發現
《網站連環爆》成就GET
/images/emoticon/emoticon04.gif

我打錯了嗎QQ?

我看著你的字打/images/emoticon/emoticon06.gif
大小寫沒切拿到成就了/images/emoticon/emoticon10.gif

2
0966880887
iT邦新手 5 級 ‧ 2018-01-21 16:49:12

第14天render plain: "吃土啦"這步驟測試出了問題但不知哪裡有問題
https://imgur.com/a/ftRik

class 名稱的大小寫有問題

原來是這樣謝謝您
另外這問題https://ithelp.ithome.com.tw/upload/images/20180122/20108080oYvnXOBXLa.jpg

他說找不到 DennisaController

0
ss012932
iT邦新手 5 級 ‧ 2018-01-23 22:15:21

大大我第十三點報錯了 可以幫我看一下嗎 謝謝您https://ithelp.ithome.com.tw/upload/images/20180123/20108477SonfaJxMSd.jpg

看更多先前的回應...收起先前的回應...

試試看安裝 node.js: https://nodejs.org/en/
進網頁後點左邊的 TLS 版本

謝謝 正常了

好哦~好哦~

wayneoh iT邦新手 5 級‧ 2018-01-25 16:46:17 檢舉

大大我想請問一下
我也在13點報錯

我有爬文去下載node.js
但是我搞不清楚這兩者有什麼關連

所以我的狀況依然沒有解除
附上我的伺服器LOG
https://ithelp.ithome.com.tw/upload/images/20180125/20108512QAasKDXnXU.png

你的 ohController 改成 OhController 應該就行了。
因為類別名稱必須是 CONSTANT,而 CONSTANT 必須是首字大寫。
CONSTANT 是常數的意思。

wayneoh iT邦新手 5 級‧ 2018-01-25 22:19:04 檢舉

謝謝大大的解釋 這個debug我有發現 但是我還是失敗 我明天從新做一次再來報告

備註:但是吃土那個我有做出來

加油~ /images/emoticon/emoticon12.gif

wayneoh iT邦新手 5 級‧ 2018-01-26 08:46:40 檢舉

報告大大!!!
我重新啟動伺服器他就好了耶....
我想要請問一下
如果routes內有更動
是不是要重新啟動服務才會生效?

我昨天看他那個LOG感覺起來就是路由表的修改沒有套用

wayneoh iT邦新手 5 級‧ 2018-01-26 22:44:09 檢舉

報告大大 確認過發現安裝玩node.js後
電腦必須重新啟動 才會套用!

0
curry_sun
iT邦新手 5 級 ‧ 2018-01-26 11:50:52

請問要怎麼讓它顯示預設的view裡面的layout呢?
我設定routes都會報錯

我設定的是這樣 '/morningdog', to: 'application#application'

你遇到的錯誤訊息是什麼呢?

https://ithelp.ithome.com.tw/upload/images/20180126/20108525TMJDKHsmfd.png

他報這樣的錯給我~

0
james10949
iT邦新手 5 級 ‧ 2018-02-08 11:28:00

https://ithelp.ithome.com.tw/upload/images/20180208/20108677mtj0zi6JdO.jpg
不懂錯在哪裡
求大神解答

看更多先前的回應...收起先前的回應...

https://ithelp.ithome.com.tw/upload/images/20180208/20108677tWSszrxQPu.jpg
忘了附上網頁截圖
使用的名稱是chat_bot_alpha

https://ithelp.ithome.com.tw/upload/images/20180208/20108677KTu8LfmvvD.jpg
我發現我一直漏截圖QAQ

試試看安裝 node.js: https://nodejs.org/en/
進網頁後點左邊的 TLS 版本
然後重新啟動 raills server

少node.js無法正常執行?

p.s.我是那種準備好東西才看教學的人

https://ithelp.ithome.com.tw/upload/images/20180208/20108677p9ssbGYRye.jpg
哦...似乎一樣慘

重開機就搞定了

竟然需要重開機@@

0
aaronomg
iT邦新手 5 級 ‧ 2018-03-22 19:21:30

我卡關了請大神求解/images/emoticon/emoticon02.gif

無法產生 Controller 資料,之前伺服器也無法從電腦開啟...

https://ithelp.ithome.com.tw/upload/images/20180322/2010920512BllrzcwK.jpg

https://ithelp.ithome.com.tw/upload/images/20180322/201092059MVhzaNSTV.jpg

可以看一下你的 config/database.ymlgemfile 這兩個檔案的內容嗎?

大大~我找到方法了
原來我一開始就安裝錯Ruby的版本/images/emoticon/emoticon04.gif
我安裝到2.5版本一直產生錯誤解決不了
後來我再重新安裝2.4版本就好了
感謝/images/emoticon/emoticon48.gif

cool

0
freyr949487
iT邦新手 5 級 ‧ 2018-06-09 12:45:57

在吃麥當勞的那個步驟開始出錯了
https://i.imgur.com/cLIL1ba.png

Error

raise LoadError, "Unable to autoload constant #{qualified_name}, expected #{file_path} to define it" unless from_mod.const_defined?(const_name, false)

貼一下你的程式碼

我這邊解決了 不好意思!
如果還有問題我會再問你
目前進度是在16天

0
patyhank
iT邦新手 5 級 ‧ 2018-07-04 21:22:13

請問SyntaxError是甚麼問題
https://i.imgur.com/P9li0yS.png

語法錯誤,應該是 K 沒大寫

真的是沒大寫,找超久

0
vpower1201
iT邦新手 5 級 ‧ 2018-10-18 22:23:20

請問版主,我已經重試很多次 但是網頁開出來都是這樣 麻煩幫忙解答
https://ithelp.ithome.com.tw/upload/images/20181018/20112690rLhXTQYh4X.jpg

謝謝

class 的名稱第一個字要大寫哦

我也卡在這裡好久,原來第一個字要大寫!
感謝!

我要留言

立即登入留言