Koa 中使用 ejs 模板的使用
1、安装 koa-views 和 ejs
1. 安装 koa-views npm install --save koa-views / cnpm install --save koa-views
2. 安装 ejs npm install ejs --save / cnpm install ejs --save
2、引入 koa-views 配置中间件
const views = require('koa-views');
app.use(views('views', { map: {html: 'ejs' }}));
3、Koa 中使用 ejs:
router.get('/add',async (ctx)=>{
let title = 'hello koa2'
await ctx.render(index',{ title
})
})
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> <%}%>
demo :
//引入 koa模块
/*
ejs模板引擎的使用：
1.npm install koa-views --save
2.npm install ejs --save
3.var views = require('koa-views');
app.use(views(__dirname, { extension: 'ejs' })) //模板的后缀名是ejs
4 await ctx.render('index');
注意：我们需要在每一个路由的render里面都要渲染一个公共的数据
公共的数据放在这个里面，这样的话在模板的任何地方都可以使用
ctx.state = { //放在中间件
session: this.session,
title: 'app'
};
* */
var Koa=require('koa'),
router = require('koa-router')(),
views = require('koa-views');
var app=new Koa();
//配置模板引擎中间件 --第三方中间件
//app.use(views('views', { map: {html: 'ejs' }})); //这样配置也可以 注意如果这样配置的话 模板的后缀名是.html
app.use(views('views',{
extension:'ejs' /*应用ejs模板引擎*/
}))
//写一个中间件配置公共的信息
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)=>{
//ctx.body='这是一个新闻';
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);
<!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>
<!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%>
<br/>
<br/>
<h2>条件判断</h2>
<br/>
<%if(num>24){%>
大于24
<%}else{%>
小于24
<%}%>
<br/>
<br/>
</body>
</html>