後端框架與API 開發(三) – 樣板引擎 和視圖模板
※ 視圖模板
- 視圖模板（View Templates） 是在 MVC 架構中負責展示數據的 HTML 文件，包含模板語法，用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯，讓代碼更加模塊化和易於維護。
- 視圖模板設計和使用的核心理念，就是「重複的事情不要重複做、效益最大化、有效利用資源」。
※ 樣板引擎
樣板引擎（Template Engine） 是網頁開發中用來產生前端網頁的工具。它會將包含 HTML 和模板語法的「樣板文件」轉換成實際的 HTML 文件並返回給瀏覽器。由於需要進行這種轉換，樣板文件的結構與普通的 HTML 文件有所不同。
※ 共同作用
實現了數據的動態展示和視圖邏輯的分離。
※ 二者的關係
- 視圖模板 通常是由 樣板引擎 處理的。視圖模板包含的模板語法由樣板引擎解析和渲染。
- 視圖模板是具體的文件或代碼片段，而樣板引擎是處理這些模板的工具。
※ 視圖模板常用的樣板引擎工具 – Handlebars
優點：
- 簡單且直觀：語法類似 HTML，易於上手。
- 清晰的邏輯分離：展示邏輯和業務邏輯分離，代碼更模塊化。模板只負責顯示數據，而業務邏輯則由後端處理。
- 強大的模板語法：支持條件語句（如 if）、迭代語句（如 each）和自定義助手（Helpers）。
- 可重用性：支持可重用的模板和部分模板（partials），並且可以在不同的視圖中重用相同的模板片段。
- Express 的無縫集成：express-handlebars 是 Handlebars 的延伸套件，使得在 Express 應用中使用 Handlebars 非常方便。
※ 使用樣板引擎來回應前端頁面 的4 個步驟：
- 下載與安裝 express-handlebars。
npm i express-handlebars //下載到 express-handlebars 的最新版本。
npm i express-handlebars@4.0.2 //下載指定版本號
- 設定在 Express 中使用 Handlebars 的設定。
// require express-handlebars here
const exphbs = require('express-handlebars')
// setting template engine
app.engine('handlebars', exphbs({ defaultLayout: 'main' }))
app.set('view engine', 'handlebars')
關於程式碼的解釋：
- 第一個參數是這個樣板引擎的名稱。
- 第二個參數用於放入與樣板引擎相關的設定。這裡設定了預設的佈局（default layout）為名為 main 的文件，這樣可以省去在每個模板中指定佈局的步驟。
2.1 第二種啟用 Handlebars方法：
const exphbs = require('express-handlebars');
app.engine('hbs', exphbs({ defaultLayout: 'main', extname: '.hbs' }))
app.set('view engine', 'hbs')
關於程式碼的解釋：
- 當我們在 app.engine 中新增名為 hbs 的樣板引擎時，這只是註冊它。只有在 app.set 中設置了 view engine，這個引擎才正式啟用。
- 呼叫 exphbs 時設定 extname: '.hbs'，可以將模板文件的副檔名設為 .hbs，這樣可以使用更簡短的文件名。
3. 使用 Express Handlebars。
- 定義佈局（layout）和局部樣板（partial template）。
※ 什麼是佈局（layout）：
在同一個網站內，幾乎每一個頁面都會套用的版型，就稱作佈局。
※ 什麼是局部樣板（partial template）：
在不同頁面會有不同內容的地方，我們就稱作「局部樣板 (partial template)」。
區分佈局和局部樣板的好處：
- 將佈局獨立成一個文件並套用在多個頁面中，可以節省重複內容。
- 撰寫局部樣板可以將不同的內容模組化，並在需要的地方動態引入這些局部樣板。這樣做可以讓整個頁面的結構更加清晰和易於管理。同時，這也意味著可以快速套用相同的佈局，但可以針對每個頁面獨立調整和修改內容，從而實現更靈活和個性化的頁面設計。
※ 建立 views 和 layouts 資料夾
※ 建立 layout：把「佈局」的部分放在 layouts 資料夾中。
- 在 layouts 這個資料夾中，先建立一支名為 main.handlebars 的檔案：
因為先前在 app.js 設定樣板引擎時，就已經透過 app.engine('handlebars', exphbs({ defaultLayout: 'main' })) 宣告預設請用名為 main.handlebars 這支檔案當作佈局。
- 【main.hbs】：使用長檔名或短檔名是個人習慣的差異，可以採用縮寫 .hbs。
- 在 main.handlebars 這支檔案裡，我們就可以開始撰寫網頁佈局的部分，而這裡的內容會在每一個頁面中都出現：
<!-- ./views/layouts/main.handlebars -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- partial templates will replace the part of "body" here -->
{{{ body }}} //把局部樣板的內容都放在這裡顯示。
</body>
</html>
- 三花括 {{{ body }}}說明：
這個三花括可以抽換成其他的 HTML 內容。這樣，我們在製作其他視圖樣板時，只需編寫 <body> 的內容，然後將其傳進 main 樣板中的三花括號處，組裝成一個完整的網頁。
- 雙花括 {{}} 說明：
使用 2 個 個花括弧 {{}} 引入變數時，則會將變數當作純文字。
- 相同的導覽列（navigation）有兩種寫法：
- 把導覽列放在 main.handlebars 中，可以讓導覽列與主要內容更緊密地結合在一起，像是這樣：
<!-- … -->
<body>
<!-- navigation -->
<nav class="navbar navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Movie List</a>
</div>
</nav>
<!-- partial templates will replace the part of "body" here -->
{{{ body }}}
</body>
<!-- … -->
- 另外建立header資料夾，把導覽列放在 navbar.handlebars 這支檔案裡，可以讓導覽列與其他全局元素（如標題和頁腳）分開，像是這樣：
<header>
<div class="nav-container">
<nav class="nav-left">
<ul>
<li>
{{> header/logo}} //將名為 header/logo 的局部樣板插入到目前的模板中。
</li>
<li>
<a href="/">
Home
</a>
</li>
<li>
<a href="/articles">
Articles
</a>
</li>
<li>
<a href="/about">
About
</a>
</li>
</ul>
</nav>
<nav class="nav-right">
<ul>
{{!-- <li>
<a href="/user">
User
</a>
</li> --}}
<li>
<a href="/auth/login">
Login
</a>
</li>
</ul>
</nav>
</div>
</header>
※ 建立首頁：
- 建立第一支局部樣板的檔案。它會放在 views 這個資料夾中，取名為 index.handlebars，也就是首頁。局部樣板內所撰寫的內容，之後就會出現在 layouts 裡 main.handlebars 檔案的 {{{ body }}} 中：
- 並在其中添加一些 HTML 內容作為測試：
<h2>Hello world! 這是 index</h2>
3. Express 中路由設定，app.js 會長像這樣：
// app.js
// ...
// routes setting
app.get('/', (req, res ) => {
res.render('index')
}) //res.render 的意思，是指 Express 會「回傳 HTML 來呈現前端樣板」。
4. 啟動專案有兩個方式。
$ nodemon app.js
npm run dev進入瀏覽器輸入 localhost:3000，你可以看到畫面長得像這樣：
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
在前一篇我們已經成功地建立簽核表單及簽核節點並關聯回請假表單，而本篇會接著介紹如何管理簽核節點狀態並同步更新簽核表單狀態。
本文介紹瞭如何在後端系統開發時設計不同表單的簽核流程，包括請假表單和採購表單。以及如何動態生成簽核表單，並建立簽核節點。另外還介紹瞭如何利用繼承來簡化簽核流程的設定。
ts-rest 可以實現從服務器到客戶端的全型別安全，可以有效降低前後端溝通血流成河的機率。(´,,•ω•,,)
軟體系統的發展歷程大多相似，首重解決基本需求、提供操作介面，進而提升安全性、擴充功能、優化操作。
在軟體開發領域中，Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我，到底是 Backend 比較難還是 Frontend 比較容易？
製作檔案後續流程
-->底片-->曬版-->印刷機---印刷
-->出版----------->印刷機---印刷
最先接觸的是底片機，那時照相機還是膠捲時代，而報紙與周刊要印刷前都是輸出成透明黑字圖底片，再經由曬版功序進入印刷機。
出片機
以下廠牌為當時最大宗(中譯名)，西元年是我
菜雞成長故事
寫這一篇主因也是因為身邊朋友陸陸續續想往軟體業發展，或是想動手做做小專案，故才成就了這一篇心路歷程，這邊會介紹我的背景、學習管道跟我如何選擇第一個程式語言作為敲門磚跟學習時間，希望能幫助還在努力中或是預計要轉職的各位有一個方向或是參考？(雖然我依然還是一個小菜雞，請鞭小力)
#框架 #貝特森 #NLP #徐承庚 #心理學 #薩提爾 #後設模式
今天的影片內容，我們來聊聊你有沒有被框架效應綁架了你的判斷？
想想最近新聞瘋狂報導的白飯之亂，公說公有理，婆說婆有理
到底誰才是對的呢？
而框架效應深深影響著我們在判斷要買什麼東西、做什麼投資...等決策
初學後端的人，可能對如何學習後端技術或語言會感到很困惑。
本篇文章提供了作者的幾種思路，幫助後端學員進行學習
在工作室培訓難免會陷入低潮的原因，本篇文章分析了陷入低潮的原因，及提供預防及解決方法。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
在前一篇我們已經成功地建立簽核表單及簽核節點並關聯回請假表單，而本篇會接著介紹如何管理簽核節點狀態並同步更新簽核表單狀態。
本文介紹瞭如何在後端系統開發時設計不同表單的簽核流程，包括請假表單和採購表單。以及如何動態生成簽核表單，並建立簽核節點。另外還介紹瞭如何利用繼承來簡化簽核流程的設定。
ts-rest 可以實現從服務器到客戶端的全型別安全，可以有效降低前後端溝通血流成河的機率。(´,,•ω•,,)
軟體系統的發展歷程大多相似，首重解決基本需求、提供操作介面，進而提升安全性、擴充功能、優化操作。
在軟體開發領域中，Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我，到底是 Backend 比較難還是 Frontend 比較容易？
製作檔案後續流程
-->底片-->曬版-->印刷機---印刷
-->出版----------->印刷機---印刷
最先接觸的是底片機，那時照相機還是膠捲時代，而報紙與周刊要印刷前都是輸出成透明黑字圖底片，再經由曬版功序進入印刷機。
出片機
以下廠牌為當時最大宗(中譯名)，西元年是我
菜雞成長故事
寫這一篇主因也是因為身邊朋友陸陸續續想往軟體業發展，或是想動手做做小專案，故才成就了這一篇心路歷程，這邊會介紹我的背景、學習管道跟我如何選擇第一個程式語言作為敲門磚跟學習時間，希望能幫助還在努力中或是預計要轉職的各位有一個方向或是參考？(雖然我依然還是一個小菜雞，請鞭小力)
#框架 #貝特森 #NLP #徐承庚 #心理學 #薩提爾 #後設模式
今天的影片內容，我們來聊聊你有沒有被框架效應綁架了你的判斷？
想想最近新聞瘋狂報導的白飯之亂，公說公有理，婆說婆有理
到底誰才是對的呢？
而框架效應深深影響著我們在判斷要買什麼東西、做什麼投資...等決策
初學後端的人，可能對如何學習後端技術或語言會感到很困惑。
本篇文章提供了作者的幾種思路，幫助後端學員進行學習
在工作室培訓難免會陷入低潮的原因，本篇文章分析了陷入低潮的原因，及提供預防及解決方法。