Hi，大家好，今天是第9天，很快的就要過了 1/3 了，昨天我們完成了 router 的定義，並且將對外公開，不需進行權限驗證的功能的頁面與ajax api的 router 準備好，那我們今天來處理前端顯示用的畫面

layout.ejs

我們這次選用 express 做為 web 框架，express 有2套樣版引擎可以選擇，分別是 jade 與 ejs，在這邊我們選用 ejs，主要的原因是 ejs 其實並沒有特殊語法，其主要均為 html，至於若是要在頁面中使用 nodes.js 的功能時，只需要像 asp.net 或 jsp 一樣，使用「<%= %>」就行了*，換言之，就是簡單、易學。
基本上是不建議前後端混寫在頁面上，但是有時候還是會用到，例如說顯示後端的sesion內容或是接收網址列傳過來的參數時
ejs樣版引擎中，有一個預設原則為若在 views 資料夾中有出現 layout.ejs時，所有的渲染顯示動作，會優先去載入 layout.ejs，因此我們可以將基本版型放到該頁面中，例如網頁的banner、已登入之使用者資訊、選單，共用之 componment…等，均可以放在該頁，就不用每一頁都放了，且萬一有修改的需求，改一頁就等於全系統都改動了，可以減少重複的工作。

動作說明

以下說明今天的動作

1. 打開vscode 後，啟動專案，並開啟終端機
2. 執行「npm i express-ejs-layouts」，以安裝 express 的 layout 模組
3. 打開 app.js，輸入下列程式碼

var expressLayouts = require('express-ejs-layouts');   //宣告 express-ejs-layouts 元件
...
app.use(expressLayouts);  //使用 express-ejs-layouts 元件

4. 在 views 資料夾中，新增 layout.ejs 檔案
5. 將共用部份，例如基本版型、bootstraps 的 link、vue.js 之 CDN 網址放進去後存檔，如下圖
   
   說明：
   本段程式碼只是普通的 html 內容，其目的是做為樣版頁之用，重點處為第 33 行的 「<%- body %>」，express 在執行時，會先讀取 layout.ejs ，之後再以我們於 res.render 中指定要產出之頁面，替換掉第 33 行處，即完成頁面顯示
6. 打開 views/index.ejs 將其中之內容全部刪除，暫時先輸入「這是系統首頁」文字
7. 按下 F5，啟動 node.js 專案
8. 打開瀏覽器，輸入 http://localhost:3000/saf/ ，即可看到下圖
   
   黑色之 banner 為 layout.ejs 之內容，其下之 「這是系統首頁」則為 index.ejs 之內容
   後續所有之頁面，我們只需要專注在該頁面提供之功能即可，其他的CDN、共用元件、標題、主選單等，均在 layout 中處理，可增加系統的易維護性

結語

今天先處理完畢 layout 頁面，完成專案前端頁面的基本骨架，接下來我們要進行資料庫的處理，並使用系統中的第一個 ajax api，那我們明天再繼續吧