Nodejs学习笔记（七）--- Node.js + Express 构建网站简单示例

352262 · 发表于 2017-2-22 10:44:28

前言
新建项目、建立数据库以及其它准备工作
- 新建express + ejs 项目：sampleEjs
- 创建数据库
- 修改package.json文件,安装session和mysql模块
- 样式和JQuery文件
- 清理项目冗余文件，并添加监听
规划路由，并新建相关文件
实现登录和注册需要的数据访问方法
注册
登录
首页
安全退出
写在之后

前言
　　上一篇学习了一些构建网站会用到的一些知识点 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'}));
...
　　4.样式和JQuery文件
　　样式：　　样式主要使用了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;
}
navbar-static-top.css

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;
}
signin.css　　5.清理项目冗余文件，并添加监听
　　删除自带的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 != undefined) {
var reg = new RegExp("({)" + i + "(})", "g");
result = result.replace(reg, arguments);
}
}
}
}
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 != undefined) {
var reg = new RegExp("({)" + i + "(})", "g");
result = result.replace(reg, arguments);
}
}
}
}
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>
login.ejs 示例　　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;
login.js　　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>
header.ejs　　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>
index.ejs　　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;
index.js　　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;
logout.js　　实现效果：在不是自动登录的情况下，登录后点击安全退出，不关闭浏览器，通过url再访问首页，无法直接进入，会跳转到登录页！

写在之后
　　这一篇主要是对前面所学的知识的运用，把零散的知识能真正变成能帮助你实现功能的技能！
　　示例并没有过多去优化代码，有很多可优化的部分，在学习的过程中去思考提升，比如：
　　1.怎么把代码写的更高效和优美
　　2.如果登录验证的部分都像index.js里那么写，那页多了怎么办？
　　3.像header.ejs一样的提取页面公共部分怎么才能做得更好
　　...
　　提示：
　　1.上面示例中我提到了“自动登录”，而我写的是“记录密码”,大家就当自动登录来用吧^_^!
　　2.关于session和cookies的实现登录和自动登录部分，示例主要为了体现运用，太懒没有去按照实际规格去完成，有过web开发经验的应该都知道怎么去做以及该存储什么信息，实在不清楚的留言或邮件给我吧！

账号		自动登录	找回密码
密码			立即注册

wirelessnetview好用的无线分析工具

Red Hat RHCE 8 (EX294) Cert Guide

Shell从入门到精通（阿良）

亿图图示专家(EDraw Max) V7.9 中文破解版

zabbix3.4.1安装部署+微信推送信息+大屏显

Red Hat OpenShift I: Containers & Kubern

2025 年，C++ 还能“硬核”多久？

[经验分享] Nodejs学习笔记（七）--- Node.js + Express 构建网站简单示例

浏览过的版块

扫码加入运维网微信交流群