开始我们的内容之前,我们先来了解一下为什么网站优化要把网页静态化?
1.为什么网站优化要把网页静态化?
SEO优化过程中,把动态网页转化为静态页面是许多SEO优化人员常常做的事情,面对这种SEO优化操作的行为很多人可能有疑问,那就是为什么网站优化要把网页静态化?下面就给大家详细的介绍一下关于网页静态化的一些问题。
什么是动态页面?什么是静态页面?
动态网页:是以.asp、.jsp、.php、.perl、.cgi等形式为后缀,并且在动态网页网址中有一个标志性的符号——“?”。动态页面是以ASP、PHP、JSP、Perl、或CGI等编程语言制作的,用上面两个指标基本上可以判断出是不是动态页面。
静态页面:静态网页是实际存在的,无需经过服务器的编译,直接加载到客户浏览器上显示出来。静态页面需要占一定的服务器空间,且不能自主管理发布更新的页面,如果想更新网页内容,要通过FTP软件把文件DOWN下来用网页制作软件修改(通过fso等技术例外)常见的静态页面举例:.html扩展名的、.htm扩展名的。
除了静态页面和动态页面还有一种的伪静态页面,在网站页面转化的时候大多转化成伪静态页面。
网页静态化对于SEO优化有哪些好处?
1、网页静态化有利于搜索引擎收录
静态页面和动态页面想对比来说,搜索引擎更喜欢静态页面,对于静态页面也更好抓取收录,这样对于网站优化来说有很大的好处,更利于排名,你可以去观察那些大型的门户网站,比如新浪、阿里巴巴、百度等页面大多采用静态或伪静态页面来显示,可想而知,连百度都要把页面静态化,那这足够说明了静态化带给网站很大好处。
2、网页静态化有利于网站的稳定性
首先从安全角度来看,静态页面不容易遭受黑客的攻击,黑客从你的网址中看不出你网站的后台、网站的程序、数据库的地址,这样就比动态页面要安全的多。还有就是静态页面不会因为程序、数据库等出问题,影响网站的正常打开,可以看出静态页面会使网站更加稳定,增加网站的信任度。
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!