网站页面静态化之thymeleaf生成
【摘要】 本文说明了如何基于springboot和thymeleaf的全站页面静态化方案的大概解决方案雏形。
本文将以thymeleaf为例子，说明在springboot当中，如何基于thymeleaf模板引擎进行页面静态化。thymeleaf模板引擎是springboot官方的标准配置，是一款高性能的前端模板引擎。这里需要说明的是，与时下流行的vue、react等前端框架不一样，thymeleaf的技术栈是以传统的modelandview为主，但是可以基于thymeleaf进行一些网页的静态化操作。下面进入正文，详细说明如何进行集成。
第一步、创建一个maven的springboot工程。
<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>
<groupId>com.yelang</groupId>
<artifactId>boot-thymeleaf-static</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>boot-thymeleaf-static</name>
<description>基于springboot和thymeleaf的页面静态化演示</description>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven-jar-plugin.version>3.1.1</maven-jar-plugin.version>
</properties>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.13.RELEASE</version>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<scope>provided</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/junit/junit -->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<finalName>${project.artifactId}</finalName>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<fork>true</fork> <!-- 如果没有该配置，devtools不会生效 -->
</configuration>
</plugin>
</plugins>
</build>
</project>
以上引用的关键是引入spring-boot-starter-thymeleaf。
第二步、在templates目录下创建待生成的网页模板。如下图：
模板如下：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>静态化模板</title>
</head>
<body>
<h1 th:text="${person.id}"></h1>
<h1 th:text="${person.username}"></h1>
<h1 th:text="${person.age}"></h1>
</body>
</html>
这里为了简单起见，只保留最简单的代码，正常的网页中还有js还有css，这些资源可以部署在静态资源或者cdn中以提高访问速度。
第三步、使用thmeleaf进行网页流写入
@Service
public class PersonService {
private final static String DESC_PATH = "d:/person/";
@Autowired
TemplateEngine templateEngine;
public void createHtml(int id){
//创建上下文
Context context = new Context();
Person person = loadPerson(id);
//上下文放入数据
context.setVariable("person",person);
//路径的判断，没有自动创建
File file0 = new File(DESC_PATH);
if (!file0.exists()){
file0.mkdirs();
}
//定义本地保存的静态文件名
File file = new File(DESC_PATH+id+".html");
if(file.exists()){
file.delete();
}
try {
//定义一个打印流
PrintWriter pw = new PrintWriter(file);
templateEngine.process("person",context,pw);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
}
//模拟封装数据的方法
public Person loadPerson(int id){
Person p = new Person();
p.setUsername("yelangking");
p.setAge(18);
p.setId(id);
return p;
}
}
这里的代码比较简单，完成的功能就是创建上下文环境，准备数据，模板填充，目标文件写入。
第四步、测试静态网页生成
@SpringBootTest
class ThymeleafFirstApplicationTests {
@Autowired
PersonService personService;
@Test
void contextLoads() {
personService.createHtml(88088);
}
}
这里通过junit模拟的方式进行页面生成，实际开发当中，应该是根据数据库或者缓存中的待转化的页面列表来动态生成，文件存储的目录应该替换成文件存储系统的目录。
第五步、系统输出的静态文件如下：
总结：通过上述例子即说明了如何基于springboot和thymeleaf的全站页面静态化方案的大概解决方案雏形。例子中说明了具体的处理流程以及关键技术，至于存储和网页模板需要根据实际项目进行调整开发。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）