Question

我正在构建一个用户可以喜欢的网站，类似按钮正在工作，它正在将数据存储在数据库中。我的问题是，如何让用户在再次点击“赞”按钮时，会在数据库中减去。我有一个类似按钮的动画，第一个默认状态是灰色，然后当用户点击它时，它将变为蓝色，除此之外还会出现“喜欢”的文字。然后，当用户再次点击时，它将返回黑色。

这是关于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，它会刷新网页。

Answer 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...
        }
    });
});

Answer 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});
          });

      }
  });
});

Answer 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。

如果为负数，则将递减。

像按钮一样，在数据库上添加和减去。 nodejs，mongodb，mongoose，jquery

3 个答案: