Spring MVC Thymeleaf模版的简单使用

2021年1月15日 105点热度 0条评论 来源: @一头雾水@

        Thymeleaf崇尚模板是纯正的html代码,脱离模板引擎,在纯静态环境也可以直接运行。现在如果我们直接在html中编写 ${}这样的表达式,显然在静态环境下就会出错,这不符合Thymeleaf的理念。Thymeleaf中所有的表达式都需要写在"指令"中,指令是HTML5中的自定义属性,在Thymeleaf中所有指令都是以th:开头。因为表达式${}是写在自定义属性中,因此在静态环境下,表达式的内容会被当做是普通字符串,浏览器会自动忽略这些指令,这样就不会报错了。        如果我们不经过SpringMVC,而是直接用浏览器打开编写的页面:在静态环境下,th指令不会被识别,但是也不会报错,而是显示原本的默认值。指令的设计,正是Thymeleaf的高明之处,也是它优于其它模板引擎的原因。动静结合的设计,使得无论是前端开发人员还是后端开发人员可以完美契合。

一、搭建Spring MVC项目,并整合Thymeleaf模版

参考文章:Spring MVC 整合Thymeleaf模版

新的项目结构:

二、Thymeleaf模版的简单使用

1、HtmlController的修改。

package com.xiaojie.spring.mvc.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

/**
 * ModelAndView多级目录可以使用相对路径,上一级的话使用../。
 * 如果<property name="suffix" value=".jsp"/>,那么不支持同时支持jsp和html。
 * 如果<property name="suffix" value=""/>,那么new ModelAndView()都要加上后缀。
 **/
@Controller
@RequestMapping("/html")
public class HtmlController {

    /**
     * 如果要使用的话,要将testDispatcher先注释掉
     */
    @RequestMapping("/hello")
    public ModelAndView hello(Model model) {
        return new ModelAndView("hello");
    }

    @RequestMapping("/test")
    public ModelAndView test(Model model) {
        model.addAttribute("name", "卓小杰");
        model.addAttribute("age", 24);
        return new ModelAndView("test");
    }

    @RequestMapping("/test1")
    public ModelAndView test1(Model model) {
        model.addAttribute("key1", "变量表达式(获取变量值)");
        model.addAttribute("key2", "<p>html标签</p>");
        model.addAttribute("a", 12);
        model.addAttribute("b", 13);
        return new ModelAndView("test1");
    }

    @RequestMapping("/test2")
    public ModelAndView test2(Model model) {
        model.addAttribute("a", 12);
        model.addAttribute("b", 13);
        int[] score = new int[]{1,3,5,7};
        model.addAttribute("score", score);
        return new ModelAndView("test2");
    }
}

2、新增test1.html。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>view-test-html-hello</title>
</head>
<body>
<span>字符串的连接:</span><br>
<span th:text="|动态页面显示的文本:${key1}|">静态界面默认文本</span><br>
<span th:text="'动态页面显示的文本:' + ${key1}">静态界面默认文本</span><br>
<br><span>注入html标签:</span><br>
<span th:text="${key2}">静态界面默认文本</span><br>
<span th:utext="${key2}">静态界面默认文本</span><br>
<br><span>运算:</span><br>
<span th:text="${a} ?: '如果a为空的默认值'">静态界面默认文本</span><br>
<span th:text="|a:${a} , b:${b}|">静态界面默认文本</span><br>
<span th:text="'加法:'+((${a}>${b}) ? ${a}-${b} : ${a}+${b})">静态界面默认文本</span><br>
<span th:text="'减法:'+((${a}<${b}) ? ${a}-${b} : ${a}+${b})">静态界面默认文本</span><br>
</body>

<!--模板引擎不仅可以渲染html,也可以对JS中的进行预处理。
而且为了在纯静态环境下可以运行,其Thymeleaf代码可以被注释起来
= /*[[Thymeleaf表达式]]*/ "静态环境下的默认值";-->
<script type="text/javascript" th:inline="javascript">

    var a =/*[[${a}]]*/"静态环境下的默认值";
    console.log(a);
</script>
</html>

3、新增test2.html。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>view-test-html-hello</title>
</head>
<body>
<span>if-else:</span><br>
<div th:if="${a}>${b}">
    <span>a > b</span>
</div>
<div th:unless="${a}>${b}">
    <span>a <= b</span>
</div>
<!--th:case="*"放在最后一行-->
<br><span>switch:</span><br>
<div th:switch="${a}">
    <span th:case="12">a=12</span>
    <span th:case="${b}">a=13</span>
    <span th:case="14">a=14</span><br>
    <span th:case="*">相当于default</span>
</div>
<!--stat对象包含以下属性:
index,从0开始的角标
count,元素的个数,从1开始
size,总元素个数
current,当前遍历到的元素
even/odd,返回是否为奇偶,boolean值
first/last,返回是否为第一或最后,boolean值-->
<br><span>循环:</span><br>
<div th:each="num , stat : ${score}">
    <span th:text="|${stat.index}: ${num}|">静态界面默认文本</span>
</div>
</body>
</html>

三、测试结果

1、http://localhost:8080/mvc/html/html/test1的test1.html页面。刚开始的时候有打印出a的值,说明在javascript中成功使用了Phymeleaf的变量。

 

2、http://localhost:8080/mvc/html/html/test1的test1.html页面。一个<p></p>是普通的文本,一个是标签。

3、http://localhost:8080/mvc/html/html/test2的test2.html页面。

四、设置属性值

1、 th:attr任何属性值,语法格式:th:attr="属性名=属性值,[属性名=属性值]"。 属性值如果是使用表达式的话:通常有URL表达式@{}和变量表达式${}。但此标签语法不太优雅。示例:        
        th:attr="action=@{/subscribe}" //当然也可以直接使用th:action                    
        th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" //可直接使用th:src  
        th:attr="value=#{subscribe.submit}"//可直接使用th:value        
        <input type="checkbox" name="active" th:attr="checked=${user.active}"/>        
    设置多个属性在同一时间,有两个特殊的属性可以这样设置: 
        th:alt-title 和 th:lang-xmllang        
        th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}"      
2、前置和后置添加属性值th:attrappend 和 th:attrprepend。主要对class和style两个属性:class="btn" th:attrappend="class=${' ' + cssStyle}"。转换后:class="btn warning"      
3、还有两个特定的添加属性th:classappend 和 th:styleappend。与上面的attrappend功能一样:class="row" th:classappend="${prodStat.odd}? 'odd'"。       转换后:奇数行class="row odd",偶数行class="row"。

    原文作者:@一头雾水@
    原文地址: https://blog.csdn.net/qq_36511401/article/details/103991005
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。