node.js中EJS 模板快速入门教程

那我就来详细讲解一下“Node.js中EJS模板快速入门教程”的完整攻略。

介绍

EJS（Embedded JavaScript）是一种模板引擎，使用 JavaScript 作为标示语言，可以简单方便地将数据渲染到 HTML 页面中。在 Node.js 中，使用 EJS 可以快速实现页面渲染，并且与 Express 应用程序集成方便。

安装

在使用 EJS 之前，需要先安装 EJS 模块。可以使用以下命令进行安装：

npm install ejs

基本使用

首先，我们需要在 Express 中设置 EJS 模板引擎。可以使用以下代码：

const express = require('express')
const app = express()

app.set('view engine', 'ejs')

这里通过 app.set() 方法将模板引擎设置为 EJS。现在我们可以开始编写 EJS 模板了。在 EJS 中，可以使用以下标签：

<% code %>：JavaScript 代码块
<%= value %>：输出值
<%- value %>：输出未转义的值
<%# comment %>：注释

例如，以下是一个简单的 EJS 模板：

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1>Hello, <%= name %>!</h1>
</body>
</html>

在这个模板中，我们使用 <%= title %> 和 <%= name %> 输出了两个变量的值。现在，我们需要将数据传递给 EJS 模板进行渲染。可以使用以下代码：

app.get('/', (req, res) => {
  res.render('index', { title: 'EJS Tutorial', name: 'World' })
})

在这个代码中，我们使用 res.render() 方法将数据传递给 EJS 模板 index 进行渲染。注意，数据需要以对象的形式进行传递。

示例说明

下面，我们将介绍两个示例，帮助你更好地理解如何使用 EJS 进行页面渲染。

示例一：列表页面

假设我们正在开发一个博客应用程序，需要渲染博客文章列表。以下是一个简单的 EJS 模板：

<!DOCTYPE html>
<html>
<head>
    <title>Blog</title>
</head>
<body>
    <h1>Blog</h1>
    <ul>
        <% for (let i = 0; i < articles.length; i++) { %>
            <li><a href="/articles/<%= articles[i].id %>"><%= articles[i].title %></a></li>
        <% } %>
    </ul>
</body>
</html>

在这个模板中，我们使用了 for 循环来遍历文章列表，并输出文章标题和链接。现在，我们需要将数据传递给该模板进行渲染。可以使用以下代码：

app.get('/articles', (req, res) => {
  const articles = [
    { id: 1, title: 'Article 1' },
    { id: 2, title: 'Article 2' },
    { id: 3, title: 'Article 3' }
  ]
  res.render('articles', { articles })
})

在这个代码中，我们创建了一个假的文章列表，并将其作为数据传递给 EJS 模板 articles 进行渲染。

示例二：详情页面

在博客应用程序中，我们还需要为每篇文章创建独立的详情页面。以下是一个简单的 EJS 模板：

<!DOCTYPE html>
<html>
<head>
    <title><%= article.title %></title>
</head>
<body>
    <h1><%= article.title %></h1>
    <p><%= article.body %></p>
</body>
</html>

在这个模板中，我们使用了 article.title 和 article.body 输出了文章标题和内容。现在，我们需要将数据传递给该模板进行渲染。可以使用以下代码：

app.get('/articles/:id', (req, res) => {
  const article = { id: req.params.id, title: 'Article 1', body: 'Body of article 1' }
  res.render('article', { article })
})

在这个代码中，我们创建了一个假的文章对象，并将其作为数据传递给 EJS 模板 article 进行渲染。

结论

以上就是 Node.js 中 EJS 模板的快速入门教程。通过本教程，你应该已经了解了 EJS 的基本语法和用法，并能够使用 EJS 渲染页面。祝你在编写 Express 应用程序时使用愉快！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：node.js中EJS 模板快速入门教程 - Python技术站

node.js中EJS 模板快速入门教程

介绍

安装

基本使用

示例说明

示例一：列表页面

示例二：详情页面

结论

相关文章