MySQL数据库JS实现点赞功能

基础概念

点赞功能是一种常见的Web应用交互功能，允许用户对内容（如文章、评论、图片等）表达喜欢或不喜欢的态度。在MySQL数据库中实现点赞功能，通常涉及以下几个基础概念：

用户表（Users）：存储用户信息。
内容表（Contents）：存储被点赞的内容信息。
点赞表（Likes）：存储用户的点赞记录。

类型

简单点赞：用户只能点赞一次。
可取消点赞：用户可以点赞也可以取消点赞。
点赞计数：统计每个内容的点赞总数。

应用场景

社交媒体平台：用户可以点赞帖子、评论等。
博客网站：读者可以点赞文章。
电商网站：用户可以点赞商品。

实现步骤

数据库设计

CREATE TABLE Users (
    user_id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(255) NOT NULL
);

CREATE TABLE Contents (
    content_id INT PRIMARY KEY AUTO_INCREMENT,
    title VARCHAR(255) NOT NULL,
    content TEXT
);

CREATE TABLE Likes (
    like_id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT,
    content_id INT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES Users(user_id),
    FOREIGN KEY (content_id) REFERENCES Contents(content_id)
);

前端实现（JavaScript）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点赞功能</title>
</head>
<body>
    <div id="content">
        <h1>文章标题</h1>
        <p>文章内容...</p>
        <button id="likeButton">点赞</button>
        <span id="likeCount">0</span>
    </div>

    <script>
        document.getElementById('likeButton').addEventListener('click', function() {
            fetch('/like', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ contentId: 1 }) // 假设内容ID为1
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('likeCount').textContent = data.likeCount;
            });
        });
    </script>
</body>
</html>

后端实现（Node.js + Express）

const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');

const app = express();
app.use(bodyParser.json());

const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'testdb'
});

db.connect(err => {
    if (err) throw err;
    console.log('Database connected!');
});

app.post('/like', (req, res) => {
    const { contentId } = req.body;
    const userId = 1; // 假设当前用户ID为1

    db.query('SELECT * FROM Likes WHERE user_id = ? AND content_id = ?', [userId, contentId], (err, results) => {
        if (err) throw err;

        if (results.length > 0) {
            // 用户已经点过赞，取消点赞
            db.query('DELETE FROM Likes WHERE user_id = ? AND content_id = ?', [userId, contentId], (err, result) => {
                if (err) throw err;
                updateLikeCount(contentId, -1, res);
            });
        } else {
            // 用户未点过赞，添加点赞记录
            db.query('INSERT INTO Likes (user_id, content_id) VALUES (?, ?)', [userId, contentId], (err, result) => {
                if (err) throw err;
                updateLikeCount(contentId, 1, res);
            });
        }
    });
});

function updateLikeCount(contentId, delta, res) {
    db.query('UPDATE Contents SET like_count = like_count + ? WHERE content_id = ?', [delta, contentId], (err, result) => {
        if (err) throw err;
        db.query('SELECT like_count FROM Contents WHERE content_id = ?', [contentId], (err, results) => {
            if (err) throw err;
            res.json({ likeCount: results[0].like_count });
        });
    });
}

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

可能遇到的问题及解决方法

并发问题：多个用户同时点赞可能导致数据不一致。
- 解决方法：使用数据库事务和锁机制确保操作的原子性。

性能问题：大量点赞操作可能导致数据库压力过大。
- 解决方法：使用缓存（如Redis）来存储点赞数，定期同步到数据库。
安全性问题：防止恶意刷赞。
- 解决方法：增加验证码机制或限制单个用户的点赞频率。

通过以上设计和实现，可以有效地在MySQL数据库中实现点赞功能，并处理常见的相关问题。

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

MySQL数据库JS实现点赞功能

基础概念

相关优势

类型

应用场景

实现步骤

数据库设计

前端实现（JavaScript）

后端实现（Node.js + Express）

可能遇到的问题及解决方法

相关·内容

[MYSQL] 离谱! 用shell实现mysql_config_editor功能. mysql免密

14. 尚硅谷_Zepto_实战练习JS交互功能实现.avi

Python MySQL数据库开发 22 Flask框架的基本实现学习猿地

31_尚硅谷_大数据JavaWEB_登录功能实现_JS去掉错误提示信息.avi

etl engine 通过MySQL binlog 模式实现增量同步数据到各种数据库

122_尚硅谷_以太坊项目二_去中心化eBay_web前端基本功能（五）上架商品JS实现

033-直播间模块-点赞布局

【玩转腾讯云】小白零基础入门微信小程序！【第三十五课】添加限时抢购功能

camunda实现bpm

一分钟了解Axios拦截器实现原理

MySQL数据库LRU链表是一个动态的效果，会不断地有页加入，也不断有页被淘汰，那大致是如何计算冷热

ClickHouse在有赞的使用和优化

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

MySQL数据库JS实现点赞功能

基础概念

相关优势

类型

应用场景

实现步骤

数据库设计

前端实现（JavaScript）

后端实现（Node.js + Express）

可能遇到的问题及解决方法

[MYSQL] 离谱! 用shell实现mysql_config_editor功能. mysql免密

14. 尚硅谷_Zepto_实战练习JS交互功能实现.avi

Python MySQL数据库开发 22 Flask框架的基本实现 学习猿地

31_尚硅谷_大数据JavaWEB_登录功能实现_JS去掉错误提示信息.avi

etl engine 通过MySQL binlog 模式 实现增量同步数据到 各种数据库

122_尚硅谷_以太坊项目二_去中心化eBay_web前端基本功能（五）上架商品JS实现

033-直播间模块-点赞布局

【玩转腾讯云】小白零基础入门微信小程序！【第三十五课】添加限时抢购功能

camunda实现bpm

一分钟了解Axios拦截器实现原理

MySQL数据库LRU链表是一个动态的效果，会不断地有页加入，也不断有页被淘汰，那大致是如何计算冷热

ClickHouse在有赞的使用和优化

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

Python MySQL数据库开发 22 Flask框架的基本实现学习猿地

etl engine 通过MySQL binlog 模式实现增量同步数据到各种数据库