页面静态化技术Freemarker技术的介绍及使用实例.
FreeMarker简介
FreeMarker原理
FreeMarker是一个基 于Java的开发包和类库的一种将模板和数据进行整合并输出文本的通用工具，FreeMarker实现页面静态化的原理是：将页面中所需要的样式写入到 FreeMarker模板文件中，然后将页面所需要的数据进行动态绑定并放入到Map中，然后通过FreeMarker的模板解析类process()方 法完成静态页面的生成。其工作原理如图所示。
模板 + 数据模型 = 输出
示例演示FreeMarker
先看一下Demo项目的整体结构:
上面我们已经说了, 模板 + 数据模型 = 输出, 那么我们就一个个看模板和数据模型是什么样子的, 以及最后的输出是什么样子的.
注: 这里将省略freemarker的语法, 因为很多都是类似EL表达式的, 这里只提供几种情况的讲解, 其中包括: list, map, list和map混合
FMDemo.java:
public class FMDemo {
//Freemarker
public static void main(String[] args) throws Exception {
Configuration conf = new Configuration();
//模板+数据模型 = 输出
//ftl: freemarker template
//第一步: 读取html模板
String dir = "C:\\workspace\\freemarker\\ftl\\";
conf.setDirectoryForTemplateLoading(new File(dir));
Template template = conf.getTemplate("freemarker.html");
//第二步: 加载数据模型
Map root = new HashMap();
root.put("world", "世界你好");
//List集合
List<String> persons = new ArrayList<String>();
persons.add("范冰冰");
persons.add("李冰冰");
persons.add("何炅");
root.put("persons", persons);
//Map集合
Map map = new HashMap();
map.put("fbb", "范冰冰");
map.put("lbb", "李冰冰");
root.put("map", map);
//list和map混合
List<Map> maps = new ArrayList<Map>();
Map pms1 = new HashMap();
pms1.put("id1", "范冰冰");
pms1.put("id2", "李冰冰");
Map pms2 = new HashMap();
pms2.put("id1", "曾志伟");
pms2.put("id2", "何炅");
maps.add(pms1);
maps.add(pms2);
root.put("maps", maps);
Writer out = new FileWriter(new File(dir + "hello.html"));
template.process(root, out);
System.out.println("生成完成");
}
}freemarker.html: 模板文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
${world}
<br/>
<#list persons as person>
<#if person_index == 2>
${person}---红色
<#else>
${person}---绿色
</#if>
</#list><br/>
<#list map?keys as key>
${map[key]}
</#list>
${map.fbb}/${map.lbb}<br/>
<#list maps as map>
<#list map?keys as key>
${map[key]}
</#list>
</#list>
<#list maps as map>
${map.id1}///${map.id2}
</#list>
</body>
</html>执行FMDemo.java中的Main方法, 这会生成:
hello.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
世界你好
<br/>
范冰冰---绿色
李冰冰---绿色
何炅---红色
<br/>
李冰冰
范冰冰
范冰冰/李冰冰<br/>
李冰冰
范冰冰
何炅
曾志伟
范冰冰///李冰冰
曾志伟///何炅
</body>
</html>静态化页面在项目中的使用
这里就来说下静态化页面在项目中的使用情况, 现在只是给商品详情页做了静态化处理.
前面关于ActiveMQ的文章已经说过, 当一个商品上架的时候, 通过发送消息来通知babasport-cms 来将对应的页面静态化.
在这里我们只写接收消息的方法, 首先来看看babasport-cms的结构图:
CustomMessageListener.java:接收MQ中的消息
public class CustomMessageListener implements MessageListener{
@Autowired
private StaticPageService staticPageService;
@Autowired
private CMSService cmsService;
@Override
public void onMessage(Message message) {
//先将接收到的消息强转为ActiveMQ类型的消息
//因为在消息发送方那边传递的是Text类型的消息对象, 所以需要转成ActiveMQTextMessage
ActiveMQTextMessage amtm = (ActiveMQTextMessage)message;
try {
String id = amtm.getText();
System.out.println("CMS接收到的ID:"+id);
Map<String, Object> root = new HashMap<String, Object>();
Product product = cmsService.selectProductById(Long.parseLong(id));
List<Sku> skus = cmsService.selectSkuListByProductIdWithStock(Long.parseLong(id));
//去掉重复的颜色
Set<Color> colors = new HashSet<Color>();
for (Sku sku : skus) {
colors.add(sku.getColor());
}
root.put("colors", colors);
root.put("product", product);
root.put("skus", skus);
staticPageService.index(root, id);
} catch (JMSException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}StaticPageServiceImpl.java:
public class StaticPageServiceImpl implements StaticPageService, ServletContextAware{
//SpringMvc 管理 conf
private Configuration conf;
public void setFreeMarkerConfig(FreeMarkerConfig freeMarkerConfig) {
this.conf = freeMarkerConfig.getConfiguration();
}
//静态化页面的方法
public void index(Map<String, Object> root, String id){
//输出目录: 通过getPath方法获取的是绝对路径
String path = getPath("/html/product/" + id +".html");
File f = new File(path);
File parentFile = f.getParentFile();
if(!parentFile.exists()){
parentFile.mkdirs();
}
//spring中已经设置了模板路径:<property name="templateLoaderPath" value="/WEB-INF/ftl/" />
Writer out = null;
try {
//读
Template template = conf.getTemplate("product.html");
//设置输出的位置
//写
out = new OutputStreamWriter(new FileOutputStream(f), "UTF-8");
template.process(root, out);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
if (out != null)
{
try {
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}
//获取webapp下的html文件夹所在的位置
//将相对路径转换为绝对路径
public String getPath(String path){
return servletContext.getRealPath(path);
}
private ServletContext servletContext;
@Override
public void setServletContext(ServletContext servletContext) {
this.servletContext = servletContext;
}
}使用Spring管理Freemarker配置文件:
<!-- 配置freemarker 实现类 -->
<bean class="cn.itcast.core.service.StaticPageServiceImpl">
<property name="freeMarkerConfig">
<bean class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">
<!-- 设置模板所在目录或文件夹的位置, 相对路径 -->
<property name="templateLoaderPath" value="/WEB-INF/ftl/" />
<!-- 设置默认编码集 -->
<property name="defaultEncoding" value="UTF-8"></property>
</bean>
</property>
</bean>模板页面: product.html 中的改动:
引入其他页面:
<#include “commons/header.html” />
循环遍历colors:
<div class="dd" id="colors">
<#list colors as color>
<div class="item" onclick="colorToRed(this,'${color.id}')">
<b></b>
<a href="javascript:;" title="${color.name }" >
<img data-img="1"
src="/images/53f44cc2N0b714cb2_002.jpg"
alt="灰色三件套" height="25" width="25"><i>${color.name }</i></a>
</div>
</#list>
</div>循环遍历imgUrls, 并且使用if..else 进行判断:
<div class="spec-items">
<ul class="lh">
<#list product.imgUrls as pic>
<#if pic_index == 0>
<li><img data-img="1" class="img-hover"
alt="${product.name}" src="${pic}" width="50" height="50"></li>
<#else>
<li><img data-img="1" alt="${product.name}" src="${pic}"
width="50" height="50" ></li>
</#if>
</#list>
</ul>
</div>其他的照常使用EL表达式, 然后生成 id.html的静态化页面, 查看访问后的页面:
