前端JS框架有vue.js、react.js、Angular.js、Bootstrap、Jquery、Zepto等；
前端UI框架有：QUICK UI、iviewUI、Layui、elementUI、Mint UI、WeUI、MUI等等。
thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可，由Daniel Fernández创建，该作者还是Java加密库Jasypt的作者。
Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码，开发者只需将标签属性添加到模板中即可。接下来，这些标签属性就会在DOM（文档对象模型）上执行预先制定好的逻辑。
它的特点便是：开箱即用，Thymeleaf允许您处理六种模板，每种模板称为模板模式：
所有这些模式都指的是格式良好的XML文件，但Legacy HTML5模式除外，它允许您处理HTML5文件，其中包含独立（非关闭）标记，没有值的标记属性或不在引号之间写入的标记属性。为了在这种特定模式下处理文件，Thymeleaf将首先执行转换，将您的文件转换为格式良好的XML文件，这些文件仍然是完全有效的HTML5（实际上是创建HTML5代码的推荐方法）。
另请注意，验证仅适用于XML和XHTML模板。
然而，这些并不是Thymeleaf可以处理的唯一模板类型，并且用户始终能够通过指定在此模式下解析模板的方法和编写结果的方式来定义他/她自己的模式。这样，任何可以建模为DOM树（无论是否为XML）的东西都可以被Thymeleaf有效地作为模板处理。
需求：在页面上显示hello world
参考springmvc +jsp展示hello world
+ 加入springmvc的依赖和其他的依赖
+ 创建controller
@requstMapping("/show")
public String show(Model model){
model.addAttribute("message","hello world")
return "index"
}
+ 创建web-info/views/index.jsp
<h1>${message}</h1>
+ 配置视图解析器
springboot整合thymeleaf
+ 创建springboot工程加入起步依赖 thymeleaf
+ 创建controller
@requstMapping("/show")
public String show(Model model){
model.addAttribute("message","hello world")
return "demo1"
}
+ 在resources/templates下创建模板文件 模板文件的后缀.html
demo1.html,在html文件中引入约束
+ 页面中使用语法获取数据
<h1 th:text="${message}"></h1>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.4.RELEASE</version>
</parent>
<dependencies>
<!--web起步依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--thymeleaf配置-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
在resources中创建templates目录，在templates目录创建 demo1.html,代码如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf的入门</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<!--输出hello数据-->
<p th:text="${hello}"></p>
</body>
</html>
解释：
<html xmlns:th="http://www.thymeleaf.org">:这句声明使用thymeleaf标签
<p th:text="${hello}"></p>:这句使用 th:text=“${变量名}” 表示 使用thymeleaf获取文本数据，类似于EL表达式。
在resources中创建application.yml,并设置thymeleaf的缓存设置，设置为false。默认加缓存的，用于测试：修改后不需要重启
spring:
thymeleaf:
cache: false
在这里，其实还有一些默认配置，比如视图前缀：classpath:/templates/,视图后缀：.html
org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties部分源码如下：
public static final String DEFAULT_PREFIX = "classpath:/templates/";
public static final String DEFAULT_SUFFIX = ".html";
private boolean cache = true; //是否启用模板缓存
(4)控制层
创建controller用于测试后台 设置数据到model中。
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/test")
public class TestController {
/***
* 访问/test/hello 跳转到demo1页面
* @param model
* @return
*/
@RequestMapping("/hello")
public String hello(Model model){
model.addAttribute("hello","hello welcome");
return "demo1";
}
}
5)测试
创建启动类ThymeleafApplication，代码如下：
@SpringBootApplication
public class ThymeleafApplication {
public static void main(String[] args) {
SpringApplication.run(ThymeleafApplication.class,args);
}
}
