公司使用 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>