Node.js學習筆記（十六、Express 架構）

簡介

Express是一個簡潔而靈活的node.js Web應用架構, 提供了一系列強大特性幫助你建立各種Web應用，和豐富的HTTP工具。

使用Express可以快速地搭建一個完整功能的網站。

Express 架構核心特性包括：

可以設定中間件來響應HTTP請求。

定義了路由表用于執行不同的HTTP請求動作。

可以通過向模闆傳遞參數來動态渲染HTML頁面。

安裝

建立一個目錄express_demo，執行指令，

npm init

在目前目錄下生成一個 package.json 檔案。

安裝指令：

cnpm install express --save

Express 架構安裝在目前目錄的 node_modules 目錄中，-save 的意思是，建立好之後，會修改 package.json 檔案，表示目前項目要依賴 express。

除此之外，還需要幾個子產品：

** body-parser **- node.js 中間件，用于處理 JSON, Raw, Text 和 URL 編碼的資料。

nbsp;cookie-parser - 這就是一個解析Cookie的工具。通過req.cookies可以取到傳過來的cookie，并把它們轉成對象。

multer - node.js 中間件，用于處理 enctype=“multipart/form-data”（設定表單的MIME編碼）的表單資料。

第一個Express架構執行個體

這個執行個體隻是用來輸出“Hello World”,

express_demo.js:

var express = require('express');
var app = express();
 
app.get('/', function (req, res) {
   res.send('Hello World');
})
 
var server = app.listen(8081, function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("應用執行個體，通路位址為 http://%s:%s", host, port)
 
})

執行：

通路位址：

http://127.0.0.1:8081

請求和響應

Express 應用使用回調函數的參數： request 和 response 對象來處理請求和響應的資料。

app.get('/', function (req, res) {
   // --
})

**Request 對象 **- request 對象表示 HTTP 請求，包含了請求查詢字元串，參數，内容，HTTP 頭部等屬性。常見屬性有：

req.app：當callback為外部檔案時，用req.app通路express的執行個體

req.baseUrl：擷取路由目前安裝的URL路徑

req.body / req.cookies：獲得「請求主體」/ Cookies

req.fresh / req.stale：判斷請求是否還「新鮮」

req.hostname / req.ip：擷取主機名和IP位址

req.originalUrl：擷取原始請求URL

req.params：擷取路由的parameters

req.path：擷取請求路徑

req.protocol：擷取協定類型

req.query：擷取URL的查詢參數串

req.route：擷取目前比對的路由

req.subdomains：擷取子域名

req.accepts()：檢查可接受的請求的文檔類型

req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages：傳回指定字元集的第一個可接受字元編碼

req.get()：擷取指定的HTTP請求頭

req.is

()：判斷請求頭Content-Type的MIME類型

Response 對象 - response 對象表示 HTTP 響應，即在接收到請求&時向用戶端發送的 HTTP 響應資料。常見屬性有：

res.app：同req.app一樣

res.append()：追加指定HTTP頭

res.set()在res.append()後将重置之前設定的頭

res.cookie(name，value [，option])：設定Cookie

opition: domain / expires / httpOnly / maxAge / path / secure / signed

res.clearCookie()：清除Cookie

res.download()：傳送指定路徑的檔案

res.get()：傳回指定的HTTP頭

res.json()：傳送JSON響應

res.jsonp()：傳送JSONP響應

res.location()：隻設定響應的Location HTTP頭，不設定狀态碼或者close response

res.redirect()：設定響應的Location HTTP頭，并且設定狀态碼302

res.render(view,[locals],callback)：渲染一個view，同時向callback傳遞渲染後的字元串，如果在渲染過程中有錯誤發生next(err)将會被自動調用。callback将會被傳入一個可能發生的錯誤以及渲染後的頁面，這樣就不會自動輸出了。

res.send()：傳送HTTP響應

res.sendFile(path [，options] [，fn])：傳送指定路徑的檔案 -會自動根據檔案extension設定Content-Type

res.set()：設定HTTP頭，傳入object可以一次設定多個頭

res.status()：設定HTTP狀态碼

res.type()：設定Content-Type的MIME類型

路由

前面路由是由router.js實作的，但Express提供了更便捷的方式。

執行個體，express_demo2.js：

var express = require('express');
var app = express();
 
//  首頁輸出 "Hello World"
app.get('/', function (req, res) {
   console.log("首頁 GET 請求");
   res.send('Hello GET');
})
 
 
//  POST 請求
app.post('/', function (req, res) {
   console.log("首頁 POST 請求");
   res.send('Hello POST');
})
 
//  /del_user 頁面響應
app.get('/del_user', function (req, res) {
   console.log("/del_user 響應 DELETE 請求");
   res.send('删除頁面');
})
 
//  /list_user 頁面 GET 請求
app.get('/list_user', function (req, res) {
   console.log("/list_user GET 請求");
   res.send('使用者清單頁面');
})
 
