如何在 Koa 中使用 EJS 模板引擎？

推荐答案

// www.javascriptcn.com code example
const Koa = require('koa');
const views = require('koa-views');
const path = require('path');

const app = new Koa();

// 配置 EJS 模板引擎
app.use(views(path.join(__dirname, '/views'), {
  extension: 'ejs'
}));

// 路由处理
app.use(async (ctx) => {
  await ctx.render('index', {
    title: 'Koa with EJS',
    message: 'Hello, EJS!'
  });
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

本题详细解读

1. 安装依赖

首先，你需要安装 koa 和 koa-views 这两个依赖包。koa-views 是一个中间件，用于在 Koa 中渲染视图。

npm install koa koa-views ejs

2. 配置 EJS 模板引擎

在 Koa 中，使用 koa-views 中间件来配置 EJS 模板引擎。你需要指定模板文件的存放路径以及模板引擎的类型。

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

• path.join(__dirname, '/views')：指定模板文件存放的目录。
• extension: 'ejs'：指定使用 EJS 作为模板引擎。

3. 渲染模板

在路由处理中，使用 ctx.render 方法来渲染模板。ctx.render 方法的第一个参数是模板文件的名称（不需要加 .ejs 后缀），第二个参数是传递给模板的数据。

await ctx.render('index', {
  title: 'Koa with EJS',
  message: 'Hello, EJS!'
});

4. 创建模板文件

在 views 目录下创建一个 index.ejs 文件，内容如下：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %></title>
</head>
<body>
  <h1><%= message %></h1>
</body>
</html>

5. 启动服务器

最后，启动 Koa 服务器并监听端口 3000。

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

通过以上步骤，你就可以在 Koa 中使用 EJS 模板引擎来渲染视图了。