update

BackEnd/db/init.go

@@ -2,7 +2,7 @@ package db
 
 import (
 	"database/sql"
-	//"fmt"
+	"fmt"
 	//"log"
 	//"os"
 
@@ -11,16 +11,18 @@ import (
 
 var db *sql.DB
 
-func InitDB() {
+func InitDB() error {
 	var err error
 	connStr := "longyue:longyue0511@tcp(127.0.0.1:3306)/Comments"
 	db, err = sql.Open("mysql", connStr)
 	if err != nil {
-		panic(err)
+		return fmt.Errorf("failed to open database connection: %v", err)
 	}
 
 	err = db.Ping()
 	if err != nil {
-		panic(err)
+		return fmt.Errorf("failed to ping database: %v", err)
 	}
+
+	return nil
 }

BackEnd/db/models.go

@@ -13,10 +13,11 @@ type Comment struct {
 	Content string `json:"content"`
 }
 
-func GetComment(offset, size int) ([]Comment, error) {
+func GetComment(page, size int) ([]Comment, int, error) {
+	offset := (page - 1) * size
 	rows, err := db.Query("SELECT id,name,content FROM comments LIMIT ? OFFSET ?", size, offset)
 	if err != nil {
-		return nil, err
+		return nil, 0, err
 	}
 	defer rows.Close()
 
@@ -24,23 +25,33 @@ func GetComment(offset, size int) ([]Comment, error) {
 	for rows.Next() {
 		var comment Comment
 		if err := rows.Scan(&comment.ID, &comment.Name, &comment.Content); err != nil {
-			return nil, err
+			return nil, 0, err
 		}
 		comments = append(comments, comment)
 	}
+
 	if err := rows.Err(); err != nil {
-		return nil, err
+		return nil, 0, err
+	}
+
+	total, err := GetTotalComments()
+	if err != nil {
+		return nil, 0, err
 	}
-	return comments, nil
+
+	return comments, total, nil
 }
 
 func AddComment(name string, content string) (int, error) {
-	var id int
-	err := db.QueryRow("INSERT INTO comments (name,content) VALUES(?,?) RETURNING id", name, content).Scan(&id)
+	result, err := db.Exec("INSERT INTO comments (name,content) VALUES (?,?)", name, content)
+	if err != nil {
+		return 0, err
+	}
+	id, err := result.LastInsertId()
 	if err != nil {
 		return 0, err
 	}
-	return id, nil
+	return int(id), nil
 }
 
 func DeleteComment(commentID int) error {
@@ -54,5 +65,5 @@ func GetTotalComments() (int, error) {
 	if err != nil {
 		return 0, err
 	}
-	return total, err
+	return total, nil
 }

BackEnd/main.go

@@ -9,7 +9,9 @@ import (
 )
 
 func main() {
-	db.InitDB()
+	if err := db.InitDB(); err != nil {
+		log.Fatalf("Failed to initialize database: %v", err)
+	}
 
 	mux := http.NewServeMux()
 
@@ -17,10 +19,15 @@ func main() {
 	mux.HandleFunc("/comment/add", server.AddComment)
 	mux.HandleFunc("/comment/delete", server.DeleteComment)
 
-	handler := cors.Default().Handler(mux)
+	corsHandler := cors.New(cors.Options{
+		AllowedOrigins:   []string{"*"},
+		AllowedMethods:   []string{"GET", "POST", "DELETE", "OPTIONS"},
+		AllowedHeaders:   []string{"Content-Type"},
+		AllowCredentials: true,
+	}).Handler(mux)
 
 	log.Println("Starting server on :8080")
-	if err := http.ListenAndServe(":8080", handler); err != nil {
+	if err := http.ListenAndServe(":8080", corsHandler); err != nil {
 		log.Fatalf("Server failed to start: %v", err)
 	}
 }

BackEnd/server/server.go

@@ -50,35 +50,20 @@ func GetComment(w http.ResponseWriter, r *http.Request) {
 		size = 10
 	}
 
-	dbComments, err := db.GetComment(page, size)
+	dbComments, total, err := db.GetComment(page, size)
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return
 	}
 
-	start := (page - 1) * size
-	end := start + size
-	if start > len(dbComments) {
-		start = len(dbComments)
+	response := GetCommentResponse{
+		Code: 0,
+		Msg:  "success",
+		Data: GetData{
+			Total:    total,
+			Comments: dbComments,
+		},
 	}
-	if end > len(dbComments) {
-		end = len(dbComments)
-	}
-	pagedComments := dbComments[start:end]
-
-	comments := make([]db.Comment, len(pagedComments))
-	for i, c := range pagedComments {
-		comments[i] = db.Comment{
-			ID:      c.ID,
-			Name:    c.Name,
-			Content: c.Content,
-		}
-	}
-	var response GetCommentResponse
-	response.Code = 0
-	response.Msg = "success"
-	response.Data.Total = len(dbComments)
-	response.Data.Comments = comments
 
 	w.Header().Set("Content-Type", "application/json;charset=utf-8")
 	json.NewEncoder(w).Encode(response)

script.js

@@ -3,13 +3,11 @@ const commentSection = document.querySelector("#commentSection");
 const submitButton = document.querySelector("#submitButton");
 const userNameInput = document.querySelector("#userName");
 const commentContentInput = document.querySelector("#commentContent");
-const deleteButton = document.querySelectorAll(".deleteButton");
 const previousPageButton=document.querySelector("#previousPage")
 const nextPageButton=document.querySelector("#nextPage")
 
 let currentPage=1;
 const pageSize=10;
-let commentNumber = 0;
 
 function resetInput() {
     userNameInput.value = "";
@@ -19,7 +17,6 @@ function resetInput() {
 function deleteComment(event){
   const comment = event.target.parentElement;
   const commentId=comment.getAttribute("data-id");
-    html.removeChild(comment);
     fetch(`http://localhost:8080/comment/delete?id=${commentId}`,{
         method:'DELETE',
         headers:{
@@ -30,19 +27,19 @@ function deleteComment(event){
         .then(data=>{
           if (data.code===0){
             console.log("Comment deleted successfully");
+            getComment(currentPage,pageSize);
           }else{
             console.error("Failed to delete comment",data.msg);
           }
-        }
-)
+        })
         .catch(error=>{
           console.error("Error:",error);
-        });}
+        });
+}
 
 function addComment() {
     const userName = userNameInput.value;
     const commentContent = commentContentInput.value;
-    commentNumber = commentNumber + 1;
 
     fetch('http://localhost:8080/comment/add',{
       method:'POST',
@@ -78,8 +75,8 @@ function getComment(page,size){
     .then(data=>{
       if (data.code===0){
         console.log("Comments fetched successfully");
-        renderComments(data.data);
-        updatePaginationButtons(data.total);
+        renderComments(data.data.comments);
+        updatePaginationButtons(data.data.total);
       }else{
         console.error("Error fetching comments:",data.msg);
       }
@@ -93,41 +90,28 @@ function renderComments(comments){
   comments.forEach(comment =>{
     const commentDiv=document.createElement("div");
     commentDiv.className="comment_box";
+    commentDiv.setAttribute("data-id",comment.id);
     const commentatorName=document.createElement("h3");
     commentatorName.textContent=comment.name;
     const commentatorContent=document.createElement("p");
     commentatorContent.textContent=comment.content;
     const deleteButton=document.createElement("button");
     deleteButton.textContent="删除";
+    deleteButton.className="delete_button";
+    const shiftRow=document.createElement("br");
     deleteButton.addEventListener("click",deleteComment);
 
     commentDiv.appendChild(commentatorName);
     commentDiv.appendChild(commentatorContent);
     commentDiv.appendChild(deleteButton);
     commentSection.appendChild(commentDiv);
+    commentSection.appendChild(shiftRow);
   });}
   else {
     console.error("Comments data is not an array");
   }
 }
 
-function deleteComment(commentID){
-  fetch('http://localhost:8080/comment/delete?id=${commentID}',{
-    method:'DELETE'
-  })
-  .then(response=>response.json())
-  .then(data=>{
-    if(data.code===0){
-      console.log("Comment deleted successfully");
-      getComment(currentPage,pageSize);
-    }else{
-      console.error("Error deleting comment:",data.msg);
-    }
-  })
-  .catch(error=>console.error("Error:".error));
-}
-
-
 function updatePaginationButtons(totalComments){
   const totalPages=Math.ceil(totalComments/pageSize);
   previousPageButton.disabled=currentPage<=1;