Nodejs Node up and runnning 里面的微型tweet疑问

Nodejs Node up and runnning 里面的微型tweet疑问

大家好，我想请问一下最近在看nodejs up and running 一书,书中的tweet的例子好奇怪.里面有段代码如下:

app.get("/", function(req, res) {
    var title = "Chripie",
        header = "Welcome to papa";

    res.render("index", {
        locals: {
            "title": title,
            "header": header,
            "tweets": tweets,
            stylesheets: ["/public/style.css"]
        }
    });
});

我怎么运行怎么都没有locals里面的选项出来。。奇怪了。。还有就是书中的layout.ejs按照我的理解应该是这个layout.ejs是主要的模板然后index.ejs都是显示在里面的<%- body %>部分的呀。。怎么运行得奇怪。。?

附上layout.esj代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title><%= title %></title>
</head>
<body>
    <h1><%= header %></h1>
    <%- body %>
</body>
</html>

请教各位大神指导下，谢谢。。


3 回复

当然可以。根据你提供的代码片段和描述，你可能是在使用EJS模板引擎来渲染HTML页面。让我们逐步分析并解决你遇到的问题。

问题分析

  1. res.render() 方法:

    • res.render() 是Express.js 中用于渲染模板的方法。
    • locals 参数是一个对象，它将传递给模板引擎（在这个例子中是 EJS）作为局部变量。

  2. 模板文件:

    • layout.ejs 是一个主模板文件，通常包含整个应用的通用结构，如头部、脚部等。
    • index.ejs 是一个具体的视图文件，它将被插入到 layout.ejs 的 <%- body %> 部分。

示例代码及解释

app.js (Node.js 应用程序)

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

// 假设你有一个名为 tweets 的数组
const tweets = [
    { id: 1, text: 'Hello World!' },
    { id: 2, text: 'Node.js is awesome!' }
];

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

app.get('/', function(req, res) {
    const title = "Chripie";
    const header = "Welcome to papa";

    res.render('index', {
        title: title,
        header: header,
        tweets: tweets,
        stylesheets: ['/public/style.css']
    });
});

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

views/layout.ejs

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
    <% for (let stylesheet of stylesheets) { %>
        <link rel="stylesheet" href="<%= stylesheet %>">
    <% } %>
</head>
<body>
    <h1><%= header %></h1>
    <%- body %>
</body>
</html>

views/index.ejs

<div>
    <ul>
        <% for (let tweet of tweets) { %>
            <li><%= tweet.text %></li>
        <% } %>
    </ul>
</div>

解释

  1. res.render() 方法:

    • 在 app.get('/') 路由中，我们调用了 res.render('index', {...}) 来渲染 index.ejs 文件，并将 title, header, tweets, 和 stylesheets 作为局部变量传递给模板。

  2. layout.ejs 模板:

    • 这个文件定义了页面的基本结构，包括标题、头部样式和主体内容。
    • 使用 <%- body %> 来插入 index.ejs 的内容。
    • 使用 <%= title %> 和 <%= header %> 插入从 res.render() 传递过来的数据。
    • 使用 <% for (let stylesheet of stylesheets) { %> 循环遍历 stylesheets 数组，并生成每个样式表的 <link> 标签。

  3. index.ejs 模板:

    • 这个文件定义了页面的主要内容，即展示推文列表。
    • 使用 <%- body %> 插入到 layout.ejs 中。

通过以上设置，你应该能够正确地渲染出带有标题、头部样式和推文列表的页面。希望这能帮助你解决问题！


解决了哎。就是那个partial语法现在express.3.x不支持了。。用include改一下。然后index.ejs渲染的时候在里面include就可以了。。有些像php…

根据你的描述，问题可能出在 res.render 方法中使用 locals 选项的方式。在 EJS 模板引擎中，直接传递对象作为参数即可，不需要再嵌套一层 locals。

示例代码修正

首先，修改 res.render 方法：

app.get("/", function(req, res) {
    var title = "Chripie",
        header = "Welcome to papa";

    res.render("index", {
        title: title,
        header: header,
        tweets: tweets,
        stylesheets: ["/public/style.css"]
    });
});

解释

  • 在 res.render 中，你可以直接传递一个对象，EJS 会自动将该对象的属性暴露给模板。
  • 不需要使用 locals 键来包裹这些属性。

EJS 模板文件

确认你的 layout.ejs 文件正确解析了传入的数据：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
    <% stylesheets.forEach(function(style) { %>
        <link rel="stylesheet" href="<%= style %>">
    <% }) %>
</head>
<body>
    <h1><%= header %></h1>
    <%= body %>
</body>
</html>

其他注意事项

  • 确保你的 index.ejs 文件中定义了 <%- body %>，这样 layout.ejs 才能正确插入渲染的内容。
  • 确认 stylesheets 数组在 res.render 中正确传递，并且包含有效的 CSS 文件路径。

希望这能解决你的问题！如果还有其他问题，请继续提问。

回到顶部