1.FreeMarker的作用:
FreeMarker是一款用Java语言编写的模板引擎,用它可以通过模板和要改变的数据来生成输出文本(例如HTML网页,配置文件,源代码等),作为用来实现网页静态化技术的一种手段。FreeMarker的使用率大大超过其他一些技术。对于系统中频繁使用数据库进行查询但是内容更新很小的应用,都可以用FreeMarker将网页静态化,这样就避免了大量的数据库访问请求,从而提高网站的性能。
2.网页静态化的应用场景
(1)新闻门户网站的文章类型频道一般都用到了网页静态化技术。点击新闻 直接会跳到静态化的页面。
(2)电商网站的商品详情页也十分常用,我们在存储商品的时候会生成静态化页面,点击商品详情,会直接跳到生成的商品详情的静态化页面。
(3)网页静态化技术可以结合Nginx这种高性能web服务器来提高并发访问量。
3.网页静态化技术与缓存技术的比较
共同点:都可以减小数据库的访问压力。
区别:
(1)缓存技术适用于小规模的数据。以及一些经常变动的数据。
(2)网页静态化技术适用于大规模但是变化不太频繁的数据。
4.怎么使用FreeMarker
-
在spring配置文件中 编写 freeMarker的配置
<bean id="freemarkerConfig" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer"> <!--指定模板文件所在目录--> <property name="templateLoaderPath" value="/WEB-INF/ftl/" /> <!--指定字符集--> <property name="defaultEncoding" value="UTF-8" /> </bean> <!--加载属性文件,后期在java代码中会使用到属性文件中定义的key和value--> <context:property-placeholder location="classpath:freemarker.properties"/>
-
FreeMarker的输出路径最好也写成配置文件 方便修
[ freemarker.properties ]
out_put_path=E:/program/IdeaProject/health_parent/health_mobile/src/main/webapp/pages
-
编写Freemarker的配置文件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../img/asset-favico.ico"> <title>预约</title> <link rel="stylesheet" href="../css/page-health-order.css" /> </head> <body data-spy="scroll" data-target="#myNavbar" data-offset="150"> <div class="app" id="app"> <!-- 页面头部 --> <div class="top-header"> <span class="f-left"><i class="icon-back" onclick="history.go(-1)"></i></span> <span class="center">传智健康</span> <span class="f-right"><i class="icon-more"></i></span> </div> <!-- 页面内容 --> <div class="contentBox"> <div class="list-column1"> <ul class="list"> <#list setmealList as setmeal> <li class="list-item"> <a class="link-page" href="setmeal_detail_${setmeal.id}.html"> <img class="img-object f-left" src="http://qufneerla.hn-bkt.clouddn.com/${setmeal.img}" alt=""> <div class="item-body"> <h4 class="ellipsis item-title">${setmeal.name}</h4> <p class="ellipsis-more item-desc">${setmeal.remark}</p> <p class="item-keywords"> <span> <#if setmeal.sex == '0'> 性别不限 <#else> <#if setmeal.sex == '1'> 男 <#else> 女 </#if> </#if> </span> <span>${setmeal.age}</span> </p> </div> </a> </li> </#list> </ul> </div> </div> </div> <!-- 页面 css js --> <script src="../plugins/vue/vue.js"></script> <script src="../plugins/vue/axios-0.18.0.js"></script> </body>
- 前端页面大致一样 需要插入数据的位置用 ${} 为变量的渲染显示
- 如: ${setmeal.name} setmeal是一个java类
- <>为定义等操作符的定义
- 如:
switch
```xml
<#switch value>
<#case refValue1>
<#break>
<#case refValue2>
<#break>
<#case refValueN>
<#break>
<#default>
</#switch>
- <#assign mail = “jsmith@acme.com”> 定义变量
//当添加套餐后需要重新生成静态页面(套餐列表页面、套餐详情页面)
generateMobileStaticHtml();
//生成当前方法所需的静态页面
public void generateMobileStaticHtml(){
//在生成静态页面之前需要查询数据
List<Setmeal> list = setmealDao.findAll();
//需要生成套餐列表静态页面
generateMobileSetmealListHtml(list);
//需要生成套餐详情静态页面
generateMobileSetmealDetailHtml(list);
}
//生成套餐列**加粗样式**表静态页面
public void generateMobileSetmealListHtml(List<Setmeal> list){
Map map = new HashMap();
//为模板提供数据,用于生成静态页面
map.put("setmealList",list);
generteHtml("mobile_setmeal.ftl","m_setmeal.html",map);
}
//生成套餐详情静态页面(可能有多个)
public void generateMobileSetmealDetailHtml(List<Setmeal> list){
for (Setmeal setmeal : list) {
Map map = new HashMap();
map.put("setmeal",setmealDao.findById4Detail(setmeal.getId()));
generteHtml("mobile_setmeal_detail.ftl","setmeal_detail_" + setmeal.getId() + ".html",map);
}
}
//通用的方法,用于生成静态页面
public void generteHtml(String templateName,String htmlPageName,Map map){
Configuration configuration = freeMarkerConfigurer.getConfiguration();//获得配置对象
Writer out = null;
try {
Template template = configuration.getTemplate(templateName);
//构造输出流
out = new FileWriter(new File(outPutPath + "/" + htmlPageName));
//输出文件
template.process(map,out);
out.close();
} catch (Exception e) {
e.printStackTrace();
}
}