SpringBoot集成thymeleaf与通用js、css的引入

SpringBoot集成thymeleaf

1.首先在pom文件中加入以下依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2.在appliaction.properties中添加一下配置

spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.mode=LEGACYHTML5
#开发时关闭缓存,不然没法看到实时页面
spring.thymeleaf.cache=false

3.在resources下创建templates文件夹,在该文件夹下创建html文件即可。

thymeleaf页面模板

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>thymeleaf template</title>
</head>
<body>
    <h1>Thymeleaf模板文件</h1>
</body>
</html>

公共js、css的引入

1.首先写一个head.html,内容如下,其中要加入的js,css可以根据自己的需求添加

<head th:fragment="commonHead(title)">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title th:text="${title}">Title</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

<!-- jquery ui组件引用  提示框-->
<link rel="stylesheet" type="text/css" th:href="@{/common/jquery-ui-1.11.4/jquery-ui.min.css}" />

<!-- jquery组件引用 -->
<script th:src="@{/common/jquery/jquery-1.12.4.min.js}"></script>

<script type="text/javascript">
	// 项目路径
	/* var ctx = "${pageContext.request.contextPath}"; */
	var ctx = "/projectName";
</script>


</head>

其中引入的静态资源在resources/static/common/jquery目录下,head.html在resources/templates目录下

2.在其他页面中使用上面所创建的head.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="head :: commonHead('验证公共静态资源的引入')"></head>
<body>
    <h1>Thymeleaf模板文件</h1>
</body>
</html>

其中<head th:replace="head :: commonHead('验证js')"></head>中的head对应head.html的名字,commonHead对应head.html中的th:fragment="commonHead(title)"

猜你喜欢

转载自blog.csdn.net/qq_27493017/article/details/85233351