Nodejs如何实现博客文章点赞功能

Nodejs如何实现博客文章点赞功能

按照nswbmw的教程做了一个简单的博客，现在想自己扩展实现每篇文章的点赞功能，没有思路，请教一下。 博客地址：http://imxile.me 我没有设置文章页面，想把点赞按钮放在每篇日志的下面

4 回复

要实现一个博客文章的点赞功能，我们可以使用Node.js来处理后端逻辑，并结合前端技术来显示和更新点赞数。这里提供一个基本的实现方案，包括后端API的设计、数据库操作以及前端展示。

1. 数据库设计

首先，我们需要在数据库中为每篇文章存储点赞数量。假设我们使用MongoDB作为数据库，可以创建一个集合（collection）来存储文章信息，其中包含点赞数量字段：

{
    "_id": "文章ID",
    "title": "文章标题",
    "content": "文章内容",
    "likes": 0 // 点赞数量
}

2. 后端API

接下来，我们需要创建一个后端API来处理点赞请求。使用Express框架，可以这样实现：

const express = require('express');
const app = express();
app.use(express.json());

// 假设我们有一个名为articles的集合
const articles = [
    {_id: '1', title: 'Hello World', content: 'This is a blog post.', likes: 0},
    // 其他文章...
];

// 点赞接口
app.post('/api/articles/:id/like', (req, res) => {
    const articleId = req.params.id;
    const article = articles.find(a => a._id === articleId);

    if (!article) {
        return res.status(404).send({message: 'Article not found'});
    }

    article.likes += 1;

    res.send({message: 'Like successful', likes: article.likes});
});

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

3. 前端展示

前端部分，你可以使用任何你喜欢的前端框架或简单地使用HTML/CSS/JavaScript来实现。这里提供一个简单的HTML示例：

<!DOCTYPE html>
<html>
<head>
    <title>Blog Post</title>
</head>
<body>
    <div id="post">
        <h1>文章标题</h1>
        <p>文章内容</p>
        <button onclick="likePost()">点赞</button>
        <span id="likes">0</span>
    </div>

    <script>
        function likePost() {
            fetch('/api/articles/1/like', {method: 'POST'})
                .then(response => response.json())
                .then(data => {
                    document.getElementById('likes').innerText = data.likes;
                });
        }
    </script>
</body>
</html>

这段代码中，当用户点击“点赞”按钮时，会向服务器发送一个POST请求，增加文章的点赞数，并更新页面上显示的点赞数。

总结

通过上述步骤，你就可以实现一个简单的博客文章点赞功能。实际应用中，你可能需要考虑更多的细节，比如错误处理、安全性（防止重复点赞）、持久化数据等。希望这能帮助你开始你的项目！


。。。再问一个问题，想执行文本框里输入的html又要怎么弄

如果点赞的是不登录的呢。。。

要在你的Node.js博客应用中添加文章点赞功能，你可以通过以下几个步骤来实现：

  1. 数据库设计： 首先需要在数据库中存储每个用户对每篇文章的点赞状态。例如，可以使用MongoDB来存储点赞信息。

    {
  "articleId": "1",
  "userId": "user1",
  "isLiked": true,
  "createdAt": "2023-10-05T10:20:00Z"
}

  2. 后端API： 创建一个API用于处理点赞操作。这里以Express为例，假设你已经安装了express和mongoose。

    const express = require('express');
const mongoose = require('mongoose');

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

// 假设你已经有了一个Article模型和User模型
const Article = mongoose.model('Article', new mongoose.Schema({ title: String, content: String }));
const Like = mongoose.model('Like', new mongoose.Schema({ articleId: String, userId: String, isLiked: Boolean }));

app.post('/api/articles/:id/like', async (req, res) => {
  const { id } = req.params;
  const { userId } = req.body;

  try {
    // 检查是否已点赞
    let existingLike = await Like.findOne({ articleId: id, userId });
    if (existingLike) {
      existingLike.isLiked = !existingLike.isLiked; // 切换点赞状态
    } else {
      existingLike = new Like({ articleId: id, userId, isLiked: true });
    }

    await existingLike.save();
    res.status(200).send(existingLike);
  } catch (error) {
    res.status(500).send(error.message);
  }
});

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

  3. 前端实现： 在文章详情页，你需要为每篇文章添加一个点赞按钮。当用户点击该按钮时，通过AJAX请求调用上述API。

    <button onclick="likePost()">点赞</button>

<script>
  function likePost() {
    fetch('/api/articles/1/like', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ userId: 'user1' })
    })
    .then(response => response.json())
    .then(data => {
      console.log('Success:', data);
      // 更新点赞状态显示
    })
    .catch((error) => {
      console.error('Error:', error);
    });
  }
</script>

  4. 展示点赞数量： 在文章详情页，你可以从数据库查询当前文章的点赞总数，并展示给用户。

    app.get('/api/articles/:id/likes', async (req, res) => {
  const { id } = req.params;
  try {
    const likes = await Like.find({ articleId: id });
    res.status(200).send({ count: likes.filter(like => like.isLiked).length });
  } catch (error) {
    res.status(500).send(error.message);
  }
});

这样就完成了一个基本的点赞功能。你可以根据实际需求进行进一步优化和扩展。

回到顶部