上篇介紹了註冊,相對的就一定要來介紹登入的功能。在資料庫上定義了 username, userpass 的欄位,登入的時候就在頁面上擺上兩個輸入框,以及登入的按鈕。
在上一篇已經有建立好 models 的部分,在登入的操作也需要透過 models 向資料庫做存取,請打開 /models/user.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 //檢查是否為會員 User.getUserNumByName = function getUserNumByName(username, callback) { //使用username 來檢查是否有資料 var cmd = “select COUNT(1) AS num from user info where username = ?"; connection.query(cmd, [username], function (err, result) { if (err) { return; } connection.release(); //查詢結果使用 callback 呼叫,並將 err, result 參數帶入 callback(err,result); }); }; //透過帳號取得使用者資料 User.getUserByUserName = function getUserNumByName(username, callback) { var cmd = “select * from userinfo where username = ?"; connection.query(cmd, [username], function (err, result) { if (err) { return; } connection.release(); callback(err,result); }); };
然後請在 routes/ 資料夾 (如果沒有請自行建立)新增 login.js 檔案,在這檔案要特別注意的是,當登入表單送出的時候,如果是會員的話,那麼在登入進到主頁時,將使用者帳號寫到 session 上面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 var express = require('express'), User = require('../models/user.js'), router = express.Router(), crypto = require('crypto'), title = '登入'; router.get('/', function(req, res) { res.render('login', {title:title}); }); router.post('/', function(req, res) { var userName = req.body['txtUserName'], userPwd = req.body['txtUserPwd'], md5 = crypto.createHash('md5'); User.getUserByUserName(userName, function (err, results) { if(results == '') { res.locals.error = '使用者不存在'; res.render('login',{title:title}); return; } userPwd = md5.update(userPwd).digest('hex'); if(results[0].UserName != userName || results[0].UserPass != userPwd) { res.locals.error = '使用者帳號或密碼錯誤'; res.render('login',{title:title}); return; } else { res.locals.username = userName; //設定session req.session.username = res.locals.username; console.log(req.session.username); res.redirect('/'); return; } }); }); module.exports = router;
一切基本動作準備好之後,接著就打開 app.js 新增 login 的 router 路由,而這個路由將真的表單的請求作處理,在以下的兩行程式所代表的是指定載入路由的寫法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 var login = require('./routes/login’); app.use('/login', login); view 檢視 請在 /views/ 建立 index.ejs <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><%= title %></title> <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css" /> </head> <body> <div class="container"> <% if (locals.username) { %> <h1>您好, <%= username %></h1> <a href="/logout">登出</a> <% } %> </div> </body> </html>
已知註冊的帳號密碼是 test / 123456
登出 有了登入之後,也別忘了登出,登出的寫法也相當容易,由於本章節是將註冊的帳號用 session 保存,而登出只需要將 session 銷毀即可,銷毀之後,再退到登入頁面。程式如下:
1 2 3 4 5 6 7 8 9 var express = require('express'), router = express.Router(); router.get('/', function(req, res) { req.session.destroy(); res.redirect('/login'); }); module.exports = router;