• 欢迎光临~

【JavaWeb】Thymeleaf视图模板技术

开发技术 开发技术 2022-07-25 次浏览

参考:第八章 Thymeleaf

1.Thymeleaf是什么

是类似于JSP、Freemarker、Velocity的服务端模板技术,将动态数据渲染到页面上

2.为什么需要Thymeleaf

客户端发送请求,index页面是静态的,查询数据库中的数据是动态,Thymeleaf可以在静态页面上渲染后台查询的数据。

【JavaWeb】Thymeleaf视图模板技术

3.视图

请求URL为:http://localhost:8080/pro09/index
逻辑视图:index
物理视图:view-prefix + 逻辑视图名称 + view-suffix
所以访问的真实视图是:/index.html

配置文件中配置前缀和后缀

    <!-- 在上下文参数中配置视图前缀和视图后缀 -->
    <context-param>
        <param-name>view-prefix</param-name>
        <param-value>/</param-value>
    </context-param>
    <context-param>
        <param-name>view-suffix</param-name>
        <param-value>.html</param-value>
    </context-param>

4.使用Thymeleaf

(1)添加依赖
【JavaWeb】Thymeleaf视图模板技术

(2)头文件引入:xmlns:th="http://www.thymeleaf.org"
(3)使用th标识获取session作用域中的数据

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="div_container">
    <div id="div_fruit_list">
        <p class="center f30">欢迎来到水果商城后台管理系统</p>
        <table id="tbl_fruit">
            <tr>
                <th class="w20">名称</th>
                <th class="w20">单价</th>
                <th class="w20">库存</th>
                <th>操作</th>
            </tr>
            <tr th:if="${#lists.isEmpty(session.fruitList)}">
                <td colspan="4">数据为空!</td>
            </tr>
            <tr th:unless="${#lists.isEmpty(session.fruitList)}" th:each="fruit:${session.fruitList}">
                <td th:text="${fruit.fname}">苹果</td>
                <td th:text="${fruit.price}">5</td>
                <td th:text="${fruit.fcount}">20</td>
                <td><img src="imgs/del.jpg" class="delImg"/></td>
            </tr>
        </table>
        <hr/>
    </div>
</div>
</body>
</html>

程序员灯塔
转载请注明原文链接:【JavaWeb】Thymeleaf视图模板技术
喜欢 (0)