ZBlogPHP 添加文章收藏功能——让阅读更有趣

ZBlogPHP是一个用PHP编写的内容管理系统（CMS），为作者提供创作、发布和管理文章的强大平台，其中一项重要附加功能是“文章收藏”，允许读者保存感兴趣的文章以便日后阅读，提升阅读体验的趣味性和便捷性，作者可为文章设置收藏功能，并通过个人账户管理这些收藏，这不仅方便作者追踪喜好，也增强读者忠诚度和粘性，该功能简化收藏流程，增加文章互动性。

在信息爆炸的时代，人们越来越喜欢快速获取感兴趣的内容，对于博客和文章类网站来说，提供便捷的收藏功能可以极大地提升用户体验，今天我们将探讨如何使用 ZBlogPHP 框架来为你的博客添加文章收藏功能。

准备工作

在开始之前，请确保你已经在你的 ZBlogPHP 项目中正确配置了数据库，并且已经创建了一个用户模型和相关的数据表，还需要确保你已经启用了 URL 路由功能和配置了后台管理。

实现步骤

数据库设计

在你的数据表中添加一个字段，用于存储用户是否收藏了某篇文章，你可以将这个字段命名为 is_favorited，类型设置为布尔值（boolean），默认值为 false。

ALTER TABLE `blog_posts` ADD `is_favorited` BOOLEAN DEFAULT FALSE;

创建收藏接口

在你的 api.php 或者相应的控制器文件中，创建一个新的 API 接口，用于处理用户收藏文章的请求，这个接口需要接收用户 ID 和文章 ID 作为参数,并更新数据库中相应记录的状态。

// api.php 或控制器文件
function favoritedPost($userId, $postId) {
    // 获取当前登录用户
    $user = User::getCurrent();
    // 检查用户是否已收藏该文章
    if (收藏::getUserFavoritePosts($userId, $postId)) {
        return json(['status' => 'error', 'message' => '您已经收藏过这篇文章了']);
    }
    // 更新数据库中的收藏状态
   收藏::addFavoritePost($userId, $postId);
    return json(['status' => 'success', 'message' => '收藏成功']);
}

创建前端收藏按钮

在前端页面中，为每篇文章添加一个收藏按钮，你可以使用 ZBlogPHP 的模板引擎来动态生成这些按钮。

<!-- 在文章详情页面中 -->
{if $post->id == $postId}
    <button id="fav-btn{$post->id}">收藏</button>
{/if}

在前端 JavaScript 代码中添加事件监听器，以便在用户点击收藏按钮时调用 API 接口。

document.addEventListener('DOMContentLoaded', function() {
    let favButtons = document.querySelectorAll('.fav-btn');
    favButtons.forEach(button => {
        button.addEventListener('click', function() {
            const postId = this.dataset.postId;
            const userId = getCurrentUserId(); // 获取当前登录用户 ID
            fetch('/api/favoritedPost', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ userId, postId })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    alert(data.message);
                    button.classList.add('favorited'); // 更新收藏状态样式
                } else {
                    alert(data.message);
                }
            });
        });
    });
});

样式调整

为了更好地展示收藏状态，你可以为收藏按钮添加一些 CSS 样式。

.favorited {
    background-color: #eee;
    border: 1px solid #ccc;
}

通过以上步骤，你已经成功地为 ZBlogPHP 项目添加了文章收藏功能，这个功能不仅可以让用户方便地保存自己感兴趣的文章，还能提升网站的互动性和用户体验，希望这篇文章对你有所帮助，让你能够更轻松地在 ZBlogPHP 框架中实现更多个性化功能。