用Thymeleaf模板引擎踩过的坑

最新推荐文章于 2022-04-25 19:59:37 发布

YangRong_

最新推荐文章于 2022-04-25 19:59:37 发布

阅读量2.4k

点赞数

分类专栏： Thymeleaf 文章标签： Thymeleaf模板引擎

本文链接：https://blog.csdn.net/YangRong_/article/details/89305598

版权

Thymeleaf 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先，献上我的HTML页面代码，这个html页面用的技术有
thymeleaf模板引擎，
JavaScript(JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用JavaScript。)
还有Bootstrap前端框架（Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。）
那为什么不用jsp页面了，因为thymeleaf模板引擎速度快，数据和页面结构分离，服务器压力小，而jsp生成页面的时候如果数据量过大也是慢…

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:src="@{/js/jquery-1.8.0.min.js}"></script>
    <script type="text/javascript" th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <style>
        a{
            color:gray;
            text-decoration: none;
        }
        a:hover{
            color: orange;
            text-decoration: underline;
        }
    </style>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div align="center">
   <h2>欢迎，<span th:text="${session.comm.pname}">!</span></h2>
    <form  th:action="@{findAllByPage}" method="post" id="chaxunForm">
        <input id="currPage" name="currPage" type="hidden" th:value="${p.currPage}"/>
        <input id="rows" name="rows" type="hidden" th:value="${p.rows}"/>
    </form>
    <h2></h2>
    <a th:href="@{'registry'}">添加</a>
    <h2></h2>
<table border="1px" class="table table-hover table-striped">
    <tr align="center">
        <td><strong>编号</strong></td>
        <td><strong>姓名</strong></td>
        <td><strong>密码</strong></td>
        <td><strong>Number</strong></td>
        <td><strong>Choose</strong></td>
    </tr>
    <tr th:each="c:${list}" align="center">       
        <td th:text="${c.id}"></td>
        <td th:text="${c.pname}"></td>
        <td th:text="${c.cid}"></td>
       <!-- <td th:text="${select.price}"></td>-->
        <td th:text="${c.price}"></td>
        <td>

            <a th:href="@{/delete(id=${c.id})}">删除</a>&nbsp;&nbsp;&nbsp;
            <a th:href="@{/findById(id=${c.id})}">修改</a>
        </td>
    </tr>
</table>
    <h3></h3>
    <p>
        <span th:text="${p.currPage}+'/'+${p.totalPage}+'页'"></span>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <sapn th:if="${p.currPage} ne 1">
            <a th:href="@{'javascript:chaxun(1,'+${p.rows}+')'}">首页</a>
            <a th:href="@{'javascript:chaxun('+${p.currPage-1}+','+${p.rows}+')'}">上一页</a>
        </sapn>
        <sapn th:if="${p.currPage} ne ${p.totalPage}">
            <a th:href="@{'javascript:chaxun('+${p.currPage+1}+','+${p.rows}+')'}">下一页</a>
            <a th:href="@{'javascript:chaxun('+${p.totalPage}+','+${p.rows}+')'}">末页</a>
        </sapn>&nbsp;&nbsp;&nbsp;&nbsp;
     <!--   共有数据： <h4 class="x-right" style="line-height:40px" th:value="${p.totalNumber}">条</h4>-->
    </p>
    </div>

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

<script type="text/javascript" th:inline="javascript">

    function chaxun(currPage,rows){
        $("#currPage").val(currPage);
        $("#rows").val(rows);
        $("#chaxunForm").submit();

    }

</script>

再来说thymeleaf在HTML页面的引用：

1.在html标签头部引入 xmlns:th=“http://www.thymeleaf.org” 必须要的！！如果没有这句话引用模板引擎是不会有提示的，而且引入的这行在idea中是有颜色的，如果是灰色的，说明引入不成功，帮人找bug的时候死活找不出毛病，后来无意中发现，原代码块：<!DOCTYPE html> 修改后的<!DOCTYPE >

如果用到javascript就会提示加 xmlns=“http://www.w3.org/1999/xhtml” 看自己的情况而定了

  <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

thymeleaf在pom.xml中的依赖配置，这个也是必须的！！

  <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-thymeleaf</artifactId>
  </dependency>

前端框架Bootstrap 首先引用一句，位置在<head></head>标签内部

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

具体的样式一个class里面引用你想要的样式，直接空格就可以

 <table border="1px" class="table table-hover table-striped"></table>

其他样式参考菜鸟：http://www.runoob.com/bootstrap/bootstrap-tutorial.html

YangRong_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用Thymeleaf模板引擎踩过的坑

首先，献上我的HTML页面代码，这个html页面用的技术有thymeleaf模板引擎，JavaScript(JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用JavaScript。)还有Bootstrap前端框架（Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的...
复制链接

扫一扫