第一次接触静态化处理页面,碰到关于分页的静态化纠结了很长时间。
查过好多资料,有说前几页可以做出静态页的,后面的则还是需要查数据库。
经过各种资料用了两种方式做分页静态化处理的
方法一:根据模板一次性加载所有的数据到静态页面中

后台代码:HtmlNewsServiceImpl.java

  ExecuteResult<Boolean> result = new ExecuteResult<Boolean>();
        
        WebsiteNewsDTO websiteNewsDTO = new WebsiteNewsDTO();
        //仅显示未删除的
        websiteNewsDTO.setDelFlag(EcmCommonEnums.DeleteEnum.NOT_DELETED.getFlag());
        // 查询所有未删除的新闻
        ExecuteResult<DataGrid<WebsiteNewsDTO>> executeResult =    websiteNewsService.queryWebsiteNewList(websiteNewsDTO, null);
        if ( !executeResult.isSuccess() ) {
            LOG.error("获取新闻列表失败");
            result.addErrorMessage("获取新闻列表失败");
            return result;
        }
        List<WebsiteNewsDTO> dtoList = executeResult.getResult().getRows();
        
        if(CollectionUtils.isEmpty(dtoList) || dtoList.size() == 0){
            LOG.error("获取新闻列表无数据");
            result.addErrorMessage("获取新闻列表无数据");
            return result;
        }
        
        int pageSize = 10;
        int totalNumber = dtoList.size();
        //总页数
        int page =  (totalNumber%pageSize == 0) ? (totalNumber/pageSize) : (totalNumber/pageSize + 1);
        
        HtmlEntity htmlEntity = new HtmlEntity();
        Map<String, Object> dynamicParameters = new HashMap<String, Object>();
        htmlEntity.setHtmlFilePath(HTML_NEWS_LIST); /** 新闻中心html绝对路径*/
        htmlEntity.setTemplateName(TEMPLATE_NEWS_LIST);/** 新闻中心模板文件名 */
        dynamicParameters.put(KEY_NEWS_PAGE_TOTAL, page);
        dynamicParameters.put(KEY_NEWS_DATA_LIST, dtoList);
        try {
            htmlBaseService.toHtml(htmlEntity , dynamicParameters );
        } catch (Exception e) {
            LOG.error("新闻中心静态化失败", e);
            result.addErrorMessage("新闻中心静态化失败");
        }
        return result;
    }

模板:news.ftl
    <body>
        <!--header start-->
        <#include "./common/header.ftl">
        <!--header end-->
        <!--container start-->
            <div class="container mar_t20">
                <div class="cont_w">
                    <div class="part_tit">新闻中心</div>
                    <ul class="part_news cl">
                        <#if newsList?? && newsList?size gt 0>
                            <#list newsList as entity>
                            <li class="parts_text">
                                <a href="新闻详情页.html">
                                    <img src="pic/news_1.jpg">
                                    <div class="news_botm_text">
                                        <h2>${entity.title}</h2>
                                        <div>${entity.brief}...</div>
                                    </div>
                                </a>
                            </li>
                            </#list>
                        </#if>
                    </ul>
                    <!--分页 start-->
                    <div class="mar_t10 cl">
                        <div id="data">
                        </div>
                        <div class="search_box fr">
                            共<span></span>页
                        </div>
                        <div class="pagination" id="page">
                        </div>
                    </div>
                    <!--分页 end-->
                    
                </div>
            </div>
        <!--container end-->
        <!--footer start-->
        <#include "./common/footer.ftl">
        <!--footer end-->
        <script type="text/javascript">
        $(function(){
            //初始化分页插件
            var initPagination = function() {
                //获取总页数
                var num_entries = '${newsPageTotal}';
                // 创建分页
                $("#page").pagination(num_entries, {
                    num_edge_entries: 1, //边缘页数
                    num_display_entries: 4, //主体页数
                    callback: GetDataList,
                    first_text: false, //是否显示首页按钮,默认为true;
                    last_text: false, //是否显示尾页按钮,默认为true;
                    items_per_page: 1, //每页显示1项
                    toPage: false //是否显示跳转到第几页,默认是true;
                });
                $('.search_box span').text(num_entries);
            }();
            
          //回调函数 AJAX异步从后台获取数据    page_index:当前pageIndex
           function GetDataList(page_index, jq) {
              $(".part_news").children('li').hide();
                $(".part_news").children('li').each(function(index,item){
                  if(index >= page_index*15 && index <= page_index*15+15){
                      $(item).show();
                  }
                });
            }
        })




方法二:根据两个模板(一个用户展示模板,一个用户分页列表)生产一个用户展示静态页面和多个分页列表页面

