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

前言

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

起手式

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

1
npm install --save body-parser

取得表單資料

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

1
2
3
4
5
6
// 引入 body-parser
var bodyParser = require('body-parser');

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

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

1
2
3
4
5
6
7
<%- 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 內容如下

1
2
3
4
5
6
7
8
9
10
11
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,所以這邊我們要修改一下畫面

1
2
3
4
5
6
7
8
9
10
11
12
13
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 哩~

0%