Web開發學習筆記20 — Express、EJS


Posted by Teagan Hsu on 2021-01-13

什麼是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">

參考資料:

  1. How To Use EJS to Template Your Node Application
  2. 有輪堪用直須用:Express.js

#Express #EJS







Related Posts

Gatsby GraphQL讀取JSON

Gatsby GraphQL讀取JSON

Vue 元件 : Props in & Emit out

Vue 元件 : Props in & Emit out

Robotframework框架介紹

Robotframework框架介紹


Comments