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

【问题标题】：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 按钮时，它会自动从数据库实时更新分数，而无需刷新页面。我的赞成票和反对票附加到照片集架构，每张照片都有自己的赞成票和反对票。

【问题讨论】：

标签： jquery ajax express mongoose ejs

【解决方案1】：

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

【讨论】：