引入依赖

需要引入Spring Boot的Thymeleaf启动器依赖。

  1. <dependency>
  2.     <groupId>org.springframework.boot</groupId>
  3.     <artifactId>spring-boot-starter-thymeleaf</artifactId>
  4. </dependency>
  5. <dependency>
  6.    <groupId>nekohtml</groupId>
  7.    <artifactId>nekohtml</artifactId>
  8. </dependency>

说明：使用springboot的thymeleaf模板时默认会对HTML进行严格的检查,导致当你的标签没有闭合时就会通不过。nekohtml这个依赖可以解决这一问题。引入该依赖后一般会自动引入web依赖，不需要再单独引入web依赖。

简单配置

spring.thymeleaf.cache=false

spring.thymeleaf.mode = LEGACYHTML5

说明：第一行配置是清除缓存，实现热部署。也就是修改了html后不用重启，刷新页面就能看到效果。不过这儿特别强调一下，修改完html后一定要ctrl+f9重新build一下。再回到浏览器刷新，就能看到效果了。第二行配置是回避HTML进行严格的检查的配置，当然你需要提前引入nekohtml依赖。

使用模板

1、模板文件头部使用 <html xmlns:th="http://www.thymeleaf.org">定义。

2、html标签上使用 th:开头标识作为前缀。

3、通过 @{}引入web静态文件。

<link rel="stylesheet" th:href="@{/css/jquery.min.css}"/>

访问springmvc中的model数据： ${user.name}，访问更多不同对象的数据请点击参考官方定义。

Springboot的static和templates

SpringBoot里面没有我们之前常规web开发的WebContent（WebApp），它只有src目录。在src/main/resources下面有两个文件夹，static和templates。springboot默认static中放静态页面，而templates中放动态页面。

静态页面：

在static放一个hello.html，然后直接输入http://localhost:8080/hello.html便能成功访问。（好像可以新建一个public文件夹，也可以放静态文件）。也可以通过controller跳转，输入http://localhost:8080/Hi就可以成功访问：

  1. @Controller
  2. public class HelloController {
  3.     @RequestMapping("/Hi")
  4.     public String sayHello() {
  5.         return "hello.html";
  6.     }
  7. }

动态页面：

动态页面需要先请求服务器，访问后台应用程序，然后再转向到页面，比如访问JSP。spring boot建议不要使用JSP，默认使用Thymeleaf来做动态页面。在pom中要添加Thymeleaf组件jar包。

我们先在tempates文件夹中也新建一个hello.html但内容不同，然后先试一下直接访问该页面。

1、通过直接访问页面：输入http://localhost:8080/hello.html，结果显示访问的是静态目录里面的那个hello.html

2、通过controller跳转：。

原因：

静态页面的return默认是跳转到/static/index.html，当在pom.xml中引入了thymeleaf组件，动态跳转会覆盖默认的静态跳转，默认就会跳转到/templates/index.html，注意看两者return代码也有区别，动态没有html后缀。也就是我们要这样改controller：

  1. @Controller
  2. public class HelloController {
  3.     @RequestMapping("/Hi")
  4.     public String sayHello() {
  5.         return "hello";
  6.     }
  7. }

如果用了thymeleaf模板还想返回static中的页面，那么就要用重定向，如果在使用动态页面时还想跳转到/static/index.html，可以使用重定向：return "redirect:index.html"。

  1.     @RequestMapping(value = "/mrfile", method = RequestMethod.GET)
  2.     public String mrfile(HttpServletRequest request, @RequestParam(value = "usrname") String usrname)
  3.     {
  4.         try
  5.         {
  6.             request.getServletContext().getRealPath(REAL_PATH);
  7.             return "redirect:Mrfile.html";
  8.         }
  9.         catch (Exception ex)
  10.         {
  11.             LOGGER.info(ex.toString());
  12.             return null;
  13.         }
  14.     }

注意：

1、拦截的url最后不要跟视图重合，否则会抛出Circular view path异常，然后就报错说会有个循环视图的错误，反正以后注意就是。

  1. @Controller
  2. public class HelloController {
  3.     @RequestMapping("/hello")
  4.     public String sayHello() {
  5.         return "hello.html";
  6.     }
  7. }

2、每次改完都要重新停止应用，再重新启动很烦~但springboot有个叫热部署的东西，就是说在项目中修改代码可以不用重新停止应用再重新启动，可以自动重启，这里我们用的是devtools

thymeleaf中的相对路径

一.问题

最近在使用springboot框架，众所周知，该框架可以直接以jar的方式运行，在该方式运行的情况下，默认contextPath是/。在前台页面引用的时候，我是这样写相对路径的：

