day08-2-Thymeleaf

liyuelian 2023-03-28 原文

服务器渲染技术-Thymeleaf

1.基本介绍

官方在线文档：Read online 文档下载：Thymeleaf 3.1 PDF, EPUB, MOBI

Thymeleaf 是什么

Thymeleaf是一个现代的服务器端Java模板引擎，适用于Web和独立环境，能够处理HTML，XML，JavaScript，CSS甚至纯文本
Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，可完全替代 JSP
Thymeleaf 是一个 Java 类库，是一个xml/ xhtml/ html5的模板引擎，可以作为 mvc 的 web 应用的 view 层

Thymeleaf 的优点

实现 JSTL、OGNL 表达式效果，语法类似，上手快
Thymeleaf 模板页面无需服务器渲染，也可以被浏览器运行，页面简洁
SpringBoot 支持 FreeMarker、Thymeleaf、Veocity

Thymeleaf 的缺点

Thymeleaf 并不是一个高性能的引擎，适用于单体应用
如果要做一个高并发的应用，选择前后分离更好，比如 Vue + SpringBoot

2.Thymeleaf机制

Thymeleaf 是服务器渲染技术，页面数据是在服务端进行渲染的

例如：某个页面被请求，其中有一段Thymeleaf代码，则 thymeleaf 模板引擎完成处理之后（在服务端完成），才会将页面结果返回。因此使用Thymeleaf，并不是前后端分离。

3.语法

3.1表达式

1.表达式一览

表达式名称	语法	用途
变量取值	`${...}`	获取请求域、session域、对象等值
选择变量	`*{...}`	获取上下文对象值
消息	`#{...}`	获取国际化等值
链接	`@{...}`	生成链接
片段表达式	`~{...}`	jsp:include 作用，引入公共页面片段

2.字面量

文本值：'jack', 'hello', ...

数字：10, 5, 36.8, ...

布尔值：true，false

空值：null

变量：name, age, ...(变量名不能有空格)

3.文本操作

字符串拼接：+

变量替换：|age=${age}|

3.2运算符

1.数学运算

运算符：+，-，*，/，%

2.布尔运算

运算符：and，or

一元运算：!，not

3.比较运算

比较：>，<，>=，<=（gt，lt，ge，le）

等式：==，!=（eq，ne）

4.条件运算

If-then：(if)?(then)

If-then-else：(if)?(then):(else)

Default：(value)?:(defaultvalue)

3.3th属性

html有的属性，Thymeleaf基本都有，而常用的属性大概有七八个。其中th属性执行的优先级从1~8，数字越小优先级越高。

th:fragment

声明代码块，方便被 th:insert 引用。优先级为 order=8
th:text

设置当前元素的文本内容，相同功能的还有 th:utext，两者的区别在于前者不会转义 html 标签，而后者会。优先级为 order=7
th:value

设置当前元素的 value 值，类似修改指定属性的还有 th:src，th:href。优先级为 order=6
th:attr

修改任意属性，实际开发中使用较少，因为有丰富的其他th属性帮忙，类似的还有th:attrappend，th:attrprepend。优先级为 order=5
th:object

声明变量，一般和 *{} 一起配合使用，达到偷懒效果。优先级 order=4
th:if

条件判断，类似的还有 th:unless，th:switch，th:case。优先级为 order=3
th:each

遍历循环元素，和 th:text 或 th:value 一起使用。注意该属性修饰的标签位置。优先级为 order=2
th:insert

代码块引入，类似的还有 th:replace，th:include。三者的区别较大，若使用不当会破坏html结构，当用于公共代码块提取的场景，优先级为 order=1

3.4迭代

教程：使用百里香叶 (thymeleaf.org)

在前端页面中，总是出现需要遍历集合中的元素以展示所有信息的场景。Thymeleaf标准方言为我们提供了一个有用的属性：th:each。

假设后台控制器添加了一个商品列表的属性 prods。然后，我们使用 th:each 在模板中使用来遍历产品列表：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>Good Thymes Virtual Grocery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all" 
          href="../../../css/gtvg.css" th:href="@{/css/gtvg.css}" />
  </head>
  <body>
    <h1>Product list</h1>
  
    <table>
      <tr>
        <th>NAME</th>
        <th>PRICE</th>
        <th>IN STOCK</th>
      </tr>
      <tr th:each="prod : ${prods}">
        <td th:text="${prod.name}">Onions</td>
        <td th:text="${prod.price}">2.41</td>
        <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
      </tr>
    </table>
  
    <p>
      <a href="../home.html" th:href="@{/}">Return to home</a>
    </p>
  </body>
</html>

prod : ${prods} 属性的含义为：循环 ${prods} 属性的每一个元素。${prods} 为被迭代变量，prod 为迭代变量，即当前循环的元素。

