Koa 中 ejs 模板的使用
ejs的基本使用
安装 koa-views 和 ejs
npm install --save koa-views/cnpm install --save koa-views
npm install ejs --save / cnpm install ejs --save
引入 koa-views 配置中间件
const views=require('koa-views');
app.use(views('views',{map:{html:'ejs'}})); // 模板后缀名是ejs
Koa中使用ejs
router.get('/add',async(ctx)=>{
lettitle='hello koa2'
await ctx.render(index',{
title
})
})
Ejs 引入外部的ejs模板
<%-includeheader.ejs%>
ejs的基本使用实例
app.js
let Koa=require('koa')
let router = require('koa-router')()
let views = require('koa-views')
var app = new Koa()
//配置模板引擎中间件 --第三方中间件
//这样配置也可以 注意如果这样配置的话 模板的后缀名是.html
//app.use(views('views', { map: {html: 'ejs' }}));
app.use(views('views',{
extension:'ejs' // 应用ejs模板引擎
}))
//写一个中间件配置公共的信息
//注意：我们需要在每一个路由的render里面都要渲染一个公共的数据。公共的数据放在这个里面，这样的话在模板的任何地方都可以使用
app.use(async (ctx, next)=>{
ctx.state.userinfo='张三';
await next(); // 继续向下匹配路由
})
router.get('/',async (ctx)=>{
let title="你好ejs";
await ctx.render('index',{
title: title
});
})
router.get('/news',async (ctx)=>{
let list=['11111','22222','33333'];
let content="<h2>这是一个h2</h2>";
let num=12;
await ctx.render('news',{
list: list,
content: content,
num: num
})
})
app.use(router.routes()); /*启动路由*/
app.use(router.allowedMethods());
app.listen(3000);
public/header.ejs
<h1 class="title">这是一个头部的模块</h1>
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<% include public/header.ejs%>
这是一个ejs的模板引擎
<h2><%=title%>-----<%=userinfo%></h2>
</body>
</html>
news.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<% include public/header.ejs%>
<h2>ejs循环数据---<%=userinfo%></h2>
<ul>
<%for(var i=0;i<list.length;i++){%>
<li><%=list[i]%></li>
<%}%>
</ul>
<h2>绑定html数据</h2>
<br/>
<%=content%>
<br/>
<%-content%>
<h2>条件判断</h2>
<%if(num>24){%>
大于24
<%}else{%>
小于24
<%}%>
</body>
</html>
