koa2中使用模闆引擎

建立項目目錄

mkdir koa_view
           

進入項目目錄

cd koa_view
           

初始化

npm init
           

安裝對應子產品

https://www.npmjs.com/package/koa-view

https://www.npmjs.com/package/koa-ejs

yarn add koa --save
yarn add koa-router --save
yarn add koa-view --save || npm install koa-views --save
yarn add ejs --save
           

使用

let Koa = require('koa');
let router = require('koa-router')();
var views = require('koa-views');

let app = new Koa();

/**
 * 這種配置方式模闆字尾名為html
 * app.use(views(__dirname + '/views', {
 *  map: {
 *       html: 'ejs'
 *  }
 * }));
 */

//  這種方式模闆引擎為ejs
app.use(views(__dirname + '/views', {
    extension: 'ejs'
}))

router.get('/', async (ctx) => {
    await ctx.render('index', {
        user: '天使'
    });
});

app.use(router.routes());

app.listen(3000);
           

目錄結構

綁定資料

app.js

router.get('/', async (ctx) => {
    await ctx.render('index', {
        user: '天使'
    });
});
           

index.ejs

你好<%=user%>
           

引入模闆

<%-include common/header.ejs%>
           

判斷語句

router.get('/', async (ctx) => {
    let num = 23;
    await ctx.render('index', {
        num: num
    });
});
           

<%if(num > 24){%>
  年齡大于24
<%}else{%>
  年齡小于24
<%}%>
           

循環語句

router.get('/news', async (ctx) => {
    let list = ['111', '222', '333'];
    await ctx.render('news', {
        list: list
    });
});
           

<ul>
    <%for(var i = 0 ; i < list.length; i++){%>
        <li><%=list[i]%></li>
    <%}%>
</ul>
           

在中間件中配置公共資料

/**
 * 注意：需要在每一個路由的render裡面都要渲染一個公共的資料
 * ctx.state = {  // 放在中間件裡面
 *      session: this.sesstion,
 *      title: 'app'
 * };
 */

app.use(async (ctx, next) => {
    ctx.state.userinfo = "張三";
    await next(); // 繼續向下比對路由
});
           

<h2>公共資料：<%=userinfo%></h2>