Nodejs express ejs页面渲染传值的问题

Nodejs express ejs页面渲染传值的问题

/*

  • 查询用户所有文章 */ app.get(’/u/:name’,function(req,res){

    User.get(req.params.name,function(err,user){ if(!user){ req.flash(‘error’,‘用户不存在！’); return res.redirect(’/’); } Post.getAll(user.name,function(err,posts){ if(err){ req.flash(‘error’,err); return res.redirect(’/’); } console.log(user.name); res.render(‘user’,{ title:user.name, user:user, posts:posts, user:req.session.user, success:req.flash(‘success’).toString(), error:req.flash(‘error’).toString() }); }); }); });

这个user在控制台能打印出来user.name可是为什么到了ejs上取值成null了呢 <%=user.name%>


4 回复

Node.js Express EJS 页面渲染传值问题

背景

你正在使用 Node.js 和 Express 框架来渲染 EJS 页面，并且希望将数据从后端传递到前端。你遇到了一个问题，在控制台上可以正常打印出 user.name 的值，但在 EJS 页面中却显示为 null。

问题分析

这个问题可能是因为在传递给 EJS 模板的数据中，user 对象没有正确地传递到前端。让我们一起来检查一下你的代码并提供一个解决方案。

示例代码

首先，确保你在后端的路由处理函数中正确地传递了 user 对象。以下是修改后的代码示例：

const express = require('express');
const app = express();
const User = require('./models/User'); // 假设你有一个 User 模型
const Post = require('./models/Post'); // 假设你有一个 Post 模型

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

// 定义路由
app.get('/u/:name', function (req, res) {
    const username = req.params.name;

    User.get(username, function (err, user) {
        if (err) {
            req.flash('error', err.message);
            return res.redirect('/');
        }
        if (!user) {
            req.flash('error', '用户不存在！');
            return res.redirect('/');
        }

        Post.getAll(user.name, function (err, posts) {
            if (err) {
                req.flash('error', err.message);
                return res.redirect('/');
            }

            // 确保 user 对象不为空
            console.log(user.name); // 应该能看到正确的用户名

            res.render('user', {
                title: user.name,
                user: user,
                posts: posts,
                sessionUser: req.session.user,
                success: req.flash('success').toString(),
                error: req.flash('error').toString()
            });
        });
    });
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

  1. 数据传递: 在 res.render 中，确保 user 对象被正确地传递给 EJS 模板。
  2. EJS 模板: 在 EJS 模板中，你可以通过 <%= user.name %> 来访问 user 对象的属性。

EJS 模板示例

假设你的 EJS 文件名为 user.ejs，你可以这样写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1>欢迎，<%= user.name %></h1>
    <div>
        <% posts.forEach(function(post) { %>
            <p><%= post.title %></p>
        <% }); %>
    </div>
</body>
</html>

总结

通过以上修改，你应该能够正确地将 user 对象传递到 EJS 模板，并在页面上显示相应的信息。如果仍然有问题，请检查是否有其他地方导致 user 对象为空或未定义。


flash取了一次值后就会变成null,你用中间变量保存一下再判断

你既然已经将user.name赋给title了 可以在模板中通过title取值啊

在你的代码中，res.render('user', { ... }) 已经将 user 对象传递给 EJS 模板。因此，在 EJS 模板中你应该能够通过 <%= user.name %> 来访问 user.name 的值。

如果你发现 <%= user.name %> 在 EJS 中显示为 null，可能是因为以下几个原因：

  1. user 对象在传递到 EJS 之前就是 null 或 undefined：确保在 res.render 调用之前，user 对象已经被正确赋值。
  2. EJS 模板中的变量名拼写错误：确保你在 EJS 模板中使用的变量名与传递的变量名一致。
  3. EJS 版本问题：确保你使用的 EJS 版本没有问题，可以尝试更新或降级 EJS 版本。

以下是一个简化版本的示例代码来展示如何正确传递和渲染数据：

Node.js (Express) 示例代码

const express = require('express');
const app = express();
app.set('view engine', 'ejs');

// 假设 User 和 Post 是定义好的模型
app.get('/u/:name', function(req, res) {
    const userName = req.params.name;
    
    // 假设这是获取用户的方法
    User.get(userName, function(err, user) {
        if (err) {
            return res.status(500).send('Server error');
        }
        
        if (!user) {
            req.flash('error', '用户不存在！');
            return res.redirect('/');
        }

        // 假设这是获取用户的所有文章的方法
        Post.getAll(user.name, function(err, posts) {
            if (err) {
                req.flash('error', err.message);
                return res.redirect('/');
            }

            // 渲染模板并传递数据
            res.render('user', {
                title: user.name,
                user: user,
                posts: posts,
                sessionUser: req.session.user,
                success: req.flash('success').toString(),
                error: req.flash('error').toString()
            });
        });
    });
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

EJS 模板示例

假设你的 EJS 文件名为 user.ejs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1>欢迎 <%= user.name %></h1>
    <p>您的文章列表:</p>
    <ul>
        <% posts.forEach(post => { %>
            <li><%= post.title %></li>
        <% }) %>
    </ul>
</body>
</html>

在这个示例中，user 对象及其属性应该可以在 EJS 模板中正确访问。如果仍然存在问题，请检查其他可能的错误，例如是否正确设置了 Express 的视图引擎配置等。

回到顶部