使用freemarker页面静态化

潇洒

发布于 2019-07-03 11:11:22

2.2K0

发布于 2019-07-03 11:11:22

文章被收录于专栏：石头岛

公司使用 vue + ngixn 前后端分离架构，重构一套新的静态化的门户网站。后台管理系统为动态页面。使用 freemarker 进行页面静态化的处理，生成静态化页在。前后分离的页面，静态图片需要使用 nginx 进行路径转换。UEditor 上传到本地的图片，没有使用文件管理系统，直接存放到服务器本地，需要 nginx 进行路径转换。

使用原理: 1.freemarker 将数据填充入 ftl 模板中，再由 freemarker 生成静态页面 2.vue 获取静态页面进行数据展示

1.工具类

import freemarker.template.Configuration;
import freemarker.template.Template;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

import java.io.*;
import java.util.Map;

/**
 * Title: 工具类
 * Description:
 *
 * @author liukai
 * @date 2018/6/20 上午10:37.
 */
@Component
public class CreateHtmlUtil {

    private static final Logger LOGGER = LoggerFactory.getLogger(CreateHtmlUtil.class);

    @Value("${htmlPath}")
    private String htmlPath;
    @Value("${ftlPath}")
    private String ftlPath;


    /**
     * 通过freemarker生成静态HTML页面
     */
    public  void createHtml(String templateName,String targetFileName,Map<String, Object> map) throws Exception{
        LOGGER.info("生成路径: {}, 模板路径：{}", htmlPath, ftlPath);
        //创建fm的配置
        Configuration config = new Configuration();
        //指定默认编码格式
        config.setDefaultEncoding("UTF-8");
        Template template = null;
        //设置模版文件的路径
        try {
            config.setDirectoryForTemplateLoading(new File(ftlPath));
            //获得模版包
            template = config.getTemplate(templateName);
        } catch (Exception e) {
            LOGGER.info("设置模板包异常：{}" + e.getMessage());
        }

        //定义输出流，注意必须指定编码

        try (FileOutputStream fileInputStream = new FileOutputStream(new File(htmlPath+"/"+targetFileName));
             OutputStreamWriter outputStreamWriter = new OutputStreamWriter(fileInputStream, "UTF-8");
             Writer writer = new BufferedWriter(outputStreamWriter)) {
            template.process(map, writer);
            LOGGER.info("写入html");
        } catch (Exception e) {
            LOGGER.info("生成异常: {}", e.getMessage());
        }
    }

}

2.添加填充数据据

private void generateHtml (Integer CategoryNo, int count, Map<String, Object> pageMap) {
    try {
        String htmlFileName = getHtmlFileName(CategoryNo, count + 1);
        LOGGER.info("html 文件名: {}" , htmlFileName);
        createHtmlUtil.createHtml(NEWS_TEMPLATE, htmlFileName, pageMap);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

3.静态页面

<input type="hidden" id="total" value="${total}"/>
<#if newsPageDatas??>
    <#list newsPageDatas as key>
        <div class="new-item-box clearfix clear">
            <div class="image fl">
                <img src="<#if key.titleUrl??>${key.titleUrl}<#else >../images/news-1.png</#if>" alt="">
            </div>
            <div class="item-content-box">
                <div class="item-content">
                    ${key.title!''}
                </div>
                <div class="item-time-arrow clearfix">
                    <div class="item-time">
                        <div class="item-time-day">
                            <#if key.publishDate??>
                                ${key.publishDate?string("dd")!}
                            </#if>
                        </div>
                        <div class="item-time-year">
                            <#if key.publishDate??>
                                ${key.publishDate?string("yyyy.MM")!}
                            </#if>
                        </div>
                    </div>
                </div>
            </div>
            <div class="arrow">
                <a href="../page/news_details_${key.id}.html">
                    <img src="../images/jiantou.png" alt="">
                </a >
            </div>
        </div>
    </#list>
</#if>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-10-06，如有侵权请联系 cloudcommunity@tencent.com 删除

nginx