iT邦幫忙

2022 iThome 鐵人賽

DAY 18
0
Modern Web

一探紅寶石的神秘面紗 - Ruby 及 Rails入門介紹 系列系列 第 18

Day 18 - 進入Rails世界必須懂:Controller 及 View

  • 分享至 

  • xImage
  •  

開頭先來回顧一下前面的圖片,今天來解釋一下我們 MVC 一直提到的 C (Controller) 及 C (View) 部分,前兩篇講完routes的部分,接著當解讀完 routes 之後就是將工作轉往 controller 及 action 的部分,將後續資料的呈現及使用者的動作做完。

Controller 與 View 是什麼呢?

Controller 是要拿來做什麼用的? 從意思來看應該可以看到control這個單字,表示是要來進行一些控制的部分,主要是控制資料的流程。他可能會進行:

  • 跟 Model 要資料
  • 把從 Model 收到的資料丟給 View
  • 需要存取外部服務(例如金流串接)等

View 的話則是可以將 Controller 的資料呈現出來,就是一種回傳 HTML 的方法。

和路徑設定的關聯

前面一篇提到的文章相關路徑設計,其實我們 resources 後面符號,用複數名稱對應到的就是 controller 的名字

Rails.application.routes.draw do
  resources :articles
end

還記得路徑中有對應的 controller 及 action 吧

$ rails routes -c articles
   Prefix    Verb   URI Pattern                  Controller#Action
    articles GET    /articles(.:format)          articles#index
             POST   /articles(.:format)          articles#create
 new_article GET    /articles/new(.:format)      articles#new
edit_article GET    /articles/:id/edit(.:format) articles#edit
     article GET    /articles/:id(.:format)      articles#show
             PATCH  /articles/:id(.:format)      articles#update
             PUT    /articles/:id(.:format)      articles#update
             DELETE /articles/:id(.:format)      articles#destroy

建立 controller

可以手動建立或是在終端機請rails幫我們建立,可以長出相關的檔案

rails generate controller articles

看一下檔案名稱及內部長怎麼樣吧

會在 app/controller 下面產生出相關的檔案,可以注意到 controller 名稱是叫做articles_controller.rb,點開檔案內部看看。

class ArticlesController < ApplicationController
end

裡面是一個類別叫做 ArticlesController 並且繼承自 ApplicationController
可以注意到檔名跟類別名稱不同,檔名是用蛇式、類別名稱則是大駝峰。

撰寫 action 對應到 view 去吧

如果我們只有寫好路徑,到那些我們想去的位置例如 index 的位置 (/articles) 會看到瀏覽器上面顯示錯誤訊息找不到 action

所以現在要寫個 index action 到 controller 裡面
同時也需要對應給個 view 的檔案讓這個 action 知道要把相關的資料控制到哪邊

action 建立

定義一個 index 的 action

class ArticlesController < ApplicationController  
  def index
  end
end

回到瀏覽器會看到,錯誤訊息變成找不到 template ,這個 template 其實就是我們在 rails 中會使用的 html.erb 檔案,也就是我們說的 view

view 建立

因為需要對應 index ,所以檔名也要跟 action 一樣,就建立一個檔案命名為 index.html.erb ,像這種特殊的 html.erb 檔案 可以同時在內部寫 html 標籤 及 ruby 的語法。

<h1>這裡是 articles 的 index </h1>

對應到 /articles 頁面就會看到我們建立好的標籤及內容

如何在view上面看到 controller 傳遞的參數

我們可以把 action 裡面寫上 render html: params

class ArticlesController < ApplicationController  
  def index
    render html: params
  end
end

瀏覽器的 view 就可以接受到 action 的執行內容,要把 params 呈現在畫面上,就會看到這個 view 對應的controller 還有 action 是什麼

如果在網址的後面加上 ? 後面跟的那串東西會被當做參數傳進一個特別的變數叫做 params。這是 Rails 預先幫我們定義好的,它可以捕捉到這個頁面的資訊,然後你就會看到頁面顯示成這樣。

這會讓你在設計路徑時多帶入一些參數,讓這個頁面可以做使用。


參考資料:

  1. 為你自己學 Ruby on Rails

上一篇
Day 17 - 進入Rails世界必須懂:Routes (下)
下一篇
Day 19 - 進入Rails世界必須懂:Model 相關介紹 及 CRUD (上)
系列文
一探紅寶石的神秘面紗 - Ruby 及 Rails入門介紹 系列30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言