thymeleafjs动态拼接html_Thymeleaf学习
1.是什么
简单说， Thymeleaf 是⼀个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。
2.feature
1.Thymeleaf 在有⽹络和⽆⽹络的环境下皆可运⾏，即它可以让美⼯在浏览器查看页⾯的静态效果，也可以让程序员在服务
器查看带数据的动态页⾯效果。这是由于它⽀持 html 原型，然后在 html 标签⾥增加额外的属性来达到模板+数据的展⽰⽅式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态
地运⾏；当有数据返回到页⾯时，Thymeleaf 标签会动态地替换掉静态内容，使页⾯动态显⽰。
2.Thymeleaf 开箱即⽤的特性。它提供标准和spring标准两种⽅⾔，可以直接套⽤模板实现JSTL、 OGNL表达式效果，避免
每天套模板、该jstl、改标签的困扰。同时开发⼈员也可以扩展和创建⾃定义的⽅⾔。
3. Thymeleaf 提供spring标准⽅⾔和⼀个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国
际化等功能。
1.引⼊依赖
springboot直接引⼊：
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
⾮springboot项⽬使⽤如下依赖：
<dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf</artifactId> <version>2.1.4</version> </dependency> src/main/resources/templates，
默认的模板映射路径是：src/main/resources/templates，
springboot1.4之后，可以使⽤thymeleaf3来提⾼效率，并且解决标签闭合问题，配置⽅式：
<properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <!-- set thymeleaf version -->
<thymeleaf.version>3.0.0.RELEASE</thymeleaf.version> <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-
dialect.version> <!--set java version--> <java.version>1.8</java.version> </properties>
点击查看
之前的model/modelMap/modelAndView等页⾯数据传递参考之前随笔：点击查看
之前的model/modelMap/modelAndView等页⾯数据传递参考之前随笔：
快速回顾：
model/modelMap/modelAndView
2.配置thymeleaf视图解析器
这点与springMVC是相类似的：
#thymeleaf start de=HTML5 ding=UTF-8 t-
type=text/html #开发时关闭缓存，不然没法看到实时页⾯ spring.thymeleaf.cache=false #thymeleaf end
实际项⽬中可能会有不太严格的HTML格式，此时设置mode=HTML5将会对⾮严格的报错，可以参考以下配置：
de=LEGACYHTML5
"UTF-8" />，
你可能会发现在默认配置下，thymeleaf对.html的内容要求很严格，⽐如<meta charset="UTF-8"
如果少最后的标签封闭符号/，就会报错⽽转到错误页。也⽐如你在使⽤Vue.js这样的库，然后有<div v-cloak></div>这样的html代码，也会被thymeleaf认为不符合要求⽽抛出错误。 因此，建议增加下⾯这段： de = LEGACYHTML5
de的默认值是HTML5，其实是⼀个很严格的检查，改为LEGACYHTML5可以得到⼀个可能更友好亲切的格式要求。 需要注意的是，LEGACYHTML5需要搭配⼀个额外的库NekoHTML才可⽤。
1. <dependency>
2. <groupId>kohtml</groupId>
3. <artifactId>nekohtml</artifactId>
4. <version>1.9.22</version>
5. </dependency>
最后重启项⽬就可以感受到不那么严格的thymeleaf了。
这样，需要的配置项如下：
# ⼀项是⾮严格的HTML检查，⼀项是禁⽤缓存来获取实时页⾯数据，其他采⽤默认项即可 thymeleaf: mode: LEGACYHTML5 cache: false
ThymeleafProperties
// 完整配置项参考类ThymeleafProperties
3。编写控制器
/** * 测试demo的controller * * @author zcc ON 2018/2/8 **/
@Controller
public class HelloController {
private static final Logger log = Logger(HelloController.class); @GetMapping(value = "/hello")
public String hello(Model model) {
String name = "jiangbei";
model.addAttribute("name", name);
return "hello";
} }
4.编写模板html
<!DOCTYPE HTML>
<html xmlns:th="">
<head>
javascript动态效果<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<!--/*@thymesVar id="name" type="java.lang.String"*/-->
<p th:text="'Hello！, ' + ${name} + '!'">3333</p>
</body>
</html>
其中，注释是通过alt+enter进⾏⾃动⽣成的，便于IDEA补全，如果不加，IDEA将会报错cannot reslove，
当然也可以通过如下⽅式解决，解决之前推荐在maven项⽬中reimport⼀下！（据说新版本的IDEA中已经修复此问题，待更新⾄2017.3以后）
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论