喜欢按钮，在数据库上加减。 nodejs, mongodb, 猫鼬, jquery

Posted 2023-03-08

【中文标题】喜欢按钮，在数据库上加减。 nodejs, mongodb, 猫鼬, jquery

【英文标题】：Like button, add and subtract on database. nodejs, mongodb, mongoose, jquery

【发布时间】：2017-01-30 22:32:46

【问题描述】：

我正在建立一个用户可以喜欢的网站，点赞按钮正在工作，它将喜欢的内容存储在数据库中。 我的问题是，我怎样才能让用户再次单击“赞”按钮时，它会在数据库中减去。 我有一个喜欢按钮的动画，第一个默认状态是灰色，然后当用户点击它时，它会变成蓝色，旁边会出现一个“喜欢”的文字。然后当用户再次点击时，它会变回黑色。

这是我在 POST 路由上的代码（因为我正在向数据库添加数据）

app.post("/index/:id", function(req,res)
    TestData.findById(req.params.id, function(err, theUser)
        if(err)
            console.log(err);
         else 
            theUser.likes += 1;
            theUser.save();
            console.log(theUser.likes);
        
    );
);

我的 EJS 文件：

      <a class="likeicon" href="/index/<%= newUsers._id %>?_method=POST">
       <i class="fa fa-thumbs-o-up" aria-hidden="true" ></i>
      </a>

还有我的 jQuery：

$(".likeicon").on('click', function()
if($(this).css("color") === "rgb(0, 0, 255)")
  $("#likedtxt").remove();
  $(this).css("color", "black");
  $(this).animate(fontSize: "15px");


 else 
  $(this).css("color", "blue");
  $(this).append("<span id='likedtxt'>Liked</span>");
  $(this).animate(fontSize: "18px");
  
);

还有另一个问题，当我点击喜欢时，它正在添加到数据库中，但是我如何在用户屏幕上实时显示喜欢的计数已更新？无需重新加载屏幕。因为我不想使用 res.redirect，所以它会刷新网页。

【参考方案1】：

Imo 更好，您可以将 onclick 函数写入“likeicon”按钮

<a class="likeicon" userId="<%= newUsers._id %>" onclink="updateLikes()">
   <i class="fa fa-thumbs-o-up" aria-hidden="true" > 49 </i>
</a>

功能：

function updateLikes() 
    id = $('.likeicon').attr('userId');
    $.post('/index/' + id, function (response) 
        $('fa-thumbs-o-up').text(response.likeCount); //your counter on a page
        //and update likes counter with response
    )

还有node.js

app.post("/index/:id", function (req, res) 
    TestData.findById(req.params.id, function (err, theUser) 
        if (err) 
            console.log(err);
         else 
            theUser.likes += 1;
            theUser.save();
            console.log(theUser.likes);
            res.send(likeCount: theUser.likes); //something like this...
        
    );
);

【讨论】：

res.send('some data to send'); 你想从这个地方发送什么？我当然不会theuser.likes。

哦，我的错。我想“还有另一个问题，当我点击喜欢时，它正在添加到数据库中，但是我如何才能实时显示它”只针对一个点击的用户...... Idk 然后如何更新所有用户的喜欢

伙计们，有没有办法，例如，当我更新数据库上的数据时，它也会更新网页上的 LIVE？无需重新加载网页？因为如果我输入类似“res.redirect(“back”)”的内容，它会返回网页，刷新并且用户会看到更新后的点赞数。但我不想刷新我的网页。

对一个按“赞”的用户还是对所有用户？

只为每个按赞的用户。

【参考方案2】：

对于更新的点赞数，您应该从服务器发送更新的点赞数，例如：

app.post("/index/:id", function(req,res)
  TestData.findById(req.params.id, function(err, theUser)
      if(err)
          console.log(err);
          return res.status(500).send('Something went wrong!'); // You should notify user about any error    
       else 
          theUser.likes += 1;
          theUser.save(function(err)
          if(err) return res.status(500).send('Something went wrong!');
          return res.send(likes_count: theUser.likes);
          );

      
  );
);

【讨论】：

在我的网站上，有图片和每张图片的点赞数和评论数。每当我喜欢这张照片时，喜欢的数字应该会实时更新，而无需重新加载网站。所以“res.send()”是行不通的。你知道我不能实时更新点赞数的方法吗？

我们来安排吧。如果我喜欢这张图片，那么应该为我和任何用户更新喜欢的数量，而无需重新加载。正确的？如果是，您可以使用套接字，例如。 socket.io

socket.io可以实时从数据库POST/GET数据吗？

【参考方案3】：

从前端发送值不是一个好主意...

相反，您可以使用 MongoDB 内置操作 => '$inc'

增加猫鼬对象模型字段中的值。

router.post('/:id',(req,res,next)=>
counter = req.body.like;
TestData.update(_id:id,$inc:likes:counter).exec()
.then(result=>
res.status(200).json(message:'liked');
).
catch(err=>
res.status(500).json(error:err);
);
);

如果你发送 req.body.likes = 1 那么like字段的值增加1。

如果为负数，则递减。