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

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

1.工具类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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.添加填充数据据

1
2
3
4
5
6
7
8
9
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.静态页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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>