注:所有参考文档均附在文末
一、使用情景
公司的cms产品,最近正在做功能迁移,而我正好负责将老后台的文章发布功能迁移到新后台。
文章发布使用到的核心技术是页面静态化。发布的时候,会生成对应的静态页面,并将静态文件保存到指定路径下;同时,刷新cdn,实现修改同步。
二、页面静态化说明
技术原理
静态化一般使用在这种场景:将经常访问但不常修改的页面,转换成静态页面。静态页面是网页(html、htm)的代码都在页面中,不需要执行asp,php,jsp,.net等动态语言而生成客户端网页代码的网页,不经过数据库查询。常见的静态页面举例:.html、.htm。
优点
① 提高速度
比如jsp这一类的动态网页,需要进行数据库查询,这时访问量增加,数据库查询的次数也会随之增加,会占用很大的资源,影响到网站的反应速度。如果把首页、内容静态化的话,就会去除了查询数据库的次数,减少一部分环节,加快网站反应速度。
② 搜索引擎的收录
从网站的优化上来说,搜索引擎更喜欢静态网页,也容易进行抓取,SEO排名也会更高。比如百度、阿里巴巴、搜狐都使用静态网页或者伪静态网页来显示,方便搜索引擎的抓取与排名。
③ 安全性
静态网页不容易被黑客所攻破。静态网页没有查询数据库,不会让黑客看到数据库里的内容。
④ 网站稳定性
如果后台程序、数据库等出现错误,影响网站的访问,影响用户的体验度,降低了用户的信任度,而静态网页就不会出现这种情况。
缺点
① 交互性差,功能上有限制。
② 增加网站的开发复杂度,不利于程序维护和管理。
③ 占用硬盘空间大。
④ 不灵活,静态化操作需要开关的,需要我们专门的设计。
静态化常用技术
FreeMarker
Thymeleaf
Velocity
jsp
FreeMarker有着良好的性能和扩展性等综合优势,且网上可供学习的资源丰富,是我本次文章发布的首选模板引擎,后文主要记录使用FreeMarker实现页面静态化Demo项目的过程。
三、FreeMarker实现页面静态化
FreeMarker官方手册
FreeMarker官方手册(中文版)
1、原理
模板+数据→静态HTML
2、目标
通过FreeMarker模板引擎渲染,在指定目录下,生成文章详情页的静态html文件;打开文件,模板和传入的数据均正常显示。
效果如下:红框内为模板内容,蓝框内为模板数据
3、步骤
说明:JDK8、不涉及数据库(直接传值)、SpringBoot
实体类:article
public class Article {
private String title;
private String author;
private String content;
private String date;
}
3.1、引入模板引擎
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
3.2、创建模板
创建ftl格式的模板文件,放在templates目录下(渲染时,会自动找到该目录下的模板),freemarker的语法详见官方文档或百度(该语法支持分页、循环等)
<html>
<head>
<title>PageStatic</title>
</head>
<body>
标题:${article.title}<br/>
作者:${article.author}<br/>
日期:${article.date}<br/>
正文:${article.content}<br/>
</body>
</html>
3.3、核心方法
service
public interface PageService {
public void ftlToHtml() throws IOException, Exception;
}
serviceImpl
public class PageServiceImpl implements PageService {
private static final String PATH = "/templates/" ;
@Override
public void ftlToHtml() throws Exception {
// 创建配置类
Configuration configuration = new Configuration(Configuration.DEFAULT_INCOMPATIBLE_IMPROVEMENTS);
// 设置模板路径
String classpath = this.getClass().getResource("/").getPath();
File file = new File(classpath + PATH);
configuration.setDirectoryForTemplateLoading(file);
// 加载模板
Template template = configuration.getTemplate("freemarkerTP.ftl");
// 数据模型
Article article = new Article();
article.setTitle("这是文章标题");
article.setAuthor("liuhui");
article.setDate(DateFormat.getDateInstance().format(new Date()));
article.setContent("这是正文内容");
Map<String, Object> map = new HashMap<>();
map.put("article", article);
// 静态化页面内容
String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, map);
System.out.println("content:{}" + content);
InputStream inputStream = new ByteArrayInputStream(content.getBytes("UTF-8"));
// 输出文件(指定文件输出目录)
FileOutputStream fileOutputStream = new FileOutputStream(new File("D:/huaqiyun/newPage.html"));
IOUtils.copy(inputStream, fileOutputStream);
// 关闭流
inputStream.close();
fileOutputStream.close();
}
}
controller
@Controller
public class FreemarkerController {
@Autowired
private PageServiceImpl pageService;
@RequestMapping("/freemarker")
public void ftlToHtml() throws Exception {
pageService.ftlToHtml();
}
}
注意:不要使用单元测试来调用方法,页面是通过模板引擎来渲染的,所以必须启动项目,模板引擎才能工作。
3.4、最终效果
- 指定目录下生成该文件
- 浏览器打开,动态渲染的html数据无误
参考资料
jsp、freemarker、velocity、thymeleaf页面方案分析
thymeleaf和freemarker谁更好用?
页面静态化模板引擎-Freemaker
SpringBoot2 整合FreeMarker模板,完成页面静态化处理