本文使用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;
}
}