哈喽,最近的项目中正好在做一个发布新闻的功能,每个新闻可能要有不同的防蚊页面喽~
正好今天就来给大家分享FreeMarker使用模板生成HTML静态页面的技术
按照步骤来做一次试试效果吧~
前置准备
1.建立一个新的Maven项目
这个你肯定会搞吧
2.通过maven引入Freemarker
在pom.xml中加入以下语句
<dependency>
<groupId>org.freemarker</groupId>
<artifactId>freemarker</artifactId>
<version>2.3.23</version>
</dependency>
以下是我的pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.demo</groupId>
<artifactId>FreeMarkerDemo</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>FreeMarkerDemo Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.freemarker</groupId>
<artifactId>freemarker</artifactId>
<version>2.3.23</version>
</dependency>
</dependencies>
<build>
<finalName>FreeMarkerDemo</finalName>
</build></project>
正式开始
1.我来先来新建一个功能类FreemarkerMain
public class FreemarkerMain {
private static final Configuration cfg;
static {
cfg = new Configuration(Configuration.VERSION_2_3_23);
try { // 设置模板路径
cfg.setDirectoryForTemplateLoading(new File("E:\\checkout\\FreeMarkerDemo\\src\\main\\webapp\\mode")); // 设置默认编码
cfg.setDefaultEncoding("utf-8"); //若发生错误,HTML_DEBUG_HANDLER会生成错误信息到生成页面;RETHROW_HANDLER错误信息会输出到控制台
cfg.setTemplateExceptionHandler(TemplateExceptionHandler.RETHROW_HANDLER);
} catch (IOException e) {
e.printStackTrace();
}
}
}
我在代码中备注已经写的比较清楚了
我们通过setDirectoryForTemplateLoading设置模板的存放路径
通过setDefaultEncoding设置编码格式,并通过setTemplateExceptionHandler配置失败时的错误输出格式
TemplateExceptionHandler.RETHROW_HANDLER错误信息会输出在控制台
TemplateExceptionHandler.HTML_DEBUG_HANDLER错误信息会生成到页面中
2.实现生成页面方法
方法写在FreemarkerMain 的static{}之后
先放代码
/** * @param modeName 模板名称 * @param targetFileName 生成后的HTML名称 * @param params 传入模板的参数 * @Author: IT实战联盟Tony * @Date: 15:57 2018/2/9 * @Description:生成静态页面 */public static void createHtmlByMode(String modeName, String targetFileName, Map<String, Object> params) throws Exception {
Writer out = null; //找到服务器缓存目录,可以自己指定目录
String folder = System.getProperty("java.io.tmpdir"); //通过匹配路径格式拼接完整生成路径
String outFile = folder + File.separator + targetFileName; try {
File file = new File(outFile); //生成空HTML文件
if (!file.exists()) {
file.createNewFile();
} // 创建模版对象
Template template = cfg.getTemplate(modeName); // 设置输出流
out = new OutputStreamWriter(new FileOutputStream(file), "UTF-8");// 设置编码 UTF-8
// 模版数据插入参数,通过输出流插入到HTML中
template.process(params, out);
} catch (Exception e) {
e.printStackTrace();
} finally { if (null != out) { try {
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
我们来配置生成后的缓存目录,因为我的功能考虑了之后要通过FTP上传,
所以才用了缓存目录,用的时候可以写成自己的指定路径。
因为我是直接RUN的main方法,所以生成缓存目录是在C:\Users\lenovo\AppData\Local\Temp,
如果是tomcat服务器启动的话应该是在tomcat\temp目录。
3.建立main方法来模拟调用
public static void main(String[] args) throws Exception { Map<String, Object> params = new HashMap<String, Object>();
params.put("title", "IT实战联盟");
params.put("author", "tony");
params.put("publishTime", "2018-02-09");
params.put("seeNum", "888");
params.put("seeNum", "888");
params.put("imgPath", "http://upload-images.jianshu.io/upload_images/10298880-f713c678f63be447.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240");
params.put("content", "扫码关注IT实战联盟,IT实战联盟是集产品、UI设计、前后端、架构、大数据和AI人工智能等为一体的实战交流服务平台!联盟嘉宾都为各互联网公司项目的核心成员,联盟主旨是“让实战更简单”,欢迎来撩~~~");
FreemarkerMain.createHtmlByMode("infopub.ftl", "test.html", params);
}
infopub.ftl 模板文件名
test.html 生成HTML的名字
params是我用来存储模板中动态字段的集合,然后调用我们上边写的实现方法
最后放出我的模板代码
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name='viewport' content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>Freemarker生成静态页面Demo展示</title>
<style type="text/css"> article {
padding: 20px; }
address {
font-style: normal;
text-align: right;
width: 100%;
color: #999999; }
.author {
float: left; }
.seeIcon {
padding: 0px 12px;
background: url(imgs/see.png) no-repeat; }
.seeNum {
width: 100%; }
.img {
width: 380px;
height: 380px; }
</style></head><body><article>
<h2>${title}</h2>
<address>
<span class="author">${author} ${publishTime}</span>
<span class="seeIcon"></span>
<span class="seeNum">${seeNum}</span>
</address>
<img src="${imgPath}" class="img"/>
<p>${content}</p>
</article>
</body>
</html>
现在执行我们的main方法来执行,就可以在自己的目录下找到生成的HTML静态文件喽,赶紧尝试一下吧!
更多精彩内容请关注“IT实战联盟”公众号哦~~~
注意:本文归作者所有,未经作者允许,不得转载