ejs
- 安裝
npm install --save ejs koa-views
- 引入
const views = require("koa-views")
app.use(views("views",{extension:"ejs"}))
注意：上面這裏意思就是把路徑 views 作爲存放 ejs 模板的路徑。
- 基本使用
router.get("/news",async (ctx,next) => {
let str = "jonas"
await ctx.render("news",{str})
})
訪問 /news 時，會把數據 str 帶到 news 模板頁面。
在 views 目錄下創建模板頁面 news.ejs ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
<h2>news page</h2>
<h2><%= str %></h2>
</body>
</html>
通過 <%= 變量名 %> 來引入數據。
最後，通過瀏覽器訪問該路由就可以獲取到這個數據了。
除此以外，ejs 還有以下用法：
引入模板
在一個模板中引入其他模板，這裏有點面向組件開發的意思。
例如，在上面的 news.ejs 模板頁面中引入一個 header.ejs 。
header.ejs 內容：
<header>
this is a header module
</header>
在 news.ejs 中引入：
<%- include header.ejs%>
插入 HTML 元素
語法：<%- html代碼 %>
循環語句與條件判斷語句
循環語句：
<% for(){ %>
//循環體
<% } %>
條件判斷語句：
<% if(){ %>
//邏輯
<% } %>
art-template
art-template 模板引擎有兩種語法，一種是 ejs 的語法，另外一種是類似於 angular 的語法。它也是一種模板引擎，它比 ejs 高效。
- 安裝
npm install --save art-template koa-art-template
- 引入
const render = require("koa-art-template")
render(app,{
root:path.join(__dirname,"views"),
extname:".ejs",
debug: process.env.NODE_ENV !== 'production'
})
注意：views 是存放模板的目錄，extname 是模板的後綴名。
- 基本使用
router.get("/news",async (ctx,next) => {
ctx.render("news")
})
使用的方式也跟 ejs 的一樣，通過 ctx.render 就可以渲染模板。
其他語法：
router.get("/news",async (ctx,next) => {
let username = "jonas"
let bool = true
let div = "<div>this is a div box</div>"
let list = ["1111","2222","3333"]
ctx.render("news",{
username,
bool,
div,
list
})
})
<body>
<h2>輸出表達式</h2>
<h3>{{username}}</h3>
<h2>三元運算符</h2>
<h3>{{bool ? 1 : 2}}</h3>
<h2>解析HTML</h2>
<h3>{{@div}}</h3>
<h2>條件判斷</h2>
{{if(bool)}}
<div>you can see me</div>
{{/if}}
<h2>循環</h2>
<ul>
{{each list}}
<li>{{$index}} - {{$value}}</li>
{{/each}}
</ul>
<h2>子模板</h2>
{{include './header.ejs'}}
</body>