在 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');
});
现在,当你访问 http://localhost:3000
时,你应该看到 “Hello, Koa!” 消息。你可以根据需要修改模板文件和传递给模板的数据。