基于jeesite的cms系统（四）：使用Beetl模版引擎在后端渲染数据

一、Beetl简介

1. 什么是Beetl

Beetl目前版本是2.9.3,相对于其他java模板引擎，具有功能齐全，语法直观,性能超高，以及编写的模板容易维护等特点。使得开发和维护模板有很好的体验。是新一代的模板引擎。总得来说，它的特性如下：

• 功能完备：作为主流模板引擎，Beetl具有相当多的功能和其他模板引擎不具备的功能。适用于各种应用场景，从对响应速度有很高要求的大网站到功能繁多的CMS管理系统都适合。Beetl本身还具有很多独特功能来完成模板编写和维护，这是其他模板引擎所不具有的。
• 非常简单：类似Javascript语法和习俗，只要半小时就能通过半学半猜完全掌握用法。拒绝其他模板引擎那种非人性化的语法和习俗。同时也能支持html 标签，使得开发CMS系统比较容易
• 超高的性能：Beetl 远超过主流java模板引擎性能(引擎性能5-6倍于FreeMarker，2倍于JSP。参考附录），而且消耗较低的CPU。
• 易于整合：Beetl能很容易的与各种web框架整合，如Spring MVC，JFinal，Struts，Nutz，Jodd，Servlet等。
• 支持模板单独开发和测试，即在MVC架构中，即使没有M和C部分，也能开发和测试模板。
• 扩展和个性化：Beetl支持自定义方法，格式化函数，虚拟属性，标签，和HTML标签. 同时Beetl也支持自定义占位符和控制语句起始符号也支持使用者完全可以打造适合自己的工具包。
• 可以扩展为脚本引擎，规则引擎，能定制引擎从而实现高级功能。

2.文档（http://ibeetl.com/guide/）

 

二、ArticleController返回带有beetl标签的html视图用来解析“articles”属性

/**
     * 首页内容（获取top15文章）
     * @param
     * @return
     *//*
    @GetMapping(value = "/index")
    public String index(Model model) throws Exception {
        List<JsCmsArticlesEntity> articles = this.frontDeskService.getTop15Articles();
        model.addAttribute("articles", articles);
        return "templates/index";
    }

 

三、index.html

1、<% layout('default.html'){ }%>是页面公共部分，可以实现多个html公用

2、<% for(article in articles){ %> 通过for循环遍历aticles集合，然后用“.”操作${article.createAt}取值

<% layout('default.html'){ %>
<div class="main">

    <div class="article__wrap" id="article__">
    <%
    //ajax片段开始
    #ajax nextTable: {
    %>

    <% for(article in articles){ %>
    <article id="article" class="article__item fn-flex">
        <!--<div class="article__meta article__meta&#45;&#45;0">

            <div>
                ${article.createAt}
            </div>
            <div>
                <a href="electron-bnd2-b3id=H9oxzSym.html">
                    ${article.viewCount}浏览
                </a>
            </div>

            <div>
                <a href="electron-bnd2-b3id=H9oxzSym.html#pipeComments">
                    ${article.commentCount}评论
                </a>
            </div>


        </div>-->
        <div class="fn-flex-1 article__main">
            <h2 class="article__title">

                <a rel="bookmark" href="/articles/${article.id!}">
                    ${article.title}
                </a>
            </h2>

            <section
                    data-link="electron-bnd2-b3id=H9oxzSym.html"
                    class="pipe-content__reset fn-flex-1"
                    data-author="Vanessa">
                ${article.content}
            </section>

            <div>

                <a class="tag" rel="tag" href="tags/bnd2-b3id=H9oxzSym.html">${article.tags}</a>

            </div>
        </div>
    </article>
    <% } %>

    <%
    //ajax片段结尾
    }
    %>
</div>

    <div class="ft-center">
    <nav class="pagination">

        <a class="pagination__item" id="loadMore"
           href="javascript:void(0);">
            加载更多
        </a>
        
    </nav>
</div>

</div>

<% } %>