后台RequestMapping为/test/page1,前台访问路径就是"/test/page1",自动就会跳转到http://localhost:8080/test/page1路径，这样自然是没有什么问题的，但是当工程以war包的形式部署到tomcat下时，在访问时需要加上项目名，比如project1,这时的contextPath就是是/project1，那么在这种情况下，以前的相对路径写法"/test1/page1"就完全不能用了，因为它会自动跳转到http://localhost:8080/test/page1地址，很显然，这里缺少了/project1,正确路径是http://localhost:8080/project1/test/page1

那么怎么办呢?

二.解决过程

毫无疑问，这种情况是十分严重的，如果等项目完成了才发现路径都是错的，那无疑要花费巨大的精力去改，上网上查了一些资料，总结如下:

相对路径:

html页面中相对路径有两种：

第一种：/test/page1

这是相对于服务器根路径而言的，以之前的例子为例，使用结果就是直接从8080以后开始替换，如http://localhost:8080/test/page1

第二种：test/page2

这是相对于当前路径而言的，比如当前路径为http://localhost:8080/test/page1，那么替换以后就是。

http://localhost:8080/test/test/page，在这种情况下也有对应的语法，../表示上级目录，./表示当前目录，如test/page2就相当于./test/page2，如果写成../test/page2,那么替换后的路径就是http://localhost:8080/test/page了。

绝对路径:

绝对路径就是直接http://localhost:8080/test/page1，十分简单，但是也相当于写死了。

总结:

方案1，直接使用绝对路径。但是这样十分不好维护，写起来也麻烦，直接pass。

方案2,   使用相对路径第一种写法，部署的时候设置contextPath为/,这样自然没有问题，可以将springboot以jar方式部署，默认就是这种情况，如果一定要用tomcat部署，那么只能把war包解压出来的工程文件全部转移到tomcat的ROOT文件夹下，将ROOT文件夹内原有文件清空或转移，这样也可以实现根目录访问。这种方案一定程度上可以解决问题，但是对部署的方式限制太大了，只部署一个工程还可以，多了就没有办法了，因此也不是长久之计。

那么还有没有别的办法呢?

有！基本思路是利用thymeleaf动态生成html页面的特点，在相对路径前动态添加一个项目名，不就解决了?其实用jsp可以轻松做到，但是由于我的页面不是jsp页面，所以也不能使用这种方法。于是又进行了一番尝试，参考了很多资料，终于找到了解决方案!

方案3:直接利用thymeleaf的th:src或者th:href属性改变标签的链接路径，如

  1. @{/js/{path}/myJs.js(path=${contextPath})}

对于thymeleaf来说，有四种相对URL：

页面相对 test/page1.html  同普通html相对路径第二种，替换末尾的路径

上下文相对 /test/page1.html 自动添加上下文路径在相对路径之前!实际生成路径/project1/test/page1.html

服务器相对 ~/test/page1.html 同普通html相对路径第一种，适合访问同一服务器不同上下文路径时使用，如同一个tomcat上的project2

协议相对  //code.jquery.com/jquery-2.0.3.min.js 跨域访问使用

另外附上带有变量的thymeleaf语法

  1. @{/js/{path}/myJs.js(path=${contextPath},param=${contextPath})}

()内完成对变量或者参数的赋值，比如contextPath变量值为/app,那么最终生成的URL为http://localhost:11111/app/js//app/myJs.js?param=/app,

如果语句为

  1. @{/js/{path}/myJs.js(path=${contextPath})}

那么会生成

  1. http://localhost:11111/app/js//app/myJs.js

需要注意的是，thymeleaf将会以完成参数赋值后的结果来判断是哪种相对类型。

三.解决方案

  1. <script src="../static/js/myJs.js" th:src="@{/js/myJs.js}"></script>

利用thymeleaf提供的相对上下文动态路径，轻松解决问题，静态路径可以用来描述当前页面文件与其他页面文件在当前工程的位置关系，这样即使在未联网的情况直接打开html文件，也可以找到所引用的js文件和css文件等其他文件，充分发挥thymeleaf的威力!

