npm 包 egg-template 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 是当前流行的前端包管理工具之一。egg-template 则是一个基于 egg.js 的模板引擎，为了方便开发者快速构建 Web 应用而创建。在该文章中，我们将演示如何使用这个强大的工具。

实现步骤

步骤 1：使用 npm 安装 egg-template

打开终端，输入以下命令进行安装：

npm install egg-template --save

步骤 2：设置配置文件

在我们的 egg.js 项目中，打开 config/plugin.js 文件，加入以下代码：

exports.template = {
  enable: true,
  package: 'egg-template',
};

步骤 3：配置 egg-template

在 config/config.default.js 文件中加入以下代码：

exports.view = {
  mapping: {
    '.html': 'template',
  },
};

步骤 4：创建模板文件

在我们的 egg.js 项目中，创建一个名为 test.html 的文件，文件路径为 app/view。

-- -------------------- ---- -------
--------- -----
------
  ------
    --------- --------------
  -------
  ------
    ---------- --- --------------- -------
  -------
-------

步骤 5：渲染模板

在 app/controller/home.js 文件中，创建一个名为 index 的方法，返回要渲染的模板和数据。

async index() {
  const { ctx } = this;
  const data = {
    username: 'Egg.js'
  };
  await ctx.render('test.html', data);
}

步骤 6：启动应用程序

最后，我们可以使用以下命令启动应用程序：

npm run dev

访问 http://localhost:7001/，您将看到：

Hello, Egg.js

点到即止？不，让我们进一步学习

现在，您已经完成了一个简单的 egg-template 模板渲染过程，但这些只是一些简单的示例。为了更好的使用 egg-template，我们需要了解以下方面：

egg-template 支持的后端语言

egg-template 支持 pug、ejs 和 nunjucks 三种流行的模板引擎。

在 config/config.default.js 中，将以下代码改成使用别的引擎。

-- -------------------- ---- -------
------------ - -
  -------- -
    -------- -----------
  --
  -- -- --- --
  ------------------ ------
  -------- -
    ------- ------
  --
--

egg-template 注入数据方式

在 test.html 中，使用了 <%= %>

该语句表达式是将当前模板作用域内的 locals 对象里的 username 属性的值输出到模板中

我们可以通过 locals 将数据传递到模板中

在 app/controller/home.js 中，我们使用了 await ctx.render('test.html', data); 渲染模板，并将变量 data 传递到了模板文件 test.html 中。这就是 egg-template 将数据传递到模板的方式。

egg-template 常用 API

从 controller 中渲染模板，可以使用以下语句：

await ctx.render('模板名称', {
    /* 模板变量 */
});

直接渲染字符串，使用以下语句：

const html = await ctx.renderString('模板字符串', {
    /* 模板变量 */
});

获取渲染模板过程的字符串，使用以下语句：

const html = await ctx.view.render('模板名称', {
    /* 模板变量 */
}, {
    /* 更多参数 */
});

结论

有了 egg-template，我们可以很方便地生成我们所需要的 HTML 页面。它不仅能够生成各种类型的纯 HTML 页面，还可以包含动态数据源，数据处理和计算。在 egg.js 项目的开发中，egg-template 是必不可少的。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60065b47c6eb7e50355dbf3a