fix perf article

src/main/java/com/darkfantasy/api/ArticleAPIController.java

@@ -0,0 +1,40 @@
+package com.darkfantasy.api;
+
+import java.util.HashMap;
+import java.util.Map;
+
+import org.springframework.data.domain.PageRequest;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.domain.Slice;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.bind.annotation.RestController;
+
+import com.darkfantasy.dto.article.ArticleCardResponse;
+import com.darkfantasy.service.ArticleService;
+
+import lombok.RequiredArgsConstructor;
+
+@RequestMapping("/api/article")
+@RequiredArgsConstructor
+@RestController
+public class ArticleAPIController {
+    private final ArticleService articleService;
+
+    @GetMapping("/more")
+    @ResponseBody
+    public Map<String, Object> loadMoreNews(
+            @RequestParam(defaultValue = "1") int page,
+            @RequestParam(defaultValue = "6") int size) {
+
+        Pageable pageable = PageRequest.of(page, size);
+        Slice<ArticleCardResponse> slice = articleService.getArticlesDeletedFalse(pageable);
+        Map<String, Object> response = new HashMap<>();
+        response.put("articles", slice.getContent());
+        response.put("hasMore", slice.hasNext());
+
+        return response;
+    }
+}

src/main/java/com/darkfantasy/dto/article/ArticleListResponse.java

@@ -0,0 +1,35 @@
+package com.darkfantasy.dto.article;
+
+import com.darkfantasy.repository.projection.article.ArticleList;
+import com.darkfantasy.util.TimeUtil;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+@Builder
+public class ArticleListResponse {
+    private Long id;
+    private String thumbnailUrl;
+    private String title;
+    private String authorUsername;
+    private String type;
+    private String createdAt;
+    private boolean deleted;
+
+    public static ArticleListResponse fromProjection(ArticleList article) {
+        return ArticleListResponse.builder()
+                .id(article.getId())
+                .thumbnailUrl(article.getThumbnailUrl())
+                .title(article.getTitle())
+                .authorUsername(article.getAuthorUsername())
+                .type(article.getType())
+                .createdAt(TimeUtil.formatInstant(article.getCreatedAt()))
+                .deleted(article.isDeleted())
+                .build();
+    }
+}

src/main/java/com/darkfantasy/repository/ArticleRepository.java

@@ -14,6 +14,7 @@ import org.springframework.stereotype.Repository;
 import com.darkfantasy.entity.Article;
 import com.darkfantasy.entity.enums.ArticleType;
 import com.darkfantasy.repository.projection.article.ArticleDetail;
+import com.darkfantasy.repository.projection.article.ArticleList;
 import com.darkfantasy.repository.projection.article.ArticleCardBar;
 import com.darkfantasy.repository.projection.article.ArticleCard;
 
@@ -46,4 +47,6 @@ public interface ArticleRepository extends JpaRepository<Article, Long> {
         Page<ArticleCard> findPublicArticleList(Pageable pageable);
 
         List<ArticleCardBar> findByIdNotAndDeletedFalseOrderByCreatedAtDesc(Long id, Pageable pageable);
+
+        Page<ArticleList> findAllProjectedBy(Pageable pageable);
 }

src/main/java/com/darkfantasy/repository/projection/article/ArticleList.java

@@ -0,0 +1,16 @@
+package com.darkfantasy.repository.projection.article;
+
+import java.time.Instant;
+
+import org.springframework.beans.factory.annotation.Value;
+
+public interface ArticleList {
+    Long getId();
+    String getThumbnailUrl();
+    String getTitle();
+    @Value("#{target.createdBy.username}")
+    String getAuthorUsername();
+    String getType();
+    Instant getCreatedAt();
+    boolean isDeleted();
+}

src/main/java/com/darkfantasy/service/ArticleService.java

@@ -9,6 +9,7 @@ import org.springframework.data.domain.Slice;
 import com.darkfantasy.dto.article.ArticleCardBarResponse;
 import com.darkfantasy.dto.article.ArticleCardResponse;
 import com.darkfantasy.dto.article.ArticleDetailResponse;
