NUK JavaScript Lesson 09：Express 與 EJS

發表於 分類於

本篇筆記為 Express 的介紹，除了介紹觀念，也會示範如何以 Node.js + Express + EJS 建置一個網站。

什麼是模組 (Module)

Node.js 具有自訂模組的觀念，我們以安裝 Nodemon 這個套件為例，來說明模組的觀念。

package.json

上個章節中，我們在根目錄下新增了一個 package.json 檔案。
這個檔案是用來管理我們有使用到的模組套件，我們引用的套件都會紀錄在這個檔案裡面。

  • 初始化 node_modules，建立 package.json 檔：npm init
  • 安裝 package.json 裡需要的套件：npm install

我們可以透過 npm install 指令，新增 package.json 裡需要的模組。

安裝第一個 NPM 套件：Nodemon

Nodemon 套件可以持續偵測並自動重啟本地伺服器，可以用來取代 node app.js 這種執行程式碼。

安裝指令如下：

  • 安裝 NPM 模組：npm install [模組名稱] [安裝位置]
  • npm install nodemon -g
  • npm install nodemon --save

安裝常用屬性如下：
安裝套件時，如果要安裝於電腦全域，可以使用 -g；如果只想裝在專案內，可使用 --save。

  • 自己電腦全域安裝 -g
  • 開發端安裝 --save：安裝模組並寫入 package.json 的 dependencies 清單
  • --save-dev：安裝模組並寫入 package.json 的 devDependencies 清單

安裝 Node 模組時，如果指定了 --save 選項，則會將這些模組新增至 package.json 檔中的 dependencies 清單。
之後，當我們在 app 目錄中執行 npm install 時，NPM 就會自動安裝相依關係清單中的模組。

其他指令：

  • 執行專案：nodemon app.js
  • 顯示安裝的 NPM 列表：npm list
  • 刪除專案裡的 NPM 模組：npm uninstall [模組名稱]

Express 介紹

Express 是 Node.js 的一個 Web 開發框架，其中的 EJS 是 Express 的模板，用來渲染 HTML 頁面。
渲染流程大概就像是：xxx.ejs → EJS → HTML → 瀏覽器。

Express 安裝流程：

  1. 安裝 Express：npm install express-generator -g
    或者將 Express 安裝在 app 目錄中：npm install express —save
  2. 安裝預設的基本環境：express --view=ejs
  3. 開啟本地伺服器（應用程式）：npm start

輸入 npm start 指令開啟應用程式後，可以在瀏覽器中載入 http://localhost:3000，順利存取應用程式囉。

EJS Template 介紹

參數與路徑的設定

首先，router.get(/search, ... 的 /search 就是指頁面的網址名稱，若省略只寫 / 通常就是作為首頁。

所以如果輸入 http://localhost:3000/search，即可連到 Search 頁面。

接著是根據使用者輸入的網址來做判斷，以使用者輸入網址 http://localhost:3000/search?q=123 為例：
首先會跳過第一個 if 判斷，因為有輸入 req.query.q 的值，
接著進入 else 判斷，並回傳一個物件格式的資料，其中 keyword 的值就會等於 123。

這個 render 就是呈現給對方的頁面，後面會帶要傳送的資料，這些資料可以在該頁面上做調用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* GET search page. */
router.get('/search', function (req, res, next) {
  // 資料庫
  console.log(req.query.q);
  if (req.query.q == undefined) {
    res.render('search', {
      title: 'search',
      name: 'Sean',
      keyword: '你沒打資料',
    });
  } else {
    res.render('search', {
      title: 'search',
      name: 'Sean',
      keyword: req.query.q,
    });
  }
});

/* GET about page. */
router.get('/about', function (req, res, next) {
  // 資料庫
  res.render('about');
});

資料庫介接與搭配參數

來模擬一下接資料庫的使用方式唄！

舉例來說，我們會拿到一個 JSON 格式的資料，使用時可以透過「點存取」的方式，做一些判定與資料操作。

以下範例中，如果我們輸入的網址 ?firstName=Sean 後面的內容剛好與資料相符，即做出一些操作。

1
2
3
4
5
6
7
8
9
10
11
12
/* GET home page. */
router.get('/search', function (req, res, next) {
  // 資料庫
  var data = [];
  for (let i = 0; list.length > i; i++) {
    if (list[i].firstName == req.query.firstName) {
      data.push(list[i]);
    }
  }
  console.log(req.query.firstName);
  res.render('search', { result: data.length, list: data });
});

EJS 調用資料

那 EJS 要如何使用這些 render 過來的資料呢？
答案是使用 <%= result %> 這個語法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <title>title</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>搜尋結果頁面</h1>
    <p>搜尋結果有 <%= result %> 筆</p>
    <ul>
    <% for(var i=0; i < list.length; i++) { %>
        <li>
        <%= list[i].firstName %>
        <%= list[i].lastName %>
        </li>
    <% } %>
</ul>
  </body>
</html>

練習：實作查詢功能

實作出的功能：

  1. 關鍵字搜尋：/products?itemName=2300教練外套
  2. 篩選出 2300 元以內價格的產品：/products?minPrice=2300
  3. 尋找類別：/products?category=衣服

練習 Demo 連結

以下為搜尋功能的程式碼快照：

imgur

最後也附上範例程式碼的 CodePen，不過這是不能運行的，因為 CodePen 上並沒有載入 Express，不過還是可供參考。

複習：部署至 Heroku

最後，我們也可以將檔案提交 (commit)，將網站部署到 Heroku 上面，詳細流程可以參考上一篇筆記。

不過這邊要特別注意，部署 Heroku 時，我們可以在資料夾加上一個 .gitignore 檔案，這個檔案可以指令哪些檔案不要部署上去。

例如：在 .gitignore 檔案裡，新增 node_modules/。

以上資源是我自己整理過後的筆記，若有錯誤歡迎隨時和我聯繫。