Thymeleaf简介

`模板引擎`

1、模板引擎：就是用来操作模板的引擎，就是用来渲染模板的，模板就是页面，就是用来生成页面的，其实具体的就是使用户界面与业务数据（内容）分离

2、模板引擎的作用：使前端页面也前端逻辑代码（业务数据）不再混合，便于阅读和修改以及简单错误

3、模板引擎的实质：函数，用来实现前端页面也前端逻辑（业务数据）代码的分离

4、ajax：ajax的出现使前后端分离成为可能。

Thymeleaf介绍

thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎。类似JSP，Velocity，FreeMaker等，它也可以轻易的与Spring MVC等Web框架进行集成作为Web应用的模板引擎。与其它模板引擎相比， Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用。

thymeLea支持Spring Expression Language语言作为方言，也就是SpEL，在学习JSP时我们对EL表达式都有一定的认识了，SpEL是可以用于Spring中的一种EL表达式。

简而言之，与我们使用过的JSP不同，thymeLeaf是使用html的标签来完成逻辑和数据的传入进行渲染，而且不用像jsp一样作为一个servlet被编译再生成。即便单独的thymeleaf html文件依旧可以正确打开并有少量（相对）有价值的信息，并且是可以被浏览器直接打开的。

可以说用thymeLeaf完全替代jsp是可行的。何况他的功能更强大。

提示：以下是本篇文章正文内容，下面案例可供参考

一、Thymeleaf特点

动静结合：页面采用模板+数据的方式，在前端美工手中，可以展示静态页面。在后台开发人员手中，也可以展示数据返回到页面后的界面。这是因为thymeleaf支持html原型，可以在原型上添加额外的属性，浏览器在解释html时会忽视未定义的属性，当定义的属性有值时就会动态替换静态页面，来实现动态展示。

开箱即用：它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，（

1.springMVC使用JSTL与EL表达式.

2.spring MVC默认的jsp页面的标签就是JSTL，而struts2默认的是OGNL标签。

3.struts2 使用OGNL与EL表达式：OGNL用struts2的自定标签内部。

）

避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

多方言支持：Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。与SpringBoot完美整合，SpringBoot提供了Thymeleaf的默认配置，并且为Thymeleaf设置了视图解析器，我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别，就是在模板语法上有区别。

二、使用步骤

1.使用IDEA创建项目,导入依赖

<dependencies>

       <dependency>
           <groupId>org.projectlombok</groupId>
           <artifactId>lombok</artifactId>
           <version>1.18.4</version>
           <scope>provided</scope>
       </dependency>

       <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-data-jpa</artifactId>
       </dependency>

       <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-thymeleaf</artifactId>
       </dependency>

       <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-web</artifactId>
       </dependency>

       <dependency>
           <groupId>com.baomidou</groupId>
           <artifactId>mybatis-plus-boot-starter</artifactId>
           <version>3.1.1</version>
       </dependency>

       <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-devtools</artifactId>
           <scope>runtime</scope>
           <optional>true</optional>
       </dependency>

       <dependency>
           <groupId>mysql</groupId>
           <artifactId>mysql-connector-java</artifactId>
           <scope>runtime</scope>
       </dependency>

       <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-test</artifactId>
           <scope>test</scope>
           <exclusions>
               <exclusion>
                   <groupId>org.junit.vintage</groupId>
                   <artifactId>junit-vintage-engine</artifactId>
               </exclusion>
           </exclusions>
       </dependency>
   </dependencies>

2.控制器开发

@RequestMapping(value = "/login", method = RequestMethod.POST)
    public String devLogin2(@RequestParam(name = "userPassword",required = false) String userPassword,
                            @RequestParam(name = "userName",required = false) String userName) {
        DevUser devUser=new DevUser();
        devUser.setDevName(userName);
        devUser.setDevPassword(userPassword);
        devUser = devUserService.login(devUser);
        System.out.println(devUser.toString());
        if (devUser.getId()!=0){
            System.out.println("登录成功");
        }else{
            System.out.println("登录失败");
        }
        return "devlogin";
    }

核心语法

1.表达式

Thymeleaf 表达式共分为以下五种:

变量表达式:${…}

选择或星号表达式:*{…}

文字国际化表达式:#{…}

URL表达式:@{…}

片段表达式:~{…}

变量表达式

变量表达式就是OGNL表达式或Spring EL表达式

变量表达式默认从Model Atttribute中获取数据,进行赋值,拼接等操作

赋值:userName

拼接:Hello userName!

字符串拼接还有另外一种简洁的写法:

拼接:Hello userName!

ExampleController 控制器添加方法传值:

@RequestMapping(value = "/logout", method = RequestMethod.GET)
    public String devLogout(Model model){
        model.addAllAttributes("userName","ss");
        return "redirect:/";
    }

内联语法:[[变量表达式]],使用时,必须先用th:inline=”text/javascript/none”激活,thinline可以在父级标签内使用,甚至可以作为body标签

页面:inline.html(文本内联):

<div th:inline="text">
<p>Hello,[[${userName}]]!</p>
</div>

内联inline文本比th:text的代码少,但不利于原型显示

页面inline.html(脚本内联)

<scrpit th:inline="javascrpit">
var msg = 'Hello'+[[${userName}]]+'!';
alert(msg)
</script>

Thymeleaf 包含了一些基本对象,可以用于我们的视图中,这些基本对象使用 # 号开头

#ctx:上下文对象

#vars:上下文变量

#locale:区域对象

#request:(仅 Web 环境可用)HttpServietRequest对象

#respone:(仅 Web 环境可用)HttpServietRespone对象

#session:(仅 Web 环境可用)HttpSession对象

#servletContext:(仅Web环境可用)ServletContext对象

选择表达式

选择表达式很像变量表达式,不过它们用一个预先选择的对象来代替上下文变量容器来执行,类似*{customer.name}

被指定的 object 由th:object属性定义:

<div th:object="${user}">
<span th:text="*{userName}">...</span>
</div>

等价于

…

1 2 3 URL表达式 URL表达式指的是把一个有用的上下文或会话信息添加到URL,这个过程通常被叫做URL重写,比如@{/user/list}

URL还可以设置参数:@{/user/detail(id=${usrId})}
相对路径:@{…/documents/report}

Thymeleaf简介

模板引擎

Thymeleaf介绍

一、Thymeleaf特点

二、使用步骤

你可能也喜欢

`模板引擎`