什麼是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">
參考資料: