使用nodejs和express搭建http web服務

flydean發表於2021-01-15
NodeJSExpressHTTPWeb

目錄

簡介

nodejs作為一個優秀的非同步IO框架，其本身就是用來作為http web伺服器使用的，nodejs中的http模組，提供了很多非常有用的http相關的功能。

雖然nodejs已經帶有http的處理模組，但是對於現代web應用程式來說，這或許還不太夠，於是我們有了express框架，來對nodejs的內容進行擴充套件。

今天我們將會介紹一下使用nodejs和express來開發web應用程式的區別。

使用nodejs搭建HTTP web服務

nodejs提供了http模組，我們可以很方便的使用http模組來建立一個web服務：

const http = require('http')

const hostname = '127.0.0.1'
const port = 3000

const server = http.createServer((req, res) => {
  res.statusCode = 200
  res.setHeader('Content-Type', 'text/plain')
  res.end('welcome to www.flydean.com\n')
})

server.listen(port, hostname, () => {
  console.log(`please visit http://${hostname}:${port}/`)
})

上面建立的http服務監聽在3000埠。我們通過使用createServer方法來建立這個http服務。

該方法接受一個callback函式，函式的兩個引數分別是 req (http.IncomingMessage 物件）和一個res（http.ServerResponse 對像)。

在上面的例子中，我們在response中設定了header和body值，並且以一個end方法來結束response。

請求nodejs服務

我們建立好http web服務之後，一般情況下是從web瀏覽器端進行訪問和呼叫。但是我們有時候也需要從nodejs後端服務中呼叫第三方應用的http介面，下面的例子將會展示如何使用nodejs來呼叫http服務。

先看一個最簡單的get請求：

const http = require('http')
const options = {
  hostname: 'www.flydean.com',
  port: 80,
  path: '/',
  method: 'GET'
}

const req = http.request(options, res => {
  console.log(`status code: ${res.statusCode}`)

  res.on('data', d => {
    console.log(d);
  })
})

req.on('error', error => {
  console.error(error)
})

req.end()

上面程式碼我們使用了http.request來建立一個request，並且傳入了我們自帶的options引數。

我們通過res的回撥事件來進行相應的處理。

再看一個簡單的post請求：

const http = require('http')

const data = JSON.stringify({
  name: 'flydean'
})

const options = {
  hostname: 'www.flydean.com',
  port: 80,
  path: '/',
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Content-Length': data.length
  }
}

const req = http.request(options, res => {
  console.log(`status code: ${res.statusCode}`)

  res.on('data', d => {
    console.log(d);
  })
})

req.on('error', error => {
  console.error(error)
})

req.write(data)
req.end()

post和get相似，不同的是options中的method不一樣，同時put可以有多種請求型別，所以我們需要在headers中指定。

同樣的，PUT 和 DELETE 也可以使用同樣的方式來呼叫。

第三方lib請求post

直接使用nodejs底層的http.request有點複雜，我們需要自己構建options，如果使用第三方庫，比如axios可以讓post請求變得更加簡單：

const axios = require('axios')

axios
  .post('http://www.flydean.com', {
    name: 'flydean'
  })
  .then(res => {
    console.log(`status code: ${res.statusCode}`)
    console.log(res)
  })
  .catch(error => {
    console.error(error)
  })

上面的例子中，我們直接使用axios的post請求，並將請求結果封存成了promise，然後通過then和catch來進行相應資料的處理。非常的方便。

獲取http請求的正文

在上面的例子中，我們通過監聽req的data事件來輸出http請求的正文：

  res.on('data', d => {
    console.log(d);
  })
})

這樣做其實是有問題的，並不一定能夠獲得完整的http請求的正文。

因為res的on data事件是在伺服器獲得http請求頭的時候觸發的，這個時候請求的正文可能還沒有傳輸完成，換句話說，請求回撥中的request是一個流物件。

我們需要這樣處理：

const server = http.createServer((req, res) => {
  let data = []
  req.on('data', chunk => {
    data.push(chunk)
  })
  req.on('end', () => {
    console.log(JSON.parse(data));
  })
})

當每次觸發data事件的時候，我們將接受到的值push到一個陣列裡面，等所有的值都接收完畢，觸發end事件的時候，再統一進行輸出。

這樣處理顯然有點麻煩。

我們介紹一個在express框架中的簡單方法，使用 body-parser 模組：

const bodyParser = require('body-parser')

app.use(
  bodyParser.urlencoded({
    extended: true
  })
)

app.use(bodyParser.json())

app.post('/', (req, res) => {
  console.log(req.body)
})

上面的例子中，body-parser對req進行了封裝，我們只用關注與最後的結果即可。

Express和使用express搭建http web服務

express是什麼呢？

express是基於 Node.js 平臺，快速、開放、極簡的 web 開發框架。它提供一系列強大的特性，幫助你建立各種 Web 和移動裝置應用。

