目錄
前言
上一篇學習了一些構建網站會用到的一些知識點 http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp1.html
這一篇主要結合前面講到的知識，去構建一個較為完整的網站應用程序，對前面學到的一些知道做一個串聯加深並靈活運用!
功能主要用MySQL數據庫，包括登錄、注冊、主頁三部分；下面就一步步開始吧！
新建項目、建立數據庫以及其它准備工作
1.新建express + ejs 項目：sampleEjs
cd 工作目錄 express -e sampleEjs cd sampleEjs && npm install
2.創建數據庫 （還第四篇數據庫一致： http://www.cnblogs.com/zhongweiv/p/nodejs_mysql.html）
CREATE DATABASE IF NOT EXISTS nodesample CHARACTER SET UTF8; USE nodesample; SET FOREIGN_KEY_CHECKS=0; DROP TABLE IF EXISTS `userinfo`; CREATE TABLE `userinfo` ( `Id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主鍵', `UserName` varchar(64) NOT NULL COMMENT '用戶名', `UserPass` varchar(64) NOT NULL COMMENT '用戶密碼', PRIMARY KEY (`Id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='用戶信息表';
3.修改package.json文件,安裝session和mysql模塊
{
"name": "sampleEjs",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"express": "~4.0.0",
"static-favicon": "~1.0.0",
"morgan": "~1.0.0",
"cookie-parser": "~1.0.1",
"body-parser": "~1.0.0",
"debug": "~0.7.4",
"ejs": "~0.8.5", "express-session" : "latest", "mysql" : "latest"
}
}
主要是標紅部分(mysql如果是在這篇文章 http://www.cnblogs.com/zhongweiv/p/nodejs_mysql.html 中按照我的步驟安裝過了的，其實可以不用再安裝)，然后在cmd中運行
npm install
安裝完成后，打開app.js文件，添加如下代碼
var express = require('express'); var path = require('path'); var favicon = require('static-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var session = require('express-session'); ... //這里傳入了一個密鑰加session id app.use(cookieParser('Wilson')); //使用靠就這個中間件 app.use(session({ secret: 'wilson'})); ...
樣式： 樣式主要使用了bootstrap 3.0.3 https://github.com/twbs/bootstrap/releases/tag/v3.0.3
JQuery: jquery 1.11.1 http://jquery.com/download/
添加以上文件到項目中，目錄結構如下
不在bootstrap包中兩個css文件樣式如下：
body { min-height: 2000px; } .navbar-static-top { margin-bottom: 19px; }
body { padding-top: 40px; padding-bottom: 40px; background-color: #eee; } .form-signin { max-width: 330px; padding: 15px; margin: 0 auto; } .form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 10px; } .form-signin .checkbox { font-weight: normal; } .form-signin .form-control { position: relative; font-size: 16px; height: auto; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="text"] { margin-bottom: 10px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; }
刪除自帶的style.css文件
刪除routes目錄下user.js文件，並在app.js中刪除如下代碼
var users = require('./routes/users'); ... app.use('/users', users);
app.js文件中添加8000端口監聽
... app.listen(8000); ...
到這里，示例環境准備完畢！
規划路由，並新建相關文件
1.路由
首頁：/
注冊頁：/reg
登錄頁：/login
安全退出：/logout
(紅色表示需要新建的)
2.routes目錄下新建如下文件
reg.js
login.js
logout.js
3.views目錄下新建：
header.ejs
reg.ejs
login.ejs
4.打開app.js文件，添加如下代碼
... var routes = require('./routes/index'); var reg = require('./routes/reg'); var login = require('./routes/login'); var logout = require('./routes/logout'); ... app.use('/', routes); app.use('/reg', reg); app.use('/login', login); app.use('/logout', logout); ...
實現登錄和注冊需要的數據訪問方法
我們新建一個models文件夾，在其中新建user.js，實例代碼如下
var mysql = require('mysql'); var DB_NAME = 'nodesample'; var pool = mysql.createPool({ host : '192.168.0.200', user : 'root', password : 'abcd' }); pool.on('connection', function(connection) { connection.query('SET SESSION auto_increment_increment=1'); }); function User(user){ this.username = user.username; this.userpass = user.userpass; }; module.exports = User; pool.getConnection(function(err, connection) { var useDbSql = "USE " + DB_NAME; connection.query(useDbSql, function (err) { if (err) { console.log("USE Error: " + err.message); return; } console.log('USE succeed'); }); //保存數據 User.prototype.save = function save(callback) { var user = { username: this.username, userpass: this.userpass }; var insertUser_Sql = "INSERT INTO userinfo(id,username,userpass) VALUES(0,?,?)"; connection.query(insertUser_Sql, [user.username, user.userpass], function (err,result) { if (err) { console.log("insertUser_Sql Error: " + err.message); return; } connection.release(); console.log("invoked[save]"); callback(err,result); }); }; //根據用戶名得到用戶數量 User.getUserNumByName = function getUserNumByName(username, callback) { var getUserNumByName_Sql = "SELECT COUNT(1) AS num FROM userinfo WHERE username = ?"; connection.query(getUserNumByName_Sql, [username], function (err, result) { if (err) { console.log("getUserNumByName Error: " + err.message); return; } connection.release(); console.log("invoked[getUserNumByName]"); callback(err,result); }); }; //根據用戶名得到用戶信息 User.getUserByUserName = function getUserNumByName(username, callback) { var getUserByUserName_Sql = "SELECT * FROM userinfo WHERE username = ?"; connection.query(getUserByUserName_Sql, [username], function (err, result) { if (err) { console.log("getUserByUserName Error: " + err.message); return; } connection.release(); console.log("invoked[getUserByUserName]"); callback(err,result); }); }; });
有這三個方法，基本登錄注冊就夠了^_^!
注冊
1.先來布局一下HTML和CSS，加上前端驗證及一些提示信息顯示（reg.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" />
<link rel="stylesheet" type="text/css" href="/stylesheets/signin.css" />
</head>
<body>
<div id="container" class="container">
<% if (locals.success) { %>
<div id="alt_sucess" class="alert alert-success">
<%- success %>
</div>
<% } %>
<% if (locals.error) { %>
<div id="alt_warning" class="alert alert-warning">
<%= error %>
</div>
<% } %>
<form class="form-signin" role="form" method="post">
<h2 class="form-signin-heading">注冊</h2>
<input id="txtUserName" name="txtUserName" type="text" class="form-control" placeholder="用戶名" required autofocus />
<input id="txtUserPwd" name="txtUserPwd" type="password" class="form-control" placeholder="密碼" required/>
<input id="txtUserRePwd" name="txtUserRePwd" type="password" class="form-control" placeholder="重復密碼" required/>
<button id="btnSub" class="btn btn-lg btn-primary" type="submit">注 冊</button>
<a class="btn btn-link" href="/login" role="button">登 錄</a>
</form>
</div>
</body>
</html>
<script src="/javascripts/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
String.prototype.format = function (args) {
var result = this;
if (arguments.length > 0) {
if (arguments.length == 1 && typeof (args) == "object") {
for (var key in args) {
if (args[key] != undefined) {
var reg = new RegExp("({" + key + "})", "g");
result = result.replace(reg, args[key]);
}
}
}
else {
for (var i = 0; i < arguments.length; i++) {
if (arguments[i] != undefined) {
var reg = new RegExp("({)" + i + "(})", "g");
result = result.replace(reg, arguments[i]);
}
}
}
}
return result;
}
$(function(){
$('#btnSub').on('click',function(){
var
$txtUserName = $('#txtUserName'),
txtUserNameVal = $.trim($txtUserName.val()),
$txtUserPwd = $('#txtUserPwd'),
txtUserPwdVal = $.trim($txtUserPwd.val()),
$txtUserRePwd = $('#txtUserRePwd'),
txtUserRePwdVal = $.trim($txtUserRePwd.val()),
errorTip = '<div id="errorTip" class="alert alert-warning">{0}</div> ';
$("#errorTip,#alt_sucess,#alt_warning").remove();
if(txtUserNameVal.length == 0)
{
$("#container").prepend(errorTip.format('用戶名不能為空'));
$txtUserName.focus();
return false;
}
if(txtUserPwdVal.length == 0)
{
$("#container").prepend(errorTip.format('密碼不能為空'));
$txtUserPwd.focus();
return false;
}
if(txtUserRePwdVal.length == 0)
{
$("#container").prepend(errorTip.format('重復密碼不能為空'));
$txtUserRePwd.focus();
return false;
}
if(txtUserPwdVal != txtUserRePwdVal)
{
$("#container").prepend(errorTip.format('兩次密碼不一致'));
$txtUserPwd.focus();
return false;
}
return true;
})
});
</script>
2.實現注冊功能（reg.js）
var express = require('express'), router = express.Router(), User = require('../models/user.js'), crypto = require('crypto'), TITLE_REG = '注冊'; router.get('/', function(req, res) { res.render('reg',{title:TITLE_REG}); }); router.post('/', function(req, res) { var userName = req.body['txtUserName'], userPwd = req.body['txtUserPwd'], userRePwd = req.body['txtUserRePwd'], md5 = crypto.createHash('md5'); userPwd = md5.update(userPwd).digest('hex'); var newUser = new User({ username: userName, userpass: userPwd }); //檢查用戶名是否已經存在 User.getUserNumByName(newUser.username, function (err, results) { if (results != null && results[0]['num'] > 0) { err = '用戶名已存在'; } if (err) { res.locals.error = err; res.render('reg', { title: TITLE_REG }); return; } newUser.save(function (err,result) { if (err) { res.locals.error = err; res.render('reg', { title: TITLE_REG }); return; } if(result.insertId > 0) { res.locals.success = '注冊成功,請點擊 <a class="btn btn-link" href="/login" role="button"> 登錄 </a>' ; } else { res.locals.error = err; } res.render('reg', { title: TITLE_REG }); }); }); }); module.exports = router;
3.運行查看效果（命令行中cd到項目根目錄，運行: node app）
運行程序后，在瀏覽器中輸入： http://localhost:8000/reg ,運行后如下圖
前端提示如下圖：
注冊成功后提示與檢查數據庫中插入數據！
到這里，注冊功能完成（比如判斷用戶名是否已存在等情況顯示就不列舉了，自已寫出來運行再看!）
登錄
1.先來布局一下HTML和CSS，加上前端驗證及一些提示信息顯示（login.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" />
<link rel="stylesheet" type="text/css" href="/stylesheets/signin.css" />
</head>
<body>
<div id="container" class="container">
<% if (locals.success) { %>
<div id="alt_sucess" class="alert alert-success">
<%- success %>
</div>
<% } %>
<% if (locals.error) { %>
<div id="alt_warning" class="alert alert-warning">
<%= error %>
</div>
<% } %>
<form class="form-signin" role="form" method="post">
<h2 class="form-signin-heading">登錄</h2>
<input id="txtUserName" name="txtUserName" type="text" class="form-control" placeholder="用戶名" required autofocus />
<input id="txtUserPwd" name="txtUserPwd" type="password" class="form-control" placeholder="密碼" required/>
<label class="checkbox">
<input name="chbRem" id="chbRem" type="checkbox" value="remember-me"> 記住密碼
</label>
<button id="btnSub" class="btn btn-lg btn-primary" type="submit">登 錄</button>
<a class="btn btn-link" href="/reg" role="button">注 冊</a>
</form>
</div>
</body>
</html>
<script src="/javascripts/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
String.prototype.format = function (args) {
var result = this;
if (arguments.length > 0) {
if (arguments.length == 1 && typeof (args) == "object") {
for (var key in args) {
if (args[key] != undefined) {
var reg = new RegExp("({" + key + "})", "g");
result = result.replace(reg, args[key]);
}
}
}
else {
for (var i = 0; i < arguments.length; i++) {
if (arguments[i] != undefined) {
var reg = new RegExp("({)" + i + "(})", "g");
result = result.replace(reg, arguments[i]);
}
}
}
}
return result;
}
$(function(){
$('#btnSub').on('click',function(){
var
$txtUserName = $('#txtUserName'),
txtUserNameVal = $.trim($txtUserName.val()),
$txtUserPwd = $('#txtUserPwd'),
txtUserPwdVal = $.trim($txtUserPwd.val()),
errorTip = '<div id="errorTip" class="alert alert-warning">{0}</div> ';
$("#errorTip,#alt_warning").remove();
if(txtUserNameVal.length == 0)
{
$("#container").prepend(errorTip.format('用戶名不能為空'));
$txtUserName.focus();
return false;
}
if(txtUserPwdVal.length == 0)
{
$("#container").prepend(errorTip.format('密碼不能為空'));
$txtUserPwd.focus();
return false;
}
return true;
})
});
</script>
2.再來完成后端代碼（包括保存session和cookies記錄密碼）
var express = require('express'), router = express.Router(), User = require('../models/user.js'), crypto = require('crypto'), TITLE_LOGIN = '登錄'; router.get('/', function(req, res) { res.render('login',{title:TITLE_LOGIN}); }); router.post('/', function(req, res) { var userName = req.body['txtUserName'], userPwd = req.body['txtUserPwd'], isRem = req.body['chbRem'], md5 = crypto.createHash('md5'); User.getUserByUserName(userName, function (err, results) { if(results == '') { res.locals.error = '用戶不存在'; res.render('login',{title:TITLE_LOGIN}); return; } userPwd = md5.update(userPwd).digest('hex'); if(results[0].UserName != userName || results[0].UserPass != userPwd) { res.locals.error = '用戶名或密碼有誤'; res.render('login',{title:TITLE_LOGIN}); console.log(1); return; } else { if(isRem) { res.cookie('islogin', userName, { maxAge: 60000 }); } res.locals.username = userName; req.session.username = res.locals.username; console.log(req.session.username); res.redirect('/'); return; } }); }); module.exports = router;
3.運行查看效果
運行程序后，在瀏覽器中輸入： http://localhost:8000/login ,運行后如下圖
提示效果如下：
登錄成功后，會跳轉到首頁，下面我們就着手把首頁完成！
首頁
首頁主要為了測試登錄注冊的功能是否可可用，雖然首頁基本沒什么功能，但是我還是把它頭部放到了header.ejs文件中！
1.頭部HTML和CSS
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Porschev - Nodejs + Express + Ejs + MySQL + Bootstrap 示例</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<% if (locals.username) { %>
<li><a href="#">
<%= username %>
</a></li>
<li><a href="/logout">安全退出</a></li>
<% } %>
</ul>
</div>
</div>
</div>
2.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" />
<link rel="stylesheet" type="text/css" href="/stylesheets/navbar-static-top.css" />
</head>
<body>
<% include header %>
</body>
</html>
3.index.js實現（主要是cookies,session登錄狀態判斷）
var express = require('express'), router = express.Router(); router.get('/', function(req, res) { if(req.cookies.islogin) { console.log('cookies:' + req.cookies.islogin); req.session.username = req.cookies.islogin; } if(req.session.username) { console.log('session:' + req.session.username); res.locals.username = req.session.username; } else { res.redirect('/login'); return; } res.render('index',{title:'主頁'}); }); module.exports = router;
4.運行，登錄后，查看效果
登錄，不勾選自動登錄，運行http://localhost:8000 會自動跳到登錄頁
輸入正確的用戶名和密碼登錄成功后，頁面顯示如下（右上角的部分顯示了用戶名）
關閉瀏覽器，再次輸入http://localhost:8000 ，跳轉到登錄頁，需要重新登錄！
再次登錄，勾選自動登錄
進行首頁如上圖；
關閉瀏覽器，再次輸入http://localhost:8000，不會跳轉到登錄頁，而是直接登錄了！（cookies起了作用）
關閉瀏覽器，過一分鍾后，再輸入http://localhost:8000 ，跳轉到登錄頁 （cookies失效）
安全退出
安全退出主要就是清除session（logout.js）
var express = require('express'), router = express.Router(); router.get('/', function(req, res) { req.session.destroy(); res.redirect('/login'); }); module.exports = router;
實現效果：在不是自動登錄的情況下，登錄后點擊安全退出，不關閉瀏覽器，通過url再訪問首頁，無法直接進入，會跳轉到登錄頁！
寫在之后
這一篇主要是對前面所學的知識的運用，把零散的知識能真正變成能幫助你實現功能的技能！
示例並沒有過多去優化代碼，有很多可優化的部分，在學習的過程中去思考提升，比如：
1.怎么把代碼寫的更高效和優美
2.如果登錄驗證的部分都像index.js里那么寫，那頁多了怎么辦？
3.像header.ejs一樣的提取頁面公共部分怎么才能做得更好
...
提示：
1.上面示例中我提到了“自動登錄”，而我寫的是“記錄密碼”,大家就當自動登錄來用吧^_^!
2.關於session和cookies的實現登錄和自動登錄部分，示例主要為了體現運用，太懶沒有去按照實際規格去完成，有過web開發經驗的應該都知道怎么去做以及該存儲什么信息，實在不清楚的留言或郵件給我吧！