SpringBoot（二）：集成thymeleaf与通用js、css的引入以及默认页面

最新推荐文章于 2024-05-16 17:28:54 发布

qq_27493017

最新推荐文章于 2024-05-16 17:28:54 发布

阅读量6.6k

点赞数 2

本文链接：https://blog.csdn.net/qq_27493017/article/details/85233351

版权

SpringBoot集成thymeleaf

1.首先pom文件中已经有spring-boot-starter-parent与spring-boot-starter-web配置。

2.在pom文件中加入以下依赖

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

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

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

4.在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>

公共页面元素的抽取

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)"

默认页面

在没有设置默认页面，在地址栏输入http://ip:端口号（eg:localhost:8080,springboot项目默认访问路径为"/"，访问时直接使用http://ip:端口号,但是可以指定访问路径，如果指定了访问路径，访问时要带上访问路径：http://ip:端口号/访问路径，eg:localhost:8080/demo）时访问页面出错，下面设置默认页面

方法一：在controller中写一个类，如下：

import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class IndexController {
    @RequestMapping("/")
    public String index(Model model, HttpServletResponse response) {
        model.addAttribute("name", "simonsfan");
        return "index";
    }
}

方法二：新建一个DefaultViewController类，如下：

import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class DefaultViewController extends WebMvcConfigurerAdapter {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("index");
        registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
        super.addViewControllers(registry);
    }
}

模板页面实时生效

1、禁用模板引擎的缓存：spring.thymeleaf.cache=false

2、页面修改后ctrl+F9

qq_27493017

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
SpringBoot（二）：集成thymeleaf与通用js、css的引入以及默认页面

SpringBoot集成thymeleaf1.首先pom文件中已经有spring-boot-starter-parent与spring-boot-starter-web配置。2.在pom文件中加入以下依赖<dependency> <groupId>org.springframework.boot</groupId> <arti...
复制链接

扫一扫