温馨提示×

如何在koa中使用模板引擎

小樊
81
2024-09-15 10:43:44
栏目: 编程语言

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

  1. 安装相关依赖:

    首先,你需要安装 Koa 和相应的模板引擎。例如,这里我们使用 koakoa-views(一个简单的模板引擎中间件)以及 ejs 作为模板引擎。你可以通过 npm 或 yarn 安装它们:

    npm install koa koa-views ejs
    

    或者

    yarn add koa koa-views ejs
    
  2. 创建一个 Koa 应用:

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

    const Koa = require('koa');
    const app = new Koa();
    
    // 其他中间件和设置
    
    app.listen(3000, () => {
      console.log('Server is running on port 3000');
    });
    
  3. 配置模板引擎:

    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');
    });
    
  4. 创建模板文件:

    在项目文件夹中,创建一个名为 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>
    
  5. 在 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!” 消息。你可以根据需要修改模板文件和传递给模板的数据。

0