将数据从服务器发送到客户端nodejs

时间:2020-05-02 13:49:50

标签: javascript node.js mongodb ejs

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

下面是从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>
    <% } %>

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

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

enter image description here

这是首页的图片

enter image description here

我的代码的场景:

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 = [];

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

最好的问候

3 个答案:

答案 0 :(得分:2)

那不是在ejs中显示数据的语法,请尝试一下。请参见这些docs

<%=将值输出到模板中(已转义HTML)

    <% 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 :(得分:0)

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

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

可能您忘记了configure the view engine

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

答案 2 :(得分:0)

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

  • 您使用的是哪个前端框架?
  • 您在哪里称呼后端端点?
  • 您正在使用哪个视图引擎?

这种情况的典型流程是:

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

我希望这可以使您对需要提供/做的事情有所了解。谢谢