豐富的 HTTP 快捷方法和任意排列組合的 Connect 中介軟體，讓你建立健壯、友好的 API 變得既快速又簡單。

Express 不對 Node.js 已有的特性進行二次抽象，我們只是在它之上擴充套件了 Web 應用所需的基本功能。

express helloworld

我們看一下怎麼使用Express來搭建一個helloworld：

var express = require('express');
var app = express();
app.get('/', function (req, res) {
  res.send('Hello World!');
});
var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;
  console.log('Example app listening at http://%s:%s', host, port);
});

簡單的使用app.listen即可搭建好一個http web服務。

express路由

有了web服務，我們需要對不同的請求路徑和請求方式進行不同的處理，這時候就需要使用到了express路由功能：

// 對網站首頁的訪問返回 "Hello World!" 字樣
app.get('/', function (req, res) {
  res.send('Hello World!');});
// 網站首頁接受 POST 請求
app.post('/', function (req, res) {
  res.send('Got a POST request');});
// /user 節點接受 PUT 請求
app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user');});
// /user 節點接受 DELETE 請求
app.delete('/user', function (req, res) {
  res.send('Got a DELETE request at /user');});

更高階一點的，我們還可以在請求路徑中做路由匹配：

// 匹配 acd 和 abcd
app.get('/ab?cd', function(req, res) {
  res.send('ab?cd');});
// 匹配 abcd、abbcd、abbbcd等
app.get('/ab+cd', function(req, res) {
  res.send('ab+cd');
});
// 匹配 abcd、abxcd、abRABDOMcd、ab123cd等
app.get('/ab*cd', function(req, res) {
  res.send('ab*cd');
});
// 匹配 /abe 和 /abcde
app.get('/ab(cd)?e', function(req, res) {
 res.send('ab(cd)?e');});

// 匹配任何路徑中含有 a 的路徑：
app.get(/a/, function(req, res) {
  res.send('/a/');
});

// 匹配 butterfly、dragonfly，不匹配 butterflyman、dragonfly man等
app.get(/.*fly$/, function(req, res) {
  res.send('/.*fly$/');
});

Express 路由控制程式碼中介軟體

有時候，一個請求可能有多個處理器，express提供了路由控制程式碼（中介軟體）的功能，我們可自由組合處理程式。

注意，在路由控制程式碼中，我們需要呼叫next方法，來觸發下一個路由方法。

var cb0 = function (req, res, next) {
  console.log('CB0');
  next();}
var cb1 = function (req, res, next) {
  console.log('CB1');
  next();}
app.get('/example/d', [cb0, cb1], function (req, res, next) {
  console.log('response will be sent by the next function ...');
  next();
}, function (req, res) {
  res.send('Hello from D!');
});

上面的請求會經過cb0，cb1和自定義的兩個function，最終結束。

Express 響應方法

express提供了很多響應方法API，可以方便我們的程式碼編寫：

方法 描述
res.download() 提示下載檔案。
res.end() 終結響應處理流程。
res.json() 傳送一個 JSON 格式的響應。
res.jsonp() 傳送一個支援 JSONP 的 JSON 格式的響應。
res.redirect() 重定向請求。
res.render() 渲染檢視模板。
res.send() 傳送各種型別的響應。
res.sendFile 以八位位元組流的形式傳送檔案。
res.sendStatus() 設定響應狀態程式碼，並將其以字串形式作為響應體的一部分傳送。

Express 的靜態資源

通常來說，靜態資源是不需要服務端進行處理的，在express中，可以使用express.static來指定靜態資源的路徑：

app.use(express.static('public'));
現在，public 目錄下面的檔案就可以訪問了。
http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html
//多個靜態資源目錄
app.use(express.static('public'));
app.use(express.static('files'));
//靜態字首
app.use('/static', express.static('public'));
http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css

Express 使用模板引擎

web應用當然需要html檔案，express中可以使用多種模板語言，讓編寫html頁面更加容易。如果想要使用模板引擎。我們可以使用下面的步驟：

  1. views, 放模板檔案的目錄，比如： app.set('views', './views')

  2. view engine, 模板引擎，比如： app.set('view engine', 'jade')

  3. 在 views 目錄下生成名為 index.jade 的 Jade 模板檔案，內容如下：

html
  head
    title!= title
  body
    h1!= message
  1. 在nodejs服務端配置route規則
//配置route 規則
app.get('/', function (req, res) {
  res.render('index', { title: 'Hey', message: 'Hello there!'});
});

總結

nodejs和express是非常方便的http web服務框架，希望大家能夠喜歡。

本文作者：flydean程式那些事

本文連結：http://www.flydean.com/nodejs-http-express/

本文來源：flydean的部落格

歡迎關注我的公眾號:「程式那些事」最通俗的解讀，最深刻的乾貨，最簡潔的教程，眾多你不知道的小技巧等你來發現！

相關文章