如何在不重定向的情况下从数据库实时更新赞成票和反对票数？

Posted 2023-03-11

【中文标题】如何在不重定向的情况下从数据库实时更新赞成票和反对票数？

【英文标题】：How to update the upvote and downvote count in realtime from database without redirect?

【发布时间】：2020-09-10 12:00:23

【问题描述】：

我在照片库上有投票和投票按钮，用户可以在其中投票。但是它没有实时更新的问题我需要刷新页面以通过服务器从 mongodb 数据库更新投票计数。

用户点击时前端不显示voteScore，每次用户投票时需要刷新以更新结果

按钮：

<div class="message__votes" Title= "<%=photo.Title%>" data-id="<%=photo._id%>">
    <button class="btn btn-default message__vote " id="upvote" type="button"><i class="fa fa-check"></i></button>
    <!-- <button class="message__vote" id="upvote"></button> -->
    <div class="vote__counter"><%=photo.voteScore%></div>
    <button class="btn btn-default message__vote" id="downvote" type="button"><i class="fa fa-upload"></i><span class="bold"></span></button>
</div> 

这是我从前端向服务器发送数据的 ajax。我的前端发送 id 的，其他按钮通过 ajaxx 请求单击以在 express 服务器中发布路由。

我的ajax post方法：

$('body').on('click', '#upvote', event => 
    const id = event.target.parentElement.getAttribute('data-id');

    upvoteMessage(id);
)

$('body').on('click', '#downvote', event => 
    const id = event.target.parentElement.getAttribute('data-id');

    downvoteMessage(id);      
)

function upvoteMessage(id) 
    $.ajax(
        url: '/' + id + '/upvote',
        type: 'patch',
        contentType: 'application/json',
        headers: 
            authorization: `Bearer $window.localStorage.token`
        
    )
    .done(res => 
        STORE.update(res.photo);
        renderPhotos();
    )


function downvoteMessage(id) 
    $.ajax(
        url: '/' + id + '/downvote',
        type: 'patch',
        contentType: 'application/json',
        headers: 
            authorization: `Bearer $window.localStorage.token`
        
    )
    .done(res => 
        STORE.update(res.photo);
        renderPhotos();
    )

这些是已将数据存储到猫鼬数据库中的发布路线。这些路线将投票计数存储到照片集合中的 voteScore 计数变量中。

我在服务器中的路线：

exports.postUpvote= (req, res) => 

    PhotoEntries
        .findById(req.params.id)
        .then(photos => 
            const alreadyUpvoted = photos.upvoted.includes(req.user.id);
            if (alreadyUpvoted) 
                photos.voteScore--;
                photos.downvoted.push(req.user.id);
                photos.save()
                    .then(photos => 
                        return res.status(200).json(photos);
                    )
            
            const alreadyDownvoted = photos.downvoted.includes(req.user.id);
            if (alreadyDownvoted) 
                let _downvoted = photos.downvoted.filter(id => id !== req.user.id);
                photos.downvoted = _downvoted;
            
            photos.voteScore++;
            photos.upvoted.push(req.user.id);
            photos.save()
                .then(photos => 

                    res.send(voteScore:photos.voteScore);
                    res.redirect("/")
                )
        )
        .catch(err => 
            res.status(500).json(error: err);
        )


exports.postDownvote = (req, res) => 

    PhotoEntries
        .findById(req.params.id)
        .then(photos => 
            const alreadyDownvoted = photos.downvoted.includes(req.user.id);
            if (alreadyDownvoted) 
                return res.status(400).json(error: 'cannot vote the same way twice');
            
            const alreadyUpvoted = photos.upvoted.includes(req.user.id);
            if (alreadyUpvoted) 
                let _upvoted = photos.upvoted.filter(id => id !== req.user.id);
                photos.upvoted = _upvoted;
            
            photos.voteScore--;
            photos.downvoted.push(req.user.id);
            photos.save()
                .then(photos => 
                    return res.status(200).json(photos);
                )
        )
        .catch(err => 
            res.status(500).json(error: err);
        )

当用户点击 upvote 或 downvote 按钮时，它会自动从数据库实时更新分数，而无需刷新页面。我的赞成票和反对票附加到照片集架构，每张照片都有自己的赞成票和反对票。

【参考方案1】：

您可以做一件事，例如当您从后端获得支持和反对的 ajax 调用响应时，您可以在 API 响应中发送支持和反对的总计数，并且可以在 vote__counter 中更新这些计数。