2. 程式人生 > >Nodejs學習筆記（六）--- Node.js + Express 構建網站預備知識

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

阿新 • • 發佈：2019-01-12

目錄

前言

　　前面經過五篇Node.js的學習，基本可以開始動手構建一個網站應用了，先用這一篇瞭解一些構建網站的知識！

　　主要是些基礎的東西...

　　如何去建立路由規則、如何去提交表單並接收表單項的值、如何去給密碼加密、如何去提取頁面公共部分（相當於使用者控制元件和母版頁）等等...

　　下面就一步步開始吧^_^!...

新建express專案並自定義路由規則

 　　1.首先用命令列express+ejs建立一個專案sampleEjsPre

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

　　2.預設會有routes目錄下會有index.js和users.js檔案，這裡為了不產生其它示例外的困擾，刪除user.js檔案

　　3.開啟app.js檔案刪除下面兩行程式碼

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

...

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

　　4.在app.js檔案中新增如下程式碼

var subform = require('./routes/subform');
var usesession = require('./routes/usesession');
var usecookies = require('./routes/usecookies');

 
var usecrypto = require('./routes/usecrypto');            

...

app.use('/subform', subform);
app.use('/usesession', usesession);
app.use('/usecookies', usecookies);
app.use('/usecrypto', usecrypto);

　　5.在routes目錄下新增subform.js、usesession.js、usecookies.js、usecrypto.js檔案，並在對應的js檔案中新增如下程式碼

var
 
 express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
  res.render('subform', { title: '提交表單及接收引數示例' });
});

module.exports = router;
subform.js 程式碼 
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
  res.render('usesession', { title: '使用session示例' });
});

module.exports = router;
usesession.js 程式碼 
var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
  res.render('usecookies', { title: '使用cookies示例' });
});

module.exports = router;
usecookies.js 程式碼 
var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
  res.render('usecrypto', { title: '加密字串示例' });
});

module.exports = router;
usecrypto.js 程式碼

　　6.在views目錄下新增subform.ejs、usesession.ejs、usecookies.ejs、usecrypto.ejs檔案,並在views目錄下除了error.ejs外所有ejs檔案中新增如下程式碼

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>     
    <a href="/">首頁</a>     
    <a href="/subform">如何提交表單並接收引數?</a>
    <a href="/usesession">如何使用session?</a>
    <a href="/usecookies">如何使用cookies?</a>
    <a href="/usecrypto">如何字串加密?</a>
  </body>
</html>

　　7.在app.js中新增8000埠監聽並執行

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

 　　執行介面如下：

　　點選各連結都能正常跳轉到對應的頁面！這樣第一步的目錄就算達到了！

如何提取頁面中的公共部分?

　　在上一步建立的網站中每個頁面都幾乎一樣，現在都只有導航部分？每個頁都要寫？當然不是，我們可以提取出來

　　1.在views目錄下新建一個nav.ejs檔案，並新增如下程式碼

<a href="/">首頁</a>     
<a href="/subform">如何提交表單並接收引數?</a>
<a href="/usesession">如何使用session?</a>
<a href="/usecookies">如何使用cookies?</a>
<a href="/usecrypto">如何字串加密?</a>

　　2.把views目錄下index.ejs、subform.ejs、usesession.ejs、usecookies.ejs、usecrypto.ejs修改成如下程式碼

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>     
      <% include nav %>
  </body>
</html>

　　執行頁面，發現和上次執行時沒有作何區別，有了這樣的辦法更有利於減少重複程式碼、也更有利於統一佈局！

<% include 檔名 %> express提供include來嵌入其它頁，這和html嵌入其它頁類似

如果用過express2.0版本的會發現當時沒有這個include，用的是一個模版檔案layout.ejs來佈局!

如何提交表單並接收引數?

　　如果要做一個網站應用，不可避免的會遇到表單的提交及獲取引數的值，下面我們來看看用node.js + express怎麼做

　　先來構建一個表單簡單模擬登入GET方式提交資料

 　　1.開啟subform.ejs檔案，修改檔案程式碼為如下：

　　

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>     
      <% include nav %>
      
      <form>
          使用者名稱：<input type="text" id="txtUserName" name="txtUserName" />
          密碼：<input type="password" id="txtUserPwd" name="txtUserPwd" />
          <input type="submit" value="提交">
      </form>
    
  </body>
