全端勇士之路 Node.js 基礎學習-Express 取得表單資料&跳轉頁面

發表於 2019-07-01 分類於 Nodejs

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

接下來記錄一下取得表單資料以及跳轉頁面的方法

前言

接下來記錄一下取得表單資料以及跳轉頁面的方法

起手式

在要取得表單資料之前，我們必須先安裝一個套件

1	npm install --save body-parser

取得表單資料

接下來就是要進去 app.js 做一下修改啦~因為要使用 body-parser，所以內容就要做一下調整

// 引入 body-parser
var bodyParser = require('body-parser');

// Express 使用 body-parser
router.use(bodyParser.json());// 內容支援 JSON 格式
router.use(bodyParser.urlencoded({extended: false})) // 解析表單內容

接下來新增一個 login.ejs，並且內容如下

<%- include('header') %>
  <form action="/login" method="post">
    <input type="text" name="account">
    <input type="password" name="account">
    <input type="submit" value="送出表單">
  </form>
<%- include('footer') %>

並且新增兩個個 router 內容如下

router.get('/login', function(req, res) {
  res.render('login');
})

router.post('/login', function(req, res) {
  // req → request
  // res → response
  var account = req.body.account; // 注意 body 是透過 input name 去抓取得唷
  var password = req.body.password;
  console.log(account);
})

此時輸入 node app.js 就可以看到畫面哩

app.js

這時候我們可以輸入帳號或密碼送出看看，你會發現可以取得表單欄位得資料了

取得表單欄位資料

跳轉頁面

當我們輸入完畢後送出，Express 也可以正常取得資料，假設資料處理完畢，驗證完畢，但是會發現畫面一直在旋轉卡住

一直旋轉

所以這邊要使用一個語法，也就是跳轉語法，當資料驗證完畢且沒問題就會跳轉到另一個頁面，這邊就要使用一個語法叫做 redirect，所以這邊我們要修改一下畫面

router.get('/login', function(req, res) {
  res.render('login');
})

router.post('/login', function(req, res) {
  // req → request
  // res → response
  var account = req.body.account; // 注意 body 是透過 input name 去抓取得唷
  var password = req.body.password;
  console.log(account);
  // ... 驗證通過跳轉
  res.redirect('/admin'); // 跳轉到 admin
})

這樣子送出資料之後若驗證成功就會跳轉到 admin 哩~