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

cd 工作目录
express -e sampleEjs
cd sampleEjs && npm install

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=‘用户信息表‘;

{
  "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"
  }
}

npm install

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‘}));

...

var users = require(‘./routes/users‘);

...

app.use(‘/users‘, users);

...
app.listen(8000);
...

...

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);

...

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);                     
        });        
    };
 
});

<!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="http://www.mamicode.com/stylesheets/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/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="http://www.mamicode.com/login" role="button">登  录</a>
      </form>  
      
    </div> 
  </body>
</html>

<script src="http://www.mamicode.com/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>

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="http://www.mamicode.com/login" role="button"> 登录 </a>‘ ;
          }
          else
          {
              res.locals.error = err;
          }
         
          res.render(‘reg‘, { title: TITLE_REG });
          });    
    });          
});

module.exports = router;