📌  相关文章
📜  Express.js res.render()函数(1)

📅  最后修改于: 2023-12-03 15:30:41.530000             🧑  作者: Mango

Express.js res.render()函数

在Express.js中，res.render()函数被用于渲染视图模板并将其发送到响应中。它是一个非常有用的函数，可以在实现Web应用程序时帮助我们快速生成HTML。

使用res.render()函数

res.render()函数用于生成HTML视图，并将其发送给响应。它带有两个参数：

  1. 第一个参数是视图的名称，这是指views文件夹中的模板文件名，通常是.ejs或.handlebars之类的文件扩展名。
  2. 第二个参数是选项对象，该对象包含将被传递到模板中的属性。

下面是一个示例：

app.get('/', function(req, res) {
    res.render('index', { title: 'Express.js Tutorial' });
});

在上面的示例中，我们渲染了名为'index'的视图，并将一个属性"title"传递给它。

使用模板引擎

在Express.js中，你可以使用任何你想用的模板引擎，但是默认情况下，它使用ejs模板引擎。如果你想使用不同的模板引擎，你需要设置模板引擎：

app.set('view engine','jade');

在上面的例子中，我们将jade模板引擎设置为视图生成器。

使用布局文件和局部文件

在Express.js中，你还可以使用布局文件来定义重复的HTML元素。它允许你仅需一次定义就可以使用你的布局和视图。

布局文件通常是一个包含通用HTML元素的文件。要呈现布局文件，需要通过<%- body %>占位符来引用位置（这是指视图呈现的位置）。

下面是一个简单的布局文件的例子（我们将其命名为'layout.ejs'）：

<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <%- body %>
</body>
</html>

要使用这个布局文件，我们需要将其引用到我们的视图中，如下所示：

<% layout('layout') %>

<h1>Hello World!</h1>
<p>Welcome to Express.js tutorial.</p>

在上面的示例中，我们定义了一个标题和一个段落，并引用了布局文件'layout.ejs'。

出了布局文件，你还可以使用局部文件。局部文件是定义在不同的文件中的重复HTML元素的片段。要呈现局部文件，我们需要使用<%- include('partial') %>占位符来引用文件。

下面是一个简单的局部文件的例子（我们将其命名为'header.ejs'）：

<header>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
    </nav>
</header>

要将这个局部文件引用到我们的视图中，如下所示：

<% include('header') %>

<h1>Hello World!</h1>
<p>Welcome to Express.js tutorial.</p>

在上面的示例中，我们将

元素定义为一个局部文件，并通过<%- include('header') %>将其引用并呈现在我们的视图中。

总之，res.render()函数是Express.js中非常有用的函数，允许你快速生成HTML视图，并使用布局文件和局部文件来定义重复的HTML元素。