基於jeesite的cms系統（四）：使用Beetl模版引擎在後端渲染數據

1、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/）

 

2、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";
    }

 

3、index.html

一、<% layout('default.html'){ }%>是頁面公共部分，能夠實現多個html公用

二、<% 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>

<% } %>