</html>
subform.ejs 示例程式碼

　　2.開啟subform.js我們試著接收引數值並輸出到控制檯

　　

var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
  var 
  userName = req.query.txtUserName,
  userPwd = req.query.txtUserPwd,
  userName2 = req.param('txtUserName'),
  userPwd2 = req.param('txtUserPwd');

  console.log('req.query使用者名稱:'+userName);
  console.log('req.query密碼:'+userPwd);
  console.log('req.param使用者名稱:'+userName2);
  console.log('req.param密碼:'+userPwd2);

  res.render('subform', { title: '提交表單及接收引數示例' });
});

module.exports = router;
subform.js get方式原始碼

　　3.執行，並提交表單 在瀏覽器中執行：http://localhost:8000/subform，輸入表單項並提交，可以發現url發生了變化

　　

　　可以發現url中出現了我表單中輸入並要提交的值！

　　我們再看看控制檯的輸出

　　

　　 我們完成了GET方式提交表單並接收到了值，不錯^_^!（稍後在後面再去講得到值的方式和區別）

　　再來在上面的程式碼基礎上去修改一下表單的method簡單模擬登入POST方式提交資料

　　1.首先修改一下subform.ejs檔案中的form標籤，修改為如下：

<form method="post">
...
</form>

　　2.再在subform.js中新增程式碼，接收post提交、接收引數並輸出到控制檯

...

router.post('/',function(req, res){
  var 
  userName = req.body.txtUserName,
  userPwd = req.body.txtUserPwd,
  userName2 = req.param('txtUserName'),
  userPwd2 = req.param('txtUserPwd');

  console.log('req.body使用者名稱:'+userName);
  console.log('req.body密碼:'+userPwd);
  console.log('req.param使用者名稱:'+userName2);
  console.log('req.param密碼:'+userPwd2);

　res.render('subform', { title: '提交表單及接收引數示例' });

});

...

　　3.執行，並提交表單 在瀏覽器中執行：http://localhost:8000/subform，輸入表單項並提交，可以發現url不會發生變化

　　

　　改為post方式後，會發現不會跟get方式提交一樣在url中出現了表單中輸入並要提交的值！

　　我們再看看控制檯的輸出

　　

　　OK，我們完成了POST提交表單並接收引數!

　　再回過頭看看GET和POST方式接收值，從直接效果上來看

　　req.query：我用來接收GET方式提交引數

　　req.body：我用來接收POST提交的引數

　　req.params：兩種都能接收到

　　這裡著重解釋一下req.body，Express處理這個post請求是通過中介軟體bodyParser，你可以看到app.js中有一塊程式碼

...

var bodyParser = require('body-parser');

...

app.use(bodyParser.json());
app.use(bodyParser.urlencoded());

...

　　沒有這個中介軟體Express就不知道怎麼處理這個請求，通過bodyParser中介軟體分析 application/x-www-form-urlencoded和application/json請求，並把變數存入req.body，這種我們才能夠獲取到！

如何字串加密?

　　當我們提交表單後，比如密碼這些敏感資訊，不做個加密處理那也太不把使用者私密資訊當回事了，Node.js提供了一個加密模組 Crypto http://nodejs.org/api/crypto.html

　　下面我們用個示例使用一下

　　1.開啟usecrypto.js，修改程式碼為如下：

var express = require('express');
var router = express.Router();
var crypto = require('crypto');

/* GET home page. */
router.get('/', function(req, res) {
  
  res.render('usecrypto', { title: '加密字串示例' });
 
});

router.post('/',function(req, res){
  var 
  userName = req.body.txtUserName,
  userPwd = req.body.txtUserPwd;

  //生成口令的雜湊值
  var md5 = crypto.createHash('md5');   //crypto模組功能是加密並生成各種雜湊
  var en_upwd = md5.update(userPwd).digest('hex');

  console.log('加密後的密碼:'+en_upwd);
  
  res.render('usecrypto', { title: '加密字串示例' });
});

module.exports = router;

