'page'

src/CommentList.css

+.pagination {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 20px auto;
+}
+
+.page-index {
+    margin: 0 auto;
+}
+
+.left-button, .right-button {
+    width: 50px;
+    border-radius: 8px;
+    background-color: #f5f5f5;
+    color: #000;
+    border: none;
+    padding: 10px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.left-button:hover, .right-button:hover {
+    background-color: #d3d3d3;
+}
+
+.left-button {
+    margin-right: auto;
+}
+
+.right-button {
+    margin-left: auto;
+}
\ No newline at end of file

src/CommentList.js

@@ -6,31 +6,28 @@ function CommentList() {
     const [comments, setComments] = useState([]);
     const [total, setTotal] = useState(0);
     const [page, setPage] = useState(1);
-    const [size, setSize] = useState(10); // 每页显示的评论数量
+    const [size, setSize] = useState(3);
 
     useEffect(() => {
-        // 向后端请求数据
-        fetch(`http://localhost:8080/comment/get?page=${page}&size=${size}`) // 替换为实际的后端 API 地址
+        fetch(`http://10.194.23.96:8080/comment/get?page=${page}&size=${size}`)
             .then(response => response.json())
             .then(data => {
                 if (data && data.code === 0 && data.data && Array.isArray(data.data.comments)) {
-                    setComments(data.data.comments); // 确保 comments 是数组
+                    setComments(data.data.comments);
                     setTotal(data.data.total || 0);
                 } else {
                     console.error('Unexpected response structure:', data);
-                    setComments([]); // 设置为空数组以避免错误
+                    setComments([]);
                 }
             })
             .catch(error => console.error('Error fetching comments:', error));
-    }, []);
+    }, [page]);
 
     function onDelete(commentId) {
-        // 删除评论的逻辑
-        fetch(`http://localhost:8080/comment/delete?id=${commentId}`)
+        fetch(`http://10.194.23.96:8080/comment/delete?id=${commentId}`)
             .then(response => response.json())
             .then(data => {
                 if (data.code === 0) {
-                    // 成功删除后，重新获取评论列表
                     setComments(comments.filter(comment => comment.id !== commentId));
                 } else {
                     console.error('Error deleting comment:', data.message);
@@ -43,12 +40,18 @@ function CommentList() {
         <div className="comment-list">
             {comments.map((comment) => (
                 <Comment
-                    key={comment.id} // 假设每个评论都有唯一的 id
+                    key={comment.id}
                     name={comment.name}
                     content={comment.content}
                     onDelete={() => onDelete(comment.id)}
                 />
             ))}
+            <div className="pagination">
+                <button onClick={() => setPage(page - 1)} disabled={page === 1} className='left-button'>&larr;</button>
+                <span className='page-index'>Page {page} of {Math.ceil(total / size)}</span>
+                <button onClick={() => setPage(page + 1)} disabled={page * size >= total} className='right-button'>&rarr;</button>
+            </div>
+
         </div>
     );
 }

src/CommentTest.js

@@ -7,7 +7,7 @@ function CommentTest() {
         const name = event.target.elements.name.value;
         const content = event.target.elements.content.value;
 
-        fetch('http://localhost:8080/comment/add', {
+        fetch('http://10.194.23.96:8080/comment/add', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
@@ -18,6 +18,8 @@ function CommentTest() {
         .then(data => {
             if (data.code === 0) {
                 console.log('Comment added successfully:', data.data);
+                event.target.reset();
+                window.location.reload();
             } else {
                 console.error('Error adding comment:', data.message);
             }