如何在不刷新页面的情况下实现织梦dedecms首页文章列表的实时顶和踩功能？

在织梦dedecms中，实现首页文章列表无刷新时时顶、踩功能，可以通过Ajax技术与后端API的配合来实现，下面详细讲解如何实现这一功能。

1. 准备工作

确保你的网站已经安装并配置好了织梦dedecms，并且你已经具备一定的前端开发基础，了解HTML、CSS和JavaScript。

2. 修改模板文件

找到你所使用的dedecms模板文件，通常位于/templates 目录下，我们需要对首页模板进行修改，添加按钮和事件监听器。

<button class="likebtn" dataid="{dede:field name='aid'/}">顶</button>
<button class="dislikebtn" dataid="{dede:field name='aid'/}">踩</button>

3. 编写JavaScript代码

在页面的底部引入一个自定义的JavaScript文件，例如main.js：

<script src="/static/js/main.js"></script>

在main.js 文件中，编写如下代码：

document.addEventListener('DOMContentLoaded', function() {
    const likeBtns = document.querySelectorAll('.likebtn');
    const dislikeBtns = document.querySelectorAll('.dislikebtn');
    likeBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const articleId = this.getAttribute('dataid');
            performLikeAction(articleId);
        });
    });
    dislikeBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const articleId = this.getAttribute('dataid');
            performDislikeAction(articleId);
        });
    });
});
function performLikeAction(articleId) {
    fetch('/api/like', {
        method: 'POST',
        headers: {
            'ContentType': 'application/json',
        },
        body: JSON.stringify({ articleId: articleId }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('点赞成功！');
        } else {
            alert('点赞失败！');
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}
function performDislikeAction(articleId) {
    fetch('/api/dislike', {
        method: 'POST',
        headers: {
            'ContentType': 'application/json',
        },
        body: JSON.stringify({ articleId: articleId }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('点踩成功！');
        } else {
            alert('点踩失败！');
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

4. 后端接口实现

在你的dedecms后台，你需要创建两个API接口来处理顶和踩的请求，可以在plus 文件夹下创建一个新的PHP文件，例如api_like.php 和api_dislike.php。

api_like.php 示例代码：

<?php
header('ContentType: application/json');
require_once './config.php';
$articleId = $_POST['articleId'];
// 更新数据库操作，这里假设有一个updateArticle方法来更新数据
if (updateArticle($articleId, 1)) { // 1代表点赞操作
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false]);
}
?>

api_dislike.php 示例代码：

<?php
header('ContentType: application/json');
require_once './config.php';
$articleId = $_POST['articleId'];
// 更新数据库操作，这里假设有一个updateArticle方法来更新数据
if (updateArticle($articleId, 1)) { // 1代表点踩操作
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false]);
}
?>

5. 测试和优化

完成以上步骤后，部署到服务器并进行测试，确保点击顶和踩按钮时能够正确调用接口并更新数据，如果遇到问题，可以使用浏览器的开发者工具查看网络请求和控制台日志进行调试。

FAQs

Q1: 如果用户多次点击同一个按钮会怎么样？

A1: 目前代码没有限制用户的点击次数，如果需要防止用户多次点击，可以添加一些防抖措施或在服务器端记录用户的操作，避免短时间内重复提交。

Q2: 如何在页面上显示当前的点赞和点踩数量？

A2: 可以在页面加载时通过Ajax请求获取每篇文章的点赞和点踩数量，并在按钮旁边显示，当用户点击按钮时，再通过Ajax更新这些数量。