如何在koa中使用模板引擎

发布时间:2024-09-15 10:43:44

阅读量:140

在 Koa 中使用模板引擎，你需要遵循以下步骤：

安装相关依赖：

首先，你需要安装 Koa 和相应的模板引擎。例如，这里我们使用 koa 和 koa-views（一个简单的模板引擎中间件）以及 ejs 作为模板引擎。你可以通过 npm 或 yarn 安装它们：
```
npm install koa koa-views ejs
```
或者
```
yarn add koa koa-views ejs
```

创建一个 Koa 应用：

在你的项目文件夹中，创建一个名为 app.js 的文件，并设置一个基本的 Koa 应用：

const Koa = require('koa');
const app = new Koa();

// 其他中间件和设置

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

配置模板引擎：

在 app.js 中，引入 koa-views 和你选择的模板引擎（在这里是 ejs），然后将它们添加到 Koa 应用中。你还需要指定模板文件的路径和模板引擎类型：

const Koa = require('koa');
const views = require('koa-views');
const path = require('path');

const app = new Koa();

// 配置模板引擎
app.use(views(path.join(__dirname, './views'), {
  extension: 'ejs' // 指定模板文件的扩展名
}));

// 其他中间件和设置

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

创建模板文件：

在项目文件夹中，创建一个名为 views 的文件夹。在此文件夹中，创建一个名为 index.ejs 的模板文件，并添加一些基本的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>My Koa App</title>
</head>
<body>
  <h1><%= message %></h1>
</body>
</html>

在 Koa 应用中渲染模板：

现在，你可以在 Koa 应用中创建一个路由，该路由将渲染你的模板文件。为此，你需要安装 koa-router：

npm install koa-router

或者

yarn add koa-router

接下来，在 app.js 中引入 koa-router，并创建一个路由，该路由将渲染 index.ejs 模板：

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

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

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

// 创建路由
router.get('/', async (ctx) => {
  await ctx.render('index', {
    message: 'Hello, Koa!'
  });
});

// 使用路由
app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});