+import com.darkfantasy.dto.article.ArticleListResponse;
 import com.darkfantasy.dto.article.ArticleResponse;
 import com.darkfantasy.dto.article.CreateArticleRequest;
 import com.darkfantasy.dto.article.UpdateArticleRequest;
@@ -26,7 +27,7 @@ public interface ArticleService {
 
     void restoreArticle(Long articleId);
 
-    Page<ArticleResponse> getArticles(Pageable pageable);
+    Page<ArticleListResponse> getArticles(Pageable pageable);
 
     Slice<ArticleCardResponse> getArticlesDeletedFalse(Pageable pageable);
 

src/main/java/com/darkfantasy/service/impl/ArticleServiceImpl.java

@@ -12,6 +12,7 @@ import org.springframework.transaction.annotation.Transactional;
 import com.darkfantasy.dto.article.ArticleCardBarResponse;
 import com.darkfantasy.dto.article.ArticleCardResponse;
 import com.darkfantasy.dto.article.ArticleDetailResponse;
+import com.darkfantasy.dto.article.ArticleListResponse;
 import com.darkfantasy.dto.article.ArticleResponse;
 import com.darkfantasy.dto.article.CreateArticleRequest;
 import com.darkfantasy.dto.article.UpdateArticleRequest;
@@ -134,11 +135,11 @@ public class ArticleServiceImpl implements ArticleService {
     }
 
     @Override
-    public Page<ArticleResponse> getArticles(Pageable pageable) {
+    public Page<ArticleListResponse> getArticles(Pageable pageable) {
         if (pageable == null) {
             throw new IllegalArgumentException("Pageable không được null");
         }
-        return articleRepository.findAll(pageable).map(ArticleResponse::fromEntity);
+        return articleRepository.findAllProjectedBy(pageable).map(ArticleListResponse::fromProjection);
     }
 
     @Transactional

src/main/resources/application.properties

@@ -18,9 +18,9 @@ spring.thymeleaf.mode=HTML
 # spring.security.oauth2.client.registration.google.scope=email,profile
 
 # DEVTOOLS & DEVELOPMENT MODE (Dành cho Production)
-spring.devtools.restart.enabled=false
-spring.devtools.livereload.enabled=false
-spring.devtools.add-properties=false
+spring.devtools.restart.enabled=${DEV_TOOL:false}
+spring.devtools.livereload.enabled=${DEV_TOOL:false}
+spring.devtools.add-properties=${DEV_TOOL:false}
 # JSP:
 
 spring.mvc.view.cache=true
@@ -49,10 +49,10 @@ spring.jpa.hibernate.ddl-auto=update
 
 # Bật tính năng in câu lệnh SQL ra console
 #Nên bật khi code, khi deploy thì tắt
-spring.jpa.show-sql=false
+spring.jpa.show-sql=${SHOW_SQL:false}
 
 # Format SQL cho dễ đọc (xuống dòng, thụt lề), nếu không nó sẽ in thành 1 hàng ngang rất rối
-spring.jpa.properties.hibernate.format_sql=false
+spring.jpa.properties.hibernate.format_sql=true
 
 # Làm nổi bật các từ khóa SQL (SELECT, FROM, JOIN) bằng màu sắc
 spring.jpa.properties.hibernate.highlight_sql=false

src/main/resources/static/js/loadmore.js

@@ -0,0 +1,61 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const loadMoreBtn = document.getElementById("load-more-btn");
+  const newsGrid = document.querySelector(".grid-3");
+
+  if (loadMoreBtn) {
+    loadMoreBtn.addEventListener("click", async function () {
+      // Lấy thông số trang hiện tại
+      let currentPage = parseInt(loadMoreBtn.getAttribute("data-page"));
+      let size = parseInt(loadMoreBtn.getAttribute("data-size"));
+
+      // Đổi text thành Đang tải để tăng UX
+      const originalText = loadMoreBtn.innerText;
+      loadMoreBtn.innerText = "Đang tải...";
+      loadMoreBtn.disabled = true;
+
+      try {
+        // Gọi API backend
+        const response = await fetch(
+          `/api/article/more?page=${currentPage}&size=${size}`,
+        );
+        if (!response.ok) throw new Error("Network response was not ok");
+
+        const data = await response.json();
+
+        const template = document.getElementById("news-card-template");
+
+        data.articles.forEach((article) => {
+          // 1. Nhân bản (clone) cái khung HTML trống
+          const clone = template.content.cloneNode(true);
+
+          // 2. Trỏ tới từng element và nhét dữ liệu (textContent tự động chống lỗi XSS)
+          const img = clone.querySelector(".card-img");
+          img.src = article.thumbnailUrl;
+          img.alt = article.title;
+
+          clone.querySelector(".card-tag").textContent = article.type;
+          clone.querySelector(".card-title").textContent = article.title;
+          clone.querySelector(".card-date").textContent = article.createdAt;
+          clone.querySelector(".card-link").href = `/news/${article.id}`;
+
+          // 3. Nhét cục DOM đã hoàn thiện vào danh sách
+          newsGrid.appendChild(clone);
+        });
+        // Xử lý trạng thái nút bấm
+        if (data.hasMore) {
+          // Tăng số trang lên 1 cho lần bấm tiếp theo
+          loadMoreBtn.setAttribute("data-page", currentPage + 1);
+          loadMoreBtn.innerText = originalText;
+          loadMoreBtn.disabled = false;
+        } else {
+          // Ẩn nút đi nếu đã hết dữ liệu
+          loadMoreBtn.style.display = "none";
+        }
+      } catch (error) {
+        console.error("Lỗi khi tải thêm bài viết:", error);
+        loadMoreBtn.innerText = "Lỗi kết nối. Thử lại!";
+        loadMoreBtn.disabled = false;
+      }
+    });
+  }
+});

