初步瞭解Express(基於node.js的後端框架)

Lin-Ya發表於2018-05-10

Express:基於node.js的後端框架。介紹

實現一個HELLO WORLD

使用步驟: 1.mkdir app , cd app 2. npm init 3. npm i express -s 4. hello world

var express = require('express');//引入exrpess
var app = express();//建立例項

//路由。當url匹配這裡的路由,就交由後面的函式處理
app.get('/', function (req, res) {
  res.send('Hello World!');
});

//建立server
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);
});
複製程式碼

咋看上去跟使用node.js建立一個靜態server有點像呢?emm因為express是基於node.js平臺。 上面本質上其實就是建立了一個本地server,監聽3000埠。server獲取的url的字尾,進行路由匹配,然後交給對應的函式進行處理。

Express應用生成器瞭解一下?

上面的伺服器看上去好像很單薄呀,如果我要實現登入註冊等等豈不是要自己寫一大堆? Express應用生成器(express-generator)瞭解一下

  1. npm i express-generator -s 介紹
  2. 命令範例:Usage: express [options] [dir]
  3. express --ejs .(在當前目錄下,建立腳手架,選擇模板為.ejs)

[圖片上傳失敗...(image-568d2c-1525946563984)] 這時候我們的目錄下新增很多檔案,檢查一下package.json,發現我們新依賴了很多東西,先安裝好各種依賴。npm i

  1. 執行命令啟動伺服器node bin/www,預設埠是3000,如果你想修改埠的話可以在命令前面指定埠PORT=XXXX

伺服器首頁
此時目錄結構已經比剛剛的完善很多了。

瞭解一下app.js?

  • bin/www 實際上是用來搭建server,監聽埠。當收到請求的時候,則交給app.js來處理。

bin/www

  • app.js 實際上是網站的主體,裡面包括了這個網站依賴的內容、處理請求的邏輯和執行過程。 app.js裡面的app實際上就是一個express的一個例項。

app.js

  1. 設定檢視引擎為ejs
  2. 根據業務邏輯設定中介軟體處理請求的流程。
  3. 設定靜態資源目錄,當請求匹配靜態資源目錄下的路徑的時候,則會返回靜態資源內容。(例如當請求xxx.com/css/style.css的時候,恰好我們的public目錄下有css資料夾,裡面存放著style.css。伺服器就會返回這個檔案)
  4. 根據請求字尾匹配不同的路由,而路由的處理需要我們提前require到app.js裡面。
  5. 假如上述的各個路由都沒有匹配上,我們就要返回404,你所請求的東西不存在。

什麼是中介軟體?

這裡我們參考一下中文文件

中介軟體函式能夠訪問請求物件 (req)、響應物件 (res) 以及應用程式的請求/響應迴圈中的下一個中介軟體函式。下一個中介軟體函式通常由名為 next 的變數來表示。

中介軟體函式可以執行以下任務:

  • 執行任何程式碼。
  • 對請求和響應物件進行更改。
  • 結束請求/響應迴圈。
  • 呼叫堆疊中的下一個中介軟體函式。

如果當前中介軟體函式沒有結束請求/響應迴圈,那麼它必須呼叫 next(),以將控制權傳遞給下一個中介軟體函式。否則,請求將保持掛起狀態。

瞭解一下Router方法?

最簡單的router
router方法本質上是一個匹配請求的函式,一般理解為Express的路由層中介軟體。當匹配給router方法的時候,先處理請求,返回響應資料給模板引擎進行渲染。同時我們看到裡面還有一個引數next,這是是中介軟體的回電函式,如果他帶有引數,則表示丟擲一個錯誤,引數為錯誤的文字,例如:

function Middleware(request, response, next) { 
   next('出錯了!');
}
複製程式碼

丟擲錯誤以後,後面的中介軟體將不再執行,直到發現一個錯誤處理函式為止。如果沒有呼叫next方法,後面註冊的函式也是不會執行的。

使用模板引擎

我們在一開始利用express-generator生成框架的時候,輸入了ejs,這個ejs就是我指定了的模板引擎。通過模板引擎,我們不再把html裡面的內容寫死,而是通過router動態地把資料傳給模板引擎,讓它根據我們傳入的資料動態地渲染頁面,甚至我們可以通過判斷語句來給不同的登入狀態的使用者渲染頁面,通過迴圈語句給頁面新增內容等等,上面的router圖片中的

res.render('index', {title: 'Express'})
複製程式碼

就是我們給模板引擎傳給引數,選擇index模板,傳入一個物件,key為title,value是一個字串。然後我們只需要在views中的index.ejs裡面,使用相應的語法即可動態渲染。

index.ejs


相關文章