在 Web 开发过程中，我们经常需要将数据渲染到 HTML 页面上，让用户能够可视化地显示数据内容。而 EJS 是一种常见且易于使用的模板引擎，可以帮助我们快速生成页面内容，并且拓展性很好，在 Koa 中使用 EJS 也非常方便。本文将详细介绍如何在 Koa 中使用 EJS 进行模板渲染，并提供示例代码。
为什么选择 EJS
在选择模板引擎时，我们需要评估模板引擎的可用性、易用性、可定制性等因素。相较于其他模板引擎，EJS 具备以下优势：
- 非常易学习，易于上手
- 支持 JavaScript 语法，使得以数据和逻辑生成 HTML 程序相当的容易
- 与 Koa 等 Node.js 应用程序非常兼容
- 提供了对于 include（引用其他 EJS 文件）、partials（对不同部分共享代码）和 layout（提供一个基本布局来继承）的支持
- 提供了非常方便的工具来自动化页面构建的过程
考虑到上述优势，我们选择 EJS 作为 Koa 的模板引擎。
安装 EJS 并设置 Koa 的渲染引擎
首先，我们需要安装 koa-views，它提供了向 Koa 中添加模板的功能，可以使用多个模板引擎，如 EJS、Pug、Handlebars 等等。安装命令如下：
npm install koa-views --save
接下来，我们需要安装 EJS 模板引擎：
npm install ejs --save
在完成安装后，在初始化应用时，我们需要为渲染引擎使用 koa-views 中提供的功能：
const Koa = require('koa');
const views = require('koa-views');
const app = new Koa();
app.use(views('views', { extension: 'ejs' }));在这个代码片段中，views 方法告诉 Koa 将模板放在 views 目录下面，ejs 是我们使用的模板引擎，这样在后续的模板渲染时我们就可以按照 views 目录下对应的 EJS 文件进行渲染了。
渲染 EJS 模板
完成上述步骤后，我们已经可以向 Koa 中添加 EJS 模板，接下来就是如何渲染这些模板了。在向客户端发送视图之前，我们需要使用 ctx.render() 方法来设置 body 属性。下面是一个简单的例子：
// www.javascriptcn.com code example
const Koa = require('koa');
const views = require('koa-views');
const app = new Koa();
app.use(views('views', { extension: 'ejs' }));
app.use(async (ctx) => {
await ctx.render('index', {
title: 'Koa and EJS',
message: 'Hello World!'
});
});在这里，我们指定了视图的 title 和 message 参数。当这个请求被处理，ctx.render 方法就会搜索 views 目录下的 index.ejs 文件，用提供的参数对这个文件进行渲染，然后生成响应的 body 属性内容。
值得注意的是，Koa2 对 ctx.render() 方法有一些特殊的优化，可以让我们不必显式调用 await 关键字，如果你不想使用 async 函数，也可以使用 then() 方法来显式地处理异步操作。
EJS 模板语法
在开始使用 EJS 时，我们需要了解一些关键的语法和概念。例如，我们可以使用 <% 和 %> 来包含 JavaScript 代码，这些代码将用于处理请求，例如：
<h1><%= title %></h1> <p><%= message %></p>
在这个例子中，我们通过 <%= 和 %> 来插入变量 title 和 message，它们将被替换为响应给客户端的实际值。
除了变量操作之外，EJS 还提供了以下的内置功能：
- 条件语句：
<% if(...) { ... } %> - 循环语句：
<% for(...) { ... } %> - 局部模板引用：
<%- include('partials/head') %> - 模板继承：
<%- include('layouts/application', { contents: html }) %>
使用这些特性可以让我们更方便地组织和维护代码。
结语
在这篇文章中，我们介绍了如何在 Koa 中使用 EJS 进行模板渲染，并提供了示例代码。除此之外，我们还了解了 EJS 的语法和内置功能。借助这些技术，我们可以快速构建响应式的 Web 应用程序，让我们的用户体验更好。我们希望这篇文章能帮助你更好地掌握 EJS 和 Koa。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d64066a941bf7134bf22b8