src/main/webapp/WEB-INF/views/layout/footer.jsp

@@ -182,6 +182,7 @@
         });
     </script> -->
     <script src="${pageContext.request.contextPath}/js/index2.js"></script>
+    <script src="${pageContext.request.contextPath}/js/loadmore.js"></script>
     </body>
 
     </html>

src/main/webapp/WEB-INF/views/news/news.jsp

@@ -36,7 +36,7 @@
                 class="news-featured-img"
                 src="${featuredArticle.thumbnailUrl}"
                 alt="${featuredArticle.title}"
-                loading="lazy" />
+            />
 
             <div
                 style="
@@ -66,16 +66,6 @@
                     ${featuredArticle.title}
                 </h2>
 
-                <p
-                    class="font-crimson"
-                    style="
-                        color: var(--mid-grey);
-                        font-size: 1rem;
-                        line-height: 1.7;
-                        margin-bottom: 1.5rem;
-                    ">
-                </p>
-
                 <div style="display: flex; gap: 1rem">
 
                     <a href="/news/${featuredArticle.id}"
@@ -183,15 +173,29 @@
     </div>
         <c:if test="${hasMore}">
             <div class="text-center mt-4">
-                <a href="?limit=${nextLimit}#news-list"
-                    class="btn btn-secondary">
-                        Hiện thêm
-                </a>
+                <button id="load-more-btn"
+                        class="btn btn-secondary"
+                        data-page="1"
+                        data-size="6">
+                    Hiện thêm
+                </button>
             </div>
         </c:if>
     </div>
 </section>
-
+<template id="news-card-template">
+    <div class="card">
+        <img class="card-img" src="" alt="" loading="lazy">
+        <div class="card-body">
+            <span class="card-tag"></span>
+            <h3 class="card-title"></h3>
+        </div>
+        <div class="card-footer">
+            <span class="font-Cormorant Garamond text-grey card-date"></span>
+            <a href="" class="text-crimson font-Lora card-link">Đọc thêm →</a>
+        </div>
+    </div>
+</template>
 <!-- NEWSLETTER
 <section
   style="