　　2.開啟usecrypto.ejs，修改程式碼為如下

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>     
      <% include nav %>

      <form method="post">
          使用者名稱：<input type="text" id="txtUserName" name="txtUserName" />
          密碼：<input type="password" id="txtUserPwd" name="txtUserPwd" />
          <input type="submit" value="提交">
      </form>
  </body>
</html>

　　3.執行，輸入並提交表單，檢視控制元件臺輸出

　　

　　成功MD5方式加密！

　　其中用到了createHash(algorithm)方法 ,這是利用給定的演算法生成hash物件 

　　Node.js提供的加密模組功能非常強大，Hash演算法就提供了MD5、sha1、sha256等，根據需要去使用

　　update(data, [input_encoding])方法，可以通過指定的input_encoding和傳入的data資料更新hash物件，input_encoding為可選引數，沒有傳入則作為buffer處理 （input_encoding可為'utf-8'、'ascii'等）

　　digest([encoding])方法，計算資料的hash摘要值，encoding是可選引數，不傳則返回buffer (encoding可為 'hex'、'base64'等)；當呼叫digest方法後hash物件將不可用；

如何使用session?

　　Internet通訊協議分為stateful和stateless兩類，對Web開發有一定了解的應該知道，http是stateless協議，客戶端傳送請求到服務端建立一個連線，請求得得到響應後連線即中斷，伺服器端不會記錄狀態，因此伺服器端想

　　要確定是哪個客戶端提交過來的請求，那就必須要藉助一些東西去完成，就是session和cookies，現在我們先說說session，以及在nodejs下使用session !

　　session存在於伺服器端，需要cookies的協助才能完成；伺服器端和客戶端通過session id來建立聯絡（具體session和cookies怎麼協作的，可以自已去補充點相關知識，這裡只簡單提一下，不展開了，要不然這篇文章就更雜了^_^!）

　　express中可以用中介軟體來使用session，express-session( https://github.com/expressjs/session ) 可以存在記憶體中，也可以存在mongodb、redis等中...

　　下面我們通過示例看看怎麼使用session  (記憶體方式)

　　示例設計思路：使用兩個頁面，一個登入，兩個頁都判斷是否有這個session,如果有，顯示已登入，沒有則顯示一個登入按鈕，點此按鈕，記錄session

　　1.首先通過npm安裝這個中介軟體，開啟package.json檔案，在dependencies節點下新增一個鍵值對  "express-session" : "latest" 

  "dependencies": {
    ...,
    "express-session" : "latest" 
  }

　　lateset：最新的

　　2. cd到專案根目錄下，執行npm install

　　

　　3.開啟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'}));

...

　 這些options就不解釋了，通過上面中介軟體的連結，自已看一下

　　4.我這裡使用usesession和usecookies作示例，修改js和ejs如下

　　

　　

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>     
      <% include nav %>

      <% if(locals.islogin){ %>
         使用者已登入
    <% } else { %>
         <form method="post">          
              <input type="submit" value="登入">
          </form>
    <% } %>
  </body>
</html>
usesession.ejs 和 usecookies.ejs 
var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
  
  if(req.session.islogin)
  {
       console.log('usesession:' + req.session.islogin);
     res.locals.islogin = req.session.islogin;      
  }

  res.render('usesession', { title: '使用session示例' });
});

router.post('/', function(req, res) {
  
  req.session.islogin = 'success';
  res.locals.islogin = req.session.islogin;

  res.render('usesession', { title: '使用session示例' });
});

module.exports = router;
usession.js 示例程式碼 
var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {

  if(req.session.islogin)
  {
      console.log('usecookies:' + req.session.islogin);
    res.locals.islogin = req.session.islogin;      
  }

  res.render('usecookies', { title: '使用cookies示例' });
});

router.post('/', function(req, res) {
  
  req.session.islogin = 'success';
  res.locals.islogin = req.session.islogin;

  res.render('usecookies', { title: '使用cookies示例' });
});

module.exports = router;
usecookies.js 示例程式碼

　　5.執行並檢視

　　第一次執行時，檢視兩個頁，效果如下：

　　

　　

　　6.點選登入按鈕後，再檢視這兩個頁

　　

　　

　　7.關閉瀏覽器，再開啟檢視這兩個頁，如第5步截圖效果

