模板引擎Thymeleaf-CFANZ编程社区

模板页面中的 html 上需要声明 Thymeleaf 的命名空间，具体代码如下

<html xmlns:th="http://www.thymeleaf.org">

这样比如我们在Idea中编写ThymeLeaf代码的时候，就会有相关的代码提示。

th:text和th:utext

这两个标签用于文本内容的显示操作，他们功能相近，只有区别于会不会解析。

th:text 进行文本替换不会解析html
th:utext 进行文本替换会解析html

示例

我们编写一个这样的代码

@RequestMapping("/th")
public String th(Model model){
    String msg = "<h1>我是h1</h1>";
    model.addAttribute("msg",msg);
    return "/course/th";
}

对于th:text，在HTML页面中这样编写，如下

<p th:text="text标签：  + ${msg}"></p>

因为text不会进行解析，将会获得如下结果

<p>text标签：<h1>我是h1</h1></p>

对于th:utext在HTML页面中这样编写，如下

<p th:utext="utext标签： + ${msg}"></p>

因为utext会进行解析，将会获得如下结果

模板引擎Thymeleaf_HTML

当然，这里提示一下的是，使用 + 和 | | 效果是一样的，如下代码所示

<p th:utext="utext标签： + ${msg}"></p>
<p th:utext="|utext标签： ${msg}|"></p>

字符串拼接

拼接字符串通过 + 或者 | 进行拼接，请求我们先编写一个这样的代码，以及使用下面的HTML模板

 @RequestMapping("/th")
 public String th(Model model){
     model.addAttribute("a",1);
     model.addAttribute("b",2);
     return "/course/th";
 }

#模板一
<p th:text="${a}+${b}"></p>
#模板二
<p th:text="|${a} ${b}|"></p>
#模板三
<p th:text="${a} > ${b}"></p>

所得结果如下

#结果一
<p>3</p>
#结果二
<p>1 2</p>
#结果三
<p>false</p>

我们换过一个java代码，以及使用下面的HTML模板

@RequestMapping("/th")
public String th(Model model){
    model.addAttribute("flag",true);
    return "/course/th";
}

<p th:text="!${flag}"></p>

得到如下结果：<p>false</p>

*{…}和 ${…}表达式

一般情况下 *{…} 和 ${…}是一样的，但是 *{…} 一般和 th:object 一起使用来完成对象属性的简写，我们来举个例子，用如下java代码

@RequestMapping("/th")
public String th(Model model){
    User user = new User("ljk"，18);
    model.addAttribute("user",user);
    return "/course/th";
}

模板操作

#使用 ${...}操作
<p th:text="${user.name}"></p>
<p th:text="${user.age}"></p>
#使用 *{...}操作
<p th:text="*{user.name}"></p>
<p th:text="*{user.age}"></p>

两个获得的结果都是如下

<p>ljk</p>
<p>18</p>

我们这里来试试使用 *{…}特有操作

<div th:object="${user}" >
    <p th:text="*{name}"></p>
    <p th:text="*{age}"></p>
</div>

会得到如下结果页面：

<p>ljk</p>
<p>18</p>

#{…}表达式

用于国际化message.properties 属性读取，定义message_zh_CN.properties 配置文件

模板引擎Thymeleaf_文本替换_02

定义国际化处理转换处理类

@Configuration
public class LocaleResolverConfig {
    @Bean(name="localeResolver")
    public LocaleResolver localeResolverBean() {
        return new SessionLocaleResolver();
    }
}

定义国际化处理的controller

@Controller
public class ProductController {

    @Autowired
    private LocaleResolver localeResolver;
    private  ProductService productService = new ProductService();

    @RequestMapping("/")
    public String useT(Model model,HttpServletRequest request,HttpServletResponse response) {
        //设置访问用户信息到session
        request.getSession(true).setAttribute("user", new User("我是", "哈哈", "CHINA", null));
        localeResolver.setLocale(request,response,Locale.CHINA);
        return "productList";
    }
}

如果没有定义 message_en_US.properties 和message_zh_CN.properties 会默认取message.properties中的信息。如果 Locale = Locale.CHINA 就取 message_zh_CN.properties。如果 Locale = Locale.US 就取 message_en_US.properties。我们使用如下模板代码测试一下

<p th:utext="#{home.welcome(${session.user.name})}">Welcome to our grocery store, Sebastian!</p>

得到如下结果

欢迎来到我们的杂货店，我是哈哈

~{…}片段表达式

这个一般和模版布局的语法一起使用，具体使用方式请看下面模版布局的教程。

@{…}链接网址表达式

一般和 th:href、th:src进行结合使用，用于显示Web 应用中的URL链接。通过@{…}表达式，Thymeleaf 可以帮助我们拼接上web应用访问的全路径，同时我们可以通过（）进行参数的拼接

模板代码：

#模板一
<img th:src="@{/images/gtvglogo.png}"  />
#模板二
<a th:href="@{/product/comments(prodId=${prod.id})}" >查看</a>
#模板三
<a th:href="@{/product/comments(prodId=${prod.id},prodId2=${prod.id})}" >查看</a>

结果页面：

#结果一
<img src="/sbe/images/gtvglogo.png">
#结果二
<a href="/sbe/product/comments?prodId=2">查看</a>
#结果三
<a href="/sbe/product/comments?prodId=2&prodId2=2">查看</a>