在JavaScript中使用Thymeleaf框架的语法获取后台数据

最新推荐文章于 2024-03-02 13:19:23 发布

飞鸿先森

最新推荐文章于 2024-03-02 13:19:23 发布

阅读量6.3k

点赞数 1

分类专栏：技术交流经验分享文章标签： springboot thymeleaf thymeleaf在js中使用 thymeleaf抽取公共部分 springboot+thymeleaf

本文链接：https://blog.csdn.net/Feihongxiansen/article/details/88373256

版权

技术交流同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

经验分享

14 篇文章 0 订阅

订阅专栏

一、在springboot项目中，我们常结合thymeleaf模板来开发项目，在HTML标签中输出的语法不做过多介绍，网上一堆一堆的，那么怎么在js中获取到后台通过Model传递过来的数据呢，语法很简单，如以下代码：

/*questionInfo是通过后台传递过来的*/
var answerList = [[${questionInfo.answers}]]

这样我们就能在js中获取到后台传递过来的数据加以使用了，另外，记一下我常用的一些其他常用语法

二、格式化日期

<!-- 其中item.createTime是后台传递过来的数据 -->
<div th:text="${#dates.format(item.createTime, 'yyyy-MM-dd HH:mm:ss')}"></div>

三、获取多级对象值的时候报错，通过加判断后输出来解决，代码如下，注意代码中的“?”

<p th:text="${item?.user?.nickName}"></p>

四、在thymeleaf中分离页面公共部分，如导航栏分离，公共css、js的抽取等

先抽取<head></head>标签的公共部分，代码如下，需要主页，使用thymeleaf语法的页面都需要在<html></html>标签的属性中引入网址“http://www.thymeleaf.org”，如以下代码第二行

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title,links,styles)">

    <meta charset="utf-8"/>
    <title th:replace="${title}">这里是标题</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="address=no"/>

    <link rel="stylesheet" type="text/css" th:href="@{/static/home/plugs/layui/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/home/plugs/bootstrap/css/bootstrap.css}" />
    <script type="text/javascript" th:src="@{/static/home/js/jquery-3.3.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/home/plugs/bootstrap/js/bootstrap.min.js}"></script>

    <!--/* 页面独有的js文件引入 */-->
    <th:block th:replace="${links}" />
    <!--/* 页面独有的css文件引入 */-->
    <th:block th:replace="${styles}" />
</head>
</html>

分离导航栏代码，就把导航栏代码复制出来，单独写一个页面，在外层添加一个html标签，如下

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <!--顶部导航栏-->
    <ul th:fragment="top-menu" id="app" class="layui-nav" lay-filter="" style="text-align: center;margin-bottom: 0;">
        <li class="layui-nav-item"><a th:href="@{/home/index/index}">首页</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">知名师资</a>
            <dl class="layui-nav-child">
                <dd><a href="">知名教师</a></dd>
                <dd><a href="">人气学霸</a></dd>
                <dd><a href="">教师认证</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a th:href="@{/home/index/question}">有问有答</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">资料专区</a>
            <dl class="layui-nav-child">
                <dd><a href="">题目资料</a></dd>
                <dd><a href="">复习资料</a></dd>
                <dd><a href="">杂项资料</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">积分兑换</a></li>
        <li class="layui-nav-item"><a href="">意见反馈</a></li>
        <li class="layui-nav-item"><a th:href="@{/home/index/about}">联系我们</a></li>

        <li class="layui-nav-item" th:if="${session.user} == null"><a th:href="@{/home/index/login}">登录</a></li>
        <li class="layui-nav-item" th:if="${session.user} == null"><a th:href="@{/home/index/register}">注册</a></li>

        <li class="layui-nav-item" th:if="${session.user} != null">
            <a href="javascript:;"><img th:src="@{${session.user.userPhoto}==null?'/static/home/images/user-head/1.jpg':${session.user.userPhoto}}" class="layui-nav-img" th:text="${session.user.userName}"></a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">修改信息</a></dd>
                <dd><a href="javascript:void(0);" id="JsSignOut">退了</a></dd>
            </dl>
        </li>
    </ul>
</html>

分离footer公共底部代码如下

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 底部导航栏 start-->
<footer th:fragment="footer" class="container-fluid" style="margin-top:15px;">
    <div class="row text-center" style="background-color:#424242;color:#E0E0E0;padding:30px;">
        <span class="layui-breadcrumb" lay-separator="|">
          <a th:href="@{/home/index/index}">首页</a>
          <a href="">知名教师</a>
          <a th:href="@{/home/index/question}">有问有答</a>
          <a href="">资料专区</a>
          <a href="">积分兑换</a>
          <a href="">意见反馈</a>
          <a th:href="@{/home/index/about}">联系我们</a>
        </span>
    </div>
    <script th:src="@{/static/home/plugs/layui/layui.js}"></script>
    <script th:src="@{/static/home/js/public.js}"></script>
</footer>
<!-- 底部导航栏end -->

最后，在页面中引入抽取的公共代码

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- 引入head部分代码 ，如果有自定义样式或者css文件或者js文件，在后面的参数中传入标签名称即可，如下示例，没有则不填写-->
<head th:replace="home/public/head::head(~{::title},~{::style},~{::link})">
    <title>解答详情-答题吧</title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/home/plugs/viewer/viewer.css}"/>
    <style>
        .row {
            padding-top: 5px;
            padding-bottom: 10px;
        }

        img {
            width: 30%;
        }
        .img-thumbnail{
            height: 150px;
            width: auto;
        }

        p {
            line-height: 30px;
        }
    </style>
</head>
<body>

<!--引入顶部导航栏-->
<div th:replace="home/public/top-menu::top-menu"></div>

<div id="question_container">
    <!-- 这里是本页面的代码 -->
</div>

<!-- 引入抽取出来的footer部分-->
<footer th:replace="home/public/footer::footer"></footer>

<!-- 这里引入页面独有的js文件 -->
<script th:src="@{/static/home/plugs/vue/vue.js}"></script>
<script th:src="@{/static/home/plugs/viewer/viewer.js}"></script>
<script th:inline="javascript">
    /*这里些页面的js代码*/
</script>
</body>
</html>