一、Koa中使用ejs模板引擎
1.安装koa-view 和 ejs
npm install koa-view ejs -S
--registry=https://registry.npm.taobao.org 使用淘宝镜像
2.引入koa-views 配置中间件
const views = require('koa-views');
app.use(views(__dirname + '/views', {
extension: 'ejs'
}))
或者
app.use(views('views', { map: {html: 'ejs' }}));
//模板文件的后缀名为html
3.创建模板及渲染
views/index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= title %></title>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to Koa2</p>
</body>
</html>
router.get('/',async (ctx) => {
console.log('匹配到首页路由')
// ctx.body = "<h1>首页</h1>"
await ctx.render('index', { title:'lqs' })
})
4、Ejs 引入模板(不要加引号)
<%- include header.ejs %>
5、Ejs 绑定数据
<%=h%>
6、Ejs 绑定 html 数据
<%-h%>
7、Ejs 模板判断语句
<% if(true){ %>
<div>true</div>
<%} else{ %>
<div>false</div>
<%} %>
8、Ejs 模板中循环数据
<%for(var i=0;i<list.length;i++) { %>
<li><%=list[i] %></li>
<%}%>
9.公共数据
image.png
//写一个中间件来配置公共信息
app.use(async (ctx,next) =>{
ctx.state={
userinfo:'张三'
}
await next()
})
这样所有的模板都可以使用 <%= userinfo %>
网友评论