springboot——【框架】——Thymeleaf,一款致力于前端的框架

什么是Thymeleaf

Thymeleaf框架,这是一个较为新颖的模板引擎。使用Thymeleaf,可以完全抛弃JSP,进入一种更为简便的页面开发模式。
说白了,就是一款致力于前后交互的框架,可以使用类似于JSTL标签的标签进行数据的显示。可以简单的理解为升级版的JSTL,完全取代JSP的新技术。

为什么要使用Thymeleaf

第一,Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。

这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。

第二,Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言,可以直接套用模板实现JSTL、 OGNL表达式效果,避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

第三,Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。

举个例子:
jsp如果在使用each迭代时,更是要使用到c标签库

thymeleaf则使用th:each="user:${user}",不需要像jsp一样引入很多标签库

再问个问题:如果要在jsp页面中获取当前时间怎么办??
大家想一下,是不是有些复杂?
thymeleaf拥有强大的内置工具,只要使用th:text="#dates.format(date,"yyyy-MM-dd")"即可获取时间

再比如:jsp页面,无法进行选择操作,而thymeleaf可以使用th:switch="${sex}" th:case="0"
来实现选则操作,控制页面内容。

以及进行判断的th:if="${session.user!=null}"等来进行显示的判断操作。

如何使用Thymeleaf

第一步:加入依赖
在maven的pom文件添加如下依赖,进行更新即可。


        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-thymeleafartifactId>
        dependency>

第二步:使用
Thymeleaf一般是配合HTML进行一个Thymeleaf+HTML的前端开发配套使用。
把html标签里,改为如下:

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

它的基础语法如下:

对象数据
th:text="${user.username}"
th:text="${user['username']}"
th:object="${user}"  th:text="*{username}"

list集合数据
th:text="${list.get(0)}"
th:text="${list[1]}"

map集合数据
th:text="${map['key1']}"
th:text="${map.key2}"

静态资源
src="/static/imgs/1.jpg"

模板的内置对象
th:text="${#session.getAttribute('sessionuser').username}"
th:text="${session.sessionuser.username}"

工具内置对象
th:text="${#dates.format(date,'yyyy-MM-dd')}"
th:text="${#dates.createNow()}"
th:text="${#dates.createToday()}"

URL链接
th:src="@{/static/imags/1.jpg}"
th:href="@{/url(username=jack,password=123)}"
th:href="@{/url/{username}/{password}(username=tom,password=000)}"

if的使用
th:if="${sex==0}"

switch case的使用
th:switch="${sex}"
th:case="0"

算术运算
th:text="${1+2}"

定义参数
th:with="sum=2+2" th:text="${sum}"

迭代
th:each="str:${list}"
th:text="${str}"

三目运算符
th:text="${sex==0?'男':'女'}"

样式操作
th:class="red"

value属性
th:type="text" th:value="请输入用户名"

布尔值修复
th:checked="${sex==0}"

js的onclick方法
h:onclick="'buy('+${pro.pid}+','+${pro.price}+')'"

我们来写一个简单的例子吧。(以下例子需有SpringMVC基础)
controller
controller写一个映射路径为test的方法,返回名字为test.html(博主在yml中配置了后缀,所以没有加上.html后缀)的前端页面并设置model值。

package com.myweb.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class test {

    @RequestMapping("/test")
    public String test(Model model){
        model.addAttribute("title","这是一个标题!");
        return "test";
    }
}

html
html中引入thymeleaf,使用标签显示title,th:text="${ }"这格式都固定的,把上面那些基础格式背熟就行了,很简单的,并不难,就那么几个标签用的多。


<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<h1 th:text="${title}">h1>
body>
html>

在浏览器输入/test,显示了我们的数据。
springboot——【框架】——Thymeleaf,一款致力于前端的框架_第1张图片

总结

Thymeleaf是一款前端插件,可以完全替代JSP,通常是Thymeleaf+HTML进行前端的开发,需要导入依赖,以及在HTML标签内加入引用。拥有很多方便的标签方法。常用来显示、判断、循环、链接、会话等操作。

你可能感兴趣的:(#,Spring)