Thymeleaf模板引擎一

标签： 无 分类： 未分类 创建时间：2020-05-13 03:32:11 更新时间：2024-11-12 12:53:37

1.前言

对于一个选择困难证来说，至于该如何选择一种,这个就见仁见智了。公说公有理，婆说婆有理，最终的技术选型，还是要和项目的规模需求以及团队成员的水平相适应。其实，这就给技术负责人提了一个很高的要求，该如何选择技术，对团队最有力，最项目最有力，那么就是要技术负责人有很高的技术眼光以及一定的技术素养了。

参考文章：
1.模板引擎总结(Thymeleaf，FreeMarker，Enjoy，Velocity，JSP等)
2.thymeleaf和freemarker谁更好用？
3.jsp、freemarker、velocity、thymeleaf页面方案分析

1.引入Thymeleaf模板引擎

(1) spring boot使用的模板引擎是thymeleaf,在pom.xml中添加依赖.

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

(2) 然后在src/main/resources/templates下编写index.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
</head>
<body>
<div>HelloWorld</div>
</body>
</html>

(3) 编写控制器

1
2
3
4
5
6
7
8
9
10
11
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class LinkCtrl {
    @RequestMapping("/")
    public String index(){
        return "index";
    }
}

thymeleaf默认的模板路径就是src/main/resources/templates,重新运行程序，浏览器中输入 http://localhost:8080/index ，就可以看到输出的内容了。

参考文章：
1.Springboot+Thymeleaf配置与使用
2.Thymeleaf系列一 Spring boot 集成Thymeleaf
3.记一次SpringBoot整合thymeleaf layout模板的经历
4.Spring Boot与Thymeleaf集成

重要说明

(1) 这里有一点需要特别注意，如果使用的是idea，依赖没有解决，也就是Resolve进度条没有完成，返回视图时会报错，也就是说，一定要等依赖解决，才能正确使用thymealeaf。
(2) 如果idea在解决依赖时卡住，可以在C:\Users\用户名\.m2\repository\目录下，搜索卡住的依赖包，然后关闭idea,删除这个文件夹，重新打开idea,重新解决依赖。
(3) 如果idea解决依赖没有卡住，或者是没有报错，但是就是出现了404错误。这个时候，建议关闭idea，重新打开，或者是在右侧的maven窗口中点击刷新。我就是多次出现了这个问题，pom中添加了thymeleaf,也编写了控制器，也添加了index.html，但是访问index页面就是会报404错误，但是其他的RestController都可以访问到。

参考文章：
1.强制Intellij IDEA重新读取所有maven依赖项
2.解决IDEA的maven项目 添加依赖后Reimport无反应
3.IDEA重新导入依赖 maven命令reimport
4.idea更新maven依赖包

2.实现Thymeleaf热更新

在IDEA中编写代码，如果更改了某个类或者是templates文件中的文件，需要重新编译，然后重新debug，才能将更新应用到浏览器中，最方便的方式就是实现热更新，即按保存按钮，就实现刷新页面的功能。
（1）添加依赖

1
2
3
4
5
6
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
    <!--下面的选项要不要都可以，反正我测试了，没有这个选项也是可以的-->
    <optional>true</optional>
</dependency>

（2）thymeleaf禁用缓存
打开application.properties,添加spring.thymeleaf.cache=false

（3）开启IDEA编译的自动部署（这一步每个工程都要配置一下，特别是从别人的电脑上克隆的工程）
打开File->Setting->Build,Execution,Deployment->Compiler->Builder project automatically,选中

（4）thymeleaf等实时生效配置
使用ctrl+shift+a调出事件对话框，选择registry

然后找到compiler.automake.allow.when.app.running,选中

重启IDEA

到这一步还不算完，因为我实验中，有时候修改HTML刷新浏览器，可以及时看到效果，而大多数时候，不可以，不知道为啥，所以继续尝试下一步

切记，一定要关闭所有打开的IDEA，更改才能生效，否则，你会莫名其妙的始终看不到自动刷新的效果！！！
有些文章中，还要求配置pom.xml插件选项如下，但是根据我的实验，不添加configuration，也是可以实现的。

1
2
3
4
5
6
7
8
9
10
11
<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
            <configuration>
                <fork>true</fork>
            </configuration>
        </plugin>
    </plugins>
</build>

（5）安装LiveReload
LiveReload的作用就是自动检测HTML和css文件的变化，实现不用手动刷新页面，直接课可以看到修改后的效果。安装插件后，在application.properties文件中添加spring.devtools.livereload.enabled=true(这一步要不要我觉得都无所谓，本来默认就是开启的)，重启springboot，理论上当修改templates/index.html文件时，保存后，查看浏览器就能实时刷新了。
springboot中启动成功liveload：

有一点要注意，每次只能启动一个LiveReload服务，还有就是如果所有的设置都完成了的话，而不能生效，尝试着重启idea和浏览器试一试

但是就我的体验来说，有几点不合适。
1.开始时的时候，chrome中的liveload插件总是不起作用，我尝试了关闭浏览器，重启idea，设置插件的允许访问网址数据，将可读取和设置网站数据更改为：点击时，所有网站以及特定网站，都不行。设置点击时启用，会出现这个错误：

