本期視頻實現分類實時獲取;
內容簡介:使用了局部渲染技術,實現分類的實時獲取
一起學beetl目錄:https://my.oschina.net/u/1590490?tab=newest&catalogId=6214598
作者:GK
Beetl滿足了更加流行的方式,研發了ajax局部渲染技術。
後臺處理後返回一個json,瀏覽器端將json數據拆開,拼成一條一條的行數據,然後生成dom節點,追加到表格裏。 作爲另外一種可選技術,beetl支持局部渲染技術,允許後臺處理返回的是一個完成的html片段,這樣,前端瀏覽器可以直接將這個html片段追加到表格裏。在性能測試裏,倆種方式性能差別不大(http://bbs.ibeetl.com/ajax//)
在beetl模板中,使用#ajax 局部命名:{ .... }
包裹起來的代碼,就是ajax需要渲染的局部代碼。
如果一個模板返回正常的渲染整個模板文件,將會忽略這一標記,比如:return "index.html"
如果返回的是 模板名稱#局部命名,Beetl將會只渲染這一小段的代碼。比如return "index.html#局部命名"
舉個例子,在項目中layout.html
模板中,增加了一段ajax標記
<div class="widewrapper main">
<div class="container">
<div class="row">
<div class="col-md-8 blog-main">
${layoutContent}
</div>
<%if(isEmpty(notShow)){%>
<aside class="col-md-4 blog-aside" id="tagsDiv">
<%#ajax tags :{%>
<div class="aside-widget">
<header>
<h3>Tags</h3>
</header>
<div class="body clearfix">
<ul class="tags">
<%for(tag in categorys!){%>
<li><a href="/?category=${tag}">${tag}</a></li>
<%}%>
</ul>
</div>
</div>
<%} }%>
</aside>
</div>
</div>
</div>
大家可以看到有一段使用 #ajax tags{}
包裹起來的代碼
<%#ajax tags :{%>
.....
<%}%>
當controller中直接 return "layout.html"
時,將會渲染整個頁面。
我們在controller中增加一個方法。
@GetMapping("/tags")
public String tags(HttpServletRequest request) {
request.setAttribute("categorys", blogService.listCategory());
return "common/layout.html#tags";
}
告訴beetl模板引擎,只渲染tags中間的代碼。
可以看到我們渲染的代碼爲:
<div class="aside-widget">
<header>
<h3>Tags</h3>
</header>
<div class="body clearfix">
<ul class="tags">
<li><a href="/?category=beetl">beetl</a></li>
<li><a href="/?category=beetlsql">beetlsql</a></li>
<li><a href="/?category=java">java</a></li>
<li><a href="/?category=一起學Beetl">一起學Beetl</a></li>
</ul>
</div>
</div>
僅僅渲染了我們中間這一段代碼,能讓我們更加優雅使用。
我們在前端只要使用js加入這段渲染的html代碼即可。
<script type="text/javascript">
$(function(){
$.get("${ctxPath}/tags",function (data) {
$("#tagsDiv").html(data);
console.info(data);
});
});
</script>
項目git地址:https://gitee.com/gavink/beetl-blog
視頻地址:下載下來會更清晰,視頻比較長,可使用倍速看
百度網盤下載: https://pan.baidu.com/s/1LyxAxlKpVXgVjwSXIbzBuA 提取碼: 68im
在線播放地址:bilibili (可以調節清晰度): https://www.bilibili.com/video/av36278644/?p=9
博客目錄:https://my.oschina.net/u/1590490?tab=newest&catalogId=6214598