目录
前言
上一篇学习了一些构建网站会用到的一些知识点 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开发经验的应该都知道怎么去做以及该存储什么信息，实在不清楚的留言或邮件给我吧！
![[转老白]根据OSS帐号安装SAP Service网站证书](/image/default/fj.png)
