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>