[Koa2 系列 11] 認識 Koa2 模板 - ejs

日期：
[Koa2 系列 11] 認識 Koa2 模板 - ejs

開發中不會把全部 HTML 都寫進 JavaScript 裡面
所以必須要藉由一個名叫 ejs 的中間件來完成

安裝

要使用 ejs 模板引擎 我們必須依賴中間件來操控

npm install --save koa-views

安裝好了之後
再來安裝 ejs 模板引擎本身

npm install --save ejs

撰寫模板

在 view 這個資料夾下建立新的 index.ejs，如果沒有 view 資料夾的同學就自己建一個

<!DOCTYPE  html>
<html>
<head>
 <title><%= title %></title>
</head>
<body>
 <h1><%= title %></h1>
 <p>EJS Welcome to <%= title %></p>
</body>
</html>

在 Koa 使用模版

const Koa = require('koa')
const views = require('koa-views')
const path = require('path')
const app = new Koa()

app.use(views(path.join(__dirname, './view'), {
 extension: 'ejs'
}))

app.use(async (ctx) => {
 let title = 'hello koa2'
 await ctx.render('index', {
  title
 })
})

app.listen(3000, () => {
 console.log('[demo] server is starting at port 3000');
})

載入中間件

首先當然是引用中間件 const views = require('koa-views')
並且呼叫 node 內建取得路徑的方法 const path = require('path')，可以參考官方說明

使用中間件

app.use(views(path.join(__dirname, './view'), {
 extension:  'ejs'
}))

收先使用 koa-views（剛剛我們把它定義成 const views）來呼叫 path 方法中的 join
指定路徑到 view 這個資料夾，並且指定模板擴展（extension）為 ejs

渲染內容

app.use(async (ctx) => {
 let title = 'hello koa2'
 await ctx.render('index', {
  title
 })
})

由於載入需要時間，所以使用 await 呼叫 ctx.render 方法指定要用來渲染的檔名
並且傳入參數 title

這部分和 Laravel 的 blade 幾乎是一樣的，理解上沒什麼困難

留言

張貼留言