iT邦幫忙

2022 iThome 鐵人賽

DAY 20
1
自我挑戰組

電腦、網路大解密 系列 第 20

Day 20 - View 和 HTML

  • 分享至 

  • xImage
  •  

上回解釋了 Routing 和 Controller 負責依照客戶端來的 HTTP 請求的 URL、Method,將請求分配給相對應的 Controller 中定義的方法,執行後端想要對該請求做的事情。如果 HTTP 請求的 Method 是 GET 的話,通常會是從資料庫中拿資料,然後回傳給客戶端;如果是 POST、PUT、DELETE 等 Method,則可能會新增、修改或刪除資料庫中的資料。同樣的是,最後都會回傳 HTTP 回應給客戶端。

HTTP Response

HTTP 回應主要分為 Header 和 Body。

Header 是關於這個回應的一些基本資訊,例如 status 會是一個數字,用來表示這次請求的結果, 200 表示成功、 404 表示找不到…,詳細列表可以在這邊找到。另外還有 content-type 用來表示回應 Body 的格式、 content-length 表示回應的大小等。除次之外,其實也可以依照自己的需求,自訂想要給客戶端知道的資料。

Body 則是回應的主體,可以有不同的格式,前面提到 Header 的 content-type 就是用來幫助客戶端判斷要如何顯示回應主體的依據。最常見的格式就是 HTML 了。

HTML

我們用瀏覽器開啟任一網頁,按下 F12 會跳出一個小視窗,這個是大部分瀏覽器都有提供的開發者工具,選到 Elements 分頁,就能看到網頁的 HTML 了。
https://ithelp.ithome.com.tw/upload/images/20221005/20152627TPyCQVY8NH.png

HTML 全名是 HyperText Markup Language,是一種標記語言,主要是用來排版網頁內容。其中會很多標記,一個標記會是一組成對的角括號包起來,像是 <h1> This is a title. </h1>。另外標記中也可以有標記,形成巢狀的結構,例如

<html>
	<body>
		<p> My name is Jack </p>
	</body>
</html>

不同的標記有不同的意思,例如 h1 表示大標題,而瀏覽器會負責解讀標記的意思,將內容正確地顯示給使用者。

View

Controller 方法的最後,會要回傳 HTTP 回應給客戶端,我們可以選擇一個 Template 來建立回應的內容。如果想要在 HTML 加入動態的資料,例如依據請求給的 article ID,回傳特定的文章內容,可以使用 Rails 提供的 Template 功能。

Template 長得有點像 HTML,但是加入了一些特殊符號,讓 Rails 知道怎麼帶入動態的資訊,例如上上回顯示文章內容的 Template, <%= @article.title %> 就表示要帶入文章的標題

<p>
  <strong>Title:</strong>
  <%= @article.title %>
</p>
 
<p>
  <strong>Text:</strong>
  <%= @article.content%>
</p>

之前介紹 Rails 有提到過 Rails 喜歡慣例,讓我們不必特別指定一個檔案位置,例如

class ArticlesController < ApplicationController
    def new
    end
end

ArticlesController 的 new 方法,Rails 會自動拿慣例的 app/views/articles/new.html.erb當作 Template。當然,也可以特別指定,或是使用不同格式來當作回應。


上一篇
Day 19 - Routing 和 Controller
下一篇
Day 21 - Model
系列文
電腦、網路大解密 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言