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>