手把手教你整合springboot框架（四）页面开发

最新推荐文章于 2025-05-15 21:30:21 发布

wh456413

最新推荐文章于 2025-05-15 21:30:21 发布

阅读量520

点赞数

本文链接：https://blog.csdn.net/wh456413/article/details/106714148

版权

springboot 专栏收录该内容

10 篇文章

订阅专栏

前文：
手把手教你开发springboot项目（一）创建工程：https://blog.csdn.net/wh456413/article/details/106673510
手把手教你开发springboot项目（二）配置开发环境：
https://blog.csdn.net/wh456413/article/details/106683487
手把手教你开发springboot项目（三）接口测试:
https://blog.csdn.net/wh456413/article/details/106713683
接下来开始页面开发，springboot提供页面拼接功能，只需要在一个html页面导入css和js包，让跳转的页面进行凭借即可，这里不好解释，直接看接下来操作效果，就明白了

1.引入thymeleaf

在pom.xml文件中导入thymeleaf的jar包

 <!--thymeleaf 这样配置后，再代码中跳转页面就不用写过多的前缀和后缀了，达到简化效果-->
       <dependency>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-thymeleaf</artifactId>
       </dependency>

2.建立开发文件夹

在这里插入图片描述
static用来存放js和css等静态资源文件
templates/fragments：放置公共模版，header、footer等；
templates/test：放置功能页面；

3.配置thymeleaf

在application.properties文件中，加入对应配置

#for thymeleaf
#实现页面热部署，生产环境为true
spring.thymeleaf.cache=false
spring.thymeleaf.enabled=true
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.mode=HTML5
#设置模版文件前缀后缀，跳转页面时拼接
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

4.创建公用模板

（1）公用模块，header、footer等
在templates/fragments文件夹下新建html页面
在这里插入图片描述
我这里用于测试，都是随便加的内容
footer.html

<section th:fragment="footer">
   <hr/>
   This is footer 
</section>

header.html

<section th:fragment="header">
    This is header 
    <hr/>
</section>

（2）导入js和css文件的公用页面，页面跳转时，都跳转至本页面，在templates文件夹下新建html文件，加入如下代码：
在这里插入图片描述

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"  
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">  
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<TITLE>Springb</TITLE>
		<META name="description" content="THORNBIRD.COM"/>
		
		<!-- 引入外部js或css ps:从static目录下开始写,这里引入了sbDemo -->
	    <script th:src="@{http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js}"></script>  
	    <script th:src="@{http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js}"></script>
	    <script th:src="${'/js/sbDemo.js'}" type="text/javascript"></script>
		<link th:href="@{http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css}" rel="stylesheet" >
		<link th:href="${'/css/sbDemo.css'}" rel="stylesheet" />
	</head>
	
	<body>
		<div id="wrapper">
			<!--header :指向header.html里的id-->
			<div th:replace="fragments/header :: header"></div><!-- 拼接fragments/header.html -->
			
			<!-- body -->
			<div class='mainBody' style="margin-top: 20px;">
				<div th:if="${template}"><!-- 判断存在该model，就获取 -->
					<div th:replace="${template}"></div><!-- 这里将template的路径里的页面拼接过来 -->
			    </div>
			</div>
			
			<!--footer-->
			<div th:replace="fragments/footer :: footer"></div><!-- 拼接fragments/footer.html -->
		</div>
	</body>
</html>

5.建立单独功能页面

在这里插入图片描述
center.html

<section >
   This is center<br>
   <p th:text="${user.uWnum}">uWnum</p>
</section>

6.控制器设置页面跳转

/**
	 * 页面跳转
	 * 跳转至html页面
	 */
	@RequestMapping("/hello")
	public String hello(ModelMap m){
		User u=userImpl.getUserBywNum("16110201");
		m.addAttribute("user", u);//传递参数用于center页面获取
		m.addAttribute("template","test/center" );//index页面获取拼接的页面路径
		return "index";
	}