09.ajax局部渲染---《Beetl视频课程》

  1. 云栖社区>
  2. 博客>
  3. 正文

09.ajax局部渲染---《Beetl视频课程》

gavinking 2018-12-13 10:28:17 浏览641
展开阅读全文

本期视频实现分类实时获取;

内容简介:使用了局部渲染技术,实现分类的实时获取

一起学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

网友评论

登录后评论
0/500
评论
gavinking
+ 关注