　　session的使用成功!

如何使用cookies?

　　如果是登入，那常見就是“記錄密碼”或“自動登入”功能，這個一般用 cookies來完成

　　cookies存在客戶端，安全性較低，一般要存入加密後的資訊；建議要設定使用過期時間或不使用時刪除掉

      老套路，通過一個示例瞭解一下

　  示例設計思路：在上面session示例的基礎上，在usecookies部分登入同時記錄cookies，來自動登入

      1.在上面session示例的基礎上修改一下usecookies.js

var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
   
  if(req.cookies.islogin)
  { 
       console.log('usecookies-cookies:' + req.cookies.islogin);
       req.session.islogin = req.cookies.islogin;
  }  
  
  if(req.session.islogin)
  {
      console.log('usecookies:' + req.session.islogin);
    res.locals.islogin = req.session.islogin;      
  }

  res.render('usecookies', { title: '使用cookies示例' });
});

router.post('/', function(req, res) {
  
  req.session.islogin = 'success';
  res.locals.islogin = req.session.islogin;

  res.cookie('islogin', 'sucess', { maxAge: 60000 });

  res.render('usecookies', { title: '使用cookies示例' });
});

module.exports = router;

　　2.執行訪問 http://localhost:8000/usecookies，點選登入按鈕登入成功並記錄cookies

         maxAge為過期時長，毫秒為單位，我設定一分鐘

　　3.關閉瀏覽器，再次訪問http://localhost:8000/usecookies ，頁面顯示已登入

       4.再次關閉瀏覽器，過一分鐘再訪問http://localhost:8000/usecookies，頁面不再是已登入，而是顯示登入按鈕，表示cookies過期，不會自動登入

　　cookies的使用到此也成功！

如何清除session和cookies?

　　清除非常簡單，就不用示例說明了，有興趣自已定義個路由規則，試試

//清除cookies
res.clearCookie('islogin');
  
//清除session
req.session.destroy();

寫在之後

　　最近比較忙，更新距上了篇時間較長了，本篇東西講的比較雜，講到的也比較有限，主要是為了後來會寫的一個示例打基礎；

　　本篇內容講到的一些知識點，其實都可以單獨拿一整篇去講，本篇基本原則是為了看了之後能使用；

　　要想弄清楚原理或者更多的相關知識，自已可以花點時間去了解，或者找點資料去豐富一下，當然也可以留言，在我覺得我沒亂說的情況下我會盡量解答^_^！

相關推薦

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

目錄 前言 　　前面經過五篇Node.js的學習，基本可以開始動手構建一個網站應用了，先用這一篇瞭解一些構建網站的知識！ 　　主要是些基礎的東西... 　　如何去建立路由規則、如何去提交表單並接收表單項的值、如何去給密碼加密、如何去提取頁面公共部分（相當於使用者控制元件和母版頁）等等...

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

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

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

目錄 前言 　　這一篇主要結合前面講到的知識，去構建一個較為完整的網站應用程式，對前面學到的一些知道做一個串聯加深並靈活運用! 　　功能主要用MySQL資料庫，包括登入、註冊、主頁三部分；下面就一步步開始吧！ 新建專案、建立資料庫以及其它準備工作 　　1.新建express + ejs

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

blog args 一個 type屬性 ole java mod device 前端 前言 　　前面講了一個構建網站的示例，這次在此基礎上再說說web的常規功能----文件上傳，示例以一個上傳圖片的功能為例子 　　上傳功能命名用formidable實現，示例很簡單! 　　P

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

目錄 前言 　　前面講了一個構建網站的示例，這次在此基礎上再說說web的常規功能----檔案上傳，示例以一個上傳圖片的功能為例子 　　上傳功能命名用formidable實現，示例很簡單! 　　PS：最近比較忙，距上一次更新已經比較久了^_^! formidable簡介 　　nodejs

Nodejs學習筆記（六）----- 模塊系統和函數

參數 spa 而且 split response 另一個 簡約 也有 方法 Node.js模塊系統------->有開發基礎很好理解 為了讓Node.js的文件可以相互調用，Node.js提供了一個簡單的模塊系統。 模塊是Node.js 應用程序的基本組成部分，文件和

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

