JAVA学习笔记27——网页静态化之Freemarker（一）

开始我们的内容之前，我们先来了解一下为什么网站优化要把网页静态化？

1.为什么网站优化要把网页静态化？

SEO优化过程中，把动态网页转化为静态页面是许多SEO优化人员常常做的事情，面对这种SEO优化操作的行为很多人可能有疑问，那就是为什么网站优化要把网页静态化？下面就给大家详细的介绍一下关于网页静态化的一些问题。

什么是动态页面？什么是静态页面？

动态网页：是以.asp、.jsp、.php、.perl、.cgi等形式为后缀，并且在动态网页网址中有一个标志性的符号——“？”。动态页面是以ASP、PHP、JSP、Perl、或CGI等编程语言制作的，用上面两个指标基本上可以判断出是不是动态页面。

静态页面：静态网页是实际存在的，无需经过服务器的编译，直接加载到客户浏览器上显示出来。静态页面需要占一定的服务器空间，且不能自主管理发布更新的页面，如果想更新网页内容，要通过FTP软件把文件DOWN下来用网页制作软件修改（通过fso等技术例外）常见的静态页面举例：.html扩展名的、.htm扩展名的。

除了静态页面和动态页面还有一种的伪静态页面，在网站页面转化的时候大多转化成伪静态页面。

网页静态化对于SEO优化有哪些好处？

1、网页静态化有利于搜索引擎收录

静态页面和动态页面想对比来说，搜索引擎更喜欢静态页面，对于静态页面也更好抓取收录，这样对于网站优化来说有很大的好处，更利于排名，你可以去观察那些大型的门户网站，比如新浪、阿里巴巴、百度等页面大多采用静态或伪静态页面来显示，可想而知，连百度都要把页面静态化，那这足够说明了静态化带给网站很大好处。

2、网页静态化有利于网站的稳定性

首先从安全角度来看，静态页面不容易遭受黑客的攻击，黑客从你的网址中看不出你网站的后台、网站的程序、数据库的地址，这样就比动态页面要安全的多。还有就是静态页面不会因为程序、数据库等出问题，影响网站的正常打开，可以看出静态页面会使网站更加稳定，增加网站的信任度。

扫描二维码关注公众号，回复： 3194324 查看本文章

3、网页静态化有利于提高速度

SEO网站优化的一个很重要的因素就是网站打开速度的快慢，打开速度越快，SEO优化效果越好，众所周知动态页面打开都是要调用数据库内容，这样就影响了网站速度，而静态页面则不用，减少了环节，提高了网站反映速度。

好了，上面讲了这么多关于网页静态化的相关知识，大家应该能明白今天咱们需要干啥了，那么就开始吧。

2. 什么是freemarker？

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

目前企业中:主要用Freemarker做静态页面或是页面展示。

3. Freemarker的使用方法

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

Maven工程添加依赖

<dependency>
  <groupId>org.freemarker</groupId>
  <artifactId>freemarker</artifactId>
  <version>2.3.23</version>
</dependency>

原理：
这里写图片描述

3.2 使用步骤

第一步：创建一个Configuration对象，直接new一个对象。构造方法的参数就是freemarker对于的版本号。
第二步：设置模板文件所在的路径。
第三步：设置模板文件使用的字符集。一般就是utf-8.
第四步：加载一个模板，创建一个模板对象。
第五步：创建一个模板使用的数据集，可以是pojo也可以是map。一般是Map。
第六步：创建一个Writer对象，一般创建一FileWriter对象，指定生成的文件名。
第七步：调用模板对象的process方法输出文件。
第八步：关闭流。

3.3 具体实现

3.3.1 新建工程

新建工程项目freemarker-demo，然后根据3.1所讲，配置好各个jar包依赖：

<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/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>com.taotao</groupId>
        <artifactId>taotao-parent</artifactId>
        <version>0.0.1-SNAPSHOT</version>
    </parent>
    <groupId>com.taotao</groupId>
    <artifactId>freemarker-demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <dependencies>
        <!-- Spring -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-beans</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aspects</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jms</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context-support</artifactId>
        </dependency>
        <!-- JSP相关 -->
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jsp-api</artifactId>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
        </dependency>
        <!-- freemarker -->
        <dependency>
            <groupId>org.freemarker</groupId>
            <artifactId>freemarker</artifactId>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <configuration>
                    <path>/</path>
                    <port>8080</port>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

3.3.2 新建测试类

