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

前言

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

起手式

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

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 哩~

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

前言

起手式

取得表單資料

跳轉頁面

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

起手式

取得表單資料

跳轉頁面

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

全端勇士之路 Node.js-OAuth 2.0 & nodemailer & Gmail

全端勇士之路 Node.js 基礎學習-會員機制(4)

全端勇士之路 Node.js 基礎學習-會員機制(3)

全端勇士之路 Node.js 基礎學習-會員機制(2)

分享這篇文章

留言