SpringBoot2.1.X 整合 Thymeleaf模板引擎

曾经终败给现在 2024-04-19 00:26 0阅读 0赞

一、 Thymeleaf简介：

Thymeleaf是用于Web和独立环境的现代服务器端Java模板引擎。
    
    Thymeleaf的主要目标是将优雅的自然模板带到您的开发工作流程中—HTML能够在浏览器中正确显示，并且可以作为静态原型，从而在开发团队中实现更强大的协作。Thymeleaf能够处理HTML，XML，JavaScript，CSS甚至纯文本。
    
    Thymeleaf的主要目标是提供一个优雅和高度可维护的创建模板的方式。 为了实现这一点，它建立在自然模板的概念之上，以不影响模板作为设计原型的方式将其逻辑注入到模板文件中。 这改善了设计沟通，弥合了前端设计和开发人员之间的理解偏差。
    
    Thymeleaf也是从一开始就设计(特别是HTML5)允许创建完全验证的模板。

官网  
https://www.thymeleaf.org/

官方文档  
https://www.thymeleaf.org/documentation.html

入门资料参考：  
https://blog.csdn.net/zrk1000/article/details/72667478

**二、Freemarker的使用**

**2.1、Thymeleaf相关maven依赖**

thymeleaf相关maven依赖
    			<dependency>
    		   		<groupId>org.springframework.boot</groupId>
    		   		<artifactId>spring-boot-starter-thymeleaf</artifactId>
    			</dependency>

**2.2、Freemarker配置application.proteties**

#开发时关闭缓存,不然没法看到实时页面
    		spring.thymeleaf.cache=false
    		spring.thymeleaf.mode=HTML5
    		#前缀
    		spring.thymeleaf.prefix=classpath:/templates/tl
    		#编码
    		spring.thymeleaf.encoding=UTF-8
    		#类型
    		spring.thymeleaf.content-type=text/html
    		#名称的后缀
    		spring.thymeleaf.suffix=.html

**2.3、建立文件夹**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

1)src/main/resources/templates/tl/
    2)建立一个index.html

**3.4、代码编写**

**ServerBean类**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1][]

**ThymeleafController类**

@Controller
    @RequestMapping("/thymeleaf")
    public class ThymeleafController {
    
        //注入
        @Autowired
        private ServerBean serverBean;
    
        @GetMapping("hello")
        public Object index(ModelMap map){
    
            //保存数据
         //   map.addAttribute("setting",serverBean);
            return "index";  //返回页面，但不用加后缀哦，配置文件已说明了！
        }
    
    
        @GetMapping("info")
        public Object info(ModelMap map){
    
            //保存数据
            map.addAttribute("setting",serverBean);
            return "admin/userinfo";  //返回页面，但不用加后缀哦，配置文件已说明了！
        }
    
    
    }

**index.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <p>直接在application.properties下配置（,classpath:/templates/），就可以直接访问tl/index.html哦！</p>
    <h4>Test =>Freemarker 模板引擎</h4>
    </body>
    </html>

**admin/userinfo.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h4>Test Thymeleaf模板引擎</h4>
    <p>测试内容，没有加th表达式</p>
    <h3 th:text="${setting.name}">测试后台数据</h3>
    </body>
    </html>

**效果：**

[http://localhost:8089/thymeleaf/hello][http_localhost_8089_thymeleaf_hello] 也可以直接来访问哦！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2][]

[http://localhost:8089/thymeleaf/info][http_localhost_8089_thymeleaf_info] 来访问时，th会起到作用，获取到后台数据哦

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 3][]

[http://localhost:8089/tl/admin/userinfo.html][http_localhost_8089_tl_admin_userinfo.html]可以直接来访问哦！但th会不起到作用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/66fcab2569e6434d951de89c4df2140e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ecc1d3980dc3455799736235fa0a279f.png
[http_localhost_8089_thymeleaf_hello]: http://localhost:8089/thymeleaf/hello
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/7fdba6c431c54133aa7e10d645451e36.png
[http_localhost_8089_thymeleaf_info]: http://localhost:8089/thymeleaf/info
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9a6b3adcd89f4e6e801ace0486623fbd.png
[http_localhost_8089_tl_admin_userinfo.html]: http://localhost:8089/tl/admin/userinfo.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d448a85b98ec4b2c862651742bbe9897.png