在测试目录下开始编写测试代码，新建一个测试类TestFreeMarker.java，然后开始写入我们的第一次代码：

package com.freemarker.demo;

import java.io.File;
import java.io.FileWriter;
import java.io.Writer;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.junit.Test;

import freemarker.template.Configuration;
import freemarker.template.Template;

public class TestFreeMarker {

    @Test
    public void testFreeMarker() throws Exception{
        //创建一个模板文件
        //创建一个Configuration对象
        Configuration configuration = new Configuration(Configuration.getVersion());
        //设置模板所在的路径
        configuration.setDirectoryForTemplateLoading(new File("C:/Users/zhangyan/eclipse-workspace/freemarker-demo/src/main/webapp/WEB-INF/ftl"));
        //设置模板的字符集，一般是utf-8
        configuration.setDefaultEncoding("utf-8");
        //使用Configuration对象加载一个模板文件，需要指定模板文件的文件名
        Template template = configuration.getTemplate("hello.ftl");
        //创建一个数据集，可以是pojo，也可以是map，推荐使用map
        Map data = new HashMap<>();
        data.put("hello", "hello freemarker");
        //创建一个Writer对象，指定输出文件的路径及文件名
        Writer out = new FileWriter(new File("E:/temp/javaee28/out/hello.html"));
        //使用模板对象的process方法输出文件
        template.process(data, out);
        //关闭流
        out.close();
    }
}

3.3.3 新建hello.ftl文件

freemarker的模板文件都是.ftl结尾，上面我们指定了模板的路径为C:/Users/zhangyan/eclipse-workspace/taotao-item-web/src/main/webapp/WEB-INF/ftl，并且模板文件为hello.ftl，所以这里咱们需要将其创建。
这里写图片描述
并且在hello.ftl文件中添加内容：${hello}

3.3.4 测试

咱们在测试代码中在map中插入了一个key名为hello，并且设置内容为hello freemarker，data.put(“hello”, “hello freemarker”);，所以hello.ftl中的EL表达式中能渠道hello这个key的值并将其填充，下面我们执行3.3.2的测试方法，然后到指定的输出文件夹目录下观察是否存在E:/temp/javaee28/out/hello.html。

这里写图片描述

可以看到我们的文件夹下确实新生成了一个hello.html文件，我们双击点开看看
这里写图片描述

我们可以看到，在生成的静态页面中已经将我们存入的值读取出来并填充进去了，到这儿，一个简单的Freemarker案例已经完成了。

4. 模板的语法

4.1 访问map中的key

${key}

这个就是我们刚才用到的，通过我们设置一个key，并赋值value，然后通过这种形式读key能取出对应的value。

4.2 访问pojo中的属性

${key.property}

4.2.1 创建pojo对象

这里我们新建一个Student对象，然后可以通过访问pojo中的属性来生成静态页面

package com.freemarker.demo;

public class Student {
    private int id;
    private String name;
    private int age;
    private String address;

    public Student(int id, String name, int age, String address) {
        super();
        this.id = id;
        this.name = name;
        this.age = age;
        this.address = address;
    }

    public Student() {

    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }
}

4.2.2 创建student.ftl

在WEB-INF的ftl文件中新建一个student.ftl文件，添加一些代码：

<html>
    <head>
        <title>测试页面</title>
    </head>
    <body>
        学生信息：<br>
        学号：${student.id}<br>
        姓名：${student.name}<br>
        年龄：${student.age}<br>
        家庭住址：${student.address}<br>
    </body>
</html>

4.2.3 修改测试代码

@Test
    public void testFreeMarker() throws Exception {
        // 创建一个模板文件
        // 创建一个Configuration对象
        Configuration configuration = new Configuration(Configuration.getVersion());
        // 设置模板所在的路径
        configuration.setDirectoryForTemplateLoading(
                new File("C:/Users/zhangyan/eclipse-workspace/freemarker-demo/src/main/webapp/WEB-INF/ftl"));
        // 设置模板的字符集，一般是utf-8
        configuration.setDefaultEncoding("utf-8");
        // 使用Configuration对象加载一个模板文件，需要指定模板文件的文件名
        Template template = configuration.getTemplate("student.ftl");
        // 创建一个数据集，可以是pojo，也可以是map，推荐使用map
        Map data = new HashMap<>();
        Student student = new Student(1, "小明", 11, "北京昌平回龙观");
        data.put("student", student);
        // 创建一个Writer对象，指定输出文件的路径及文件名
        Writer out = new FileWriter(new File("E:/temp/javaee28/out/student.html"));
        // 使用模板对象的process方法输出文件
        template.process(data, out);
        // 关闭流
        out.close();
    }