需要注意的是，prod 为迭代变量的作用域为 <tr>元素，可用于其内部标记 <td>。

3.5条件运算

例如：

<a href="comments.html"
   th:href="@{/product/comments(prodId=${prod.id})}" 
   th:if="${not #lists.isEmpty(prod.comments)}">view</a>

这将创建一个指向评论页面（带有 URL ）的链接，并将参数设置为产品的参数，但前提是产品有任何评论。/product/comments prodId id

还有一种方法可以使用 Java 中的等效开关结构有条件地显示内容：switch-case-default

<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
  <p th:case="*">User is some other thing</p>
</div>

3.6注意事项

使用Thymeleaf语法首先要声明名称空间：xmlns:th="http://www.thymeleaf.org"
设置文本 th:text，设置input的值用 th:value，循环输出用 th:each，条件判断用 th:if，插入代码块用 th:insert，定义代码块用 th:fragment，声明变量用 th:object
th:each 的用法需要格外注意，如果你要循环一个div中的p标签，则 th:each 属性必须放在p标签上。若你将其放在div上，循环的将是整个div
变量表达式中提供了很多的内置方法，该内置方法是用#开头，不要和#{}混淆。

4.综合案例

需求：使用 SpringBoot+Thymeleaf 完成简单的用户登录-列表功能。
1. 如果没有登录就访问管理页面，提示非法访问，需要登录
2. 如果登录成功，显示登录名称，以及用户列表
3. 为了简化，这里就不连数据库了，使用Javabean代替数据

注意：这里的thymeleaf的templates目录不能直接访问，是因为SpringBoot默认可以访问的静态资源路径没有templates，因此除了上面请求转发到资源的方法外，也可以配置静态资源的访问路径：

spring:
  web:
    resources:
      static-locations: [classpath:/static/,classpath:/templates/]

或者在配置类中配置（略）。

4.1代码实现

（1）创建 SpringBoot 项目，引入基本的库文件

<!--导入SpringBoot父工程-->
<parent>
    <artifactId>spring-boot-starter-parent</artifactId>
    <groupId>org.springframework.boot</groupId>
    <version>2.5.3</version>
</parent>

<dependencies>
    <!--导入场景启动器-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!--lombok-->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-configuration-processor</artifactId>
    </dependency>

    <!--引入thymeleaf-starter：项目会自动完成配置,相关类会自动注入容器中-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

（2）创建 login.html 和 manage.html 和静态图片到指定目录（templates目录，该目录不能直接访问）

<!DOCTYPE html>
<!--引入命名空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body bgcolor="#CED3FE">
<div style="text-align: center">
    <h1>用户登录</h1>
    <hr/>
    <img src="images/login.jpg" width="35"/>
    <!--th:action="@{/login}"可以替换#-->
    <form action="#" th:action="@{/login}" method="post">
        <label style="color: red" th:text="${msg}"></label><br/>
        用户名：<input type="text" style="width: 150px" name="name"/><br/><br/>
        密 码：<input type="password" style="width: 150px" name="password"/><br/><br/>
        <input type="submit" value="登录"/>
        <input type="reset" value="重新填写"/>
    </form>
</div>
</body>
</html>

manage.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理后台</title>
</head>
<body bgcolor="#CED3FE">
<a href="#" th:href="@{/}">安全退出</a>
<!--行内取法，使用双层中括号-->
欢迎您：[[${session.loginAdmin.name}]]
<hr/>
<h1>管理雇员</h1>
<div style="position: center ">
    <table border="1px" cellspacing="0" bordercolor="green" style="width: 700px">
        <tr bgcolor="pink">
            <td>id</td>
            <td>name</td>
            <td>age</td>
            <td>pwd</td>
            <td>email</td>
        </tr>
        <!--循环展示-->
        <tr bgcolor="#ffc0cb" th:each="user:${users}">
            <td th:text="${user.id}">a</td>
            <td th:text="${user.name}">b</td>
            <td th:text="${user.age}">c</td>
            <td th:text="${user.password}">d</td>
            <td th:text="${user.email}">e</td>
        </tr>
    </table>
    <br/>
</div>
<hr/>
</body>
</html>

（3）Javabean

Admin.java

package com.li.thymeleaf.bean;

import lombok.Data;

/**
 * @author 李
 * @version 1.0
 */
@Data
public class Admin {
    private String name;
    private String password;
}

User.java

package com.li.thymeleaf.bean;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * @author 李
 * @version 1.0
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private Integer id;
    private String name;
    private Integer age;
    private String password;
    private String email;
}

（4）控制器Controller

IndexController

package com.li.thymeleaf.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

/**
 * @author 李
 * @version 1.0
 */
@Controller
public class IndexController {
    //编写方法，转发到登录页
    @GetMapping(value = {"/", "/login"})
    public String login() {
        //因为我们引入了starter-thymeleaf，这里会直接
        //使用视图解析到thymeleaf模板文件下的adminLogin.html
        return "adminLogin";
    }
}

