当前位置:   article > 正文

SpringBoot+thymeleaf配置_spring: thymeleaf: prefix: classpath:/templates/ #

spring: thymeleaf: prefix: classpath:/templates/ # 设置模板文件所在的目录,默

由于近排项目的需要,就用SpringBoot进行开发。于是就涉及到thymeleaf的使用。这里就不作详细介绍,thymeleaf的介绍可参考这里:thymeleaf介绍

1.准备

创建一个SpringBoot项目,以下为目录结构:
在这里插入图片描述

2.配置

创建成功后在pom.xml中如下引入依赖:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
  • 1
  • 2
  • 3
  • 4

之后在springboot的配置文件(我这里命名为application.properites)中添加如下配置信息:

# templates文件夹的路径
spring.thymeleaf.prefix=classpath:/templates/
# templates中的所有文件后缀名,如/templates/main.html
spring.thymeleaf.suffix=.html
  • 1
  • 2
  • 3
  • 4

在templates文件夹中创建一个测试页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Hello world
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Controller页面:

@Controller
public class TestController {

    @RequestMapping(value = {"/indexPage"})
    public String indexData(){
        return "main";
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

3.测试

在浏览器输入http://localhost:8080/indexPage,结果如下:
在这里插入图片描述
thymeleaf的用处不止如此,例如导入外部JS或CSS文件(注意的是这种js和css文件或文件夹必须在文件夹static中),可以这样导入:

<!-- JS导入 -->
<script th:src="@{/js/vue.js}"></script>
<!-- CSS导入 -->
<link th:href="@{/css/element-index.css}" rel="stylesheet" />
  • 1
  • 2
  • 3
  • 4

4.结尾

thymeleaf的用处不仅仅如此,还有很多方面暂时没有。以后会更加深入的研究。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/157179
推荐阅读
相关标签
  

闽ICP备14008679号