【问题标题】:send data from server to client nodejs将数据从服务器发送到客户端nodejs
【发布时间】:2020-08-17 00:03:21
【问题描述】:

我有这段代码,可以让我获取用户在我的数据库中发布的所有帖子。问题是我试图将该数据发送到前端(客户端)。但我没有成功,我不知道我错过了什么,

从 mongoDB 中提取用户信息的代码如下。代码运行良好,没有问题,

User.find({}).lean(true).exec((err, users) => {
      let userMap = [];

            userMap.push({ user: users[i], posts: users[i].posts[j] });
       //all the data are stored to userMAP :[{user : xxxxx ,posts : {the posts are here}}]
          }
        }

      }
      console.log(userMap);

      User.findOne({ userName: req.user.userName }, (error, req_user) => {

        console.log(req.user.lastLogin)
        let lastSeen = ta.ago(req.user.lastLogin);

        //console.log(posts)
        res.render('home', { // this part for rendering the homePage and send data
          user: req_user,
          people: users,
          userMap: userMap.reverse()
        });
      });

我在客户端代码中尝试的是这样的:

  <div class="container">

        <% for(var x=0;x<user.posts.length;x++) { %>
    <div class="jumbotron">
        <div>by
            <b>{{ user.posts[x].author }}</b>
            on
            <small>{{ user.posts[x].createdAt }}</small>
        </div>

        <div>
            <p>{{ user.posts[x].caption }}</p>
        </div>

        <div class="row">
            <button onclick="actOnPost(event);"
                    data-post-id="{{ this.id }}">Like
            </button>
            <span id="likes-count-{{ this.id }}">{{ this.likes_count }}</span>
        </div>
    </div>
    <% } %>

对于错误部分我什么都没有得到,

这是我在数据库中存储数据的图像

这是首页的图片

我的代码场景:

1- 我正在使用 EJS 视图引擎,当用户登录 home.ejs 并在服务器端显示时,我使用上面的代码准备我需要显示的数据

2- 除了在客户端显示数据home.ejs

3- 为了从我的服务器调用该页面,我将此语句与上述代码混合使用

router.get('/home', (req, res) => {
  if (req.user.id) {
    console.log(req.user.id)
    User.find({}).lean(true).exec((err, users) => {
      let userMap = [];

在客户端显示数据的任何帮助或更好的解决方案,

最好的问候,

【问题讨论】:

  • 您能否提供一个小型 repo 以便我们可以重现该问题?
  • 我可以为您提供我的home.ejs 的文件,您可以吗?还是您需要整个项目?
  • 如果你可以准备一个小项目,也许只有与你的问题相关的文件,我可以看看它。如果没有更好的图片,我很难告诉你哪里出了问题
  • @orlaqp 我只是接受下面的解决方案,谢谢您的时间,祝您有美好的一天

标签: javascript node.js mongodb ejs


【解决方案1】:

这不是在ejs中显示数据的语法,试试这个。看这些docs

    <% for(var x=0;x<user.posts.length;x++) { %>
<div class="jumbotron">
    <div>by
        <b><%= user.posts[x].author %></b>
        on
        <small><%= user.posts[x].createdAt %></small>
    </div>

    <div>
        <p><%= user.posts[x].caption %></p>
    </div>

    <div class="row">
        <button onclick="actOnPost(event);"
                data-post-id="<%= this.id %>">Like
        </button>
        <span id="likes-count-<%= this.id %>"><%= this.likes_count %></span>
    </div>
</div>
<% } %>

【讨论】:

  • 按预期工作只是最后一个问题是 .html 部分是一样的还是只对 ejs 有效?
  • 不,您不能将这些标签用于 .html 扩展名@Nodegeek。如果可行,请接受答案
  • ,能否给我一个html部分的链接:-D,对不起
【解决方案2】:

模板的源代码正在浏览器中呈现。这意味着视图引擎没有解析它。

默认视图引擎是 Jade,但您没有使用 Jade。

可能你忘了configure the view engine

app.set('view engine', 'whatever template engine you are trying to use')

【讨论】:

  • 你好,谢谢你的回答,不@Quentin我已经在我的app.js中使用了app.use(expressLayouts); app.set('view engine', 'ejs'); .....页面生成良好,但是服务器和客户端的数据之间的通信不行,,,可能有需要添加的JS脚本?
【解决方案3】:

嗨@odegeek 到目前为止,向我们展示的是您如何从数据库中获取数据以及如何在视图中显示它的想法。但是我们在这里遗漏了一些信息。例如:

  • 您使用的是哪个前端框架(如果有)?
  • 您在哪里调用后端端点?
  • 您使用的是哪个视图引擎?

此场景的典型流程是:

  • 您的前端向您的后端发出请求,要求提供数据
  • 响应到达浏览器后,您需要进行某种解析/映射以使其适应您的需求
  • 然后将其传递给视图进行渲染。现在取决于您使用的前端框架/视图引擎。呈现数据的代码会有所不同

我希望这可以让您了解您需要提供/做什么..谢谢

【讨论】:

    猜你喜欢
    • 2022-01-12
    • 2015-03-05
    • 1970-01-01
    • 2013-08-13
    • 2019-05-09
    • 1970-01-01
    • 2013-04-11
    • 2021-12-07
    • 2019-03-05
    相关资源
    最近更新 更多