Nodejs模版的引用

Nodejs模版的引用

在看Node.js开发指南的时候，在第五章按照书中的描述敲了例子，但是在使用页面布局模版的地方，总是不好用，麻烦问一下这是为什么？ 代码： layout:ejs <div id=“container” class=“container”> <%- body %> <hr /> <footer> <p><a href=“http://www.baidu.com/” target="_blank">百度</a> 2013</p> </footer> </div> index:ejs <h1><%= title %></h1> <p>Welcome to <%= title %></p> index.js exports.index = function(req, res){ res.render( ‘index’, { title:‘Express’, body:‘layout’ } ); };


4 回复

在Node.js中使用模板引擎（如EJS）时，确保正确地引用和渲染模板是非常重要的。根据你提供的代码片段，似乎是在尝试使用一个布局模板来包含另一个模板（即index.ejs）。为了实现这一点，你需要确保几个关键点：

  1. 安装并配置EJS：确保你的项目已经安装了EJS，并且在Express应用中正确配置了EJS作为视图引擎。

    npm install ejs

    在你的app.js或server.js文件中添加以下代码以配置EJS：

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

// 设置视图引擎为EJS
app.set('view engine', 'ejs');

  2. 定义布局模板：你已经提供了一个名为layout.ejs的布局模板。在这个模板中，<%- body %>是一个占位符，用于插入实际的模板内容。

  3. 定义具体模板：你已经提供了一个名为index.ejs的具体模板。在这个模板中，你可以使用<%= title %>来插入变量。

  4. 正确渲染模板：在路由处理函数中，需要正确设置模板数据，并确保传递给res.render方法的第二个参数中包含正确的数据。

以下是调整后的代码示例：

layout.ejs

<div id="container" class="container">
    <%- body %>
    <hr />
    <footer>
        <p><a href="http://www.baidu.com/" target="_blank">百度</a> 2013</p>
    </footer>
</div>

index.ejs

<h1><%= title %></h1>
<p>Welcome to <%= title %></p>

index.js

exports.index = function(req, res) {
    res.render('index', {
        title: 'Express'
    });
};

注意事项

  • 确保index.ejs文件位于视图目录（默认为views）中。
  • body属性应该由Express自动填充，不需要手动设置。在上面的代码中，我们只传递了title属性。

通过以上步骤，你应该能够成功地使用布局模板来包含其他模板。如果仍然遇到问题，请检查控制台输出的错误信息，这通常能帮助你定位问题所在。


express版本多少啊？ 3.0好像已经移除了layout

哦，这样子啊，谢谢啦！！！

在Node.js中使用模板引擎（如EJS）进行页面布局时，需要确保正确地引用和渲染模板。根据你提供的代码片段，问题可能出在模板引用和数据传递上。

解释

  1. 模板文件引用:

    • layout.ejs 是一个布局模板。
    • index.ejs 是一个内容模板。

  2. 数据传递:

    • 在 index.js 中，你需要将 body 数据传递给 index.ejs，而不是传递 layout 字符串。

示例代码

layout.ejs

<div id="container" class="container">
    <%- body %>
    <hr />
    <footer>
        <p><a href="http://www.baidu.com/" target="_blank">百度</a> 2013</p>
    </footer>
</div>

index.ejs

<h1><%= title %></h1>
<p>Welcome to <%= title %></p>

index.js

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

app.set('views', './views'); // 设置视图目录
app.set('view engine', 'ejs'); // 设置模板引擎为 EJS

app.get('/', (req, res) => {
    res.render('index', {
        title: 'Express',
        // 不需要在这里指定 body，它会自动从对应的模板文件获取
    });
});

app.listen(3000, () => {
    console.log('App is running on port 3000');
});

注意事项

  • 确保你的视图目录路径正确设置 (app.set('views', './views'))。
  • 使用 res.render() 渲染模板时，只需传递需要的数据（如 title），不需要传递 body，因为 body 的内容会从模板文件中自动提取。
  • 确保模板引擎已经安装并正确配置（如 npm install ejs）。

通过上述步骤和代码，你应该能够正确引用和使用 Node.js 模板引擎进行页面布局。

回到顶部