Express框架的基本使用

1、Express 框架的基本介紹

Express 是一個簡潔而靈活的 node.js Web應用框架, 提供了一系列強大特性幫助你創建各種 Web 應用，和豐富的 HTTP 工具。使用 Express 可以快速地搭建一個完整功能的網站。

Express 框架核心特性：

可以設置中間件來響應 HTTP 請求。
定義了路由表用于執行不同的 HTTP 請求動作。
可以通過向模板傳遞參數來動態渲染 HTML 頁面。

2、安裝Express

首先，我們先npm init 初始化一個 node 項目，然后安裝 express：

npm init

npm install express --save

以下幾個重要的模塊需要與 express 框架一起安裝：

body-parser - node.js 中間件，用于處理 JSON, Raw, Text 和 URL 編碼的數據。
cookie-parser - 這就是一個解析Cookie的工具。通過req.cookies可以取到傳過來的cookie，并把它們轉成對象。
multer - node.js 中間件，用于處理 enctype="multipart/form-data"（設置表單的MIME編碼）的表單數據。

npm install body-parser --save
npm install cookie-parser --save
npm install multer --save

3、使用express響應請求

創建 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)
 
})

執行 node express_demo.js ，在瀏覽器中訪問 http://127.0.0.1:8081，可以看到瀏覽器中顯示 hello world，這個就是服務器響應的內容。

3.1、獲取GET參數

var express = require('express');
var app = express();
 
app.use('/public', express.static('public'));
 
app.get('/index.html', function (req, res) {    //訪問HTML時，響應一個HTML文件
   res.sendFile( __dirname + "/" + "index.html" );
})
 
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 () {
})

3.2、獲取post參數

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.html', function (req, res) {
   res.sendFile( __dirname + "/" + "index.html" );
})
 
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 () {

})

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

3.3、request和response對象

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

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

request 和 response 對象的具體介紹：

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類型

4、路由

路由決定由哪個腳本代碼去響應客戶端請求。在HTTP請求中，我們可以通過路由提取出請求的URL以及GET/POST參數。

創建 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 () {
})

執行以上代碼：node express_demo2.js。由此我們訪問不同的頁面路徑瀏覽器將顯示不同的結果。

我們可以在瀏覽器中訪問 http://127.0.0.1:8081、http://127.0.0.1:8081/list_user、 http://127.0.0.1:8081/abcd、http://127.0.0.1:8081/abcdefg 來查看結果。

5、訪問靜態文件（html、txt、圖片等）

Express 提供了內置的中間件 express.static 來設置靜態文件如：圖片，文本文件txt 等。

你可以使用 express.static 中間件來設置靜態文件路徑。例如，如果你將圖片， CSS, JavaScript 文件放在 public 目錄下，你可以這么寫：

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

由此，我們就可以直接訪問服務器該目錄下的文件。如果我們不這么設置的話，是不能直接訪問一些靜態文件的。

代碼示例，創建一個 express_demo.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)
 
})

執行以上代碼： node express_demo.js

我們可以在 public 目錄下放一些靜態文件，比如一個logo圖片，然后在瀏覽器中訪問 http://127.0.0.1:8081/public/logo.png，就可以訪問該文件了。

可參考：https://www.runoob.com/nodejs/nodejs-express-framework.html

posted @ 2021-01-11 19:09 wenxuehai 閱讀(606) 評論(0) 收藏舉報

刷新頁面返回頂部

提升自己，才有選擇的能力和勇氣