前端

koa ejs 模板引擎

云博小周宇2 Mins Read

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>