在JavaScript中使⽤Thymeleaf框架的语法获取后台数据
⼀、在springboot项⽬中，我们常结合thymeleaf模板来开发项⽬，在HTML标签中输出的语法不做过多介绍，⽹上⼀堆⼀堆的，那么怎么在js中获取到后台通过Model传递过来的数据呢，语法很简单，如以下代码：
/*questionInfo是通过后台传递过来的*/
var answerList = [[${questionInfo.answers}]]
这样我们就能在js中获取到后台传递过来的数据加以使⽤了，另外，记⼀下我常⽤的⼀些其他常⽤语法
⼆、格式化⽇期
<!-- 其中ateTime是后台传递过来的数据 -->
<div th:text="${#dates.ateTime, 'yyyy-MM-dd HH:mm:ss')}"></div>
三、获取多级对象值的时候报错，通过加判断后输出来解决，代码如下，注意代码中的“?”
<p th:text="${item?.user?.nickName}"></p>
四、在thymeleaf中分离页⾯公共部分，如导航栏分离，公共css、js的抽取等
<!DOCTYPE html>
<html xmlns:th="">
<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="">
<!--顶部导航栏-->
<ul th:fragment="top-menu" id="app" class="layui-nav" lay-filter="" >
<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>
jquery框架定义<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-na <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="">
<!-- 底部导航栏 start-->
<footer th:fragment="footer" class="container-fluid" >
<div class="row text-center" >
<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="">
<!-- 引⼊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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论