Koa2：ejs模板引擎的使用

• 安装koa-views和ejs

1. 安装 koa-views 
npm install --save koa-views / cnpm install --save koa-views 

2. 安装 ejs 
npm install ejs --save / cnpm install

• 配置koa-views中间件

const Koa = require('koa'),
      body = require('koa-body'),
      Router = require('koa-router'),
      views = require('koa-views');

const app = new Koa;
const router = new Router;

// app.use(views('../views', { map: { html: 'ejs'}}))
// 这种方式配置模板引擎，模板引擎的后缀名是html结尾

app.use(views('../views', {
    extension: 'ejs'
}));

router.get('/', async (ctx) => {
    await ctx.render('views')
})


app.use(router.routes(), router.allowedMethods());

app.listen(3000, () => console.log('http://localhost:3000'))

image.png
创建目录存放ejs模板引擎，需要注意的是官网指出两种配置引擎的方式，app.use(views('../views', { map: { html: 'ejs'}}))这种方式配置的模板引擎的后缀名是html结尾。

• ejs引入外部模板
  这种做法的好处是可以将部分公共的模板提取出来

<%- include xxx.ejs %>

• ejs绑定数据

<%=xxx%>

// 将title传入模板中
router.get('/', async (ctx) => {
    let title = '首页站点';

    await ctx.render('views', {
        title: title
    })
})

// 使用
 <%=title%>

• ejs绑定html模板

<%-xxx%>

// 将temp的html模板传入ejs中
router.get('/', async (ctx) => {
    let temp = `<h2>ejs模板</h2>`;

    await ctx.render('views', {
        temp: temp
    })
})


// 使用
<%-temp%>

• ejs模板中使用if判断语句

router.get('/', async (ctx) => {
    let status = false;

    await ctx.render('views', {
        status,
    })
})

<% if(status) {%>
    <span>true</span>
<% } else {%>
    <span>false</span>
<% } %>

• ejs模板中使用for循环语句

router.get('/', async (ctx) => {
    let list = [
        {
            name: 'zhangsan',
            age: 24
        },
        {
            name: 'lisi',
            age: 20
        },
        { 
            name: 'admin',
            age: 30
        }
    ];

    await ctx.render('views', {
        list,
    })
})

<% for(let i = 0; i < list.length; i++) { %>
     <p>姓名: <%=list[i].name%> 年龄: <%=list[i].age%></p>
<% } %>