AdminController

package com.li.thymeleaf.controller;

import com.li.thymeleaf.bean.Admin;
import com.li.thymeleaf.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import javax.servlet.http.HttpSession;
import java.util.ArrayList;
import java.util.List;

/**
 * @author 李
 * @version 1.0
 */
@Controller
public class AdminController {
    /**
     * 响应用户登录请求
     *
     * @param admin   自定义对象参数
     * @param session 将获取的admin信息放入session中（登录成功）
     * @param model   model的数据会自动放入request域中传给下一个页面（登录失败）
     * @return
     */
    @PostMapping("/login")//从请求方式区分，不会冲突
    public String login(Admin admin, HttpSession session, Model model) {
        //验证用户是否合法
        if (StringUtils.hasText(admin.getName()) && "666".equals(admin.getPassword())) {//合法
            //将登陆用户保存到session中
            session.setAttribute("loginAdmin", admin);
            //应使用重定向（用请求转发刷新页面会重复提交表单），这里的重定向是到mainPage方法，而不是直接到页面。
            return "redirect:manage.html";
        } else {//不合法，返回重新登录
            model.addAttribute("msg", "用户名或密码错误!");
            return "adminLogin";
        }
    }

    //处理用户请求到manage.html
    @GetMapping("/manage.html")
    public String mainPage(Model model, HttpSession session) {
        //先校验（这里暂时使用session验证，后面可以统一使用拦截器）
        Object loginAdmin = session.getAttribute("loginAdmin");
        if (loginAdmin != null) {//说明登陆过
            //模拟用户数据
            List<User> users = new ArrayList<>();
            users.add(new User(1, "关羽", 555, "1234", "gy@qq.com"));
            users.add(new User(2, "张飞", 455, "12345", "zf@qq.com"));
            users.add(new User(3, "赵云", 344, "12346", "zy@qq.com"));
            users.add(new User(4, "马超", 300, "12347", "mc@qq.com"));
            users.add(new User(5, "黄忠", 666, "12348", "hz@qq.com"));
            //放入到request域中(model中的数据会自动放入到request域中)
            model.addAttribute("users", users);
            return "manage";//这里才是真正视图解析到 templates/manage.html
        } else {//说明没有登录过，拒绝访问manage页面
            model.addAttribute("msg", "你没有登录/请登录！");
            return "adminLogin";
        }
    }
}

（5）启动类

package com.li.thymeleaf;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * @author 李
 * @version 1.0
 */
@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class,args);
    }
}

（6）测试

未经登录直接访问manage.html

登录测试

4.2练习

把前面接收参数相关注解、自定义转换器、处理JSON、内容协商相关代码和案例过一遍
将Thymeleaf用户管理改为妖怪列表，字段做相应的改变，进行练习
- Monster [id，name，skill，age，salary，birth]

Thymeleaf day gt lt strong Java

有关day08-2-Thymeleaf的更多相关文章

