Node組件——Express簡介-有解無憂

概述

Express是目前最流行的基于Node.js的Web開發框架，可以快速地搭建一個完整功能的網站，

Express上手非常簡單，首先新建一個專案目錄，假定叫做hello-world，

$ mkdir hello-world

進入該目錄，新建一個package.json檔案，內容如下，

{
  "name": "hello-world",
  "description": "hello world test app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "express": "4.x"
  }
}

上面代碼定義了專案的名稱、描述、版本等，并且指定需要4.0版本以上的Express，

然后，就可以安裝了，

$ npm install

執行上面的命令以后，在專案根目錄下，新建一個啟動檔案，假定叫做index.js，

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.listen(8080);

1.png file
然后，運行上面的啟動腳本，

$ node index

現在就可以訪問http://localhost:8080，它會在瀏覽器中打開當前目錄的public子目錄（嚴格來說，是打開public目錄的index.html檔案），如果public目錄之中有一個圖片檔案my_image.png，那么可以用http://localhost:8080/my_image.png訪問該檔案，

你也可以在index.js之中，生成動態網頁，

然后，在命令列下運行啟動腳本，就可以在瀏覽器中訪問專案網站了，

$ node index

上面代碼會在本機的3000埠啟動一個網站，網頁顯示Hello World，

啟動腳本index.js的app.get方法，用于指定不同的訪問路徑所對應的回呼函式，這叫做“路由”（routing），上面代碼只指定了根目錄的回呼函式，因此只有一個路由記錄，實際應用中，可能有多個路由記錄，

這時，最好就把路由放到一個單獨的檔案中，比如新建一個routes子目錄，

然后，原來的index.js就變成下面這樣，

// index.js
var express = require('express');
var app = express();
var routes = require('./routes')(app);
app.listen(3000);

運行原理

底層：http模塊

Express框架建立在node.js內置的http模塊上，http模塊生成服務器的原始代碼如下，

var http = require("http");
var app = http.createServer(function(request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.end("Hello world!");
});
app.listen(3000, "localhost");

上面代碼的關鍵是http模塊的createServer方法，表示生成一個HTTP服務器實體，該方法接受一個回呼函式，該回呼函式的引數，分別為代表HTTP請求和HTTP回應的request物件和response物件，

Express框架的核心是對http模塊的再包裝，上面的代碼用Express改寫如下，

var express = require('express');
var app = express();
app.get('/', function (req, res) {
  res.send('Hello world!');
});
app.listen(3000);

比較兩段代碼，可以看到它們非常接近，原來是用http.createServer方法新建一個app實體，現在則是用Express的構造方法，生成一個Epress實體，兩者的回呼函式都是相同的，Express框架等于在http模塊之上，加了一個中間層，

什么是中間件

簡單說，中間件（middleware）就是處理HTTP請求的函式，它最大的特點就是，一個中間件處理完，再傳遞給下一個中間件，App實體在運行程序中，會呼叫一系列的中間件，

每個中間件可以從App實體，接收三個引數，依次為request物件（代表HTTP請求）、response物件（代表HTTP回應），next回呼函式（代表下一個中間件），每個中間件都可以對HTTP請求（request物件）進行加工，并且決定是否呼叫next方法，將request物件再傳給下一個中間件，

一個不進行任何操作、只傳遞request物件的中間件，就是下面這樣，

function uselessMiddleware(req, res, next) {
  next();
}

上面代碼的next就是下一個中間件，如果它帶有引數，則代表拋出一個錯誤，引數為錯誤文本，

function uselessMiddleware(req, res, next) {
  next('出錯了！');
}

拋出錯誤以后，后面的中間件將不再執行，直到發現一個錯誤處理函式為止，

use方法

use是express注冊中間件的方法，它回傳一個函式，下面是一個連續呼叫兩個中間件的例子，

var express = require("express");
var http = require("http");

var app = express();

app.use(function(request, response, next) {
  console.log("In comes a " + request.method + " to " + request.url);
  next();
});

app.use(function(request, response) {
  response.writeHead(200, { "Content-Type": "text/plain" });
  response.end("Hello world!\n");
});

http.createServer(app).listen(1337);

上面代碼使用app.use方法，注冊了兩個中間件，收到HTTP請求后，先呼叫第一個中間件，在控制臺輸出一行資訊，然后通過next方法，將執行權傳給第二個中間件，輸出HTTP回應，由于第二個中間件沒有呼叫next方法，所以request物件就不再向后傳遞了，

use方法內部可以對訪問路徑進行判斷，據此就能實作簡單的路由，根據不同的請求網址，回傳不同的網頁內容，

var express = require("express");
var http = require("http");

var app = express();

app.use(function(request, response, next) {
  if (request.url == "/") {
    response.writeHead(200, { "Content-Type": "text/plain" });
    response.end("Welcome to the homepage!\n");
  } else {
    next();
  }
});

app.use(function(request, response, next) {
  if (request.url == "/about") {
    response.writeHead(200, { "Content-Type": "text/plain" });
  } else {
    next();
  }
});

app.use(function(request, response) {
  response.writeHead(404, { "Content-Type": "text/plain" });
  response.end("404 error!\n");
});

http.createServer(app).listen(1337);