springboot整合Thymeleaf模板引擎的更多相关文章

  1. 【Springboot】Springboot整合Thymeleaf模板引擎

    Thymeleaf Thymeleaf是跟Velocity.FreeMarker类似的模板引擎,它可以完全替代JSP,相较与其他的模板引擎,它主要有以下几个特点: 1. Thymeleaf在有网络和无 ...

  2. SpringBoot：2.SpringBoot整合Thymeleaf模板引擎渲染web视图

    在Web开发过程中,Spring Boot可以通过@RestController来返回json数据,那如何渲染Web页面?Spring Boot提供了多种默认渲染html的模板引擎,主要有以下几种: ...

  3. Springboot整合thymeleaf模板

    Thymeleaf是个XML/XHTML/HTML5模板引擎,可以用于Web与非Web应用. Thymeleaf的主要目标在于提供一种可被浏览器正确显示的.格式良好的模板创建方式,因此也可以用作静态建 ...

  4. SpringBoot使用thymeleaf模板引擎

    (1).添加pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactI ...

  5. SpringBoot日记——Thymeleaf模板引擎篇

    开发通常我们都会使用模板引擎,比如:JSP.Velocity.Freemarker.Thymeleaf等等很多,那么模板引擎是干嘛用的? 模板引擎,顾名思义,是一款模板,模板中可以动态的写入一些参数, ...

  6. 九、SpringBoot集成Thymeleaf模板引擎

    Thymeleaf咋读!??? 呵呵,是不是一脸懵逼...哥用我的大学四级英文知识告诉你吧:[θaimlif]. 啥玩意?不会音标?...那你就这样叫它吧:“赛母李府”,大部分中国人是听不出破绽的.. ...

  7. Spring Boot 2.0 整合Thymeleaf 模板引擎

    本节将和大家一起实战Spring Boot 2.0 和thymeleaf 模板引擎 1. 创建项目 2. 使用Spring Initlizr 快速创建Spring Boot 应用程序 3. 填写项目配 ...

  8. Springboot与Thymeleaf模板引擎整合基础教程(附源码)

    前言 由于在开发My Blog项目时使用了大量的技术整合,针对于部分框架的使用和整合的流程没有做详细的介绍和记录,导致有些朋友用起来有些吃力,因此打算在接下来的时间里做一些基础整合的介绍,当然,可能也 ...

  9. Springboot系列：Springboot与Thymeleaf模板引擎整合基础教程(附源码)

    前言 由于在开发My Blog项目时使用了大量的技术整合,针对于部分框架的使用和整合的流程没有做详细的介绍和记录,导致有些朋友用起来有些吃力,因此打算在接下来的时间里做一些基础整合的介绍,当然,可能也 ...

随机推荐

  1. C语言入门：02.第一个C语言程序

    一.开发工具的选择(1)可以用来写代码的工具:记事本.UltraEdit.Vim.Xcode等(2)选择Xcode的原因:苹果官方提供的开发利器.简化开发过程.有高亮显示功能 (3)使用Xcode新建 ...

  2. Influxdb安装部署

    1.下载Influxdb并解压 2.下载上图中的nssm(辅助性工具) 3.  在安装目录执行cmd 输入 nssm install influxdb,其中Path选择安装文件中的influxd,Ar ...

  3. MT【91】空间余弦定理

    评:空间余弦定理:空间四边形$ABCD$中$cos<AC,BD>=\frac{|(|AB|^2+|CD|^2)-(|BC|^2+|AD|^2)}{2|AC||BD|}$,证明用向量.

  4. 【BZOJ1089】[SCOI2003]严格n元树（高精度，动态规划）

    [BZOJ1089][SCOI2003]严格n元树(高精度,动态规划) 题面 BZOJ 洛谷 题解 设\(f[i]\)表示深度为\(i\)的\(n\)元树个数.然后我们每次加入一个根节点,然后枚举它的 ...

  5. 【树状数组套主席树】带修改区间K大数

    P2617 Dynamic Rankings 题目描述给定一个含有n个数的序列a[1],a[2],a[3]……a[n],程序必须回答这样的询问:对于给定的i,j,k,在a[i],a[i+1],a[i+ ...

  6. 洛谷 P2245 星际导航 解题报告

    P2245 星际导航 题目描述 sideman做好了回到Gliese 星球的硬件准备,但是sideman的导航系统还没有完全设计好.为了方便起见,我们可以认为宇宙是一张有N 个顶点和M 条边的带权无向 ...

  7. 【bzoj3576】 Hnoi2014—江南乐

    http://www.lydsy.com/JudgeOnline/problem.php?id=3576 (题目链接) 题意 给出一个数$F$,然后$n$堆石子,每次操作可以把一堆不少于$F$的石子分 ...

  8. web入门之十 JS高级编程基础

    学习内容 JavaScript函数 JavaScript类和对象 解析JSON数据 能力目标 深入了解JavaScript函数 熟悉JavaScript面向对象编程 熟练进行JSON数据解析 本章简介 ...

  9. bzoj2134: 单选错位（trie）

    预处理前后缀异或和,用trie得到前后缀最大答案,枚举中间点把左右两边加起来就是当前中间点的最大答案了...这个操作没见过,比较有意思,记录一下 #include<iostream> #i ...

  10. 洛谷P3241 开店

    题意:紫妹和幽香是17岁的少女,喜欢可爱的东西. 给定一棵树,有点权,边权.每次求所有权值在[l, r]范围内的点到点x的距离和.强制在线. 解:动态点分治怎么搞啊...... 一开始想的是权值的限制 ...