![Spring Boot 2实战之旅](https://wfqqreader-1252317822.image.myqcloud.com/cover/805/26542805/b_26542805.jpg)
3.5 使用页面模板
在Web开发过程中,前后端交互是一件不可避免的事情。接下来我们学习Spring Boot常用的页面模板框架。
3.5.1 使用Thymeleaf
Thymeleaf是当今比较流行的模板框架,并且是Spring Boot官方推荐使用的模板框架。本小节介绍Spring Boot框架如何使用Thymeleaf,并且会对Thymeleaf框架的使用方法进行介绍。
首先创建项目,在项目中加入spring-boot-starter-thymeleaf依赖。这里需要提醒的是,由于Thymeleaf对HTML的校验特别严格,比如标签没有结束等可能会对不熟悉者造成未知的困惑,因此我们还需要加入nekohtml的依赖来避免这个“坑”。Thymeleaf依赖如代码清单3-20所示。
![](https://epubservercos.yuewen.com/47855F/15056703904175906/epubprivate/OEBPS/Images/Figure-T42_80973.jpg?sign=1738891619-BTutOphHb35hMDdK4ZUZpYjCKPqCDKnh-0-609246c980eebff815d90674d7e01351)
完成依赖的配置之后,我们需要在配置文件中对Thymeleaf进行配置,比如编码格式、缓存设置、文件前后缀等。配置文件内容如代码清单3-21所示。
代码清单3-21 Thymeleaf项目-配置文件内容
## thymeleaf缓存是否开启,开发时建议关闭,否则更改页面后不会实时展示效果 spring.thymeleaf.cache=false ## thymeleaf编码格式 spring.thymeleaf.encoding=UTF-8 ## thymeleaf对HTML的校验很严格,用这个去除thymeleaf严格校验 spring.thymeleaf.mode=LEGACYHTML5 ## thymeleaf模板文件前缀 spring.thymeleaf.prefix=classpath:/templates/ ## thymeleaf模板文件后缀 spring.thymeleaf.suffix=.html
到这里,准备工作已经完成。需要做的是创建一个Controller和HTML进行测试。新建一个IndexController,我们先写一个简单的路由跳转方法并且传一个字符串值进行测试。IndexController内容如代码清单3-22所示。
![](https://epubservercos.yuewen.com/47855F/15056703904175906/epubprivate/OEBPS/Images/Figure-T43_80974.jpg?sign=1738891619-gqzCskf5BYQNC3mDuHapxeLlSOwYbp8s-0-ed3bfe2df54b1450f8c9d74435a8958d)
然后,在src/mian/resources/templates下新建一个index.html(需要结合配置文件中spring.thymeleaf.prefix的配置信息存放HTML),使用th:text="${msg}"来接收后台传来的数据。index.html内容如代码清单3-23所示。
![](https://epubservercos.yuewen.com/47855F/15056703904175906/epubprivate/OEBPS/Images/Figure-T43_80975.jpg?sign=1738891619-hEeVAtsFry8IvaccRrC9SXuCNkVjgyUb-0-54162474e8baadd0ef8ce817d61dd9e2)
启动项目,在浏览器上访问http://localhost:8080,可以看到有如下显示:
Hello, Dalaoyang !
其实到这里Spring Boot整合Thymeleaf已经完成,但是为了方便后面章节的使用,笔者在这里再介绍一下Thymeleaf模板的常用语法。
• th:text 设置当前元素的文本内容。
• th:value 设置当前元素的值。
• th:each 循环遍历元素,一般配合上面两者使用。
• th:attr 设置当前元素的属性。
• th:if th:switch th:case th:unless 用作条件判断。
• th:insert th:replace th:incloud 代码块引入,一般用作提取公共文件,或者引用公共静态文件等。
当然,Thymeleaf也提供了一些内置方法供我们使用,比如:
• #numbers 数字方法。
• #dates 日期方法。
• #calendars 日历方法。
• #strings 字符串方法。
• #lists 集合方法。
• #maps 对象方法。
关于Thymeleaf先了解到这里,后面的章节会对它有具体的实战使用,这里就不再赘述了。
3.5.2 使用FreeMarker
刚刚介绍了Thymeleaf模板,接下来我们学习FreeMarker模板,无论是语法还是配置等,两者都有很多相似的地方。接下来,我们学习Spring Boot项目整合FreeMarker模板。
新建项目,在项目中加入Freemarker依赖,如代码清单3-24所示。
![](https://epubservercos.yuewen.com/47855F/15056703904175906/epubprivate/OEBPS/Images/Figure-T44_80976.jpg?sign=1738891619-dILaaiR5QOSwByPaCocomyF1aRJFuKBl-0-9b8c01030e0afcd73773f1023f2d8010)
接下来配置FreeMarker模板属性,与Thymeleaf模板配置类似,唯一需要注意的是模板文件后缀配置的是FTL文件。配置文件如代码清单3-25所示。
代码清单3-25 FreeMarker项目-配置文件内容
## freemarker缓存是否开启 spring.freemarker.cache=false ## freemarker编码格式 spring.freemarker.charset=UTF-8 ## freemarker模板文件前缀 spring.freemarker.template-loader-path=classpath:/templates/ ## freemarker模板文件后缀,注意这里后缀名是.ftl spring.freemarker.suffix=.ftl
接下来,创建一个IndexController进行测试,内容如代码清单3-26所示。
![](https://epubservercos.yuewen.com/47855F/15056703904175906/epubprivate/OEBPS/Images/Figure-T45_80977.jpg?sign=1738891619-HVwxWOM8e9VyCmmXvgckrbsEN37amY5S-0-eaf70ce661814c00b0ba90ad404d38e2)
在src/resources/templates下新建index.ftl(注意文件后缀),使用${msg}接收后来传送的数据,文件内容如代码清单3-27所示。
![](https://epubservercos.yuewen.com/47855F/15056703904175906/epubprivate/OEBPS/Images/Figure-T45_80978.jpg?sign=1738891619-9Cs5LEIr1xs9CB61czGRETDga2tmJG58-0-9d5d4b6b4ed16599317c56a6b98263aa)
到这里,项目配置完成。启动项目,在浏览器上访问http://localhost:8080,可以看到如下结果:
Hi, Dalaoyang !
接下来介绍FreeMarker的常用语法。
(1)通用赋值:${xxx}格式
• 比如后台返回键值aaa=string,可以使用${aaa?string},输出“Hi , Dalaoyang !”。
• 比如后台返回键值aaa="2018-08-01 23:59",可以使用${aaa?string("EEE,MMM d,yy")},输出:星期二,八月 14,18。
• 比如后台返回键值aaa=false,可以使用${aaa?string("是","否")},输出:否。
(2)数值赋值:#{xxx}或者#{xxx;format}格式
后者format可以是以下格式(其中X和Y为数字):
• mX 小数部分最小X位,比如后台返回值aaa=3.782131,可以使用#{x;m2},输出3.78。
• MX 小数部分最大X位,比如后台返回值aaa=3.782131,可以使用#{x;M3},输出3.782。
• mXMY 小数部分最小X位,最大Y位,比如后台返回值aaa=3.782131,可以使用#{x;m1M3},输出3.782。
(3)常用内建函数
• html 对字符串进行HTML编码。
• lower_case 字符串转小写。
• upper_case 字符串转大写。
• trim 去前后空格。
• size 获取集合元素数量。
• int 获取数字部分。
(4)常用指令
• if elseif else 分支控制语句。
• list 输出集合数据。
• import 导入变量。
• include 类似于包含指令。
关于FreeMarker模板的内容到这里暂时结束了,毕竟这是一本关于Spring Boot的书,详细内容可以参考官方文档进行系统学习。
3.5.3 使用传统JSP
虽然Spring Boot不建议使用JSP作为渲染页面,但是一定要使用的话,也是可以的。
新建项目,加入JSP对应的依赖和JSTL表达式依赖,并且需要注意packaging内不是JAR而是WAR。pom文件代码如代码清单3-28所示。
![](https://epubservercos.yuewen.com/47855F/15056703904175906/epubprivate/OEBPS/Images/Figure-T46_80979.jpg?sign=1738891619-no3B7pbw4KzpqmbLiEIX1W0TVHCwDk86-0-4cdbc107cf38d5b0656006a7b6a6d82b)
然后,需要在src/mian下新建一个webapp目录,并且在其下新建WEB-INF/jsp文件夹,用于放置JSP页面,结构图如图3-4所示。
接下来,我们进行配置文件的配置,主要配置JSP页面文件前缀和后缀,基本上和Thymeleaf、FreeMarker类似,配置如代码清单3-29所示。
![](https://epubservercos.yuewen.com/47855F/15056703904175906/epubprivate/OEBPS/Images/Figure-P47_79396.jpg?sign=1738891619-GlaNMZWGLGczqxgEjGo4hublbIrW9XAt-0-32e94cdda547bf5ea951d25cd2cffcd0)
图3-4 JSP项目启动Log
代码清单3-29 JSP项目-配置文件内容
spring.mvc.view.prefix=/WEB-INF/jsp/ spring.mvc.view.suffix=.jsp
然后创建一个IndexController文件作为跳转,完整内容如代码清单3-30所示。
![](https://epubservercos.yuewen.com/47855F/15056703904175906/epubprivate/OEBPS/Images/Figure-T47_80980.jpg?sign=1738891619-9HxfSXaRHQ2nEechcpLeTZjlBWMWlpyz-0-4819682c48e2a805ac05b38683fcbec8)
最后,在创建的JSP存放文件夹下创建一个index.jsp,其中${name}用于接收后台传来的值。JSP页面代码如代码清单3-31所示。
![](https://epubservercos.yuewen.com/47855F/15056703904175906/epubprivate/OEBPS/Images/Figure-T48_80981.jpg?sign=1738891619-wgoWyGjBL7xl7s7fNpKKpIM4s0WEYeZH-0-e78508cc14a4ee6fb4120de1093c11a2)
在项目目录下使用命令mvn spring-boot:run启动项目,在浏览器上访问http://localhost:8888/,可以看到如下结果:
Hello,dalaoyang
到这里,Spring Boot使用JSP介绍完了。对于Spring Boot还有很多模板框架可以使用,如果不是必需的,那么建议不要使用。