本文使用bootstrap及spring boot，來實作内容的折疊和展開(這裡模拟生成評論的内容)。
本方法不适合資料量過大的情況，資料量過大時應采用分頁檢索的辦法。
使用到的技術：
- Spring Boot
- Thymelead(前台模闆引擎、可用JSP替代)
- Bootstrap 4.4.1
- JQuery 3.4.1
- Maven,Java SE1.8,Apache Tomcat等
實作效果：
Spring Boot項目生成位址：
https://start.spring.io/
項目結構如下(紅框内為關聯檔案)：
第一個(Comment.java)為傳回試圖的Bean
第二個(ExampleController.java)為Controller接口
第三個(ExampleControllerImpl.java)為Controller實作類
第四個(sample.jpg)為圖檔檔案，畫面評論左側顯示的react的logo
第五個(style.css)為樣式檔案，控制展開評論和收起評論的切換
第六個(blog.html)為html檔案，畫面layout
Pom檔案如下：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.6.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>demo</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>11</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
HTML檔案如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" href="/static/css/style.css">
<!-- 引入 jquery css&js -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<!-- 引入 bootstrap css&js -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="main-wrapper">
<section class="blog-list">
<div class="container">
<div class="row">
<div class="col-12 col-md-8 mx-auto">
<!-- 模拟評論部分,周遊背景傳回的名為"comment"的list -->
<div class="item mt-5 mb-5" th:each=" cmt,cmtItr : ${comment}">
<!-- 當list大于3的時候 -->
<div class="media" th:if="${cmtItr.index < 3}">
<img class="mr-3 d-md-flex" src="/static/assets/images/sample.jpg" style="max-height:90px" alt="image">
<div class="media-body">
<h3 class="title mb-1"><a href="#" th:text="${cmt.commentTitle}">評論标題</a></h3>
<div class="meta mb-1"><span class="text-muted" th:text="${cmtItr.index}">評論序号</span></div>
<div class="intro" th:text="${cmt.commentBody}">評論内容</div>
</div><!--//media-body-->
</div><!--//media-->
<!-- 當list大于3的時候，加上collapse類 -->
<div class="media collapse" id="collapseExample" th:unless="${cmtItr.index < 3}">
<img class="mr-3 d-md-flex" src="/static/assets/images/sample.jpg" style="max-height:90px" alt="image">
<div class="media-body">
<h3 class="title mb-1"><a href="#" th:text="${cmt.commentTitle}">評論标題</a></h3>
<div class="meta mb-1"><span class="text-muted" th:text="${cmtItr.index}">評論序号</span></div>
<div class="intro" th:text="${cmt.commentBody}">評論内容</div>
</div><!--//media-body-->
</div><!--//media-->
</div><!--//item-->
<!-- 當list大于3的時候，生成展開，收起按鈕 -->
<div th:if="${#lists.size(comment) > 3}">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<span class="collapsed">展開評論</span>
<span class="expanded">收起評論</span>
</button>
</div>
</div>
</div>
</div>
</section>
</div><!--//main-wrapper-->
</body>
</html>
style.css如下：
[aria-expanded="false"] > .expanded,
[aria-expanded="true"] > .collapsed {
display: none;
}
ExampleController如下：
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
public interface ExampleController {
@GetMapping(value="/blog")
ModelAndView blog();
}
ExampleControllerImpl如下：
package com.example.demo.controllerImpl;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.ModelAndView;
import com.example.demo.bean.Comment;
import com.example.demo.controller.ExampleController;
@Component
public class ExampleControllerImpl implements ExampleController{
@Override
public ModelAndView blog() {
// TODO Auto-generated method stub
ModelAndView modelAndView = new ModelAndView();
// 設定視圖名稱，字尾.html已經在yml檔案設定了
modelAndView.setViewName("blog");
// 初始化傳回畫面的List
List<Comment> listComment = new ArrayList<Comment>();
// 模拟生成6條評論
for( int i=1; i<=6; i++ ) {
Comment cmt = new Comment();
cmt.setCommentTitle("Comment Title" + String.valueOf(i) );
cmt.setCommentBody("Comment Body" + String.valueOf(i) );
cmt.setUserName("Username" + String.valueOf(i) );
listComment.add(cmt);
}
modelAndView.addObject("comment",listComment);
return modelAndView;
}
}