EJS | Notion

EJS stands for Embedded JavaScript - (內嵌的)
EJS is a simple templating language that lets you generate HTML markup with plain java Script
- 旨在簡化、清晰 JS 語法，如迴圈寫法等並且更友善生成 HTML 內容
- 可以在 mark up 語法( e.x: HTML )中直接寫 JS code
it's a module in npm.

安裝:

一樣開專案資料夾 npm init 後，便可以 npm install express nodemon ejs 一次安裝。一樣開好

index.html app.js 等檔案。

專案資料夾設定:

Untitled

▲ 需要額外設定一個 views 資料夾，把 index.ejs 放在裡面而不是用 index.html

app.js 設定:

const express = require('express');
const app = express();
const ejs = require('ejs');

// middleware
app.use(express.static('public'));

// ejs 需要用 render 方法
app.get('/', (req, res) => {
  res.render('index.ejs');
})

app.listen(3000, () => {
  console.log('Server is listening in port 3000.');
});

EJS的變數操作

app.js 部分:

const express = require('express');
const app = express();
const ejs = require('ejs');

// middleware
app.use(express.static('public'));

app.get('/', (req, res) => {
  res.render('index.ejs');
})

// URL req變數 :name
app.get('/:name', (req, res) => {
  let { name } = req.params; // 解構 :name
   // 讓 name 能在 person.ejs 裡面以 name 來做使用, 一樣時 {name : name} 可簡寫為  {name} 
  res.render('person.ejs', {name : name});
})

app.listen(3000, () => {
  console.log('Server is listening in port 3000.');
});

接下來就是寫一個 HTML 分頁(person.ejs) 以使用 name 變數了:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Person Name</title>
  <link rel="stylesheet" href="/styles/style.css">
</head>
<body>
  <!-- EJS import 變數的方法: <%= %> 標籤 -->
  <h1> Hello <%= name %>  </h1>
</body>
</html>

結果如下:

Untitled

▲ 可以看到有順利抓取到 URL 的 :name 變數(Andrew) 並且在網頁中使用

<aside> 💡 在 EJS 當中如果想要在網頁中顯示的 code 使用 <%= %>; 若該行 code 只是 JS 運算過程，不打算顯示，則用 <% %>就好，再來會示範在EJS 檔案中寫 JS 的寫法

</aside>