如何在koa中使用模板引擎

小樊
81
2024-09-15 10:43:44
欄目: 編程語言

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

  1. 安裝相關(guān)依賴：

    首先，你需要安裝 Koa 和相應(yīng)的模板引擎。例如，這里我們使用 koa 和 koa-views（一個(gè)簡單的模板引擎中間件）以及 ejs 作為模板引擎。你可以通過 npm 或 yarn 安裝它們：

    npm install koa koa-views ejs

    或者

    yarn add koa koa-views ejs

  2. 創(chuàng)建一個(gè) Koa 應(yīng)用：

    在你的項(xiàng)目文件夾中，創(chuàng)建一個(gè)名為 app.js 的文件，并設(shè)置一個(gè)基本的 Koa 應(yīng)用：

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

// 其他中間件和設(shè)置

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

  3. 配置模板引擎：

    在 app.js 中，引入 koa-views 和你選擇的模板引擎（在這里是 ejs），然后將它們添加到 Koa 應(yīng)用中。你還需要指定模板文件的路徑和模板引擎類型：

    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' // 指定模板文件的擴(kuò)展名
}));

// 其他中間件和設(shè)置

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

  4. 創(chuàng)建模板文件：

    在項(xiàng)目文件夾中，創(chuàng)建一個(gè)名為 views 的文件夾。在此文件夾中，創(chuàng)建一個(gè)名為 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>

  5. 在 Koa 應(yīng)用中渲染模板：

    現(xiàn)在，你可以在 Koa 應(yīng)用中創(chuàng)建一個(gè)路由，該路由將渲染你的模板文件。為此，你需要安裝 koa-router：

    npm install koa-router

    或者

    yarn add koa-router

    接下來，在 app.js 中引入 koa-router，并創(chuàng)建一個(gè)路由，該路由將渲染 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'
}));

// 創(chuàng)建路由
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');
});

現(xiàn)在，當(dāng)你訪問 http://localhost:3000 時(shí)，你應(yīng)該看到 “Hello, Koa!” 消息。你可以根據(jù)需要修改模板文件和傳遞給模板的數(shù)據(jù)。

0 踩