當面試官問你關於Node.js的開發框架Express時，你怎麼回答 ？（文末附Postman插件鏈接）

前言：
       在前些日子，也就是今年的 2 月至 4 月，一個由 ECMA 成員名義發起，阿里巴巴、騰訊等公司領銜的Node.js 開發者 2020 年度報告結果出爐。

       調查結果顯示越年輕的使用者越願意在 SSR 場景中使用 Node.js，並且一個典型的 Node.js Web 應用：大多數會選擇使用 Express框架+ Mysql/MongoDB + Redis 數據，同時配置 Nginx 作爲反向代理作爲技術棧。

• 關於MySQL可參考：MySQL專欄
• MongoDB可參考：教零基礎女朋友學MongoDB
• Node.js可參考：Node.js專欄
• EJS模板引擎可參考：淺析嵌入式 JS 模板引擎之EJS

       所以，本文將淺談關於Node.js的開發框架Express的使用及使用經驗。

1.介紹

• Express是基於 Node.js 平臺，快速、開放、極簡的 Web 開發框架，功能強大

• 提供web服務器 的功能 （路由，讀取靜態資源等），但不會隱藏Node.js的功能

• 可根據我們所選擇的各種 HTTP 實用工具和中間件，快速方便地創建強大的 API

• Express常用EJS模板（HTML文件內容裏含有變量或表達式，這樣的hHTML就叫模版）

• 目前有許多流行的開發框架都是基於 Express 來構建

2.名詞解析

2.1反向代理

反向代理服務器位於用戶與目標服務器之間，但是對於用戶而言，反向代理服務器就相當於目標服務器，即用戶直接訪問反向代理服務器就可以獲得目標服務器的資源。同時，用戶不需要知道目標服務器的地址，也無須在用戶端作任何設定

2.2 服務器端渲染(SSR)

簡單理解是將組件或頁面通過服務器生成HTML字符串，再發送到瀏覽器，最後將靜態標記"混合"爲客戶端上完全交互的應用程序，不需要先下載一堆 JS 和 CSS 後才能看到頁面（首屏性能）

• 優勢: 對SEO（（Search Engine Optimization）搜索引擎優化）友好，加載頁面的速度快；對於電量不給力的手機或平板，減少在客戶端的電量消耗很重要
• 缺點: 佔用服務器的資源；開發條件受限

2.3 瀏覽器端渲染(BSR)

• 服務器只管提供數據(接口)，渲染的工作是客戶端來做
• 接口 （接口文檔）
  • 訪問的接口地址
  • 訪問的方式(get post)
  • 參數
  • 返回值 res.json

2.4 前後端分離

注：前後端分離不是指瀏覽器和後端服務分離。這裏的前端不是瀏覽器，指的是生成 HTML 的那個服務，它可以是一個僅僅生成 HTML 的 Web 服務器，也可以是在瀏覽器中通過 JS 動態生成 HTML 的 單頁應用。一般情況下，許多公司會選擇前端選用 node 服務器，後端選用 C、Java 等

• 服務器端只是提供數據(提供接口) res.json({key:value…})
• 前端負責拿到數據，並且負責渲染到html頁面上來 （fetch 語法 fetch(url).then(callback)
  

3.EJS模板引擎

• 安裝 npm i ejs --save

• ejs模版默認是放在views的目錄下 建立的模版文件 xxxx.ejs

• 設置使用ejs 模板 app.set(“view engine”,“ejs”);

• 更改模版的目錄 app.set(“views”,“模版的目錄”)

• 渲染模版

res.render("views裏的模版的文件名",{
     // key就是模版裏的變量: 值
})

• <%=變量%> 轉義輸出

• <%-變量%> 不轉義輸出

• <% js代碼 %> 執行 js代碼

詳細信息可參考： 淺析嵌入式 JS模板引擎之EJS

4.中間件

• 用戶發送請求和返回結果中間執行的函數或方法
• 中間件可以執行的功能很豐富，比如可以進行身份驗證，參數的校驗等…
• 使用中間件app.use([請求字符串],路由中間件)
• 內部提供的中間件，直接使用
  • express.static
  • express.Router
• 自定義中間件
  • 攔截所有請求:app.use(function(){})
  • 攔截特定請求:router.get("/xxx",(req,res,next)=>{ })
• 把express 的實例作爲 http.createServer的中間件:http.createServer(app)

5.express生成器

• 安裝 npm i express-generator -g （此時輸入：express --version 如果能看到版本號就是安裝好了）

• 用生成器生成一個項目 ：express --view=ejs 項目的名字

• 進入並啓動項目

       ① cd 項目的目錄 進入項目的目錄
       ② npm install 安裝依賴
       ③ npm start 啓動項目了
       ④ 在瀏覽器裏 http://localhost:3000 3000是默認端口

可參考： Express生成器的簡單安裝

• 生成的項目目錄結構如下：
  
  • bin/www 是啓動文件（可在WWW文件內更改端口號）
    
  • public 項目的靜態資源目錄（可以添加一些頁面文件，如下圖的list.html等…）
    
  • routes 路由中間件，幫我們處理用戶的請求（會自動生成一個index.js以及一個user.js文件）
    
  • views 模板目錄（會自動生成一個error.ejs以及一個index.ejs文件）
    
  • app.js 纔是真正的項目執行的起點（引入很多模塊，且文件包含狀態碼以及接口的URL等…）

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

• package.json 包的配置文件（包含一些插件名以及一些版本號）

{
  "name": "list",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "ejs": "~2.5.7",
    "express": "~4.16.0",
    "http-errors": "~1.6.2",
    "mongoose": "^5.9.9",
    "morgan": "~1.9.0"
  }
}

注意：

• 在獲取用戶get提交的數據時：req.query.變量
• 獲取用戶post提交的數據時：req.body.變量

6.【贈】接口測試工具Postman的插件

方式一：

下載安裝包進行安裝

方式二：插件安裝（谷歌）

鏈接：Postman
提取碼：bxd0

若無法安裝，可使用谷歌應用商店進行安裝（前提是裝上了谷歌應用助手，不知道現在網上還能找得到不，需要的可進此網盤進行獲取：鏈接：網盤地址 ，提取碼：ov49 ）

下附文中所需要的官網鏈接：

• Node.js官網
• npm插件官網
• BootCDN
• MongoDB
• mongoose

---

如有錯誤，歡迎大家進行批評指正！