Nodejs學習筆記（七）—Node.js + Express 構建網站簡單示例

阿新 • • 發佈：2018-06-17

ren 結構 crypto 中間件實現 cmd ews path releases

前言

　　上一篇學習了一些構建網站會用到的一些知識點：https://www.cnblogs.com/flyingeagle/p/9192936.html

　　這一篇主要結合前面講到的知識，去構建一個較為完整的網站應用程序，對前面學到的一些知道做一個串聯加深並靈活運用!

　　功能主要用MySQL數據庫，包括登錄、註冊、主頁三部分；下面就一步步開始吧！

新建項目、建立數據庫以及其它準備工作

1.新建express + ejs 項目：sampleEjs

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

2.創建數據庫 （還第四篇數據庫一致： http://www.cnblogs.com/flyingeagle/p/9192875.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"
  }
}

　　然後在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文件樣式如下：

navbar-static-top.css

body {
  min-height: 2000px;
}

.navbar-static-top {
  margin-bottom: 19px;
}

signin.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;
}

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

　　logout.js

3.views目錄下新建：

　　header.ejs

　　reg.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

header.ejs

<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登錄狀態判斷）

index.js

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）

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開發經驗的應該都知道怎麽去做以及該存儲什麽信息，實在不清楚的留言或郵件給我吧！

文章來源：https://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html

Nodejs學習筆記（七）—Node.js + Express 構建網站簡單示例

ren 結構 crypto 中間件實現 cmd ews path releases 前言　　上一篇學習了一些構建網站會用到的一些知識點：https://www.cnblogs.com/flyingeagle/p/9192936.html 　　這一篇主要結合前面講到的知識

Nodejs學習筆記（七）—Node.js + Express 構建網站簡單示例

前言

新建項目、建立數據庫以及其它準備工作

規劃路由，並新建相關文件

實現登錄和註冊需要的數據訪問方法

註冊

登錄

首頁

安全退出

寫在之後

Nodejs學習筆記（七）—Node.js + Express 構建網站簡單示例

Nodejs學習筆記（七）--- Node.js + Express 構建網站簡單示例

Nodejs學習筆記（六）--- Node.js + Express 構建網站預備知識

Nodejs學習筆記（八）—Node.js + Express 實現上傳文件功能（felixge/node-formidable）

Nodejs學習筆記（八）--- Node.js + Express 實現上傳檔案功能（felixge/node-formidable）

【轉】Nodejs學習筆記（一）--- 簡介及安裝Node.js開發環境

Nodejs學習筆記（一）--- 簡介及安裝Node.js開發環境

Nodejs學習筆記（四）—與MySQL交互（felixge/node-mysql）

vue.js學習筆記（七）--外掛

Nodejs學習筆記（四）與MySQL互動（felixge/node-mysql）

以太坊學習筆記（七）——Truffle整合Nodejs

Nodejs學習筆記（十四）— Mongoose介紹和入門 && Nodejs學習筆記（十）--- 與MongoDB的互動（mongodb/node-mongodb-native）、MongoDB入門

Nodejs學習筆記（四）--- 與MySQL互動（felixge/node-mysql）

Nodejs學習筆記（十）--- 與MongoDB的互動（mongodb/node-mongodb-native）、MongoDB入門

mysql學習筆記（七）—— MySQL內連接和外連接

Spring 學習筆記（七）—— 切入點表達式

EF學習筆記（七）：讀取關聯數據

Java語言基礎學習筆記（七）

python學習筆記（七）函數

PHP7 學習筆記（七）如何使用zephir編譯一個擴展記錄

Nodejs學習筆記（七）—Node.js + Express 構建網站簡單示例

前言

新建項目、建立數據庫以及其它準備工作

規劃路由，並新建相關文件

實現登錄和註冊需要的數據訪問方法

註冊

登錄

首頁

安全退出

寫在之後

相關推薦