Thymeleaf模板语法使用

2020-12-26   69 次阅读


Java代码部分

@Controller
@RequestMapping("/sys/v1/knight")
public class KnightController extends BaseController {

    //页面路径
    private final String path = iotPath + "knight/";

    @GetMapping("/list")
    public String index(ModelMap map) {
        //创建一个对象数据
        Map userMap = new HashMap();
        userMap.put("name", "小明");
        userMap.put("sex", "男");
        userMap.put("old", "17岁");
        //添加道model中
        map.put("userMap", userMap);
        //添加一个普通的数据
        map.put("knightName", "获取基本的数据");
        //添加一个表达式调用方法的数据
        map.put("ognlMethod", "小明,小红,小青");
        //添加一个数字类型
        map.put("ognlInteger", 11);
        //添加一个布尔类型
        map.put("ognlBoo", true);
        return path + "list";
    }

}

前端代码

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('thymeleaf模板ognl表达式测试')"/>
</head>
<body class="gray-bg">
<!--内容展示区 ognl表达式-->
<div>
    <!--获取基本的数据-->
    <h1 th:text="${knightName}"></h1>

    <!--获取对象 直接输入就是json对象-->
    <h3 th:text="${userMap}"></h3>

    <!--获取对象中属性的值-->
    <h3>
        <p th:text="${userMap.name}"></p>
        <p th:text="${userMap.sex}"></p>
        <p th:text="${userMap.old}"></p>
    </h3>

    <!--还可以这样写-->
    <h3 th:object=${userMap}>
        <p th:text="*{name}"></p>
        <p th:text="*{sex}"></p>
        <p th:text="*{old}"></p>
    </h3>

    <!--ognl使用方法-->
    <div>
        <span th:text="${ognlMethod.split(',')[0]}"></span>
        <span th:text="${ognlMethod.split(',')[1]}"></span>
        <span th:text="${ognlMethod.split(',')[2]}"></span>
    </div>
    <!--也可以这样写-->
    <div th:object="${ognlMethod.split(',')}">
        <span th:text="*{[0]}"></span>
        <span th:text="*{[1]}"></span>
        <span th:text="*{[2]}"></span>
    </div>

    <!--ognl中的判断-->
    <div>
        <!--直接使用布尔值-->
        <div th:if="true">
            <h4>变量值为:true 展示该数据</h4>
        </div>
        <div th:if="!false">
            <h4>变量值为:!false 展示该数据</h4>
        </div>
        <!--判断变量中的布尔值-->
        <div th:if="${ognlBoo}">
            <h4>变量onglBoo为:true 时展示该数据</h4>
        </div>
        <!--使用变量中值进行指定的比较-->
        <div th:if="${ognlInteger} == 11">
            <h4>变量ognlInteger为:11 时展示该数据</h4>
        </div>
        <!--需要注意:${}内部的是通过OGNL表达式引擎解析的,外部的才是通过Thymeleaf的引擎解析,因此运算符尽量放在${}外进行。-->
        <!--或者一下的写法都是一样的-->
        <div th:if="${ognlInteger == 11} ">
            <h4>变量ognlInteger为:11 时展示该数据</h4>
        </div>
    </div>

    <!--for循环的使用-->
    <div>
        <!--基本使用-->
        <div th:each="item : ${userMap}">
            <span th:text="|*{item.getKey()}:*{item.getValue()}|"></span>
        </div>
        <!--需要其他参数时 使用stat对象-->
        <div th:each="item ,stat : ${userMap}">
            <span th:text="*{stat}"></span>
        </div>
        <!--
        stat对象中可以获取的到参数
            index,从0开始的角标
            count,元素的个数,从1开始
            size,总元素个数
            current,当前遍历到的元素
            even/odd,返回是否为奇偶,boolean值
            first/last,返回是否为第一或最后,boolean值
        -->
    </div>

    <!--switch 分支控制语句-->
    <div th:switch="${userMap.name}">
        <p th:case="'男'">男</p>
        <p th:case="'女'">女</p>
        <p th:case="*">未知</p>
    </div>

    <!--渲染 JavaScript-->
    <script th:inline="javascript">
        {
            const user = /*[[${userMap}]]*/
            console.log(user.name)
            console.log(user.sex)
            console.log(user.old)
        }
    </script>

</div>
</body>
</html>

实际前端展示效果

image.png[更加详细的文章地址]

拓展

更加详细的说明

Q.E.D.

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议