ack 目錄 javascrip 難度 時間 網站開發 clas jetbrains 常用 目錄 學習資料 簡介 安裝Node.js npm簡介 開發工具 Sublime Node.js開發環境配置 擴展：安裝多版本管理器 學習資料 　　1.深入淺出Node.j

Node.js學習筆記（六）Mongoose的使用

Mongoose的使用 文章目錄 Mongoose的使用 1. 什麼是Mongoose 2. Mongoose開始 3. Mongoose 操作 MongoDB 3.1 建立連線 3.2 定義文件規則 Schema

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

目錄 學習資料 　　2.Node.js開發指南 簡介（只撿了我覺得重要的） Node.js是讓Javascript脫離瀏覽器執行在伺服器的一個平臺，不是語言；Node.js採用的Javascript引擎是來自Google Chrome的V8；執行在瀏覽器外不用考慮頭疼的Java

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

ted iss eid 所在 err password soc deb 大連 簡介和安裝 　　Node.js與MySQL交互操作有很多庫，具體可以在 https://www.npmjs.org/search?q=mysql 查看。 　　我選擇了felixge/node-m

vue.js學習筆記（六）--利用v-model實現父子元件間的雙向通訊

部落格：https://fisher-zh.github.io/ 在Vue中，我們可以使用prop屬性來進行父子元件間的通訊，在之前的文章Vue踩坑之路–父子元件通訊總結中有介紹過。 但是prop 是單向繫結的，我們無法在元件中直接修改prop傳遞的屬性。

d3.js學習筆記（六）樹圖

樹形圖直觀的反應了資料之間的層次關係是現實應用中使用的比較普遍的一類圖形化資料表示方法，使用d3.js繪製樹狀圖的過程中，採取橫縱座標交換方式，可實現思維導圖形式的樹狀圖，示例程式碼如下： var width = 800, height = 800;

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

                目錄簡介和安裝 測試MySQL 認識一下Connection Opti

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

目錄 簡介 　　MongoDB  　　開源，高效能的NoSQL資料庫；支援索引、叢集、複製和故障轉移、各種語言的驅動程式；高伸縮性； 　　node-mongodb-native 　　mongodb的nodejs驅動； MongoDB安裝(windows) 　　按照官方說明在win7 64位

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

目錄 簡介和安裝 　　我選擇了felixge/node-mysql，用的人比較多，先隨大溜看看它的使用，暫時沒有太過糾結於各庫之間的執行效能問題，對其它庫有研究的筒子也可以分享一下效能要求較高時的選擇^_^!  This is a node.js driver for mys

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

目錄 簡介 　　MongoDB  　　開源，高效能的NoSQL資料庫；支援索引、叢集、複製和故障轉移、各種語言的驅動程式；高伸縮性； 　　node-mongodb-native 　　mongodb的nodejs驅動； MongoDB安裝(windows) 　　按照官方

MySQL學習筆記（六）—— MySQL自連接

概念 cor 子查詢 ron 表操作 例子 質量 _id order by 有的時候我們需要對同一表中的數據進行多次檢索,這個時候我們可以使用之前學習過的子查詢,先查詢出需要的數據,再進行一次檢索。 例如:一張products表,有產品id,供應商id(vend_

學習筆記（六）

tde 監聽 文本 ren 頁面 define www 顯示 back BUG集錦：1. storage on 事件監聽必須兩個頁面同時打開，且處於服務器訪問狀態2. submit 和 button 不能套在 a 裏面，否則 submit 事件將消失3. 新建 Object

機器學習筆記（六）邏輯回歸

邏輯回歸 alt 表示 結果 不變 改變 最小值 nbsp 可能性 一、邏輯回歸問題 二分類的問題為是否的問題，由算出的分數值，經過sign函數輸出的是（+1，-1），想要輸出的結果為一個幾率值，則需要改變函數模型 ，其中，， 則邏輯回歸的函數為 二、邏輯回歸錯誤評價 線性

jquery學習筆記（六）插件的編寫

function jquery 命名方式 一、對jQuery對象的擴展;(function($){ $.fn.extend( { fun1:abc,fun2:1bc … } )})(jQuery)二、對jQuery本身的擴展，相當於靜態方法;(function($){ $