zoukankan      html  css  js  c++  java
  • Spring Boot笔记六:Thymeleaf介绍

    什么是thymeleaf?

    thymeleaf是一个模板引擎,是用来在Spring Boot中代替JSP的

    1. 引用thymeleaf

              <dependency>
                  <groupId>org.springframework.boot</groupId>
                  <artifactId>spring-boot-starter-thymeleaf</artifactId>
              </dependency>
      
    2. 控制thymeleaf的版本号(thymelaf3以上的话,layout必须2以上才支持)

        <properties>
            <thymeleaf.version>3.0.11.RELEASE</thymeleaf.version>
            <thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version>
        </properties>
    

    创建最简单的thymeleaf

    thymeleaf默认的路径是classpath://templates,必须是这个路径才能识别

    我们在templates文件夹下面新建一个Vae.html,然后在Controller里面写一个方法去调用这个html

        @RequestMapping("/Vae")
        public String thymeleafTest(){
            return "Vae";
        }
    

    点击运行,如图:

    完美,我们已经新建了一个最简单的thymeleaf了

    thymeleaf语法

    可以去官网下载文档查看

    1. 写一个hello传到html,我的Controller改为这样
        @RequestMapping("/Vae")
        public String thymeleafTest(Map<String,Object> map){
            map.put("hello","你好");
            return "Vae";
        }
    

    前端的html需要做两个地方

    1. 引入thymeleaf的声明,这样写thymeleaf就会有提示
    <html xmlns:th="http://www.thymeleaf.org">
    
    1. 用thymeleaf
    <div th:text="${hello}">欢迎</div>
    

    写完之后,整个前端html就是这样

    <html>
    <html xmlns:th="http://www.thymeleaf.org">
    <body>
    <h1>thymeleaf许嵩</h1>
    
    <div th:text="${hello}">欢迎</div>
    </body>
    </html>
    

    重启,再来访问,如图:

    非常好,写th:text后面的${},让我想起来了JSP里面的EL。可以发现我

    里面用了thymeleaf,将会得到“你好”二字,如果我们将这个html拷贝到项目外面会,显示的就是欢迎了,这表明了一件事

    含有thymeleaf语法的html文件只有经过thymeleaf模板解析之后生效,项目之外就变成一个普通的HTML了

    1. th可以替换任意的HTML元素
    <div id="${hello}" class="${hello}" th:text="${hello}"></div>
    
    1. thymeleaf表达式
    ${}:这个我们已经用过了,就是取值的
    *{}:这个是代指${},例如Person类有name属性,${Person.name}=*{name}
    #{}:获取国际化内容
    @{}:定义url的,例如 @{https://localhost:8080(id=${Id})}
    ~{}:片段引用表达式
    
  • 相关阅读:
    Python+selenium+unittest的GUI自动化框架实现
    新手学习selenium路线图(老司机亲手绘制)学前篇(转上海悠悠)
    jmeter需要登录才会返回的接口验证
    python、java大作战,python测试dubbo接口
    eclipse生成doc文件乱码
    读书笔记:读完互联网测试经验的感受
    关于全功能团队及测试人员的发展
    一个Junit做单元测试的简单例子
    python搭建简单的web服务器
    我的第一篇博客
  • 原文地址:https://www.cnblogs.com/yunquan/p/10344449.html
Copyright © 2011-2022 走看看