发完评论之后定位到页面底部是不是好点？ Nodejs版实现建议

发完评论之后定位到页面底部是不是好点？ Nodejs版实现建议

RT

9 回复

当然可以。在Web应用中，当用户发表评论后自动滚动到页面底部是一个常见的用户体验优化方法。这可以让用户更容易看到他们的评论已经成功提交，并且为下一次评论做准备。

以下是一个简单的Node.js实现建议，主要关注于客户端（前端）的JavaScript部分，因为Node.js本身主要是用于服务器端的逻辑处理。但是，为了完整性，我会提供一个简单的Express后端示例，它接收评论并返回一个响应给前端。

前端实现

首先，我们需要创建一个简单的HTML表单，允许用户输入评论：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Comment Form</title>
</head>
<body>
    <form id="commentForm">
        <textarea name="comment" placeholder="Enter your comment here..."></textarea><br/>
        <button type="submit">Submit Comment</button>
    </form>

    <div id="commentsSection">
        <!-- 这里将动态显示所有评论 -->
    </div>

    <script>
        document.getElementById('commentForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            const comment = document.querySelector('textarea[name=comment]').value;
            fetch('/api/comments', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ comment })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 如果评论成功，获取新的评论列表并更新页面
                    fetch('/api/comments')
                        .then(response => response.json())
                        .then(commentsData => {
                            const commentsSection = document.getElementById('commentsSection');
                            commentsSection.innerHTML = ''; // 清空现有评论
                            commentsData.comments.forEach(comment => {
                                const newCommentElement = document.createElement('p');
                                newCommentElement.textContent = comment;
                                commentsSection.appendChild(newCommentElement);
                            });
                            // 滚动到底部
                            commentsSection.scrollTop = commentsSection.scrollHeight;
                        });
                }
            });
        });
    </script>
</body>
</html>

后端实现（使用Express）

接下来，我们设置一个简单的Express服务器来处理评论的提交和检索：

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

let comments = [];

app.post('/api/comments', (req, res) => {
    const comment = req.body.comment;
    comments.push(comment);
    res.json({ success: true });
});

app.get('/api/comments', (req, res) => {
    res.json({ comments });
});

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

在这个例子中，当用户提交评论时，前端会通过fetch API向后端发送一个POST请求。如果评论成功添加，前端将重新获取最新的评论列表，并更新页面内容，同时滚动到底部以展示新添加的评论。

这种方法不仅提高了用户体验，还展示了如何结合前后端技术实现特定的功能需求。


未读消息是不是应该换个颜色，橙色或者红色啊，绿色很不显眼

我觉得不刷新才好…

不刷新可以做吧

现在的情况是，点击回复后，会生成一个新的结构

<a id="51c8116b73c638f370b7ed04"></a>

然后地址栏会有一个hash值，这样发布回复后会定位到你刚才提交的那个，我觉得是合理的

这里说的刷新是指页面重新load吧，期望的是回复区域局部更新

以前写markdown还能看看效果，现在只有提交之后才能看。 回复的内容只有删除没有修改~每次回复都要先备份~

我也覺得未讀消息要有顏色, 例如有新回覆之類。

对于这个问题，通常在用户发表评论后将页面滚动到底部是一种良好的用户体验设计。这可以让用户直接看到自己的评论被展示出来，增强用户的参与感和满意度。

在Node.js中，页面的渲染是由前端JavaScript完成的。Node.js主要负责处理服务器端逻辑。因此，具体实现滚动到页面底部的功能需要在前端完成。不过，我们可以使用Node.js来控制是否触发这一行为，比如通过设置一个标志或根据后端返回的状态来决定是否需要滚动到底部。

以下是一个简单的示例，展示如何在前端JavaScript中实现这一功能：

  1. 假设你的后端返回了一个JSON响应，其中包含一个字段scrollToBottom，该字段指示是否需要滚动到底部。

  2. 在客户端，你可以这样实现滚动到页面底部的功能：

<!-- HTML 示例 -->
<button id="submitComment">提交评论</button>

<script>
document.getElementById('submitComment').addEventListener('click', function() {
    fetch('/submit-comment', {
        method: 'POST',
        body: JSON.stringify({comment: '这是我的新评论'}),
        headers: {'Content-Type': 'application/json'}
    })
    .then(response => response.json())
    .then(data => {
        if (data.scrollToBottom) {
            window.scrollTo(0, document.body.scrollHeight);
        }
    });
});
</script>
  1. 在Node.js后端，你可以这样处理提交评论的请求，并决定是否需要滚动到底部：
const express = require('express');
const app = express();

app.use(express.json());

app.post('/submit-comment', (req, res) => {
    const comment = req.body.comment;
    
    // 这里可以添加保存评论到数据库的逻辑
    console.log(`Received comment: ${comment}`);
    
    // 模拟是否需要滚动到底部
    const scrollToBottom = true; 

    res.json({
        success: true,
        scrollToBottom: scrollToBottom
    });
});

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

以上代码展示了如何在Node.js后端决定是否需要滚动到页面底部，并通过API响应返回给前端，然后在前端JavaScript中根据返回的数据决定是否执行滚动操作。

回到顶部