前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用freemarker页面静态化

使用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.工具类

代码语言:javascript
复制
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.添加填充数据据

代码语言:javascript
复制
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.静态页面

代码语言:javascript
复制
<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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档