• 10 springboot的thymeleaf模板引擎


    springboot的thymeleaf模板引擎

    概念

    模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。

    比如JSP就是一个模板引擎,jsp通过 java 结合 html最后生成一个网页,模板引擎的思想都是一样的,都由 模板 + 数据 经过模板引擎渲染 最后 变成网页 ,如下图:

    image-20200831234659280

    为什么要使用thymeleaf模板引擎呢,因为springboot默认不支持jsp。具体原因:如果希望以 Jar 形式发布模块则尽量不要使用 JSP 相关知识,这是因为 JSP 在内嵌的 Servlet 容器上运行有一些问题 (内嵌 Tomcat、 Jetty 不支持 Jar 形式运行 JSP,Undertow 不支持 JSP)。所以就使用了thymeleaf,因为thymeleaf上手容易。

    引入thymeleaf依赖

    在springboot的pom文件中,引入下面的依赖就完成了thymeleaf的导入。

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

    使用thymeleaf

    那么如何使用thymeleaf呢 ? 我们进入到thymeleaf的配置类(ThymeleafProperties)去寻找使用方法,如下图:

    image-20200901000645449

    可以发现thymeleaf定义了前缀是模板文件存储的路径,后缀是模板的文件类型,这个是视图解析器的配置,springMVC里面的内容。表示:在控制器那里只需返回html的文件名即可,类型和文件夹路径不用填写,例子如下:

    随便在templates文件夹下建立一个名为test.html的文件,这个html文件名字必须和下面test()方法返回值的名字一致。否则通过controller映射不到templates文件夹下的test.html文件。

    controller层:

    @Controller
    public class TestView {
    
        @RequestMapping("/test")
        public String test(){
            return "test";
        }
    }
    

    浏览器访问如下图:image-20200901002119628

    可以发现直接访问映射路径test,可以直接访问到test.html文件。

    上面的都是简单应用,接下来真正使用了thymeleaf,thymeleaf使用文档,要想使用thymeleaf,首先在html文件头部是引入thymeleaf的命名空间,示例如下:

    <html lang="en"  xmlns:th="http://www.thymeleaf.org">
    

    controller层里面赋值:

    @Controller
    public class TestView {
    
        @RequestMapping("/test")
        public String test(Model mode){
            mode.addAttribute("msg","获取到的值就是这个");
            return "test";
        }
    }
    

    test.html前端页面取值:

    <!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <!-- 适配手机 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 指定IE使用的内核 -->
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Title</title>
    </head>
    <body>
    <!--    msg是controller那边赋值的变量, ${}是取值形式-->
       <div th:text="${msg}"></div>
    </body>
    </html>
    

    补充:输入th标签时,如果没有提示,应该是插件没有打开,setting - plugins - 搜索thymeleaf - 然后打勾。

    浏览器访问test映射路径:

    image-20200901093204474

    可以发现,controller那边的数据,test.html页面这边通过 th:text标签获取到。

    还有很多thymeleaf的标签没有使用,可以去这里thymeleaf使用文档去查看用法,这里就不过多展示,现在都流行前后端分离。

  • 相关阅读:
    第四十三课:jQuery插件化
    js模块化开发
    第四十二课:基于CSS的动画引擎
    第四十一课:CSS3 animation详解
    第四十课:CSS3 transition详解
    第三十九课:requestAnimationFrame详解
    几种排序
    图与搜索
    数组
    链表
  • 原文地址:https://www.cnblogs.com/unlasting/p/13594421.html
Copyright © 2020-2023  润新知