springboot 前臺Html嵌入另一html問題
阿新 • • 發佈:2018-12-10
最近學習springboot相關知識時,用了layui的社群模板,該模板多個html頁面中會用到相同的頭,所以我把相同的頭提取出來放在了一個head.html中了,想要通過<#include file=”“>來引入這個head.html,可是一直無法引入
解決方法:
head.html檔案內容如下
<div class="fly-header layui-bg-black">
<div class="layui-container">
<a class="fly-logo" href="/">
<img src="/images/logo.png" alt="layui">
</a>
<ul class="layui-nav fly-nav layui-hide-xs">
<li class="layui-nav-item layui-this">
<a href="/"><i class="iconfont icon-jiaoliu"></i>交流</a>
</li>
<li class="layui-nav-item">
<a href="../../../resources/templates/case"><i class="iconfont icon-iconmingxinganli"></i>案例</a>
</li>
<li class="layui-nav-item">
<a href="http://www.layui.com/" target="_blank"><i class ="iconfont icon-ui"></i>框架 </span></a>
</li>
</ul>
<ul class="layui-nav fly-nav-user">
<!-- 未登入的狀態 -->
<li class="layui-nav-item">
<a class="iconfont icon-touxiang layui-hide-xs" href="user/regisiter"></a>
</li>
<li class="layui-nav-item">
<a href="user/login">登入</a>
</li>
<li class="layui-nav-item">
<a href="user/regisiter">註冊</a>
</li>
<li class="layui-nav-item layui-hide-xs">
<a href="/app/qq/" onclick="layer.msg('正在通過QQ登入', {icon:16, shade: 0.1, time:0})" title="QQ登入" class="iconfont icon-qq"></a>
</li>
<li class="layui-nav-item layui-hide-xs">
<a href="/app/weibo/" onclick="layer.msg('正在通過微博登入', {icon:16, shade: 0.1, time:0})" title="微博登入" class="iconfont icon-weibo"></a>
</li>
<!-- 登入後的狀態 -->
<!--
<li class="layui-nav-item">
<a class="fly-nav-avatar" href="javascript:;">
<cite class="layui-hide-xs">賢心</cite>
<i class="iconfont icon-renzheng layui-hide-xs" title="認證資訊:layui 作者"></i>
<i class="layui-badge fly-badge-vip layui-hide-xs">VIP3</i>
<img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">
</a>
<dl class="layui-nav-child">
<dd><a href="user/set"><i class="layui-icon"></i>基本設定</a></dd>
<dd><a href="user/message"><i class="iconfont icon-tongzhi" style="top: 4px;"></i>我的訊息</a></dd>
<dd><a href="user/home"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;"></i>我的主頁</a></dd>
<hr style="margin: 5px 0;">
<dd><a href="/user/logout/" style="text-align: center;">退出</a></dd>
</dl>
</li>
-->
</ul>
</div>
</div>
<div class="fly-panel fly-column">
<div class="layui-container">
<ul class="layui-clear">
<li class="layui-hide-xs layui-this"><a href="/page/index">首頁</a></li>
<li><a href="question">提問</a></li>
<li><a href="question">分享<span class="layui-badge-dot"></span></a></li>
<li><a href="question">討論</a></li>
<li><a href="question">建議</a></li>
<li><a href="question">公告</a></li>
<li><a href="question">動態</a></li>
<li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><span class="fly-mid"></span></li>
<!-- 使用者登入後顯示 -->
<li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><a href="user/index">我發表的貼</a></li>
<li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><a href="user/index/collection">我收藏的貼</a></li>
</ul>
<div class="fly-column-right layui-hide-xs">
<span class="fly-search"><i class="layui-icon"></i></span>
<a href="question/add" class="layui-btn">發表新帖</a>
</div>
<div class="layui-hide-sm layui-show-xs-block" style="margin-top: -10px; padding-bottom: 10px; text-align: center;">
<a href="question/add" class="layui-btn">發表新帖</a>
</div>
</div>
</div>
這裡直接是div,不需要再寫head、body了
index.html引入head.html
<body>
<div style="width:100%;height:60px" id="head"></div>
...
直接在body中定義了一個div來放置head.html,然後通過jQuery將相關內容放入
<script type="text/javascript">
$(document).ready(function() {
$("#head").load("head");
});
</script>
到了這步之後發現還是不可以,介面顯示如下
然後F12發現控制檯有報錯,內容如下
原來這是因為通過load方法載入head的時候,會經過後臺控制器去查詢這個head地址,所有我在後臺Controller中加入瞭如下內容
@RequestMapping("/head")
public String head(Map<String,Object> map){
List<User> users = usermapper.selectList(null);
log.info("------------>head.html------------>"+new Date());
return "head";
}
訪問後臺是,經過控制器找到對應的head.html即可
再次執行專案,發現問題解決,效果如下
而在後臺的控制檯中出現瞭如下資訊
這裡我嘗試了很多次html的include標籤,head.html檔案還是文中提供的檔案,但是始終無法顯示head.html,只好通過這個方法取巧暫時解決了該問題
各位大佬有什麼更好的方法解決該問題,歡迎留言討論