koa2 从入门到进阶(四)-ejs模板

上一篇讲了 Koa 中间件和洋葱模型。这一篇把 ctx.body 换成模板渲染：在 Koa 里用 ejs 输出页面。

Express 里常用 ejs；Koa 同样可以，需要 koa-views 和 ejs 两个模块。模板语法本身见官网 https://ejs.bootcss.com/，这里只讲在 Koa 里怎么接上。

一、安装 koa-views 与 ejs

npm install koa-views --save / cnpm install koa-views --save
npm install ejs --save / cnpm install ejs --save

第一个参数 'views' 是模板目录，项目里要建同名文件夹放模板。若文件以 .html 结尾，解开 map 那段注释、关掉 extension 即可。

二、在 app.js 里接入模板

用应用级中间件往 ctx.state 挂公共数据，每个页面都能引用。路由里不再写 ctx.body，改成 ctx.render('index', { title, list })：第一个参数是 views 目录下的文件名（不含后缀），对象里是要传给模板的数据。

//引入 koa模块
const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views');

//实例化
const app = new Koa();
const router = new Router();

//配置模板引擎中间件

// 模板的后缀名是.html
// app.use(views('views', {
//     map: {html: 'ejs'}
// }));
// 模板的后缀名是.html
app.use(views('views', {
    extension: 'ejs'
}));

//写一个中间件配置公共的信息
app.use(async (ctx, next) => {
    ctx.state.commonData = "这是一个公有数据，每个页面都能引用";
    // 继续向下匹配路由
    await next();
});

router.get('/', async (ctx) => {
    let title = "hello world";
    let list = ["aaa", "bbb", "ccc"];

    await ctx.render('index', {
        title,
        list,
    });
});

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

//启动路由
app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

三、index.ejs 与 news.ejs

模板里用 <% %> 跑逻辑、<%= %> 输出变量。原文 index.ejs 写成了 commenData，与中间件里的 commonData 对不上，下面按能跑通的名字写出。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <% include blocks/header.ejs %>
    <p><%= commonData %></p>
    <p><%= title %></p>
    <ul>
        <% for(var i = 0;i < list.length;i++){ %>
            <li><%= list[i] %></li>
        <% } %>
    </ul>
</body>
</html>

news.ejs（原文文件名写成 new.ejs，应对应路由里的 news）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<% include blocks/header.ejs %>
<h2><%= commonData %></h2>
</body>
</html>

公共数据、title、列表都能出现在页面上，说明模板引擎已经接好。ejs 运算符号细节仍以官网为准。

一句话总结：Koa 用 koa-views + ejs；公共数据放 ctx.state，页面用 ctx.render 渲染 views 目录下的模板。