Node.js - Express.js 介紹與起手式

Express 簡介

Express.js 是基於 Node.js 所開發的前後端網頁框架，特性為快速極簡，主要運作是在處理 HTTP 請求的函數，處理每個中介函式，再傳給下一個中間軟體的函式。如下圖：

可以整合 Firebase，MySQL, Mongo 等資料庫，但因為輕量又整合 NPM，而學習 Express.js 也能了解後端邏輯的觀念，例如：AJAX post 底層運作可以知道後端工程師收到前端所發出的 request 之後要做什麼事情，或是 EJS template 知識掌握後可以跟後端有更良好的溝通。

安裝與設定

安裝指令：

npm install express --save

安裝完後會專案下的 package.json 的 dependencies 看到 express 就完成了。

package.json

{
  "name": "nodejs",
  "version": "1.0.0",
  "description": "node practice",
  "main": "firebase.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "hsuchihting",
  "license": "MIT",
  "dependencies": {
    "express": "^4.18.1", //這裡
    "firebase": "^8.10.1"
  }
}

安裝完後在跟目錄下建立一個 app.js，並且引入並使用 express 相關套件。

app.js

const express = require("express");
const app = express();

啟動 web 伺服器

可以使用後，現在做啟動網頁伺服器，畢竟最終是要呈現在網頁上的，使用 app 裡面的 get() 方法，來啟動 web 伺服器。

app.js

app.get("/", (request, response) => {
  response.send(`<h1>Hello, Node</h1>`);
});

// 監聽 port

const port = process.env.port || 3000;
app.listen(port);

這邊的程式碼是否似曾相識？也就是啟動 creatServer 的方法， createServer 是引入 http 的模組，這裡則是引入地套件式不同的，這邊式引入 express 模組。

在開啟畫面輸入 localhost:3000 或是 127.0.0.1:3000
這樣就能透過 express 將後端資料渲染在網頁上了。

參考資料

• Express Hello world example