springboot实现盖楼留言实时更新

Spring Boot 可以使用 WebSocket 技术来实现盖楼留言实时更新。WebSocket 技术是一种基于 TCP 的全双工通信协议，它可以在客户端和服务器之间建立实时、双向、持久的连接，实现实时通信。

Spring Boot 提供了 Spring WebSocket 模块，可以方便地实现 WebSocket 功能。可以使用 @ServerEndpoint 注解来标记一个 WebSocket 服务器端点，然后在类中定义处理消息的方法，使用 @OnMessage 注解来标记。当有客户端连接到该端点时，会自动调用该方法处理消息。

具体实现过程为：
1. 在 pom.xml 中添加 spring-boot-starter-websocket 依赖；
2. 创建一个类并使用 @ServerEndpoint 注解标记为 WebSocket 端点；
3. 在类中定义处理消息的方法，并使用 @OnMessage 注解标记；
4. 在页面上引入 SockJS 和 stomp.js 脚本；
5. 使用 SockJS 和 stomp.js 客户端与 WebSocket 建立连接，并订阅服务器端发送的消息；
6. 在服务器端接收到留言信息时，将消息发送给所有连接到该端点的客户端。

相关问题

mysql实现评论盖楼

实现评论盖楼系统一般需要以下步骤：

1. 创建评论表：在MySQL中创建一个表来存储评论数据，包括评论内容、时间戳、用户ID、回复的评论ID等字段。例如：

CREATE TABLE comments (
  id INT(11) NOT NULL AUTO_INCREMENT,
  user_id INT(11) NOT NULL,
  content TEXT NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  parent_id INT(11),
  PRIMARY KEY (id)
);

2. 编写PHP脚本：编写PHP脚本来处理用户提交的评论，并将其保存到数据库表中。需要注意的是，当用户回复某条评论时，需要保存该评论的ID作为回复的评论ID。

// 连接数据库
$conn = mysqli_connect($host, $username, $password, $dbname);

// 处理用户提交的评论
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  $user_id = $_POST['user_id'];
  $content = $_POST['content'];
  $parent_id = $_POST['parent_id'];
  $sql = "INSERT INTO comments (user_id, content, parent_id) VALUES ('$user_id', '$content', '$parent_id')";
  mysqli_query($conn, $sql);
}

3. 显示评论列表：编写PHP脚本来查询数据库中的评论数据，并将其显示在页面上。需要使用递归算法来处理评论的嵌套结构，并使用CSS和JavaScript来实现评论盖楼的效果。

// 获取根评论列表
$sql = "SELECT * FROM comments WHERE parent_id IS NULL";
$result = mysqli_query($conn, $sql);

// 递归处理子评论列表
function showComments($parent_id, $level) {
  global $conn;
  $sql = "SELECT * FROM comments WHERE parent_id=$parent_id";
  $result = mysqli_query($conn, $sql);
  while ($row = mysqli_fetch_assoc($result)) {
    echo '<div style="margin-left: ' . ($level * 20) . 'px;">';
    echo '<p>' . $row['content'] . '</p>';
    echo '<small>' . $row['created_at'] . '</small>';
    echo '<a href="#" onclick="showReplyForm(' . $row['id'] . ')">回复</a>';
    echo '<div id="reply-form-' . $row['id'] . '" style="display: none;">';
    echo '<form method="post" action="#">';
    echo '<input type="hidden" name="parent_id" value="' . $row['id'] . '">';
    echo '<input type="text" name="content">';
    echo '<input type="submit" value="提交">';
    echo '</form>';
    echo '</div>';
    showComments($row['id'], $level + 1);
    echo '</div>';
  }
}

// 显示评论列表
while ($row = mysqli_fetch_assoc($result)) {
  echo '<div>';
  echo '<p>' . $row['content'] . '</p>';
  echo '<small>' . $row['created_at'] . '</small>';
  echo '<a href="#" onclick="showReplyForm(' . $row['id'] . ')">回复</a>';
  echo '<div id="reply-form-' . $row['id'] . '" style="display: none;">';
  echo '<form method="post" action="#">';
  echo '<input type="hidden" name="parent_id" value="' . $row['id'] . '">';
  echo '<input type="text" name="content">';
  echo '<input type="submit" value="提交">';
  echo '</form>';
  echo '</div>';
  showComments($row['id'], 1);
  echo '</div>';
}

需要注意的是，为了避免SQL注入攻击，需要使用参数化查询或预处理语句来处理用户提交的数据。另外，为了安全起见，还需要进行用户身份验证和数据过滤。

vant4 实现评论盖楼的样式

Vant4 提供了 `comment` 组件来实现评论盖楼的样式。你可以通过以下步骤来使用该组件：

1. 安装 Vant4：`npm install vant@next --save`

2. 在需要使用评论盖楼的页面引入组件：

   <script>
   import { Comment, CommentInput } from 'vant';

   export default {
     components: {
       [Comment.name]: Comment,
       [CommentInput.name]: CommentInput,
     },
     // ...
   };
   </script>

3. 在页面中使用 `comment` 和 `comment-input` 组件：

   <template>
     <div>
       <van-comment v-model="comments" :lazy-render="false">
         <template #header>
           <div class="comment-header">共 {{ comments.length }} 条评论</div>
         </template>
         <template #item="{ item }">
           <div class="comment-item">
             <div class="comment-author">{{ item.author }}</div>
             <div class="comment-content">{{ item.content }}</div>
             <div class="comment-footer">{{ item.time }}</div>
           </div>
         </template>
       </van-comment>

       <van-comment-input
         v-model="newComment"
         :value="newComment"
         show-confirm-button
         @confirm="addComment"
         placeholder="写评论..."
       />
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         comments: [
           {
             id: 1,
             author: '小明',
             content: '这是一条评论',
             time: '2021-08-01 10:00:00',
             children: [
               {
                 id: 2,
                 author: '小红',
                 content: '回复小明的评论',
                 time: '2021-08-01 10:10:00',
               },
             ],
           },
         ],
         newComment: '',
       };
     },
     methods: {
       addComment() {
         const id = this.comments.length + 1;
         const author = '小王';
         const content = this.newComment;
         const time = new Date().toLocaleString();
         const newComment = { id, author, content, time };
         this.comments.unshift(newComment);
         this.newComment = '';
       },
     },
   };
   </script>

4. 样式可以自定义，可以在组件外部定义对应的 CSS 类名来修改样式。

   .comment-header {
     padding: 10px;
     font-size: 16px;
     font-weight: bold;
     background-color: #f5f5f5;
   }

   .comment-item {
     margin: 10px;
   }

   .comment-author {
     font-weight: bold;
   }

   .comment-content {
     margin-top: 5px;
   }

   .comment-footer {
     font-size: 12px;
     color: #999;
     margin-top: 5px;
   }

以上就是使用 Vant4 实现评论盖楼的样式的步骤。