最后怎么解决的，确实是不知道，到底时哪里出了问题，也不知道，很郁闷。鼠标放到插件的位置上，会有提示，说liveload已经连接成功，这个时候就算成功了。
2.第二个问题，即使最后liveload成功了，当我在idea中修改HTML内容时，不能实现实时的刷新，而是要等待几秒钟的时间，有些延迟,而且有时候就算修改了html，浏览器也不能刷新。
3.修改resources/templates/文件夹下的html，可以实现实时刷新，但是修改spring boot中的resources下的static下的css文件似乎不起作用，修改了thymeleaf引用的css文件，liveload没有能够实时监测出来，即便时刷新了网页，也没有作用。这个问题我尝试了很多方式，都没有效果。关闭spring静态资源缓存，启用md5,将缓存时间设置为0,pom.xml中添加configuration,option选项各种方式都尝试了，均告失败。

1
2
3
4
5
6
7
8
spring.resources.chain.cache=false
spring.resources.cache.cachecontrol.max-age=0
spring.devtools.restart.additional-paths=resources/**,static/**,templates/**,static/css/**
#启用内容版本策略 md5
spring.resources.chain.strategy.content.enabled=true
#应用于版本策略的模式的逗号分隔列表 默认/**
spring.resources.chain.strategy.content.paths=/css/**,/js/**
spring.resources.cache.period=0

重点来了，据我接近两天的测试和摸索，我终于发现了成功的方式，在第五步完成之后，修改html可以实现实时刷新，但是修改resources/static/css下的css文件却不起作用，主要是因为我将css文件夹在idea管理中排除了
看下面这张图，css文件夹和js文件夹的图标不一样，带三角号的是纳入idea管理的文件夹，而不带三角号的不被idea管理，右键文件夹选项New中也没有新建类这一项。

选择右键文件夹，然后找到“Mark Directory As”，如果处于“Exclution”状态，就会有三角，如果显示”Cancel Exclution”,点击一下，文件夹就有三角了，就纳入了IDEA管理范围了，右键文件夹，新建选项中也出现了”Java Class”选项，这个时候就解决了修改css和js等内容，livereload不自动刷新的问题了。

真的是：踏破铁鞋无觅处，得来全部费工夫。

参考文章：
1.SpringBoot热部署（Class+Thymeleaf）
2.IntelliJ IDEA SpringBoot Thymeleaf 热部署，实现修改java文件和html文件无需手动编译重启即可
3.Spring Boot Thymeleaf 热部署
4.SpringBoot项目设置热部署以及静态资源livereload
5.Spring Boot 2.0 热部署指南
6.spring-boot 速成(2) devtools之热部署及LiveReload
7.Spring Boot Devtools Tutorial
失败的参考文章：
1.Spring boot 配置热部署 只重新加载静态资源（不重启服务）
2.Spring Boot 2.0 - 开发者工具devtools热部署教程(自动重载)
3.spring boot 静态资源修改能否立即生效问题
4.使用spring boot 修改静态资源(js,html) 和 java 不能立即生效,必须重启的解决方案
5.Springboot静态文件不更新的解决办法,以及Springboot实现热部署
6.IntelliJ IDEA SpringBoot Thymeleaf 热部署，实现修改java文件和html文件无需手动编译重启即可
7.Thymeleaf 之 使用devtools热启动、热部署
8.Springboot静态文件不更新的解决办法,以及Springboot实现热部署
9.springboot+thymeleaf解决css/js浏览器缓存问题

20190703更新，我发现了一个也很快的方式，在livereload不能自动刷新的时候，可以一键快速的更新静态资源，而不是重新编译，打开debug配置

这个时候debug窗口中的第二个箭头就高亮了，可以使用这个按钮刷新，而不是上面那个刷新，比上面那个重新启动应用程序要快的多。

3.js中使用变量

在标签中可以使用model变量，但是如何在javascript中使用呢？示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--标签中使用-->
<p>Hello, [[${session.user.name}]]!</p>

<!--和这个效果是一样的-->
<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>

<!--在文本中使用-->
<p th:inline="text">Hello, [[${session.user.name}]]!</p>

<!--在脚本中使用-->
<script th:inline="javascript">
    window.phems={
        "gateway":/*[[${gateway}]]*/ ' '
    };
</script>
参考文章:
1.Thymeleaf模板，在HTML的JavaScript 中使用变量_沐白的微笑的博客-程序员宅基地
2.Thymeleaf教程 （十二） 标签内，js中使用表达式 这里说了基本上全部的使用方式。
**本文已结束，感谢您的观看**
鼓励一下

往期推荐

文章目录
  1. 1. 1.前言
  2. 2. 1.引入Thymeleaf模板引擎
    1. 2.1. 重要说明
  3. 3. 2.实现Thymeleaf热更新
  4. 4. 3.js中使用变量
小额赞助
本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件通知，方便公布您的善意！
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
捐赠者名单 合计：9.01 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

2021-04-07 链接地址
每日二省
为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

2021-04-07 链接地址
每日三省
== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

2021-04-07 链接地址
每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀，微笑是寂寞的悲伤。
2016 ——— 美文