【JavaWeb】Thymeleaf视图模板技术

参考：第八章 Thymeleaf

1.Thymeleaf是什么

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

2.为什么需要Thymeleaf

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

image

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）添加依赖
image

（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>
posted @ 2022-07-25 23:07  植树chen  阅读(51)  评论(0)  编辑  收藏  举报