Koa 基础篇（三）—— 模板引擎
暴辰龙
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>
类似资料：