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