ruby-on-rails - rails : Find tasks that were created on a certain day? - 2
我有一个任务列表(名称、starts_at)，我试图在每日View中显示它们(就像iCal)。deftodays_tasks(day)Task.find(:all,:conditions=>["starts_atbetween?and?",day.beginning,day.ending]end我不知道如何将Time.now(例如“2009-04-1210:00:00”)动态转换为一天的开始(和结束)，以便进行比较。最佳答案 deftodays_tasks(now=Time.now)Task.find(:all,:conditio
什么是0day漏洞？如何预防0day攻击？ - 2
什么是0day漏洞？0day漏洞，是指已经被发现，但是还未被公开，同时官方还没有相关补丁的漏洞；通俗的讲，就是除了黑客，没人知道他的存在，其往往具有很大的突发性、破坏性、致命性。0day漏洞之所以称为0day，正是因为其补丁永远晚于攻击。所以攻击者利用0day漏洞攻击的成功率极高，往往可以达到目的并全身而退，而防守方却一无所知，只有在漏洞公布之后，才后知后觉，却为时已晚。“后知后觉、反应迟钝”就是当前安全防护面对0day攻击的真实写照！为了方便大家理解，中科三方为大家梳理当前安全防护模式下，一个漏洞从发现到解决的三个时间节点：T0：此时漏洞即0day漏洞，是已经被发现，还未被公开，官方还没有相
ruby - Rails 比较 date.end_of_day.to_datetime 和 date.to_datetime.end_of_day 返回的日期对象值时返回 false - 2
ruby1.9.3dev(2011-09-23修订版33323)[i686-linux]轨道3.0.20最近为什么在与DateTimeonRails相关的RSpecs项目上工作我发现在给定日期以下语句发出的值date.end_of_day.to_datetime和date.to_datetime.end_of_day虽然它们表示相同的日期时间，但比较时返回false。为了确认这一点，我打开了Rails控制台并尝试了以下操作1.9.3dev:053>monday=Time.now.monday=>2013-02-2500:00:00+05301.9.3dev:054>monday.cla
Ruby，从 Date.day_fraction_to_time 获取小时、秒和时间 - 2
我找到了这个方法here.start=DateTime.nowsleep15stop=DateTime.now#minutesputs((stop-start)*24*60).to_ihours,minutes,seconds,frac=Date.day_fraction_to_time(stop-start)我有以下错误:`':privatemethod`day_fraction_to_time'calledforDate:Class(NoMethodError)我检查了/usr/lib/ruby/1.9.1/date.rb并找到了它:defday_fraction_to_time(
AT24C04、AT24C08、AT24C16系列EEPROM芯片单片机读写驱动程序 - 2
一、概述在之前的一篇博文中，记录了AT24C01、AT24C02芯片的读写驱动，先将之前的相关文章include一下：1.IIC驱动：4位数码管显示模块TM1637芯片C语言驱动程序2.AT24C01/AT24C02读写：AT24C01/AT24C02系列EEPROM芯片单片机读写驱动程序本文记录分享AT24C04、AT24C08、AT24C16芯片的单片机C语言读写驱动程序。二、芯片对比介绍型号容量bit容量byte页数字节/页器件寻址位可寻址器件数WordAddress位数/字节数备注AT24C044k5123216A2A149/1WordAddress使用P0位AT24C088k1024
Ruby strftime : Day without leading zero, %e 不工作 - 2
我正在尝试用没有前导零的日期来格式化日期使用%d它工作正常，但前导零date_time.strftime("%d/%m/%y")result:04/01/11我搜索了一下，发现我应该使用%e而不是%d，但是执行以下操作会得到一个空字符串。date_time.strftime("%e/%m/%y")result:这跟Ruby的版本有关系吗？我在Windows机器上使用v1.8.7。更重要的是，是否有另一种方法可以在没有前导零的情况下完成一天(比gsub更方便)？最佳答案如果你想删除月份或日期的前导零，只需在格式前添加一个减号，如下
ruby-on-rails - Rails : Date. 今天 - 1.day - 2
使用rails控制台，我只是被这个咬住了:假设今天是12月11日。Date.today-1.day#December10(nospaces)Date.today-1.day#December10(aspaceonbothsidesoftheminussign)Date.today-1.day#December11whaaaat?Date.today-5.days#Stilldecember11!有人能解释一下这是怎么回事吗？我有点担心这在代码中很容易被遗漏。关于如何对此进行编码还有其他建议吗？最佳答案您看到的差异是由ruby
day1-数组part01| 704. 二分查找、27. 移除元素 - 2
数组理论基础数组是存放在连续内存空间上的相同类型数据的集合。数组下标从0开始数组内存空间的地址是连续的c++中vector和array的区别1、vector是顺序容器，其利用连续的内存空间来存储元素，但是其内存空间大小是能够改变的。2、array是顺序容器，其也是利用连续的内存空间来存储元素，但它的内存空间是固定大小的，申请之后就无法改变。3、vector的底层是array实现的二维数组二维数组在内存的空间地址是连续的704|二分查找思路1、把整个数组一分为二；2、判断目标值在左区间还是右区间，若在左区间，则修改右区间指针的位置；若在右区间，则修改新区间的左区间位置3、重复上述过程，直到lef
day44|● 完全背包● 518. 零钱兑换 II ● 377. 组合总和 Ⅳ - 2
518.零钱兑换II1.代码classSolution{public:intchange(intamount,vector&coins){vectorf(amount+1,0);f[0]=1;for(inti=0;i2.动规五部曲1.确定dp数组和其下标含义由题目说可知求选择钱票得到总和为target的方案数，dp[j]相当于选择物品体积相加为i的方案数2.递推公式每次加入物品，都有可能到达体积j,所以在每次加上这个物品到达j时加上这个方案数f[j]+=f[j-coins[i]];3.初始化因为在for循环和dp公式中没有确切的值，肯定需要初始化，初始化第一个就可以保证后面的推导出来了，f[0
ruby-on-rails - Rails 时间奇数 : "x days from now" - 2
当用户注册到我的网站之一进行免费试用时，我将他们的帐户到期时间设置为“14.days.from_now”。然后在主页上我显示他们还剩多少天，这是我得到的:(user.trial_expires-Time.now)/86400(因为一天有86400秒，即60*60*24)有趣的是，结果超过14，因此四舍五入为15。在控制台中进行更仔细的调查后，这种情况只会在未来两天发生(如果您明白我的意思)。例如>>Time.now=>FriOct2911:09:2601002010>>future_1_day=1.day.from_now=>Sat,30Oct201011:09:27BST01:00#