Zhu yizheng · Zhu yizheng · Zhu yizheng · Zhu yizheng · 179c302d · 179c302d
--- a/comment.js
+++ b/comment.js
+// 获取 DOM 元素
+const usernameInput = $('#username');
+const commentInput = $('#comment');
+const submitButton = $('#submit');
+const commentsList = $('#commentsList');
+const paginationContainer = $('#pagination');
+
+let currentPage = 1;
+const commentsPerPage = 2;
+let totalComments = 0;
+
+// 初始化加载第一页评论
+loadComments(currentPage);
+
+// 添加评论
+submitButton.on('click', function () {
+    const name = usernameInput.val().trim();
+    const content = commentInput.val().trim();
+
+    if (!name || !content) {
+        alert('请填写用户名和评论内容！');
+        return;
+    }
+
+    $.ajax({
+        url: 'http://localhost:8080/comment/add',
+        method: 'POST',
+        contentType: 'application/json',
+        data: JSON.stringify({ name, content }),
+        success: function (res) {
+            if (res.code === 0) {
+                alert('评论成功！');
+                usernameInput.val('');
+                commentInput.val('');
+                loadComments(currentPage); // 重新加载当前页
+            } else {
+                alert('添加失败：' + res.msg);
+            }
+        },
+        error: function () {
+            alert('请求失败，请稍后重试');
+        }
+    });
+});
+
+// 加载评论
+function loadComments(page) {
+    $.get('http://localhost:8080/comment/get', { page, size: commentsPerPage }, function (res) {
+        if (res.code === 0) {
+            totalComments = res.data.total;
+            displayComments(res.data.comments);
+            updatePagination();
+        } else {
+            alert('加载评论失败：' + res.msg);
+        }
+    });
+}
+
+// 渲染评论
+function displayComments(comments) {
+    commentsList.empty();
+
+    comments.forEach(comment => {
+        const li = $('<li>').addClass('comment-item');
+
+        const usernameSpan = $('<span>').addClass('comment__username').text(comment.name);
+        const contentSpan = $('<span>').addClass('comment__content').text(comment.content);
+        const deleteButton = $('<button>').addClass('commonButton').text('删除');
+
+        deleteButton.on('click', function () {
+            if (!confirm('确定删除这条评论吗？')) return;
+        
+            // 修正：将id放在URL的query参数中
+            $.post('http://localhost:8080/comment/delete?id=' + comment.id, function (res) {
+                if (res.code === 0) {
+                    alert('删除成功');
+                    loadComments(currentPage);
+                } else {
+                    alert('删除失败：' + res.msg);
+                }
+            });
+        });
+
+        li.append(usernameSpan).append('<br>').append(contentSpan).append(deleteButton);
+        commentsList.append(li);
+    });
+}
+
+// 渲染分页
+function updatePagination() {
+    paginationContainer.empty();
+    const totalPages = Math.ceil(totalComments / commentsPerPage);
+
+    for (let i = 1; i <= totalPages; i++) {
+        const pageButton = $('<button>').addClass('pagination-button').text(i);
+
+        if (i === currentPage) {
+            pageButton.prop('disabled', true);
+        }
+
+        pageButton.on('click', function () {
+            currentPage = i;
+            loadComments(currentPage);
+        });
+
+        paginationContainer.append(pageButton);
+    }
+}
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="style.css">
+    <script src="comment.js" defer></script>
+    <title>评论区</title>
+</head>
+<body>
+    <div class="inputArea">
+        <h3 class="formTitle1">user name</h3>
+        <input type="text" id="username" placeholder="请输入用户名">
+        <h3 class="formTitle2">comment content</h3>
+        <input type="text" id="comment" placeholder="请输入评论内容">
+        <br>
+        <button id="submit" class="commonButton">提交</button>
+    </div>
+    <div class="commentsArea">
+        <ul id="commentsList"></ul>
+    </div>
+    <div id="pagination"></div>
+</body>
+</html>
\ No newline at end of file
--- a/style.css
+++ b/style.css
+/* 整个输入模块区域作为一个卡片框 */
+.inputArea {
+    width: 500px; 
+    margin: 50px auto; /* 上下边距50px，左右自动居中 */
+    padding: 20px; 
+    background-color: #fefefe;
+    border: 2px solid #ddd; 
+    border-radius: 10px;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+    box-sizing: border-box; 
+  }
+  .commentsArea{
+    width: 500px; 
+    margin: 50px auto; /* 上下边距50px，左右自动居中 */
+  }
+  /* 标题样式 */
+  .inputArea h3 {
+    margin: 12px 0 6px 0;
+    font-size: 16px;
+    color: #333;
+  }
+  
+  /* 输入框样式：相对于 inputArea 宽度设置 */
+  .inputArea input[type="text"] {
+    width: 90%;
+    height: 36px;
+    padding: 0 10px;
+    font-size: 15px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    box-sizing: border-box;
+  }
+  
+  /* 提交按钮样式 */
+  #submit {
+    width: 100px;
+    height: 36px;
+    border: none;
+    border-radius: 6px;
+    background-color: #333;
+    color: white;
+    font-size: 16px;
+    cursor: pointer;
+    display: block;
+    margin-top: 15px;
+    margin-left: 70%;
+  }
+
+  /* 提交按钮样式 */
+  .commonButton {
+    width: 100px;
+    height: 36px;
+    border: none;
+    border-radius: 6px;
+    background-color: #333;
+    color: white;
+    font-size: 16px;
+    cursor: pointer;
+    display: block;
+    margin-top: 15px;
+    margin-left: 70%;
+  }
+
+  #commentsList {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+  }
+  
+/* 评论项样式 */
+#commentsList {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+#commentsList li {
+    width: 100%;
+    margin: 18px auto 0 auto; /* 上下留白更自然 */
+    padding: 20px 26px 18px 22px;
+    background-color: #fafbfc;
+    box-shadow: 0 4px 16px rgba(60, 60, 60, 0.07);
+    font-size: 17px;
+    color: #333;
+    box-sizing: border-box;
+    border-bottom: none; /* 取消底部实线 */
+    position: relative;
+    transition: box-shadow 0.2s;
+    border-left:4px solid #333
+}
+
+#commentsList li:not(:last-child)::after {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 24px;
+    right: 24px;
+    bottom: -10px;
+    height: 1px;
+    background: #eee;
+    opacity: 0.85;
+}
+
+#commentsList li:hover {
+    background-color: #fafbfc;
+    box-shadow: 0 0 20px #cbcccd50;
+    transform: scale(1.01);
+    border-left: red 5px solid;
+}
+
+#commentsList li:active {
+    background-color: #eff1f3;
+    transition: all 0.25s;
+    -webkit-transition: all 0.25s;
+    box-shadow: none;
+    transform: scale(0.98);
+  }
+/* 用户名样式 */
+.comment__username {
+    font-weight: 600;
+    font-size: 19px;
+    color: black;
+    letter-spacing: 0.5px;
+    display: block;
+    margin-bottom: 8px;
+}
+
+/* 评论内容样式 */
+.comment__content {
+    font-size: 17px;
+    color: #454d5d;
+    line-height: 1.65;
+    margin-top: 0;
+}
+
+#pagination {
+    text-align: center;
+    margin-top: 20px;
+}
+
+.pagination-button  {
+
+  display: inline-block;
+  padding: 8px 16px;
+  margin: 4px ;
+  background-color: #343434;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+