上面代碼通過request.url屬性，判斷請求的網址，從而回傳不同的內容，注意，app.use方法一共登記了三個中間件，只要請求路徑匹配，就不會將執行權交給下一個中間件，因此，最后一個中間件會回傳404錯誤，即前面的中間件都沒匹配請求路徑，找不到所要請求的資源，

除了在回呼函式內部判斷請求的網址，use方法也允許將請求網址寫在第一個引數，這代表，只有請求路徑匹配這個引數，后面的中間件才會生效，無疑，這樣寫更加清晰和方便，

app.use('/path', someMiddleware);

上面代碼表示，只對根目錄的請求，呼叫某個中間件，

因此，上面的代碼可以寫成下面的樣子，

var express = require("express");
var http = require("http");

var app = express();

app.use("/home", function(request, response, next) {
  response.writeHead(200, { "Content-Type": "text/plain" });
  response.end("Welcome to the homepage!\n");
});

app.use("/about", function(request, response, next) {
  response.writeHead(200, { "Content-Type": "text/plain" });
  response.end("Welcome to the about page!\n");
});

app.use(function(request, response) {
  response.writeHead(404, { "Content-Type": "text/plain" });
  response.end("404 error!\n");
});

http.createServer(app).listen(1337);

Express的方法

all方法和HTTP動詞方法

針對不同的請求，Express提供了use方法的一些別名，比如，上面代碼也可以用別名的形式來寫，

var express = require("express");
var http = require("http");
var app = express();

app.all("*", function(request, response, next) {
  response.writeHead(200, { "Content-Type": "text/plain" });
  next();
});

app.get("/", function(request, response) {
  response.end("Welcome to the homepage!");
});

app.get("/about", function(request, response) {
  response.end("Welcome to the about page!");
});

app.get("*", function(request, response) {
  response.end("404!");
});

http.createServer(app).listen(1337);

上面代碼的all方法表示，所有請求都必須通過該中間件，引數中的“*”表示對所有路徑有效，get方法則是只有GET動詞的HTTP請求通過該中間件，它的第一個引數是請求的路徑，由于get方法的回呼函式沒有呼叫next方法，所以只要有一個中間件被呼叫了，后面的中間件就不會再被呼叫了，

除了get方法以外，Express還提供post、put、delete方法，即HTTP動詞都是Express的方法，

這些方法的第一個引數，都是請求的路徑，除了絕對匹配以外，Express允許模式匹配，

app.get("/hello/:who", function(req, res) {
  res.end("Hello, " + req.params.who + ".");
});

上面代碼將匹配“/hello/alice”網址，網址中的alice將被捕獲，作為req.params.who屬性的值，需要注意的是，捕獲后需要對網址進行檢查，過濾不安全字符，上面的寫法只是為了演示，生產中不應這樣直接使用用戶提供的值，

如果在模式引數后面加上問號，表示該引數可選，

app.get('/hello/:who?',function(req,res) {
	if(req.params.id) {
    	res.end("Hello, " + req.params.who + ".");
	}
    else {
    	res.send("Hello, Guest.");
	}
});

下面是一些更復雜的模式匹配的例子，

app.get('/forum/:fid/thread/:tid', middleware)

// 匹配/commits/71dbb9c
// 或/commits/71dbb9c..4c084f9這樣的git格式的網址
app.get(/^\/commits\/(\w+)(?:\.\.(\w+))?$/, function(req, res){
  var from = req.params[0];
  var to = req.params[1] || 'HEAD';
  res.send('commit range ' + from + '..' + to);
});

set方法

set方法用于指定變數的值，

app.set("views", __dirname + "/views");

app.set("view engine", "jade");

上面代碼使用set方法，為系統變數“views”和“view engine”指定值，

response物件

（1）response.redirect方法

response.redirect方法允許網址的重定向，

response.redirect("/hello/anime");
response.redirect("http://www.example.com");
response.redirect(301, "http://www.example.com");

（2）response.sendFile方法

response.sendFile方法用于發送檔案，

response.sendFile("/path/to/anime.mp4");

（3）response.render方法

response.render方法用于渲染網頁模板，

app.get("/", function(request, response) {
  response.render("index", { message: "Hello World" });
});

上面代碼使用render方法，將message變數傳入index模板，渲染成HTML網頁，

requst物件

（1）request.ip

request.ip屬性用于獲得HTTP請求的IP地址，

（2）request.files

request.files用于獲取上傳的檔案，

搭建HTTPs服務器

使用Express搭建HTTPs加密服務器，也很簡單，

var fs = require('fs');
var options = {
  key: fs.readFileSync('E:/ssl/myserver.key'),
  cert: fs.readFileSync('E:/ssl/myserver.crt'),
  passphrase: '1234'
};

var https = require('https');
var express = require('express');
var app = express();

app.get('/', function(req, res){
  res.send('Hello World Expressjs');
});

var server = https.createServer(options, app);
server.listen(8084);
console.log('Server is running on port 8084');

本文由博客群發一文多發等運營工具平臺 OpenWrite 發布

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/77928.html

標籤：JavaScript

上一篇：將一堆圖片自適應頁面排列

下一篇：js移除陣列中指定元素【轉】