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 安裝流程:
- 安裝 Express:
npm install express-generator -g
或者將 Express 安裝在 app 目錄中:npm install express —save
- 安裝預設的基本環境:
express --view=ejs
- 開啟本地伺服器(應用程式):
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 | /* GET search page. */ |
資料庫介接與搭配參數
來模擬一下接資料庫的使用方式唄!
舉例來說,我們會拿到一個 JSON 格式的資料,使用時可以透過「點存取」的方式,做一些判定與資料操作。
以下範例中,如果我們輸入的網址 ?firstName=Sean
後面的內容剛好與資料相符,即做出一些操作。
1 | /* GET home page. */ |
EJS 調用資料
那 EJS 要如何使用這些 render
過來的資料呢?
答案是使用 <%= result %>
這個語法。
1 |
|
練習:實作查詢功能
實作出的功能:
- 關鍵字搜尋:
/products?itemName=2300教練外套
- 篩選出 2300 元以內價格的產品:
/products?minPrice=2300
- 尋找類別:
/products?category=衣服
以下為搜尋功能的程式碼快照:
最後也附上範例程式碼的 CodePen,不過這是不能運行的,因為 CodePen 上並沒有載入 Express,不過還是可供參考。
複習:部署至 Heroku
最後,我們也可以將檔案提交 (commit),將網站部署到 Heroku 上面,詳細流程可以參考上一篇筆記。
不過這邊要特別注意,部署 Heroku 時,我們可以在資料夾加上一個 .gitignore 檔案,這個檔案可以指令哪些檔案不要部署上去。
例如:在 .gitignore 檔案裡,新增 node_modules/
。
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。