返回

从零搭建一个动态 Node.js 网站：Koa、MongoDB 和 EJS 入门指南

前端

Node.js+Koa2.x+MongoDB 入门实战教程（三）：模板引擎 EJS

大家还记得上一节课我们学习了什么吗？对！我们学习了如何使用 Koa 路由，并创建了几个简单的路由来处理不同的请求。但是，我们目前只能输出一些简单的文本，这显然不能满足我们的需求。因此，本节课我们将学习如何使用 EJS 模板引擎来渲染动态 HTML 页面。

什么是 EJS 模板引擎？

EJS（Embedded JavaScript）模板引擎是一个流行的模板引擎，它允许你将 JavaScript 代码嵌入到 HTML 模板中。这使得你可以轻松地创建动态的 HTML 页面，而无需编写复杂的 JavaScript 代码。

如何使用 EJS 模板引擎？

  1. 安装 EJS 模板引擎
npm install ejs
  1. 创建一个 EJS 模板文件
// views/index.ejs
<h1>Hello, world!</h1>
  1. 在 Koa 路由中使用 EJS 模板引擎
const app = new Koa();

app.use(async (ctx, next) => {
  await ctx.render('index', {
    title: 'My Website',
    content: 'This is the content of my website.'
  });
});

app.listen(3000);

在上面的代码中，我们使用 ctx.render() 方法来渲染 EJS 模板文件。这个方法接受两个参数：第一个参数是模板文件的路径，第二个参数是一个对象，包含要传递给模板的数据。

EJS 模板引擎的语法

EJS 模板引擎使用一种特殊的语法来嵌入 JavaScript 代码。下面是一些常见的 EJS 语法：

  • <%%>：表示开始一个 JavaScript 代码块。
  • %%>：表示结束一个 JavaScript 代码块。
  • <%= %>：表示输出一个 JavaScript 表达式的值。
  • <%- %>：表示输出一个 JavaScript 表达式的值，但不进行转义。
  • <%%= %>：表示输出一个 JavaScript 表达式的值，并进行转义。

EJS 模板引擎的优势

  • 易于使用：EJS 模板引擎的语法简单易学，即使是新手也可以轻松掌握。
  • 强大而灵活：EJS 模板引擎提供了丰富的功能，可以满足各种复杂的模板需求。
  • 社区支持：EJS 模板引擎拥有庞大的社区，可以为用户提供支持和帮助。

EJS 模板引擎的劣势

  • 性能开销：EJS 模板引擎需要在运行时编译模板，这会带来一定的性能开销。
  • 安全性问题：EJS 模板引擎允许在模板中执行 JavaScript 代码，这可能会带来一些安全问题。

总结

EJS 模板引擎是一个流行的模板引擎，它允许你将 JavaScript 代码嵌入到 HTML 模板中。这使得你可以轻松地创建动态的 HTML 页面，而无需编写复杂的 JavaScript 代码。EJS 模板引擎易于使用，强大而灵活，但也有性能开销和安全性问题。

希望本节课的内容对大家有所帮助。如果你有任何问题，欢迎在评论区留言。

课后作业

  1. 使用 EJS 模板引擎创建一个简单的博客网站。
  2. 探索 EJS 模板引擎的其他功能，并尝试在你的网站中使用它们。
  3. 研究 EJS 模板引擎的安全性问题，并采取措施来保护你的网站。