Spring 5 (含 Spring MVC) 新手村起手式之表單頁面初體驗 / GET v.s POST /
在上一篇文章中,我們有介紹關於「HelloController」的部分(詳見下方「Spring 5 (含 Spring MVC) 新手村起手式 之 HelloWorld
」一文:
而在這篇文章內,我們將延續上一次文章的內容,來加上表單畫面以及後端程式串接的介紹。
在網路上,小從個人部落格大到跨國電商,相信網頁表單的應用隨手可見 ~
如 會員註冊、關鍵字搜尋、電商下單 等等 都是應用的實例。
這篇就讓我們來手把手地來建立出自己的範(帝)例(國)吧。
實作步驟一二三
1. 建立表單頁面及欄位
2. 接收/處理 表單傳送的資料
3. 秀出處理完的表單資訊(或轉向其它頁面)
第一步: 建立表單頁面及欄位
接著上一次的HelloController範例,為了要在原來的頁面呈現表單欄位資料,所以我們在原本的root.html頁面裏,加上HTML相關的程式,如下圖
- Form 的標籤主要是標示畫面上 標示出表單的存在及範圍(*<Form>…</Form> 皆算是表單的內容)
- Form 標籤裏的action是用來設定表單送出後,欲傳送到主機端的接受網址。我們輸入的是 /login,等下可以看結果來對照。
(*這裏還有個設定 Method = “get” 簡單來說 就是透過網址列來傳遞參數)
- Input 的標籤主要是標示畫面上要呈現的元件,如文字框(text)、單選(radio)、按鈕(button)、送出鈕(submit) 等。(*註: 詳細元件型態 可見參考資料一)
頁面結果如下
第二步: 接收表單裏的資訊
為了要能收到表單送出的資料,首先我們要先在Controller裏加上要處理的動作(也就是要加寫個函式)。並且加上Annotation @GetMapping 來對應到 HTTP Get,如下圖的 Login()
至於接受表單資料的部份,我們則需要在函式的參數區來宣告二個變數來接受,並且要使用跟前面 HTML Form 裏面相同名稱的變數,如 loginId, pwd
(*其實還有其它方式 可以接受的到傳進來的參數,大家可以想想 ~
補充放在最後的備註二)
第三步: 秀出處理完的表單資訊(或轉向其它頁面)
確認可以接受到使用者表單的資訊後,接著就是結果的呈現了。
假設使用者輸入正確的帳密後,系統會秀出 PASS 的恭禧文字,所以在回傳值輸入,如下圖
得到的結果如下
是不是跟上一篇的Hello 裏,也有同樣的狀況 ~~~
也就是第24行的回傳值,如果直接輸入PASS,系統會當成要呈現PASS.html的內容,而 template資料夾裏如果沒有相對應的檔案…那就會…像上面一樣GG
所以這邊,我們需要一個做法,讓回傳值的字串 不要被當成檔案名稱,而是要直接當成結果回傳給瀏覽器,這時候 就是 @ ResponseBody 標籤的功能
修改後的程式碼如下
執行結果
最後,再用瀏覽器測試一次 ~
Wola !!!!!
這樣,我們就完成了HTML Form表單 可以讓使用者輸入資料,而後端的程式可以接續處理的範例 ~
總結
在這次的範例裏,我們有使用用下列二個新標籤
- @ GetMapping :
讓Controller函式裏的程式能處理瀏覽器HTTP Get要求 - @ ResponseBody :
讓Controller函式裏的回傳值能直接回傳給瀏覽器,而不是頁面的名稱
備註(一) :
HTML Form 表單支援二種 Method設定,一個是 GET,另一個是 POST
分別對應到 Spring裏的 @GetMapping 以及 @PostMapping 標籤
這二種的差異 可以先簡單想成 GET類型的資料是透過瀏覽器的網址列傳送,容易被使用者看到(甚至修改),而且不適合上傳檔案。
相反的,POST類型的資料 就不會出現在網址列,而且適合傳送較大量的資料包含檔案上傳。
(*HTTP GET 跟 POST 比較https://www.youtube.com/watch?v=9o_4lsOkQ3g )
備註(二)
在Spring 裏的Controller 如果需要存取HTTP相關的資訊,可以透用Dependency Injection (*依賴注入)的方式,在函式的參數區 搭配
javax.servlet.http.HttpServletRequest 即可,除了可以存取 表單裏的參數資料,另外包含 瀏覽器資訊,使用者IP位址 都是request 物件裏面可以提供的資訊
如下圖
練習
一、如果我們想要改成 帳密驗證成功後,轉址到 google.com,
而驗證失敗時秀出 「請重新輸入」 該如何修改 ?
二、接受HTML表單資料的方式,還有沒有其它方式,該如何修改 ?
(關鍵字 : Binding)
參考資料
(一) HTML 表單Input標籤一覽表https://www.w3schools.com/tags/tag_input.asp
(二) HTTP GET跟POST比較
https://www.youtube.com/watch?v=9o_4lsOkQ3g