Freemarker页面静态化技术入门使用步骤及应用
2：什么是Freemarker（作用：可生成html静态资源文件，从而达到减少查询数据库的频率）它是专门的页面静态化技术，可以生成所需的静态HTML页面，除
了Freemarker之外还有thymeleaf等技术也可以实现。
3：Freemarker的操作入门
（1）搭建环境
创建maven工程并导入Freemarker的maven坐标
<dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.23</version> </dependency>
（2）创建模板文件
Freemarker的模板文件后缀可以任意，一般建议为ftl。
模板文件中有四种元素：
1、文本，直接输出的部分
2、注释，即<#--...-->格式不会输出
3、插值（Interpolation）：即${..}部分,将使用数据模型中的部分替代输出
4、FTL指令：FreeMarker指令，和HTML标记类似，名字前加#予以区分，不会输出
注意模板文件格式：utf-8
在D盘创建ftl目录，在ftl目录中创建名称为test.ftl的模板文件，内容如下：
<html>
<head>
<meta charset="utf-8">
<title>Freemarker入门</title>
</head>
<body>
<#--我只是一个注释，我不会有任何输出 -->
${name}你好，${message}
</body>
</html>
（3）使用模板文件，生成静态文件
使用步骤：
第一步：创建一个 Configuration 对象，直接 new 一个对象。构造方法的参数就是 freemarker的版本号。
第二步：设置模板文件所在的路径。
第三步：设置模板文件使用的字符集。一般就是 utf-8。
第四步：加载一个模板，创建一个模板对象。
第五步：创建一个模板使用的数据集，可以是 pojo 也可以是 map。一般是 Map。
第六步：创建一个 Writer 对象，一般创建 FileWriter 对象，指定生成的文件名。
第七步：调用模板对象的 process 方法输出文件。
第八步：关闭流。
public static void main(String[] args) throws Exception{ //1.创建配置类 Configuration configuration=new Configuration(Configuration.getVersion()); //2.设置模板所在的目录 configuration.setDirectoryForTemplateLoading(new File("D:\\ftl")); //3.设置字符集 configuration.setDefaultEncoding("utf-8"); //4.加载模板 Template template = configuration.getTemplate("test.ftl"); //5.创建数据模型 Map map=new HashMap(); map.put("name", "张三"); map.put("message", "欢迎来到传智播客！"); //6.创建Writer对象 Writer out =new FileWriter(new File("d:\\test.html")); //7.输出 template.process(map, out); //8.关闭Writer对象 out.close(); }
上面的入门案例中Configuration配置对象是自己创建的，字符集和模板文件所在目录也是在Java代码中指定的。在项目中应用时可以将Configuration对象的创建交由Spring框架来完成，并通过依赖注入方式将字符集和模板所在目录注入进去。
assign指令用于在页面上定义一个变量
（1）定义简单类型
<#assign linkman="周先生">
联系人：${linkman}
（2）定义对象类型
<#assign info={"mobile":"13812345678",'address':'北京市昌平区'} >
电话：${info.mobile} 地址：${info.address}
<h1>我是一个小标题，可以给其它模板重复使用</h1>
<#include "head.ftl"/>
if指令
（1）在模板文件中使用if指令进行判断
<#if success=true> 你已通过实名认证 <#else> 你未通过实名认证 </#if>
（2）在java代码中为success变量赋值
map.put("success", true);
list指令
list指令用于遍历
（1）在模板文件中使用list指令进行遍历
<#list goodsList as goods>
商品名称： ${goods.name} 价格：${goods.price}<br>
</#list>
（2）在java代码中为goodsList赋值
List goodsList=new ArrayList(); Map goods1=new HashMap(); goods1.put("name", "苹果"); goods1.put("price", 5.8); Map goods2=new HashMap(); goods2.put("name", "香蕉"); goods2.put("price", 2.5); Map goods3=new HashMap(); goods3.put("name", "橘子"); goods3.put("price", 3.2); goodsList.add(goods1); goodsList.add(goods2); goodsList.add(goods3); map.put("goodsList", goodsList);
那么，实际项目中如何应用呢？
首先思考几个问题
（1）什么时候生成静态页面比较合适呢？
（2）将静态页面生成到什么位置呢？
（3）应该生成几个静态页面呢？
对于第一个问题，应该是当页面数据发生改变时，需要生成静态页面，即我们通过后台系统修改页面数据（包括新增、删除、编辑）时。
对于第二个问题，如果是在开发阶段可以将文件生成到项目工程中，如果上线后可以将文件生成到移动端系统运行的tomcat中。
对于第三个问题，数据不经常发生改变的页面，都可以生成静态页面，以减少操作数据库的频率
步骤：假设该项目的移动端中提供了服务套餐列表展示功能，点击其中一个套餐又会弹出该套餐的详情信息的话，那么该套餐服务肯定不经常修改，可以做成静态页面
1：环境搭建
依赖上面已经有了
2：创建模板文件
在service工程的WEB-INF目录中创建ftl目录，在ftl目录中创建模板文件mobile_setmeal.ftl和mobile_setmeal_detail.ftl文件，前者是用于生成套餐列表页面
的模板文件，后者是生成套餐详情页面的模板文件
（1）mobile_setmeal.ftl
<!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标签点击会访问套餐详情页面，每个套餐对应一个详情页面，为了区分，所以生成的详情页面可以拼接套餐id作为唯一标识 -->
<a class="link-page" href="setmeal_detail_${setmeal.id}.html">
<img class="img-object f-left"
src="http:这里是用的是七牛云服务器存图片，输入自己七牛云地址${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>
（2）mobile_setmeal_detail.ftl
套餐详情页面的模板文件就不再赘述了，通过看
3：spring整合Freemarker
（1）freemarker.properties，在service 工程中创建属性文件freemarker.properties，用于指定生成静态页面以后存储的路径
out_put_path=D:/ideaProjects/parent/mobile/src/main/webapp/pages
（2）applicationContext-freemarker.xml，在service工程的Spring配置文件中配置，创建applicationContext-freemarker.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd"> <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> <context:property-placeholder location="classpath:freemarker.properties"/> </beans>
4：生成静态页面/**
重要事情：经过测试，如果用Map封装数据的话，map的名称一定要为“data”，key和值要跟模板匹配！
另外，数据不能为空，如果没有数据为空的话去生成静态页面会出错
* 套餐服务实现类 */ @Service(interfaceClass = SetmealService.class) @Transactional public class SetmealServiceImpl implements SetmealService { @Autowired private SetmealDao setmealDao;
//注入，在生成静态页面的时候需要它 @Autowired private FreeMarkerConfigurer freeMarkerConfigurer;
//用value注解，可以提取到properties文件中的路径，并赋值给下面的成员变量 @Value("${out_put_path}") private String outPutPath; /** * 新增套餐 */ @Override public void add(Integer[] checkgroupIds, Setmeal setmeal) { //1.保存套餐表 setmealDao.add(setmeal); //2.获取套餐id Integer setmealId = setmeal.getId(); //3循环遍历往中间表插入数据 setSetmealAndCheckGroup(setmealId,checkgroupIds); //1.生成套餐列表 和 套餐详情页面 generateMobileStaticHtml(); } /** * 2.生成套餐列表 和 套餐详情页面 */ private void generateMobileStaticHtml() { //查询所有套餐数据 List<Setmeal> setmeal = setmealDao.getSetmeal(); //生成套餐列表 generateMobileSetmealListHtml(setmeal); //生成套餐详情 generateMobileSetmealDetailHtml(setmeal); } /** * 3.提供模板以及数据生成套餐列表静态页面 * @param setmeal */ private void generateMobileSetmealListHtml(List<Setmeal> setmeal) { if(setmeal != null && setmeal.size()>0){ //参数1：套餐列表模板 mobile_setmeal.ftl //参数2：套餐列表模板对应数据 setmeal Map data = new HashMap(); data.put("setmealList",setmeal); //参数3：生成静态页面 generateHtml("mobile_setmeal.ftl",data,"m_setmeal.html"); } } /** * 生成套餐详情 * @param setmeal */ private void generateMobileSetmealDetailHtml(List<Setmeal> setmeal) { if(setmeal != null && setmeal.size()>0){ //1.传入参数套餐列表 循环遍历关联查询检查组检查项数据 for (Setmeal sm : setmeal) { //2.调用findById 获取数据 Setmeal rsSM = setmealDao.findById(sm.getId()); //3.参数1：套餐列表模板 mobile_setmeal_detail.ftl //4.参数2：套餐列表模板对应数据 setmeal对象（包含检查组检查项） Map data = new HashMap(); data.put("setmeal",rsSM); //5.参数3：生成静态页面 setmeal_detail_12.html generateHtml("mobile_setmeal_detail.ftl",data,"setmeal_detail_"+sm.getId()+".html"); } } } /** * 4.生成静态页面公共方法 * @param templateFileName * @param data * @param outFileName */ private void generateHtml(String templateFileName, Map data, String outFileName) { Writer out = null; try { //1.获取配置对象 Configuration configuration = freeMarkerConfigurer.getConfiguration(); //2.得到模板对象 Template template = configuration.getTemplate(templateFileName); //3.BufferWriter对象输出文件 效率高于FileWriter String outpathFileName = outPutPath+"/"+outFileName; //静态页面输出目录 out = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(new File(outpathFileName)))); //4.填充数据 template.process(data,out); } catch (Exception e) { System.out.println("生成静态页面报错了。。。"); e.printStackTrace(); }finally { if(out !=null){ try { out.flush(); out.close(); } catch (IOException e) { e.printStackTrace(); } } } }
