显示信息：10s 自动+ 手动刷新

src/App.tsx

-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import './App.css'
 
 const BackEndUrl : string = 'http://localhost:8080'
@@ -7,11 +7,18 @@ interface CommentData {
   name: string
   content: string
 }
+interface CommentFromBack {
+  id: number
+  name: string
+  content: string
+}
 
 function App() {
   const [username, setUsername] = useState<string>('')
   const [comment, setComment] = useState<string>('')
   const [error, setError] = useState<string>('')
+  const [loading, setLoading] = useState<boolean>(false)
+  const [comments, setComments] = useState<CommentFromBack[]>([])
 
   const clearForm = () => {
     setUsername('')
@@ -54,7 +61,8 @@ function App() {
       }
 
       clearForm()
-      alert('提交成功！');
+      //alert('提交成功！');
+      fetchComments()
 
     } catch (err) {
       // 处理错误
@@ -65,6 +73,72 @@ function App() {
     }
   }
 
+  const fetchComments = async () => {
+    setLoading(true)
+    setError('')
+
+    try {
+      const response : Response = await fetch('http://localhost:8080/comment/get?size=-1', {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+
+      const text = await response.text();
+
+      //输出responce 的详细信息到控制台
+      console.log('Response Status:', response.status);
+      console.log('Response Headers:', response.headers);
+      console.log('Response URL:', response.url);
+      console.log('Response Body:', text);
+
+       if (!response.ok) {
+        throw new Error('无法获取评论，错误码：' + response.status)
+      }
+
+      const dataJson = JSON.parse(text)
+      /*
+         dataJson:
+         {"code":0,"msg":"success","data":{"total":4,"comments":[{"id":1,"name":"Alice","content":"First comment!"},{"id":2,"name":"Bob","content":"Great work!"},{"id":3,"name":"114","content":"514"},{"id":4,"name":"114","content":"514"}]}}
+      */
+
+      if (dataJson.code !== 0) {
+        throw new Error('获取评论失败：' + dataJson.msg)
+      }
+
+      const data : CommentFromBack[] = dataJson.data?.comments || []
+      setComments(data)
+      console.log('获取到的评论:', data)
+
+    } catch (err) {
+      // 处理错误
+      console.error('提交失败:', err)
+      setError('提交失败：' + (err instanceof Error ? err.message : '未知错误'))
+      alert(error);
+    } finally {
+      setLoading(false)
+    }
+
+    return
+  }
+
+  useEffect(() => {
+    // 初始加载评论
+    fetchComments()
+
+    // 设置定时器，每30秒获取一次评论
+    const interval = setInterval(() => {
+      fetchComments()
+    }, 10000) // 10秒
+
+    // 组件卸载时清除定时器
+    return () => {
+      clearInterval(interval)
+    }
+  }, [])
+
+
   return(
     <>
       <div className="submit-container">
@@ -92,6 +166,26 @@ function App() {
           </div>
         </form>
       </div>
+      <div className="refresh-button">
+        <button type="button" onClick={fetchComments} disabled={loading}>
+          {loading ? '↻...' : '↻'}
+        </button>
+      </div>
+      <div className="comments-container">
+        {loading && <p>更新中...</p>}
+        {!loading && error && <p className="error">{error}</p>}
+        {!loading && comments.length === 0 && <p>暂无评论</p>}
+        <ul>
+          {comments.map((comment) => (
+              <li key={comment.id}>
+                <p>
+                  <strong>{comment.name}</strong>
+                </p>
+                <p>{comment.content}</p>
+              </li>
+            ))}
+        </ul>
+      </div>
     </>
   )
 }