今年是农历大年初三,在这里首先给各位朋友拜个年,祝大家新年快乐,虎年大吉大利,事业蒸蒸日上。过年无事,把页面静态化技术整理整理。本文将以thymeleaf为例子,说明在springboot当中,如何基于thymeleaf模板引擎进行页面静态化,关于静态化的一些说明见网站页面静态化(一)初识。
thymeleaf模板引擎是springboot官方的标准配置,是一款高性能的前端模板引擎。这里需要说明的是,与时下流行的vue、react等前端框架不一样,thymeleaf的技术栈是以传统的modelandview为主,但是可以基于thymeleaf进行一些网页的静态化操作。下面进入正文,详细说明如何进行集成。
第一步、创建一个maven的springboot工程。
<projectxmlns="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目录下创建待生成的网页模板。
如下图:
模板如下:
<htmllang="en"xmlns:th="http://www.thymeleaf.org"><head><metacharset="UTF-8"><title>静态化模板</title></head><body><h1th:text="${person.id}"></h1><h1th:text="${person.username}"></h1><h1th:text="${person.age}"></h1></body></html>
这里为了简单起见,只保留最简单的代码,正常的网页中还有js还有css,这些资源可以部署在静态资源或者cdn中以提高访问速度。
第三步、使用thmeleaf进行网页流写入
publicclassPersonService { privatefinalstaticStringDESC_PATH="d:/person/"; TemplateEnginetemplateEngine; publicvoidcreateHtml(intid){ //创建上下文Contextcontext=newContext(); Personperson=loadPerson(id); //上下文放入数据context.setVariable("person",person); //路径的判断,没有自动创建Filefile0=newFile(DESC_PATH); if (!file0.exists()){ file0.mkdirs(); } //定义本地保存的静态文件名Filefile=newFile(DESC_PATH+id+".html"); if(file.exists()){ file.delete(); } try { //定义一个打印流PrintWriterpw=newPrintWriter(file); templateEngine.process("person",context,pw); } catch (FileNotFoundExceptione) { e.printStackTrace(); } } //模拟封装数据的方法publicPersonloadPerson(intid){ Personp=newPerson(); p.setUsername("yelangking"); p.setAge(18); p.setId(id); returnp; } }
这里的代码比较简单,完成的功能就是创建上下文环境,准备数据,模板填充,目标文件写入。
第四步、测试静态网页生成
classThymeleafFirstApplicationTests { PersonServicepersonService; voidcontextLoads() { personService.createHtml(88088); } }
这里通过junit模拟的方式进行页面生成,实际开发当中,应该是根据数据库或者缓存中的待转化的页面列表来动态生成,文件存储的目录应该替换成文件存储系统的目录。
第五步、系统输出的静态文件如下:
总结:通过上述例子即说明了如何基于springboot和thymeleaf的全站页面静态化方案的大概解决方案雏形。例子中说明了具体的处理流程以及关键技术,至于存储和网页模板需要根据实际项目进行调整开发。