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/

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