什麼是Express？
Express是node.js應用在sever端的框架，我們可以利用Express快速搭建一個網站。
什麼是EJS？
EJS簡單來說就是Client端的嵌入式JavaScript Template。
EJS Tags
常用的Tags有：
- <%
- Script標籤，裡面可以放JS語法
- <%_
- Html標籤，裡面可以放HTML語法
- <%=
- 輸出值（value）
- %>
- 結束用的tag
- <%-
- 輸出unescaped value
EJS Includes
Includes tag可以將檔案導入ejs中，像是網站中有固定的header或footer，我們可以先把檔案獨立出來寫好，最後再導入ejs中。例如：
<%- include('../articles/header'); %>
開始用Express
安裝Express
npm i express
npm i -g express-generator
導入與創建modules
const express = require('express');
const app = express();
設定viwes的位置
views是Express規定放置html檔案的資料夾名稱，當裝好Express後在同一個資料夾裡新資料夾：views。
詳請可見：Express
const path = require('path');
app.set('view engine', 'ejs'); //設定要使用的範本引擎，這邊用ejs
app.set('views', path.join(__dirname, '/views')) //設定檔案所在的目錄
設定Port
在這邊我們建立一個local的網址：localhost:4000
app.listen('4000', function() {
console.log("listen port 4000!")
})
Run看看前：記得用Terminal重啟js檔案
當我們在index.js寫完程式，想要在瀏覽器看看成果時，記得用Terminal重啟檔案。
- Ctrl+C
- 跳出index.js，回到zsh
- node index.js
- 重啟js檔案
req.params
req.params是取參數的一種方法，以下為簡易範例：
app.get('/users/:id', (req, res) => {
const { id } = req.params
res.send(`使用者id為： ${id}`)
})
req.query
req.query也是取參數的一種方法，長得像這樣：search?q=fwefjie，裡面有?與=。以下為簡易範例：
app.get('/search', (req, res) => {
const { q } = req.query
res.send(`你尋找的是： ${q}`)
})
res.render
動態網頁中常常會出現模板一樣，但資料不一樣的網頁，以FB來說每個人的個人主頁都很像（有大頭貼、姓名...等），只是資料不一樣。這時我們可以創立一個共用的模板來使用。res.render等於渲染網頁，將js的資料傳到另一個網頁，再由瀏覽器渲染出來。
//index.js
app.get('/users/:id', (req, res) => {
const { id } = req.params
res.render('user', { id, items: ['apple', 'banana', 'orange'] })
})
以下為ejs檔
//user.ejs
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>我的id是：
<%= id %>
</h1>
<ul>
我喜歡的東西是：
<%for(let item of items){%>
<li>
<%= item %>
</li>
<% } %>
</ul>
</body>
</html>
結果：
導入json檔案
const pages = require('./pages.json') //用require引入
導入Static檔案
Static檔案包括如：css檔、js檔、img檔。所在預設資料夾名稱為：public。
app.use(express.static('public')) //標準
app.use(express.static(path.join(__dirname, '/public'))) //設定絕對路徑
然後在ejs檔中加入css連結：
<link rel="stylesheet" href="/style.css">
參考資料：
![[FE201] SASS 結構化、模組化](https://s103071049.coderbridge.io/2021/07/09/sass-結構化與模組化/?utm_source=coderbridge-io&utm_medium=blog_related_post_img&utm_campaign=老靈魂手冊_[FE201] SASS 結構化、模組化_@s103071049_https://static.coderbridge.com/images/covers/default-post-cover-3.jpg)
