POST傳遞表單

我們來建立一個POST的機制，首先，增加後端POST的處理：
index.js中增加router.post

router.post('/postdemo', function(req, res, next){
  var userName = req.body.userName;
  var password = req.body.password;
  if(userName == 'BigQ' && password == '30days'){
  	res.send('Hi!原來是'+ userName +'!恭喜完成29天挑戰囉！')
  }else{
  	res.send('Hi!!恭喜完成29天挑戰囉！')
  }
})

這段程式碼在伺服器端等待對/postdemo發送POST的要求，獲得要求後，透過req.body去找尋post內body所帶的參數，我們目標傳遞的參數有兩個，一個是userName，另一個是password。
p.s. 一般登入表單還是會在後端進行加密喔！

解析成功userName與password的值之後，就透過if偵測是否符合判斷條件中的資格，符合的話，回應一個頁面'Hi!原來是'+ userName +'!恭喜完成29天挑戰囉！'，不符合的話，回應'還記得帳號密碼嗎？恭喜完成29天挑戰囉！'，做一個登入表單的模擬。

前端填寫表格攜帶表單資料

找到我們原本就建好的index2.ejs，增加在<h2><%= haha %></h2>下面：

<form action='/postdemo' method='post'>
  <input type='text' name='userName' value='BigQ'>
  <input type='password' name='password' value=''>
  <input type='submit' value='Submit'>
</form>

這是HTML中的表單用法，第一行可以很清楚看到，from的屬性我們加了一個action，目標位置是'postdemo'，而方法是POST，所以接下來的表單內容會被夾在post的body中帶到目標位置裡面(也就是我們在index.js設計的API接口)。

第一個input的name就是後端req.body.找尋的key，所以後端req.body.userName要跟此處的name值相同，預設值寫在value。
第二個input相同邏輯，但加上type=passord可以預防前端看到輸入內容，會變成···
第三個input點下後就將前兩個欄位內容送出。

完成了！我們存檔後試看看啟動伺服器

http://localhost:3000/30days

依序輸入我們後端預設的BigQ與30days，就會獲得回應的頁面資訊，如果輸入錯，也會獲得另一個頁面資訊。