4.2.4 测试代码

执行上述的测试代码，可以看到指定输出目录下新生成了一个student.html文件
这里写图片描述
打开student.html文件，查看效果：

可以看到我们通过Student student = new Student(1, “小明”, 11, “北京昌平回龙观”);设置到pojo对象中的值都能通过${key.property}的形式取到并赋值。

4.3 取集合中的数据

<#list studentList as student>  
    ${student.id}  
    ${studnet.name}
</#list>

下面我们修改测试代码，创建一个集合，并将集合放入到map中看看效果。

添加代码：

List<Student> stuList = new ArrayList<>();
stuList.add(new Student(1,"小明1",11,"北京昌平回龙观1"));
stuList.add(new Student(2,"小明2",12,"北京昌平回龙观2"));
stuList.add(new Student(3,"小明3",13,"北京昌平回龙观3"));
stuList.add(new Student(4,"小明4",14,"北京昌平回龙观4"));
stuList.add(new Student(5,"小明5",15,"北京昌平回龙观5"));
stuList.add(new Student(6,"小明6",16,"北京昌平回龙观6"));
stuList.add(new Student(7,"小明7",17,"北京昌平回龙观7"));
stuList.add(new Student(8,"小明8",18,"北京昌平回龙观8"));
data.put("stuList", stuList);

修改student.ftl代码，新增代码：

学生列表：<br>
<table border="1">
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>家庭住址</th>
    </tr>
    <#list stuList as stu>
        <tr>
            <td>${stu.id}</td>
            <td>${stu.name}</td>
            <td>${stu.age}</td>
            <td>${stu.address}</td>
        </tr>
    </#list>
</table>

执行测试代码，然后到文件夹中找到生成的静态页面打开，观察页面中内容：
这里写图片描述

4.4 取循环中的下标

<#list studentList as student>
    ${student_index}
</#list>

修改student.ftl，增加一个下标标签

<tr>
    <th>序号</th>
    <th>学号</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>家庭住址</th>
</tr>
<#list stuList as stu>
    <tr>
        <td>${stu_index}</td>
        <td>${stu.id}</td>
        <td>${stu.name}</td>
        <td>${stu.age}</td>
        <td>${stu.address}</td>
    </tr>
</#list>

查看student.html文件
这里写图片描述

可以看到我们能够获取到循环列表中的下标，并且是从0开始的。

4.5 判断

<#if 条件>
<#else>
</#if>

修改student.ftl文件，在其中增加if/else判断：

<#list stuList as stu>
    <#if stu_index%2==0>
    <tr bgcolor="red">
    <#else>
    <tr bgcolor="blue">
    </#if>
        <td>${stu_index}</td>
        <td>${stu.id}</td>
        <td>${stu.name}</td>
        <td>${stu.age}</td>
        <td>${stu.address}</td>
    </tr>
</#list>

如果是偶数行，显示红色，否则显示蓝色，看看页面效果：
这里写图片描述

4.6 日期类型格式化

在student.ftl文件中新增代码：

日期类型的处理：${date?string("yyyy/MM/dd HH:mm:ss")}

在测试代码中添加代码：

// 日期类型的处理
data.put("date", new Date());

执行测试代码，看静态页面
这里写图片描述

4.7 Null值的处理

如果直接取一个不存在的值(值为null)时会报异常

${aaa}

处理:

${aaa!”默认值”}

或者${aaa! }代表空字符串

在student.ftl中添加代码：

null值的处理：${val!"默认值"}

其中val我们并没有为他赋值，所以val并不存在，执行测试代码，观察页面：
这里写图片描述
可以看到，当出现一个不存在的值的时候，会返回我们设置好的默认值。

4.8 include标签

<#include “模板名称”>
(相当于jstl中的包含)

在student.ftl文件中添加代码：

include标签测试：
<#include "hello.ftl">

这样就能将我们之前创建的hello.ftl引入，当我们执行测试代码时，同样也会输出hello.ftl中的内容
这里写图片描述

好了，今天讲解了关于freemarker的基本使用和8个标签的使用方法，并且都举了对应的例子供大家参考，但是这样的写法呢还是很繁琐的，所以下一篇我们就要介绍一下如何和Spring进行整合以及整合后的使用方法(点击快速跳转《 JAVA学习笔记28——网页静态化之Freemarker（二）》）~see you again!