做了个无限评论的功能（Nodejs版）

好的，下面是关于实现一个无限嵌套评论功能的Node.js版本的详细内容。这个功能将支持用户对文章进行评论，并且可以无限级地回复其他评论。

实现无限嵌套评论功能

数据模型

首先，我们需要定义一个数据模型来存储评论信息。这里我们使用MongoDB作为数据库，利用Mongoose库来定义数据模型。

const mongoose = require('mongoose');

const commentSchema = new mongoose.Schema({
    content: String,
    author: String,
    createdAt: { type: Date, default: Date.now },
    replies: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Comment' }]
});

const Comment = mongoose.model('Comment', commentSchema);

创建评论

接下来，我们创建一个API来处理创建评论的请求。我们可以使用Express框架来构建RESTful API。

const express = require('express');
const router = express.Router();
const Comment = require('./models/comment');

router.post('/comments', async (req, res) => {
    try {
        const newComment = new Comment(req.body);
        await newComment.save();
        res.status(201).json(newComment);
    } catch (error) {
        res.status(400).json({ message: error.message });
    }
});

获取评论

为了获取某个特定评论及其所有子评论，我们可以递归地查询数据库。

async function getCommentsTree(commentId) {
    const comment = await Comment.findById(commentId).populate('replies');
    if (!comment) return null;

    const replies = await Promise.all(comment.replies.map(getCommentsTree));
    return { ...comment.toObject(), replies };
}

router.get('/comments/:id', async (req, res) => {
    try {
        const commentTree = await getCommentsTree(req.params.id);
        res.json(commentTree);
    } catch (error) {
        res.status(500).json({ message: error.message });
    }
});

客户端展示

客户端需要递归地渲染评论树。这里是一个简单的React组件示例：

import React from 'react';

function CommentItem({ comment }) {
    return (
        <div>
            <h3>{comment.author}</h3>
            <p>{comment.content}</p>
            <ul>
                {comment.replies && comment.replies.map(reply => 
                    <li key={reply._id}>
                        <CommentItem comment={reply} />
                    </li>
                )}
            </ul>
        </div>
    );
}

function CommentList({ comments }) {
    return (
        <ul>
            {comments.map(comment => 
                <li key={comment._id}>
                    <CommentItem comment={comment} />
                </li>
            )}
        </ul>
    );
}

通过以上步骤，我们实现了一个基本的无限嵌套评论功能。当然，实际应用中还需要考虑性能优化、安全性等更多细节。希望这个示例对你有所帮助！

zlyuanteng 2楼

-.-一进去吓尿了…楼主可以借鉴下网页新闻回复跟帖的嵌套样式~~

bupafengyu 3楼

我的博文评论也是树结构，楼主可以移步看看。 http://www.brucewar.com

phonegap100 4楼

哈哈哈，一样的啊，你怎么实现的啊

vueper 5楼

问一下你那个新增的评论的事件是怎么处理的，用Mustache的话，事件不需要重新绑定么，对这个东东不太了解，顺口问一句，希望能解答一下，谢谢啦

h691938207 6楼

哈哈哈哈哈哈

zlyuanteng 7楼

我用的jquery，事件绑定在外层容器上(我这里是document)，通过传递一个选择器来过滤要绑定的元素，代码如下：

$(document).on('click', '.J_submit', function() {
//do something
})

vueper 8楼

为了实现一个无限嵌套评论的功能，我们可以使用Node.js结合MongoDB来处理数据存储，并使用前端框架（如React或Vue.js）来展示评论列表。以下是一个简单的示例，介绍如何设置后端服务来处理评论的增删改查。

后端（Node.js + Express + MongoDB）

首先，确保安装了必要的包：

npm install express mongoose body-parser

1. 初始化Express服务器

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

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

// 连接MongoDB数据库
mongoose.connect('mongodb://localhost:27017/commentDB', { useNewUrlParser: true, useUnifiedTopology: true });

// 定义Comment Schema
const commentSchema = new mongoose.Schema({
    content: String,
    replies: [commentSchema] // 无限嵌套的结构
});

const Comment = mongoose.model('Comment', commentSchema);

// 创建新评论
app.post('/api/comments', async (req, res) => {
    const comment = new Comment(req.body);
    await comment.save();
    res.send(comment);
});

// 获取所有评论
app.get('/api/comments', async (req, res) => {
    const comments = await Comment.find().populate('replies');
    res.send(comments);
});

// 更新评论
app.put('/api/comments/:id', async (req, res) => {
    const comment = await Comment.findByIdAndUpdate(req.params.id, req.body, { new: true });
    res.send(comment);
});

// 删除评论
app.delete('/api/comments/:id', async (req, res) => {
    await Comment.findByIdAndDelete(req.params.id);
    res.send({ message: 'Comment deleted' });
});

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

前端（React示例）

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
    const [comments, setComments] = useState([]);

    useEffect(() => {
        fetchComments();
    }, []);

    const fetchComments = async () => {
        const response = await axios.get('http://localhost:3000/api/comments');
        setComments(response.data);
    };

    const handleAddComment = async (content) => {
        await axios.post('http://localhost:3000/api/comments', { content, replies: [] });
        fetchComments();
    };

    return (
        <div>
            {/* 你的评论展示逻辑 */}
            <button onClick={() => handleAddComment("New comment")}>Add Comment</button>
        </div>
    );
}

export default App;

这个示例提供了一个基本的架构，你可以在此基础上添加更多的功能，如评论的分页、用户验证等。希望这能帮助你实现无限嵌套的评论系统！