最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

世界看点:day08-2-Thymeleaf

来源:博客园

服务器渲染技术-Thymeleaf

1.基本介绍

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

Thymeleaf 是什么

  1. Thymeleaf是一个现代的服务器端Java模板引擎,适用于Web和独立环境,能够处理HTML,XML,JavaScript,CSS甚至纯文本


    (资料图片)

  2. Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎,可完全替代 JSP

  3. Thymeleaf 是一个 Java 类库,是一个xml/ xhtml/ html5的模板引擎,可以作为 mvc 的 web 应用的 view 层

Thymeleaf 的优点

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

Thymeleaf 的缺点

  1. Thymeleaf 并不是一个高性能的引擎,适用于单体应用
  2. 如果要做一个高并发的应用,选择前后分离更好,比如 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在模板中使用来遍历产品列表:

      Good Thymes Virtual Grocery                

Product list

NAME PRICE IN STOCK
Onions 2.41 yes

Return to home

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

需要注意的是,prod 为迭代变量的作用域为 元素,可用于其内部标记

3.5条件运算

例如:

view

这将创建一个指向评论页面(带有 URL )的链接,并将参数设置为产品的参数,但前提是产品有任何评论。/product/commentsprodIdid

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

User is an administrator

User is a manager

User is some other thing

3.6注意事项

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

4.综合案例

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

4.1代码实现

(1)创建 SpringBoot 项目,引入基本的库文件

    spring-boot-starter-parent    org.springframework.boot    2.5.3                org.springframework.boot        spring-boot-starter-web                    org.projectlombok        lombok                org.springframework.boot        spring-boot-configuration-processor                    org.springframework.boot        spring-boot-starter-thymeleaf    

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

login.html

        登录

用户登录



用户名:

密 码:

manage.html

        管理后台安全退出欢迎您:[[${session.loginAdmin.name}]]

管理雇员

id name age pwd email
a b c d e


(3)Javabean

Admin.java

package com.li.thymeleaf.bean;import lombok.Data;/** * @author 李 * @version 1.0 */@Datapublic 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@NoArgsConstructorpublic 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 */@Controllerpublic 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 */@Controllerpublic 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 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 */@SpringBootApplicationpublic class Application {    public static void main(String[] args) {        SpringApplication.run(Application.class,args);    }}

(6)测试

  • 未经登录直接访问manage.html
  • 登录测试

4.2练习

  1. 把前面接收参数相关注解、自定义转换器、处理JSON、内容协商相关代码和案例过一遍

  2. 将Thymeleaf用户管理改为妖怪列表,字段做相应的改变,进行练习

    • Monster [id,name,skill,age,salary,birth]

关键词: