'page'

src/CommentList.js

@@ -7,6 +7,7 @@ function CommentList() {
     const [total, setTotal] = useState(0);
     const [page, setPage] = useState(1);
     const [size, setSize] = useState(3);
+    const [inputPage, setInputPage] = useState(1);
 
     useEffect(() => {
         fetch(`http://localhost:8080/comment/get?page=${page}&size=${size}`)
@@ -16,19 +17,31 @@ function CommentList() {
                     setComments(data.data.comments);
                     setTotal(data.data.total || 0);
                 } else {
-                    console.error('Unexpected response structure:', data);
                     setComments([]);
                 }
             })
             .catch(error => console.error('Error fetching comments:', error));
-    }, [page]);
+    }, [page, size]);
 
     function onDelete(commentId) {
         fetch(`http://localhost:8080/comment/delete?id=${commentId}`)
             .then(response => response.json())
             .then(data => {
                 if (data.code === 0) {
-                    setComments(comments.filter(comment => comment.id !== commentId));
+                    if (comments.length === 1 && page > 1) {
+                        setPage(page - 1);
+                    } else {  
+                        fetch(`http://localhost: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.reverse());
+                                    setTotal(data.data.total || 0);
+                                } else {
+                                    setComments([]);
+                                }
+                            });
+                    }
                 } else {
                     console.error('Error deleting comment:', data.message);
                 }
@@ -36,6 +49,15 @@ function CommentList() {
             .catch(error => console.error('Error deleting comment:', error));
     }
 
+    function handleJumpPage() {
+        // 跳转到指定页
+        if (inputPage >= 1 && inputPage <= Math.ceil(total / size)) {
+            setPage(inputPage);
+        } else {
+            alert('页码超出范围');
+        }
+    }
+
     return (
         <div className="comment-list">
             {comments.map((comment) => (
@@ -50,8 +72,16 @@ function CommentList() {
                 <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>
+                <input
+                    type="number"
+                    min="1"
+                    max={Math.ceil(total / size)}
+                    value={inputPage}
+                    onChange={e => setInputPage(Number(e.target.value))}
+                    style={{ width: 50, marginLeft: 8, marginRight: 8 }}
+                />
+                <button onClick={handleJumpPage}>跳转</button>
             </div>
-
         </div>
     );
 }

src/CommentTest.js

@@ -3,29 +3,30 @@ import React, { useState } from 'react';
 
 function CommentTest() {
     function handleSubmit(event) {
-        event.preventDefault(); 
-        const name = event.target.elements.name.value;
-        const content = event.target.elements.content.value;
-
+        event.preventDefault();
+        const name = event.target.elements.name.value.trim();
+        const content = event.target.elements.content.value.trim();
+        if (!name || !content) {
+            alert('请输入完整的用户名和评论内容！');
+            return;
+        }
         fetch('http://localhost:8080/comment/add', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
             },
-            body: JSON.stringify({ name, content }), 
+            body: JSON.stringify({ name, content }),
         })
         .then(response => response.json())
         .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);
+                alert('评论提交失败: ' + (data.message || '未知错误'));
             }
         })
-        console.log('Name:', name);
-        console.log('Comment:', content);
+        .catch(() => alert('网络错误，评论提交失败'));
     }
 
     return (