// 對頁面 abcd, abxcd, ab123cd, 等響應 GET 請求
app.get('/ab*cd', function(req, res) {   
   console.log("/ab*cd GET 請求");
   res.send('正則比對');
})
 
 
var server = app.listen(8081, function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("應用執行個體，通路位址為 http://%s:%s", host, port)
 
})

啟動：

分别通路不同的位址：

靜态檔案

Express 提供了内置的中間件 express.static 來設定靜态檔案如：圖檔， CSS, JavaScript 等。

可以使用 express.static 中間件來設定靜态檔案路徑。例如，一般将圖檔， CSS, JavaScript 檔案放在 public 目錄下。

app.use('/public', express.static('public'));

建立目錄：

E:\project\express_demo\public\images

在這個目錄下存放一張圖檔haha.jpg。

處理靜态檔案執行個體，express_demo3.js:

var express = require('express');
var app = express();
 
app.use('/public', express.static('public'));
 
app.get('/', function (req, res) {
   res.send('Hello World');
})
 
var server = app.listen(8081, function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("應用執行個體，通路位址為 http://%s:%s", host, port)
 
})

http://127.0.0.1:8081/public/images/haha.jpg

GET 方法

以下執行個體示範了在表單中通過 GET 方法送出兩個參數，可以使用 server.js 檔案内的 process_get 路由器來處理輸入：

index.htm:

<html>
<body>
<form action="http://127.0.0.1:8081/process_get" method="GET">
First Name: <input type="text" name="first_name">  <br>
 
Last Name: <input type="text" name="last_name">
<input type="submit" value="Submit">
</form>
</body>
</html>

server.js:

var express = require('express');
var app = express();
 
app.use('/public', express.static('public'));
 
app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})
 
app.get('/process_get', function (req, res) {
 
   // 輸出 JSON 格式
   var response = {
       "first_name":req.query.first_name,
       "last_name":req.query.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})
 
var server = app.listen(8081, function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("應用執行個體，通路位址為 http://%s:%s", host, port)
 
})

執行以後，

通路位址：

http://127.0.0.1:8081/index.htm

送出表單：

POST方法

同樣地，應對post請求，process_post 路由器來處理。

<html>
<body>
<form action="http://127.0.0.1:8081/process_post" method="POST">
First Name: <input type="text" name="first_name">  <br>
 
Last Name: <input type="text" name="last_name">
<input type="submit" value="Submit">
</form>
</body>
</html>

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
 
// 建立 application/x-www-form-urlencoded 編碼解析
var urlencodedParser = bodyParser.urlencoded({ extended: false })
 
app.use('/public', express.static('public'));
 
app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})
 
app.post('/process_post', urlencodedParser, function (req, res) {
 
   // 輸出 JSON 格式
   var response = {
       "first_name":req.body.first_name,
       "last_name":req.body.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})
 
var server = app.listen(8081, function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("應用執行個體，通路位址為 http://%s:%s", host, port)
 
})

檔案上傳

檔案上傳用的是post方法，上傳表單 enctype 屬性設定為 multipart/form-data。

<html>
<head>
<title>檔案上傳表單</title>
</head>
<body>
<h3>檔案上傳：</h3>
選擇一個檔案上傳: <br />
<form action="/file_upload" method="post" enctype="multipart/form-data">
<input type="file" name="image" size="50" />
<br />
<input type="submit" value="上傳檔案" />
</form>
</body>
</html>

var express = require('express');
var app = express();
var fs = require("fs");
 
var bodyParser = require('body-parser');
var multer  = require('multer');
 
app.use('/public', express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(multer({ dest: '/tmp/'}).array('image'));
 
app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})
 
app.post('/file_upload', function (req, res) {
 
   console.log(req.files[0]);  // 上傳的檔案資訊
 
   var des_file = __dirname + "/" + req.files[0].originalname;
   fs.readFile( req.files[0].path, function (err, data) {
        fs.writeFile(des_file, data, function (err) {
         if( err ){
              console.log( err );
         }else{
               response = {
                   message:'File uploaded successfully', 
                   filename:req.files[0].originalname
              };
          }
          console.log( response );
          res.end( JSON.stringify( response ) );
       });
   });
})
 
var server = app.listen(8081, function () {
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("應用執行個體，通路位址為 http://%s:%s", host, port)
 
})

**參考：**

【1】、

https://www.runoob.com/nodejs/nodejs-express-framework.html

【2】、

https://www.w3cschool.cn/nodejs/nodejs-express-framework.html

【3】、

http://how2j.cn/k/nodejs/nodejs-express-start/1766.html

Node.js學習筆記（十六、Express 架構）

簡介

安裝

第一個Express架構執行個體

請求和響應

路由

靜态檔案

GET 方法

POST方法

檔案上傳

繼續閱讀

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

vue-cli簡介（中文翻譯）

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

layui多任務上傳添加進度條

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題