页面模板碎片化、模块化实现

目录

前言

一、碎片化、模块化是什么？

模板拆解

二、使用步骤

1.Thymeleaf引入依赖

2.Thymeleaf配置

3.Thymeleaf的语法

类型

${...}变量表达式

@{...} 链接表达式

#{...} 消息表达式

*{...} 选择变量表达式

常用th标签

总结

---

前言

在目前，java项目中已经很少使用jsp来渲染数据，用的较多的是Freemaker、Thymeleaf、Mustache和Groovy Templates这些模板引擎，而且现在项目中比较流行前后端分离的开发模式。

Beetl

Beetl是由国人开发，官方数据称，Beetl的页面渲染速度比Thymeleaf快十倍

Beetl和Thymeleaf已被广泛使用，其他模板引擎都已逐渐退出市场。

---

一、碎片化、模块化是什么？

相对html+js的传统设计，现在很多网站都采用div&css+标签化+模块化的设计。模板引擎根据一定的语义，将数据填充到模板中，产生最终的HTML页面模板引擎。主要分两种，客户端引擎和服务端引擎。

模板拆解

• 页面模块化

        根据功能不同，将页面也按照模块来分包治理，按照模块化的思想，对项目进行重构，控制器和页面一一对应，非常清晰；

        重构 thymeleafTest：classpath:/templates/thymeleafTest.html ----- classpath:/templates/tets/thymeleafTest.html；

• 页面碎片化

        后台管理系统为例，将页面切割成一个个的碎片文件，再进行组装：eader.html\sidebar.html\footer.html\content；

        通过碎片组装器进行页面组装：classpath:/templates/index.html；

        组装中，不一样的区域如何组装？中间不一样的区域，通过页面控制器，封装一个 template 变量，包装碎片页面的路劲，在碎片组装器中判断 template 是否存在，存在则替换，不存在则忽略；

• 拆解流程

        选择模板，Gentelella（Jquery + Bootstramp），https://github.com/ColorlibHQ/gentelella 

        了解目标文件的网页结构；

        拆解静态资源文件；

        拆解网页结构，将每个部分的内容拆解到碎片文件中，再完善碎片组装器 index.html；

        精细化整理各个碎片，留下我们想要的，移除没用的。

二、使用步骤

1.Thymeleaf引入依赖

以SpringBoot项目为例：

<!-- thymeleaf -->
<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>    

2.Thymeleaf配置

# for thymeleaf
# 实现页面热部署，生产环境为true
spring.thymeleaf.cache=false
spring.thymeleaf.enabled=true
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.mode=HTML5
#设置模版文件前缀后缀
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

3.Thymeleaf的语法

类型

• 变量表达式
• 选择或星号表达式
• 文字国际化表达式
• URL表达式

${...}变量表达式

<span th:text="${book.author.name}">  
<li th:each="book : ${books}">  

@{...} 链接表达式

 @{/order/list} 
 @{/order/details(id=${orderId})}  

或者是
    
<form th:action="@{/createOrder}">  
<a href="main.html" th:href="@{/main}">

#{...} 消息表达式

#{main.title}  
#{message.entrycreated(${entryId})}  

*{...} 选择变量表达式

<div th:object="${book}">  
...  
<span th:text="*{title}">...</span>  
...  
</div> 

常用th标签

th标签属性

1）th:text：文本替换。

2）th:utext：支持html的文本替换。

3）th:value：属性赋值。

4）th:each：遍历循环元素。

5）th:if：判断条件，类似的还有th:unless，th:switch，th:case。

6）th:insert：代码块引入，类似的还有th:replace，th:include，常用于公共代码块提取的场景。

7）th:fragment：定义代码块，方便被th:insert引用。

8）th:object：声明变量，一般和*{}一起配合使用，达到偷懒的效果。

9）th:attr：设置标签属性，多个属性可以用逗号分隔。

---

总结

        以上就是要讲的内容，本文仅仅简单介绍了Thymeleaf的使用，而Thymeleaf可以处理和生成HTML、XML、JavaScript、CSS和文本，在Web和非Web环境下都可以正常工作。