Flutter中使用PHP MySQL如何实现重启应用后点赞按钮状态保留？

核心逻辑是将用户的点赞关系落地存储，页面加载时主动读取存储的状态来渲染按钮样式，完整实现步骤如下：

1. 调整数据库结构 #

新增点赞关联表存储用户和内容的绑定关系，避免重复记录：

CREATE TABLE `user_likes` (
  `id` int UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `user_id` int UNSIGNED NOT NULL COMMENT '点赞用户ID，未登录场景可替换为设备唯一标识device_uuid',
  `content_id` int UNSIGNED NOT NULL COMMENT '被点赞内容的ID',
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  UNIQUE KEY `unique_user_content` (`user_id`, `content_id`) COMMENT '唯一键避免重复点赞'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

如果支持未登录用户点赞，可生成唯一的设备ID存在用户本地Cookie中，用该ID替代user_id字段存储即可。

2. 页面渲染时查询点赞状态 #

渲染内容页时，同步查询当前用户对内容的点赞状态，传递给前端模板：

session_start();
// 取当前登录用户ID，未登录场景取Cookie中的设备ID
$userId = $_SESSION['user_id'] ?? $_COOKIE['device_uuid'] ?? 0;
$contentId = 123; // 替换为当前页面对应的内容ID
$isLiked = false;

if ($userId) {
    // 查询是否存在点赞记录
    $stmt = $pdo->prepare("SELECT id FROM user_likes WHERE user_id = ? AND content_id = ?");
    $stmt->execute([$userId, $contentId]);
    $isLiked = $stmt->rowCount() > 0;
}

3. 前端根据状态渲染按钮样式 #

直接用后端传递的状态值给按钮绑定对应高亮类：

<button class="like-btn <?php echo $isLiked ? 'liked' : ''; ?>" data-content-id="<?php echo $contentId; ?>">点赞</button>

提前写好对应的CSS样式：

.like-btn {
  color: #666;
  border: none;
  background: none;
}
.like-btn.liked {
  color: #ec4141;
}

4. 交互时同步更新状态 #

用户点击点赞按钮时，先切换前端样式，再发请求更新数据库记录，避免刷新才生效：

document.querySelectorAll('.like-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const contentId = this.dataset.contentId;
    const isLiked = this.classList.contains('liked');
    // 先切换前端样式
    this.classList.toggle('liked');
    // 发请求同步后端状态
    fetch('/handle_like.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: `content_id=${contentId}&action=${isLiked ? 'cancel' : 'like'}`
    });
  })
})

后端handle_like.php处理逻辑：

session_start();
$userId = $_SESSION['user_id'] ?? $_COOKIE['device_uuid'] ?? 0;
$contentId = $_POST['content_id'] ?? 0;
$action = $_POST['action'] ?? 'like';

if (!$userId || !$contentId) {
    exit(json_encode(['code' => 1, 'msg' => '参数错误']));
}

if ($action === 'like') {
    // 新增点赞记录，IGNORE避免唯一键冲突报错
    $stmt = $pdo->prepare("INSERT IGNORE INTO user_likes (user_id, content_id) VALUES (?, ?)");
    $stmt->execute([$userId, $contentId]);
} else {
    // 取消点赞删除对应记录
    $stmt = $pdo->prepare("DELETE FROM user_likes WHERE user_id = ? AND content_id = ?");
    $stmt->execute([$userId, $contentId]);
}
echo json_encode(['code' => 0, 'msg' => '操作成功']);

内容的提问来源于stack exchange，提问作者Unknoen