纯代码实现点赞+收藏功能：从原理到实战

一、功能需求分析

点赞和收藏是Web应用中常见的用户交互功能，核心需求包括：

• 实时显示当前点赞/收藏数量
• 用户点击后状态即时切换
• 防止重复提交和恶意刷数据
• 持久化存储用户操作记录

二、前端实现方案

1. 结构

<div class="interaction-box" data-id="123">
  <button class="like-btn">
    <span class="icon">👍</span>
    <span class="count">0</span>
  </button>
  <button class="favorite-btn">
    <span class="icon">⭐</span>
    <span class="count">0</span>
  </button>
</div>

2. CSS样式

.interaction-box {
  display: flex;
  gap: 15px;
}
button {
  border: none;
  background: f5f5f5;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}
button.active {
  background: e3f2fd;
  color: 2196f3;
}

3. JavaScript核心逻辑

document.querySelectorAll('.interaction-box').forEach(box => {
  const postId = box.dataset.id;
  const likeBtn = box.querySelector('.like-btn');
  const favBtn = box.querySelector('.favorite-btn');
  
  // 初始化状态
  fetch(`/api/stats?id=${postId}`)
    .then(res => res.json())
    .then(data => {
      likeBtn.querySelector('.count').textContent = data.likes;
      favBtn.querySelector('.count').textContent = data.favorites;
    });

  // 点赞处理
  likeBtn.addEventListener('click', () => {
    const isActive = likeBtn.classList.contains('active');
    fetch(`/api/like`, {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        id: postId,
        action: isActive ? 'unlike' : 'like'
      })
    }).then(updateUI);
  });

  // 收藏处理（逻辑类似）
  favBtn.addEventListener('click', () => { / ... / });
  
  function updateUI() {
    // 更新按钮状态和计数
  }
});

三、后端API设计

1. 数据模型（MySQL示例）

CREATE TABLE interactions (
  id INT AUTO_INCREMENT PRIMARY KEY,
  post_id INT NOT NULL,
  user_id INT NOT NULL,
  is_like BOOLEAN DEFAULT 0,
  is_favorite BOOLEAN DEFAULT 0,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  UNIQUE KEY (post_id, user_id)
);

2. Node.js接口实现

// 点赞接口
router.post('/like', async (req, res) => {
  const { id, action } = req.body;
  const userId = req.session.userId;
  
  try {
    await db.query(
      `INSERT INTO interactions (post_id, user_id, is_like) 
       VALUES (?, ?, ?) 
       ON DUPLICATE KEY UPDATE is_like = ?`,
      [id, userId, action === 'like', action === 'like']
    );
    res.json({ success: true });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

四、高级优化方案

• 防刷策略：使用Redis记录用户操作频率，限制10次/分钟
• 性能优化：批量更新计数器，避免频繁数据库写入
• 离线支持：本地存储记录，网络恢复后同步

五、完整代码获取

GitHub仓库地址：https://github.com/example/interaction-demo