【Web全棧課程8】express實現node服務器

express簡介

如下介紹來自官網：

路由

定義如何處理瀏覽器的請求

1. 例如app.get、app.post對應監聽get、post請求，app.all監聽全部http請求。
2. 監聽不一樣的路徑，對指定路徑進行處理。例如監聽到'/login'進行登陸處理，監聽到'student_list'，進行學生列表查詢處理。

var express = require('express')
var app = express()
// respond with "hello world" when a GET request is made to the homepage
app.get('/', function (req, res) {
  res.send('hello world')
})

開發中間件

Express是一個路由和中間件Web框架，其自身的功能不多，Express應用程序本質上是一系列中間件函數調用。
中間件的功能是能夠訪問請求對象（req），響應對象（res）和應用程序的請求-響應週期中的下一個中間件功能的功能。下一個中間件功能一般由名爲的變量表示next。
中間件功能能夠執行如下任務：

• 執行任何代碼。
• 更改請求和響應對象。
• 結束請求-響應週期。
• 調用堆棧中的下一個中間件函數。

若是當前的中間件功能沒有結束請求-響應週期，則必須調用next()將控制權傳遞給下一個中間件功能。不然，該請求將被掛起。

使用中間件

Express可使用如下類型的中間件：

• 應用層中間件
  經過app.use和app.method將應用層中間件綁定到express實例上，其中method是中間件處理的request請求的小寫，例如get、post、put。
• 路由器級中間件
  路由器級中間件與應用程序級中間件的工做方式相同，只不過它綁定到的實例express.Router()。
• 錯誤處理中間件
  與其餘中間件函數相同的方式定義錯誤處理中間件函數，除了使用四個參數而不是三個參數(錯誤處理中間件始終採用四個參數。即便不須要使用該next對象，也必須指定它以維護簽名。不然，next對象將被解釋爲常規中間件，而且將沒法處理錯誤。)
• 內置中間件
  express內置：express.static、express.json、express.urlencoded
• 第三方中間件
  使用第三方中間件向Express應用程序添加功能

模板引擎

在運行期間，模板引擎將靜態模板中的變量替換爲運行期間產生的真實數據，並轉換爲html文件返回給客戶端，這樣使html的設計更加簡單。
與Express配合使用的一些流行模板引擎是Pug，Mustache和EJS。Express默認使用Jade。

錯誤處理

Express帶有默認的錯誤處理程序，不須要任何額外的工做。若是同步代碼引起錯誤，則Express將捕獲並處理該錯誤。例如：

app.get('/', function (req, res) {
  throw new Error('BROKEN') // Express will catch this on its own.
})

Express新建服務器

在上一個章節中，分析了原生js書寫一個簡單的node服務器，很是的複雜麻煩。
使用express框架快速的構建一個上章節的Node服務。

新建html文件

<form action="http://localhost:8080/api" method="post"  enctype="multipart/form-data">
    用戶：<input type="text" name="user"><br>
    密碼：<input type="password" name="pwd"><br>
    <input type="file" name="file" multiple><br>
    <input type="submit" value="提交">
</form>

處理靜態文件

使用express內置中間件static，以下請求靜態資源的時候express會從www尋找並返回

server.use(express.static('./www'));

處理post的body

安裝body-parser

npm i body-parser -D

引入body-parser插件，response的請求頭中會自動新增body變量將body解析。

const body = require('body-parser');    //接收除文件外的body
server.use(body.urlencoded({extended: false}));

處理post上傳的文件

安裝multer

npm i multer -D

引入multer插件，設置上傳路徑爲./upload，文件自動上傳到upload目錄，response的請求頭中會新增files變量存儲相關信息。

const multer = require('multer');   // 接收文件body
let multerObj = multer({dest: './upload'});
server.use(multerObj.any());

完整代碼

const express = require('express');
const body = require('body-parser');    //接收除文件外的body
const multer = require('multer');   // 接收文件body
let server = express();
server.listen(8080);
// 中間件,用use吧服務加到中間件上，每一箇中間件加的方式看官網定義
server.use(body.urlencoded({extended: false}));
let multerObj = multer({dest: './upload'});
server.use(multerObj.any());
// 處理請求
server.get('/', (req, res) => {
    res.send('OK');
});
server.post('/api', (req, res) => {
    res.send('OK');
    // 原生和express都沒有req.body，是中間件加上的body
    console.log(req.body);
    console.log(req.files);
});
// static,意思是請求靜態資源的時候express會處理
server.use(express.static('./www'));

請求結果

1. express對緩存已經作好了處理
   
   再次訪問
   
2. body提交的數據只經過req.body就正確解析，req.files裏面包含了上傳的文件信息，而且已經作好了文件名哈希。
   
3. 去upload文件夾下檢驗，上傳的文件確實存在，而且正確