后台代码:HtmlPageServiceImpl.java
public ExecuteResult<Boolean> newsList() {
        ExecuteResult<Boolean> result = new ExecuteResult<Boolean>();
        WebsiteNewsDTO websiteNewsDTO = new WebsiteNewsDTO();
        //仅显示未删除的
        websiteNewsDTO.setDelFlag(EcmCommonEnums.DeleteEnum.NOT_DELETED.getFlag());
        // 查询所有未删除的新闻
        ExecuteResult<DataGrid<WebsiteNewsDTO>> executeResult = websiteNewsService.queryWebsiteNewList(websiteNewsDTO, null);
        if ( !executeResult.isSuccess() ) {
            LOG.error("获取新闻列表失败");
            result.addErrorMessage("获取新闻列表失败");
            return result;
        }
        List<WebsiteNewsDTO> dtoList = executeResult.getResult().getRows();
        if(CollectionUtils.isEmpty(dtoList) || dtoList.size() == 0){
            LOG.error("获取新闻列表无数据");
            result.addErrorMessage("获取新闻列表无数据");
            return result;
        }
        int pageSize = 12;
        int totalNumber = dtoList.size();
        //总页数
        int page =  (totalNumber%pageSize == 0) ? (totalNumber/pageSize) : (totalNumber/pageSize + 1);
        int start = 0;
        int end = start + pageSize;
        for(int i=0;i < page;i++){
            start = i*pageSize;
            end = start + pageSize;
            HtmlEntity htmlEntity = new HtmlEntity();
            Map<String, Object> dynamicParameters = new HashMap<String, Object>();
            htmlEntity.setHtmlFilePath(HTML_NEWS_LIST_DIR+"/"+(i+1)+".html");
            htmlEntity.setTemplateName(TEMPLATE_NEWS_LIST);
            dynamicParameters.put(KEY_NEWS_PAGE_TOTAL, page);
            if(totalNumber < end){
                end = totalNumber;
            }
            dynamicParameters.put(KEY_NEWS_DATA_LIST, dtoList.subList(start, end));
            try {
                htmlBaseService.toHtml(htmlEntity , dynamicParameters );
            } catch (Exception e) {
                LOG.error("新闻中心静态化失败", e);
                result.addErrorMessage("新闻中心静态化失败");
            }
        }
        if(result.isSuccess()){
            HtmlEntity htmlEntity = new HtmlEntity();
            Map<String, Object> dynamicParameters = new HashMap<String, Object>();
            htmlEntity.setHtmlFilePath(HTML_NEWS_LIST_HOME);//主页面模板
            htmlEntity.setTemplateName(TEMPLATE_NEWS_LIST_HOME);//主页面静态页
            dynamicParameters.put(KEY_NEWS_PAGE_TOTAL, page);
             htmlBaseService.toHtml(htmlEntity , dynamicParameters );
        }
        return result;
    }

模板1:pageHome.ftl

<!--header start-->
        <#include "./common/header.ftl">
        <!--header end-->
        <!--container start-->
            <div class="container mar_t20">
                <div class="cont_w">
                    <div class="part_tit">新闻中心</div>
                    <ul id="pageList" class="part_news cl">
                    </ul>
                    <!--分页 start-->
                    <div class="mar_t10 cl">
                        <div id="data">
                        </div>
                        <div class="search_box fr">
                            共<span></span>页
                        </div>
                        <div class="pagination" id="page">
                        </div>
                    </div>
                    <!--分页 end-->
                    
                </div>
            </div>
        <!--container end-->
        <!--footer start-->
        <#include "./common/footer.ftl">
        <!--footer end-->
        <script type="text/javascript">
        $(function(){
            //初始化分页插件
            var initPagination = function() {
                //获取总页数
                var num_entries = '${newsPageTotal}';
                // 创建分页
                $("#page").pagination(num_entries, {
                    num_edge_entries: 1, //边缘页数
                    num_display_entries: 4, //主体页数
                    callback: GetDataList,
                    first_text: false, //是否显示首页按钮,默认为true;
                    last_text: false, //是否显示尾页按钮,默认为true;
                    items_per_page: 1, //每页显示1项
                    toPage: false //是否显示跳转到第几页,默认是true;
                });
                $('.search_box span').text(num_entries);
            }();
            
          //回调函数 AJAX异步从后台获取数据    page_index:当前pageIndex
           function GetDataList(page_index, jq) {
              $.post((page_index+1)+'.html', {}, function (data, textStatus) {
                $("#pageList").html(data);
             });
            }
        })

模板2:page.ftl  用户创建多个页面列表的静态页面
<#if newsList?? && newsList?size gt 0>
    <#list newsList as entity>
        <li class="parts_text">
            <a href="新闻详情页.html">
                <img src="pic/news_1.jpg">
                <div class="news_botm_text">
                    <h2>${entity.title}</h2>
                    <div>${entity.brief}...</div>
                </div>
            </a>
        </li>
    </#list>
</#if>