初学 Nodejs 请教一个数据传送问题

初学 Nodejs 请教一个数据传送问题

这是控制器里的代码 ： res.render(‘blog-list’, { title: “Recent blog posts”, blogPosts: blogPosts }); 这是前端页面的代码： -if(blogPosts.length > 0) ul.grid -each blogpost, i in blogPosts li figure img(src="/images/1.png") figcaption a(href=’/blog/#{blogpost._id}/view’) #{blogpost.title} span #{blogpost.author} span.label #{blogpost.createDate} -each test,i in a span.label #{test.b}

        -else
            .alert.alert-block
                | There is no recent post

    script
        var a = blogPosts[1].createDate;

…为毛控制器传过来的blogPosts在script里面undefinde…


6 回复

在你提到的代码中，blogPosts 在后端已经通过 res.render('blog-list', { ... }) 传递给了前端页面。但是你在前端的 <script> 标签内部尝试访问 blogPosts 时遇到了问题。这是因为 JavaScript 的作用域问题。

解释

当你在 EJS 模板中使用 <%- script %> 或者 <script> 标签时，EJS 模板引擎会先解析模板中的变量，然后生成最终的 HTML。因此，在 <script> 标签内的 JavaScript 代码无法直接访问到模板上下文中的变量。

解决方案

你可以通过将 blogPosts 作为全局变量传递给前端，或者在 <script> 标签内部直接使用 EJS 表达式来获取数据。下面是两种解决方案的示例：

方法一：将 blogPosts 作为全局变量传递

// 后端代码
res.render('blog-list', {
  title: "Recent blog posts",
  blogPosts: blogPosts,
  scriptData: JSON.stringify(blogPosts) // 将 blogPosts 转换为 JSON 字符串
});

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %></title>
</head>
<body>
  <!-- 其他 HTML 代码 -->

  <script>
    var blogPosts = <%= scriptData %>; // 使用 <%= %> 语法将 JSON 字符串转换为 JavaScript 对象
    console.log(blogPosts); // 现在你可以访问 blogPosts 了
    var a = blogPosts[1].createDate;
  </script>
</body>
</html>

方法二：直接在 <script> 标签内使用 EJS 表达式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %></title>
</head>
<body>
  <!-- 其他 HTML 代码 -->

  <script>
    var a = <%= JSON.stringify(blogPosts[1].createDate) %>;
    console.log(a); // 现在你可以访问 blogPosts 了
  </script>
</body>
</html>

这两种方法都可以解决你在 <script> 标签内无法访问 blogPosts 的问题。选择其中一种方法即可。


先在你服务器端console.log(blogPosts),如果不是undefine，那就是你前端写的有什么问题，具体……看不大出来……

感谢回答。。。已经自行解决了

代码标记全乱啊楼主, 去看下 Markdown

没有乱呀。。。我怎么看着不乱，你说前端代码乱还是后台的

从你的描述来看，问题在于前端页面中的 JavaScript 代码无法访问到后端传递给模板的数据。这是因为 EJS 模板引擎在渲染页面时会将 blogPosts 数据插入到页面中，但浏览器执行 JavaScript 时，blogPosts 变量并没有被定义。

解决方法：

  1. 确保数据正确传递：首先确认 blogPosts 确实被传递到了前端页面。
  2. 使用正确的变量名：确保在 JavaScript 中使用的变量名与后端传递的数据名称一致。

示例代码：

控制器代码（Node.js）

const express = require('express');
const router = express.Router();
const blogPosts = [ /* 你的博客文章数组 */ ]; // 假设这是你的博客文章数组

router.get('/blog', (req, res) => {
    res.render('blog-list', {
        title: "Recent blog posts",
        blogPosts: blogPosts
    });
});

module.exports = router;

EJS 模板代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <% if (blogPosts.length > 0) { %>
        <ul class="grid">
            <% blogPosts.forEach((blogpost, i) => { %>
                <li>
                    <figure>
                        <img src="/images/1.png">
                        <figcaption>
                            <a href="/blog/<%= blogpost._id %>/view"><%= blogpost.title %></a>
                            <span><%= blogpost.author %></span>
                            <span class="label"><%= blogpost.createDate %></span>
                        </figcaption>
                    </figure>
                </li>
            <% }); %>
        </ul>
    <% } else { %>
        <div class="alert alert-block">There is no recent post</div>
    <% } %>

    <script>
        // 确保 blogPosts 是全局可访问的
        var blogPosts = <%= JSON.stringify(blogPosts) %>;
        console.log(blogPosts); // 检查是否可以访问
        var a = blogPosts[1].createDate;
    </script>
</body>
</html>

解释：

  1. 传递数据：在控制器中，通过 res.render 方法将 blogPosts 传递给前端页面。
  2. 模板渲染：EJS 模板会将 blogPosts 数组渲染到页面中，并且在 <script> 标签内将其转换成 JSON 格式，从而使得前端 JavaScript 可以访问该数组。
  3. 访问数据：在 <script> 标签内使用 JSON.stringify 方法将 blogPosts 转换为 JavaScript 对象，这样就可以在前端 JavaScript 中使用 blogPosts 变量了。

通过以上步骤，你应该能够在前端 JavaScript 中成功访问到后端传递的数据。

回到顶部