diff --git a/front/src/PostDetailPage.js b/front/src/PostDetailPage.js
index 85b7707..fceaef8 100644
--- a/front/src/PostDetailPage.js
+++ b/front/src/PostDetailPage.js
@@ -1,40 +1,70 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
-
-// 示例数据
-const post = {
-    post_id: "1",
-    title: "欢迎来到G10论坛",
-    content: "这里是G10 PT站的官方论坛,欢迎大家发帖交流!",
-    author_id: "u1",
-    author_name: "Alice",
-    created_at: "2024-06-01 12:00",
-    reply_count: 3,
-    view_count: 120,
-};
-
-const replies = [
-    {
-        reply_id: "r1",
-        post_id: "1",
-        content: "支持一下！",
-        author_id: "u2",
-        author_name: "Bob",
-        created_at: "2024-06-01 13:00",
-    },
-    {
-        reply_id: "r2",
-        post_id: "1",
-        content: "论坛终于上线了！",
-        author_id: "u3",
-        author_name: "Carol",
-        created_at: "2024-06-01 14:20",
-    },
-];
+import { API_BASE_URL } from "./config";
 
 export default function PostDetailPage() {
     const { postId } = useParams();
-    // 这里只展示post和replies的静态内容
+    const [post, setPost] = useState(null);
+    const [replies, setReplies] = useState([]);
+    const [newReply, setNewReply] = useState('');
+
+    // function to load post details and its replies
+    const fetchDetail = () => {
+        fetch(`${API_BASE_URL}/api/forum-detail?postid=${postId}`)
+            .then(res => res.json())
+            .then(data => {
+                console.log("Fetched post detail:", data);
+                const p = data.post || data;
+                const formattedPost = {
+                    post_id: p.postid,
+                    title: p.posttitle,
+                    content: p.postcontent,
+                    author_id: p.postuserid,
+                    author_name: p.author?.username || '',
+                    created_at: new Date(p.posttime).toLocaleString(),
+                    reply_count: p.replytime,
+                    view_count: p.readtime,
+                };
+                const formattedReplies = (data.replies || []).map(r => ({
+                    reply_id: r.replyid,
+                    post_id: r.postid || postId,
+                    content: r.content,
+                    author_id: r.authorid,
+                    author_name: r.author?.username || '',
+                    created_at: new Date(r.createdAt).toLocaleString(),
+                }));
+                setPost(formattedPost);
+                setReplies(formattedReplies);
+            })
+            .catch(err => console.error(err));
+    };
+
+    useEffect(() => {
+        fetchDetail();
+    }, [postId]);
+
+    // post a new reply to backend
+    const handleReply = () => {
+        const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
+        const userId = match ? match[2] : null;
+        if (!userId) {
+            alert('请先登录后再回复');
+            return;
+        }
+        fetch(`${API_BASE_URL}/api/forum-reply`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ postid: postId, replycontent: newReply, replyuserid: userId }),
+        })
+            .then(res => res.json())
+            .then(() => {
+                setNewReply('');
+                fetchDetail();
+            })
+            .catch(err => console.error(err));
+    };
+
+    if (!post) return <div>加载中...</div>;
     return (
         <div style={{ maxWidth: 700, margin: "40px auto" }}>
             {/* 原帖 */}
@@ -91,6 +121,8 @@
                 <input
                     type="text"
                     placeholder="写下你的回复..."
+                    value={newReply}
+                    onChange={e => setNewReply(e.target.value)}
                     style={{
                         flex: 1,
                         border: "1px solid #bfcfff",
@@ -99,7 +131,7 @@
                         fontSize: 15,
                     }}
                 />
-                <button style={{
+                <button onClick={handleReply} style={{
                     background: "#1976d2",
                     color: "#fff",
                     border: "none",