Springboot之Thymeleaf 入门(环境搭建)|第一章-yellowcong 刺骨的言语ヽ痛彻心扉 2022-05-28 12:37 195阅读 0赞 > Thymeleaf 这个模版引擎是Springboot推荐的,而以前我们使用的jsp,人家Springboot已经不推荐使用了,相对于Thymeleaf ,jsp的效率低一些。搭建Thymeleaf 的环境步骤:1、配置pom.xml配置文件,添加`spring-boot-starter-thymeleaf`和`nekohtml`两个依赖包;2、配置poperites ;3、创建控制器类;4、创建模板文件;5、访问测试。 ## 代码地址 ## https://gitee.com/yellowcong/springboot-thymeleaf/tree/master/chapter1 ### 目录结构 ### ![这里写图片描述][SouthEast] ## Springboot推荐的模版引擎 ## Spring Boot提供了默认配置的模板引擎主要有以下几种: 1、Thymeleaf 2、FreeMarker 3、Velocity 4、Groovy 5、Mustache Spring Boot建议使用这些模板引擎,避免使用JSP,若一定要使用JSP将无法实现Spring Boot的多种特性,具体可见后文:支持JSP的配置 当你使用上述模板引擎中的任何一个,它们默认的模板配置路径为:`src/main/resources/templates`。当然也可以修改这个路径,可以通过配置`spring.thymeleaf.prefix=classpath:/templates/`,设定模板的路径。 ## 搭建Thymeleaf ## ### 1、配置pom.xml ### 这个地方导入了`spring-boot-starter-thymeleaf`和`nekohtml`两个依赖包,`nekohtml` 这个依赖包是为了解决默认的HTML5模版要求严格的问题,修改默认模版`spring.thymeleaf.mode=LEGACYHTML5`,可以解决这个问题。 <!-- 导入thymeleaf模版 的依赖--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <!-- spring.thymeleaf.mode=LEGACYHTML5 --> <dependency> <groupId>net.sourceforge.nekohtml</groupId> <artifactId>nekohtml</artifactId> </dependency> ### 2、配置application.properties ### 这个地方,我们需要注意`spring.thymeleaf.mode=LEGACYHTML5`和`spring.thymeleaf.cache=false` 这两个地方的配置。这两个不是默认的配置,而是修改过的。解决界面缓存和html检查严格的问题。 #日志地址 logging.file=logs/config/demo-xx.log info.name=入门案例‹ #端口号 server.port=80 #访问路径 server.context-path=/ ############################################## #配置Thymeleaf #thymeleaf start spring.thymeleaf.mode=LEGACYHTML5 #编码 spring.thymeleaf.encoding=UTF-8 #返回模板类型 spring.thymeleaf.content-type=text/html #开发时关闭缓存,不然没法看到实时页面 spring.thymeleaf.cache=false # 在构建URL时预先查看名称的前缀 (默认就是这个) spring.thymeleaf.prefix=classpath:/templates/ # 构建URL时附加查看名称的后缀.(默认就是 html的结尾的) spring.thymeleaf.suffix=.html #thymeleaf end ############################################## ### 3、配置控制器 ### package com.yellowcong.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.RequestMapping; /** * 创建日期:2018年4月5日<br/> * 代码创建:黄聪<br/> * 功能描述:管理员<br/> */ @Controller public class IndexController { /** * 创建日期:2018年4月5日<br/> * 代码创建:黄聪<br/> * 功能描述:首页模版<br/> * @return */ @RequestMapping("/index") public String index(ModelMap map){ //单个数据 map.put("username", "入门案例"); return "admin/index"; } } ### 4、添加模板 ### 我们需要在`/resources/templates`这个目录下,建立对应的模板文件。 <!DOCTYPE html> <!-- 需要添加 <html xmlns:th="http://www.thymeleaf.org"/> 这样在后面的th标签就不会报错 --> <html xmlns:th="http://www.thymeleaf.org"> <head lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title th:text="${username}">xx</title> </head> <body> <h1 th:text="${username}">Hello World</h1> </body> </html> ### 5、访问测试 ### 可以看到,访问后,我们的title部分,和body部分,都有了类容提示了。 ![这里写图片描述][SouthEast 1] ## 常见问题 ## ### 1、Whitelabel Error Page ### 导致这个问题的一般原因,就是html的模板,没有严格遵循html5的标准,导致了报错,你可能会发现在默认配置下,thymeleaf对.html的内容要求很严格,比如`<meta charset="UTF-8" />`, 如果少最后的标签封闭符号/,就会报错而转到错误页。也比如你在使用Vue.js这样的库,然后有`<div v-cloak></div>`这样的html代码, 也会被thymeleaf认为不符合要求而抛出错误。 解决问题的方式有两种:1、严格遵循html5;2、添加依`nekohtml`赖包,配置application.properties 设置`spring.thymeleaf.mode = LEGACYHTML5` spring.thymeleaf.mode的默认值是HTML5,其实是一个很严格的检查,改为LEGACYHTML5可以得到一个可能更友好亲切的格式要求。 ![这里写图片描述][SouthEast 2] #### 配置LEGACYHTML5 #### 配置这个的时候,还需要添加依`nekohtml`赖包,然后配置application.properties 设置`spring.thymeleaf.mode = LEGACYHTML5` <!-- spring.thymeleaf.mode=LEGACYHTML5 --> <dependency> <groupId>net.sourceforge.nekohtml</groupId> <artifactId>nekohtml</artifactId> </dependency> ## 参考文章 ## [https://www.thymeleaf.org/documentation.html][https_www.thymeleaf.org_documentation.html] [https://www.codercto.com/a/3110.html][https_www.codercto.com_a_3110.html] [http://blog.didispace.com/categories/Spring-Boot/][http_blog.didispace.com_categories_Spring-Boot] [SouthEast]: /images/20220528/2e4a8796fd4946edbab55442eccae426.png [SouthEast 1]: /images/20220528/a14a50046700480ca5287e2539e930e3.png [SouthEast 2]: /images/20220528/523a276b3c6e4b48a0657509c096f421.png [https_www.thymeleaf.org_documentation.html]: https://www.thymeleaf.org/documentation.html [https_www.codercto.com_a_3110.html]: https://www.codercto.com/a/3110.html [http_blog.didispace.com_categories_Spring-Boot]: http://blog.didispace.com/categories/Spring-Boot/
还没有评论,来说两句吧...