FreeMarker-->实现网页静态化

1.  网页静态化

什么是静态化?

        通过一些技术手段(Freemarker/velocity)将动态的页面(jsp,asp.net,php) 转换成静态的页面(html),通过浏览器直接访问静态页面。

 

为什么要静态化?

        通过浏览器直接访问静态的页面,不需要经过程序处理,它的访问速度高。

        稳定性好。

        更有效的防止安全漏洞问题,比如不易遭受黑客攻击。

        静态的页面更容易被搜索引擎收录。(SEO)

 

怎么样实现?

 

可以使用freemarker实现网页静态化。

freemarker 可以生成静态的页面,可以作为视图技术展示信息。

 

 

1.1. 什么是freemarker

        FreeMarker是一个用Java语言编写的模板引擎,它基于模板输出文本(html)。FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或HTTP。它不仅可以用作表现层的实现技术,而且还可以用于生成XML,JSP或Java 等。.IVA .MP4

 

目前企业中:主要用Freemarker做静态页面生成。视图技术。

 

1.2. Freemarker的使用方法

学习它,自己创建一个工程进行学习

FreeMarker-->实现网页静态化

可以导入:

FreeMarker-->实现网页静态化

1.2.1.   创建maven工程

把freemarker的jar包添加到工程中。

Maven工程添加依赖

<dependency>

  <groupId>org.freemarker</groupId>

  <artifactId>freemarker</artifactId>

  <version>2.3.23</version>

</dependency>

 

 

原理:


模板+数据=静态页面

 

1.2.2.   简单的使用

需要创建模板文件和编写测试类:

 

使用步骤:

第一步:创建一个Configuration对象,直接new一个对象。构造方法的参数就是freemarker对应的版本号。

第二步:设置模板文件所在的路径。

第三步:设置模板文件使用的字符集。一般就是utf-8.

第四步:加载一个模板,创建一个模板对象。

第五步:创建一个模板使用的数据集,可以是pojo也可以是map。一般是Map。

第六步:创建一个Writer对象,一般创建一FileWriter对象,指定生成的文件名。

第七步:调用模板对象的process方法输出文件。

第八步:关闭流。

//使用模板技术实现静态网页的输出

     @Test

     publicvoid GenHtml() throws Exception{

          //1.创建个configuration对象

          Configuration configuration = new Configuration(Configuration.getVersion());

          //2.设置模板文件所在的路径的目录

          configuration.setDirectoryForTemplateLoading(new File(diretorypath));

          //3.设置模板文件的字符集

          configuration.setDefaultEncoding("utf-8");

          //4.首先创建模板文件,再加载模板文件模板文件的后缀官方提供是.ftl 其实任何类型都行。

          Template template = configuration.getTemplate("template.htm");//相对路径

          //5.创建模板文件需要展示数据的数据集对象,可以使用POJO,也可以使用map 一般是使用map

          Map model = new HashMap<>();

          model.put("hello", "hello");

          //6.创建一个FileWriter对象指定生成的静态文件的文件路径及文件名

          //拼接一个前缀和后缀

          FileWriter writer = new FileWriter(new File(prehtmlfilepath+"/result.html"));

          //7.调用模板对象的process方法,执行输出文件。

          template.process(model, writer);

          //8.关闭流

          writer.close();

     }

 

 

1.3. eclipse中可以使用freemarker的插件

下载freemarker-ide-0.9.14,拷贝如图所示的plugins文件到eclipse所在目录的文件,覆盖掉,之后重启eclipse, 再打开就会出现高亮及颜色相关的提示。

 

1.4. 模板的语法

参考EL表达式。

1.4.1.   访问map中的key

${key} 参考入门的简单示例。

 

1.4.2.   访问pojo中的属性

 

创建Person

FreeMarker-->实现网页静态化


编辑输出的代码:

FreeMarker-->实现网页静态化

编辑模板:

FreeMarker-->实现网页静态化

效果:

FreeMarker-->实现网页静态化

如果模型数据中设置的值是1000以上,会出现千分位,

FreeMarker-->实现网页静态化

 

可以使用?c 去除。如图:

FreeMarker-->实现网页静态化

效果:

FreeMarker-->实现网页静态化

 

1.4.3.   取集合中的数据

编辑模型数据逻辑:

FreeMarker-->实现网页静态化

修改模板:

FreeMarker-->实现网页静态化

其中:list asitem中的

        list为模型设置中的key  

        item:为集合中的元素的名称 (可以任意)

 

效果:

FreeMarker-->实现网页静态化

 

1.4.4.   取循环中的下标

模板文件:

FreeMarker-->实现网页静态化 

效果:下标从0开始,当然也可以支持运算,比如 ${item_index+1} 则输出为1,2,3

FreeMarker-->实现网页静态化

1.4.5.   取Map集合中的数据

代码:

FreeMarker-->实现网页静态化

模板:

FreeMarker-->实现网页静态化

效果:

FreeMarker-->实现网页静态化

第二种:

 FreeMarker-->实现网页静态化

效果:

FreeMarker-->实现网页静态化

1.4.6.   判断

模板:

<#if >

        dosomething

<#else>

        dosomething

</#if>

 FreeMarker-->实现网页静态化

效果:

FreeMarker-->实现网页静态化


1.4.7.   日期类型格式化

FreeMarker-->实现网页静态化

1.4.8.   Null值的处理

代码逻辑:

FreeMarker-->实现网页静态化

模板:

FreeMarker-->实现网页静态化

这是没有问题的,如果代码中注释掉呢?

 

就会报错,所以需要针对空值做处理:左边模板文件,右边效果图。

 FreeMarker-->实现网页静态化

 

1.4.9.   Include标签

<#include “模板名称”>

先创建一个模板文件:hello.htm

FreeMarker-->实现网页静态化

在template.htm中使用<#include"hello.htm" />  

FreeMarker-->实现网页静态化

效果:

FreeMarker-->实现网页静态化

1.5. Freemarker整合spring

为了测试方便,在taotao-item-web工程中的进行测试,

首先pom.xml引入Freemarker的依赖

FreeMarker-->实现网页静态化

1.5.1.   创建整合spring的配置文件

 

可以在springmvc.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:p="http://www.springframework.org/schema/p"

     xmlns:context="http://www.springframework.org/schema/context"

     xmlns:dubbo="http://code.alibabatech.com/schema/dubbo" 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-4.2.xsd

        http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.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>

</beans>

 

需要编写一Controller进行测试

 

1.5.2.   Controller

请求的url:/genhtml

参数:无

返回值:ok (String, 需要使用@ResponseBody)

业务逻辑:

1、从spring容器中获得FreeMarkerConfigurer对象。

2、从FreeMarkerConfigurer对象中获得Configuration对象。

3、使用Configuration对象获得Template对象。

4、创建数据集

5、创建输出文件的Writer对象。

6、调用模板对象的process方法,生成文件。

7、关闭流。

 

@Controller

publicclass HtmlGenController {

    

     @Autowired

     private FreeMarkerConfigurer freeMarkerConfigurer;

 

     @RequestMapping("/genhtml")

     @ResponseBody

     public String genHtml()throws Exception {

          // 1、从spring容器中获得FreeMarkerConfigurer对象。

          // 2、从FreeMarkerConfigurer对象中获得Configuration对象。

          Configuration configuration = freeMarkerConfigurer.getConfiguration();

          // 3、使用Configuration对象获得Template对象。

          Template template = configuration.getTemplate("hello.ftl");

          // 4、创建数据集

          Map dataModel = new HashMap<>();

          dataModel.put("hello", "1000");

          // 5、创建输出文件的Writer对象。

          Writer out = new FileWriter(new File("D:/temp/term197/out/spring-freemarker.html"));

          // 6、调用模板对象的process方法,生成文件。

          template.process(dataModel, out);

          // 7、关闭流。

          out.close();

          return"OK";

     }

}

 

 

 

1.6. 商品详情页面静态化

1.6.1.   网页的静态化方案

输出文件的名称:商品id+“.html”

输出文件的路径:工程外部的任意目录。

网页访问:使用nginx访问网页。在此方案下tomcat只有一个作用就是生成静态页面。

工程部署:可以把taotao-item-web部署到多个服务器上。

生成静态页面的时机:商品添加后,生成静态页面。可以使用Activemq,订阅topic(商品添加)

FreeMarker-->实现网页静态化

多台服务器订阅一个主题(topic) 多台服务器生成的html都是一样。