登录注册
最新博客
最新资源下载
thymeleaf - java web页面模板引擎介绍（上篇）
阿凡达2018-07-20 14:05
一、什么是模板引擎
相对html+js的传统设计，现在很多网站都采用div&css+标签化+
模块化
的设计
。模板引擎根据一定的语义，将数据填充到模板中，产生最终的HTML页面
模板引擎。主要分两种，客户端引擎和服务端引擎。
客户端渲染：
模板和数据分别传送到客户端，在客户端由JavaScript模板引擎渲染出最终的HTML视图。将模板渲染放置在客户端做，可以降低服务端的压力，并且如果前端内容分别来自多个后台系统，而这些后台的架构各不相同（Java、.NET、Ruby等），则服务器端渲染需要采用不同的技术，模板资源无法共享。
服务端渲染：引擎在服务器端将模板和数据合成，返回最终的html页面，相对于客户端渲染，数据存储更加安全。主要有freemarker、velocity、thymeleaf等。
二、thymeleaf介绍
Thymeleaf是一个现代化的服务器端Java模板引擎，适用于Web和独立环境，能够处理HTML、XML、JavaScript、CSS，甚至纯文本。thymeleaf最大的优势后缀为html,所以只需要浏览器就可以展现页面了。还有就是thymeleaf可以很好的和spring集成，Spring的官方文档中很多部分的渲染都是用这个的。
Thymeleaf跟velocity, jsp等有很大的差别，它的语法结构更像angular等在tag的属性里加上一些东西来做渲染的，因为它本身就是一个加入了特别的tag property的Html文件，只是不经过服务端渲染的话，数据和逻辑等东西不会在html中体现而已。
三、thymeleaf使用
本文以spring项目为例说明：
1、首先添加maven依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency> <dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
2、
thymeleaf参数配置
在application.properties中可以配置thymeleaf模板解析器属性.就像使用springMVC的JSP解析器配置一样。
本文是在resource目录下的application.properties中
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false
3、写入口函数（Controller）
这里介绍两种Controller 如何将 View 指向 Thymeleaf的方法：
a)ModelMap 对象来进行数据绑定到视图。return 字符串，该字符串对应的目录在 resources/templates 下的模板名字（因为
spring.thymeleaf.prefix=classpath:/templates/配置的目录）。
b)new ModelAndView("redirect:/showallApi");指定到Controller层，@ModelAttribute 注解是用来获取页面 Form 表单提交的数据，并绑定到 MserverApi 数据对象。
4、编写Html文件
a)、首先要在改写html标签<html xmlns:th="http://www.thymeleaf.org">，这样的话才可以在其他标签里面使用th:*这样的语法.这是下面语法的前提.
b)、引入对应css和js文件(文件地址为相对地址)：
<link th:src="@{/css/main.css}" rel="stylesheet" type="text/css"/>
<script th:src="@{/js/ydaq.js}" ></script>
c）、使用th:*标签定义html
thymeleaf支持html标签属性的重新定义，如th:width、th:src、th:style，也支持请求参数获取如${param.name}可以获取请求http://localhost:8080?name=jeff中的jeff字段，还可以做一些变量运算及逻辑处理功能。
--thymeleaf数据遍历
@GetMapping("/greeting")
public String greetingForm(Model model) {
model.addAttribute("greeting", new Greeting());
return "greeting";
}<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Getting Started: Handling Form Submission</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Result</h1>
<p th:text="'id: ' + ${greeting.id}" />
<p th:text="'content: ' + ${greeting.content}" />
<a href="/greeting">Submit another message</a>
</body>
</html>上面两段代码、运行结果如下，其中${greeting.id}，获取的为参数中的greeting参数值，并识别${param.*}格式显示，值得注意的是对象的属性一定需要和定义的do相一致，不然是会报错的哦。
相关阅读：
thymeleaf - java web页面模板引擎介绍（下篇）
本文来自网易实践者社区，经作者王海鹏授权发布。
分享至：
