zoukankan      html  css  js  c++  java
  • Thymleaf引擎模板

    模板引擎,我们其实大家听到很多,其实jsp就是一个模板引擎,还有用的比较多的freemarker,包括SpringBoot给我们推荐的Thymeleaf,模板引擎有非常多,但再多的模板引擎,他们的思想都是一样的,什么样一个思想呢我们来看一下这张图:

     

    引入Thymeleaf

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

    Thymeleaf 在Github 的主页:https://github.com/thymeleaf/thymeleaf

    Spring官方文档:找到我们对应的版本

    https://docs.spring.io/spring-boot/docs/2.2.5.RELEASE/reference/htmlsingle/#using-boot-starter

    找到对应的pom依赖

          <dependency>
                <groupId>org.thymeleaf</groupId>
                <artifactId>thymeleaf-spring5</artifactId>
            </dependency>
            <dependency>
                <groupId>org.thymeleaf.extras</groupId>
                <artifactId>thymeleaf-extras-java8time</artifactId>
            </dependency>

    我们去找一下Thymeleaf的自动配置类:ThymeleafProperties

    @ConfigurationProperties(
        prefix = "spring.thymeleaf"
    )
    public class ThymeleafProperties {
        private static final Charset DEFAULT_ENCODING;
        public static final String DEFAULT_PREFIX = "classpath:/templates/";
        public static final String DEFAULT_SUFFIX = ".html";
        private boolean checkTemplate = true;
        private boolean checkTemplateLocation = true;
        private String prefix = "classpath:/templates/";
        private String suffix = ".html";
        private String mode = "HTML";
        private Charset encoding;
    }
     

    我们可以在其中看到默认的前缀和后缀!

    我们只需要把我们的html页面放在类路径下的templates下,thymeleaf就可以帮我们自动渲染了。

    使用thymeleaf什么都不需要配置,只需要将他放在指定的文件夹下即可!

    使用时要导入命名空间(以官网为标准)

    xmlns:th="http://www.thymeleaf.org"

    测试一下

    @RequestMapping("/t1")
    public String test1(Model model){
        //存入数据
        model.addAttribute("msg","Hello,Thymeleaf");
        //classpath:/templates/test.html
        return "test";
    }

    编写前端页面

    <!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>测试</title>
    </head>
    <body>
    <h1>测试页面</h1>
    
    <!--th:text就是将div中的内容设置为它指定的值,和之前学习的Vue一样-->
    <div th:text="${msg}"></div>
    </body>
    </html>

    其他语法看官方文档

    https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.pdf

  • 相关阅读:
    SESSION与COOKIE的区别
    一位36岁程序员的困惑(转)
    COOKIE&&SESSION
    PHP递归实现层级树状展现数据
    小程序优化
    css层级
    组件封装
    webpack构建流程
    HTTP2.0
    vue中子组件修改父组件传入的值
  • 原文地址:https://www.cnblogs.com/IanIan/p/14455307.html
Copyright © 2011-2022 走看看