阿凡达

未来可期

285篇博客

最新博客

最新资源下载

编辑推荐

网易数帆开源API网关与容器云项目，让云原生生产落地“多快好网易汪源：统一负载与多云环境的“开放姿态”，才是云原生网易数帆如何用 Kubernetes“原语”搞定云原生中间件快手打新挤爆券商系统，网易数帆推出券商稳定性保障方案探索智慧校园新模式，网易有数在教育行业的实践分享金融行业大数据治理之路——数据模型篇

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>
其中 spring-boot-starter-web我看有些文档上是不需要加的，但是本人不加时，会报org.thymeleaf.exceptions.TemplateInputException的错误。
  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
其中第一、二配置分别为构建url预先查看名称的前后缀，springboot默认会有这种基本配置，所以可以不配置。第三、四条配置指定应用模板的模式及编码。 spring.thymeleaf.cache=false说到这条配置不免多说一些。当下 thymeleaf有一点被人诟病的便是性能问题。而实际上这条配置便是启用模板缓存的开关，启用缓存会一定程度上面减小性能问题。但在开发过程中需要配置成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页面模板引擎介绍（下篇）

本文来自网易实践者社区，经作者王海鹏授权发布。


推荐博客