使用jQuery更新MySQL数据库并在页面实时展示点赞数

Hey there! 别担心，既然你已经掌握基础Node.js，咱们完全可以用它搞定这个持久化点赞功能，不用碰PHP～我一步步给你讲清楚，从数据库搭建到后端接口再到前端联动，都是你能上手的内容：

第一步：搭建MySQL数据库（极简版） #

首先你得先安装好MySQL（网上搜对应系统的安装教程，步骤很简单），然后打开MySQL命令行或者可视化工具（比如Navicat），执行下面的SQL代码创建数据库和表：

-- 创建数据库
CREATE DATABASE IF NOT EXISTS activity_likes;
USE activity_likes;

-- 创建点赞表，默认只做一个活动，所以activity_id固定为1
CREATE TABLE IF NOT EXISTS likes (
    activity_id INT PRIMARY KEY DEFAULT 1,
    like_count INT DEFAULT 0
);

-- 初始化点赞数为0（如果表已存在则不会重复插入）
INSERT INTO likes (activity_id, like_count) VALUES (1, 0) ON DUPLICATE KEY UPDATE like_count = like_count;

第二步：用Node.js写后端接口 #

我们用express做Web框架，mysql2连接MySQL（它支持Promise，比老版mysql包更适合新手写异步代码），还需要cors解决跨域问题（前端和后端端口不同时会用到）。

1. 先在项目文件夹里初始化Node项目并安装依赖：

npm init -y
npm install express mysql2 cors

2. 创建server.js文件，写入以下代码：

const express = require('express');
const mysql = require('mysql2/promise');
const cors = require('cors');

const app = express();
app.use(cors()); // 允许跨域请求
app.use(express.json());

// 填写你的MySQL连接信息
const dbConfig = {
  host: 'localhost', // 本地数据库地址
  user: 'root', // 默认用户名，改了就填你的自定义用户名
  password: '你的MySQL密码', // 安装MySQL时设置的密码
  database: 'activity_likes' // 刚才创建的数据库名
};

// 接口1：获取当前活动的点赞数
app.get('/api/likes', async (req, res) => {
  try {
    // 连接数据库
    const connection = await mysql.createConnection(dbConfig);
    // 查询点赞数
    const [rows] = await connection.execute('SELECT like_count FROM likes WHERE activity_id = 1');
    connection.end(); // 关闭连接
    // 返回数据给前端
    res.json({ count: rows[0].like_count });
  } catch (error) {
    console.error('获取点赞数出错:', error);
    res.status(500).json({ error: '获取点赞数失败，请稍后重试' });
  }
});

// 接口2：处理点赞请求，点赞数+1
app.post('/api/like', async (req, res) => {
  try {
    const connection = await mysql.createConnection(dbConfig);
    // 更新点赞数
    await connection.execute('UPDATE likes SET like_count = like_count + 1 WHERE activity_id = 1');
    connection.end();
    // 再查询最新的点赞数返回给前端
    const [rows] = await mysql.createConnection(dbConfig).execute('SELECT like_count FROM likes WHERE activity_id = 1');
    res.json({ count: rows[0].like_count });
  } catch (error) {
    console.error('点赞出错:', error);
    res.status(500).json({ error: '点赞失败，请稍后重试' });
  }
});

// 启动后端服务，端口设为3001（避免和前端常用的3000端口冲突）
app.listen(3001, () => {
  console.log('后端服务已启动，地址：http://localhost:3001');
});

第三步：修改前端代码对接后端 #

你之前已经写了onclick实现前端计数，现在改成调用后端接口，确保数据持久化。假设你的前端HTML是这样的：

<button id="likeButton">点赞</button>
<p>当前点赞人数：<span id="likeNumber">0</span></p>

<script>
// 页面加载时先获取初始点赞数
async function loadInitialCount() {
  try {
    const response = await fetch('http://localhost:3001/api/likes');
    const data = await response.json();
    document.getElementById('likeNumber').textContent = data.count;
  } catch (err) {
    console.error('加载初始点赞数失败:', err);
  }
}

// 点赞按钮点击事件
document.getElementById('likeButton').addEventListener('click', async () => {
  // 可选：防止重复点赞，用localStorage记录用户是否点过赞
  if (localStorage.getItem('hasLiked')) {
    alert('你已经点过赞啦！');
    return;
  }

  try {
    const response = await fetch('http://localhost:3001/api/like', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      }
    });
    const data = await response.json();
    // 更新页面显示的点赞数
    document.getElementById('likeNumber').textContent = data.count;
    // 标记用户已点赞
    localStorage.setItem('hasLiked', 'true');
    alert('点赞成功！');
  } catch (err) {
    console.error('点赞失败:', err);
    alert('点赞失败，请重试');
  }
});

// 页面加载完成后调用初始加载函数
window.addEventListener('load', loadInitialCount);
</script>

第四步：测试运行 #

1. 先启动MySQL服务（Windows可以在服务列表里启动MySQL，Mac用brew services start mysql，Linux用sudo systemctl start mysql）
2. 运行后端：在项目文件夹里打开终端，输入node server.js，看到控制台输出服务启动的提示就ok
3. 打开你的前端页面（可以直接用浏览器打开HTML文件，或者用VS Code的Live Server插件启动）
4. 点击点赞按钮，试试刷新页面，点赞数是不是还在！

新手友好小提示 #

• 如果以后要做多个活动，只需要把activity_id作为参数传给接口就行，比如前端请求/api/likes?activityId=2，后端用req.query.activityId来查询对应活动的点赞数
• 如果你想更安全，可以给接口加简单的防刷机制，比如限制同一个IP的点赞频率，但对于小项目来说，上面的代码已经足够用啦

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