bootstrap+spring boot实现折叠展开功能(collapse组件)

程序员文章站 2022-05-07 18:46:49

...

本文使用bootstrap及spring boot，来实现内容的折叠和展开(这里模拟生成评论的内容)。
本方法不适合数据量过大的情况，数据量过大时应采用分页检索的办法。

使用到的技术：

Spring Boot
Thymelead(前台模板引擎、可用JSP替代)
Bootstrap 4.4.1
JQuery 3.4.1
Maven,Java SE1.8,Apache Tomcat等

实现效果：
bootstrap+spring boot实现折叠展开功能(collapse组件)
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
bootstrap+spring boot实现折叠展开功能(collapse组件)

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/aaa@qq.com/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;
	}
}

上一篇：分布式事务02-Jta+Atomikos解决分布式事务

下一篇： rocketmq4.0集群部署