koa-views 是一个视图管理模块,它的灵活度很高,支持很多的模版引擎,这里我们给它配置的引擎是 ejs
。
运行 npm i koa-views
& npm i egg.js
。
const views = require('koa-views')
const path = require('path')
// 配置视图
app.use(views(path.join(__dirname, './views'), {
extension: 'ejs'
}))
我们新建一个 views
目录,这里面存放我们的视图文件,在新建一个 index.ejs
。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ejs</title>
</head>
<body>
<%=message%> <!-- ejs 的模版语法,读取变量 message | 是从 render 传递过来 -->
</body>
</html>
app.js
app.use(async (ctx, next) => {
await ctx.render('index', {message: 'index'}) // render 渲染方法,这里加载到 views/index.ejs 文件 | 第二参数是传参到模版
await next()
})
ejs 是一个非常简洁的 JavaScript 模版引擎,使用起来也很简单。
/*
读取变量
*/
<%=%>
/*
控制流程,循环操作
*/
<%%>
// 例子
<% if (arr) {%>
<% arr.forEach((element) => { %>
<%=element%>
<%})%>
<%}%>
/*
引入文件
*/
<% include file %>