0
0

springboot系列十一:Thymeleaf

文章目录

在这里插入图片描述

官方文档

在线文档: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

离线文档: Thymeleaf离线文档

基本介绍

●Thymeleaf是什么?

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

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

●Thymeleaf的优点

1.实现JSTL, OGNL的表达式效果, 语法相似, java程序员上手快.

2.Thymeleaf模板页面无需服务器渲染, 也可以被浏览器运行, 页面简洁.

3.SpringBoot支持FreeMarker, Thymeleaf, veocity.

●Thymeleaf的缺点

1.THymeleaf: Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

2.缺点: 并不是一个高性能的引擎, 适用于单体应用.

3.说明: 如果要做一个高并发的应用, 选择前后端分离更好, 但是作为

SpringBoot

推荐的模板引擎, 我们还是要讲解

Thymeleaf

的使用, 这样大家在工作中如果使用到, 也能ok.

4.后面我们还要讲解 Vue + ElementPlus + Axios + SpringBoot 前后端分离.

Thymeleaf机制说明

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

2.比如: 

manage.html

中一段

thymeleaf

代码, 是在用户请求该页面时, 用

thymeleaf

模板引擎完成处理的(在服务端完成), 并将结果页面返回.

在这里插入图片描述

3.因此使用了

Thymeleaf

, 并不是前后端分离.

Thymeleaf语法

表达式

1.表达式一览
表达式名字语法用途变量取值${...}获取请求域, session域, 对象等值选择变量*{...}获取上下文对象消息#{...}获取国际化等值链接@{...}生成链接片段表达式~{...}jsp:include 作用, 引入公共页面片段
2.字面量
文本值: ‘zzw hello’, ‘hello’
数字: 10, 2.32, -2.33
布尔值: true, false
空值: null
变量: name, age(变量不能有空格)

3.文本操作
字符串拼接: +
变量替换: age = ${age}

运算符

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)

th属性

html

有的属性, 

Thymeleaf

基本都有, 而常用的属性大概有七八个, 其中

th

属性执行的优先级从

1~8

, 数字越低优先级越高

  1. th:text:

    设置当前元素的文本内容, 相同功能的还有

    th:utext

    , 两者的区别在于前者不会转义

    html

    标签, 后者会. 优先级不高: 

    order=7

  2. th:value:

    设置当前元素的

    value

    值, 类似修改指定属性的还有

    th:src

    , 

    th:href

    .优先级不高: 

    order=6

  3. th:each:

    遍历循环元素, 和

    th:text

    或

    th:value

    一起使用. 注意该属性修饰的标签位置, 优先级很高: 

    order=2

  4. th:if:

    条件判断, 类似的还有

    th:unless

    , 

    th:switch

    , 

    th:case

    . 优先级较高: 

    order=3

  5. th:insert:

    代码块引入, 类似的还有

    th:replace

    , 

    th:include

    , 三者的区别较大, 或使用不恰当会破坏

    html

    结构, 常用于公共代码块提取的场景.优先级最高: 

    order=1

  6. th:fragment:

    定义代码块, 方便被

    th:insert

    引用, 优先级最低: 

    order=8

  7. th:object:

    声明变量, 一般和
    ```

*{}

一起配合使用, 达到偷懒的效果.优先级一般,

order=4


 8.

th:attr:

 修改任意属性, 实际开发中用的较少, 因为有丰富的其它

th

属性帮忙, 类似的还有

th:attrappend

,

th:attrprepend

. 优先级一般,

order=5


### 迭代

如果没有走服务器渲染, 显示的是默认的值.

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/dcabc710f13742f2b3f6fa696ad93973.png)

### 条件运算

用

th:href

取得的值来替换

href

属性

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/1c55861d330b44d7a38f3c45ae4b6158.png)

### 使用Thymeleaf th属性需要注意点

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

标签上. 若你将

th:each

属性放在

div

上, 则循环的将是整个

div

.

4.变量表达式中提供了很多的内置方法, 该内置方法使用


开头, 请不要与

#{}

消息表达式弄混.

## Thymeleaf综合案例

### 需求说明

说明: 使用

SpringBoot + Thymeleaf

 完成简单的用户登录, 列表功能.

要求:
 1.用户名

未输入

, 提示信息.
 2.密码不是

666

, 提示不合法, 将错误信息回显
 3.登陆成功在用户列表页面显示用户列表.

### 思路分析

说明: 使用

SpringBoot + Thymeleaf

完成简单的用户登录.

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/7004e9bbe6b5435f90f9e40ecb7cb26d.png)

### 代码实现

1.创建项目, 项目名使用

springboot-usersys

, 这里使用灵活创建项目方式.

2.在

pom.xml

引入

lombok

, 并切换一下

springboot

版本
<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.5.3</version></parent><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency></dependencies> 

3.引入spring-boot-configuration-processor, 在前面我们用过

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


4.引入thymeleaf-start: 项目会完成自动配置, 程序员按照规则开发即可

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


5.springboot系列三: sprintboot自动配置

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/dafbef3ca214447fae0e6f683488e01e.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/2e1084d954b84eb79ab59208bc8b7f06.png)

6.类路径下引入static资源

7.创建

templates/login.html

(该目录不能直接访问)
<!DOCTYPEhtml>

<htmllang="en"><head><metacharset="UTF-8"><title>用户登录</title></head><bodybgcolor="#CED3FE"><imgsrc="images/1.GIF"><divstyle="text-align: center;">

用户登陆

<formaction="#"method="post"><labelstyle="color: red;"></label>

用户名：<inputtype="text"style="width:150px"name="name">

密　码：<inputtype="password"style="width:150px"name="password">
<inputtype="submit"value="登录"><inputtype="reset"value="重新填写"></form>
</body></html>


8.创建

src/main/java/com/zzw/springboot/controller/IndexController.java

@ControllerpublicclassIndexController{//编写方法, 转发到 adminLogin.html(登陆页面)@GetMapping(value ={"/","/login"})publicStringlogin(){/**
* 解读
* 1.这里我们引入了starter-thymeleaf
* 2.这里就会直接使用视图解析到 thymeleaf 下的模板文件 adminLogin.html
*/return"adminLogin";}}


9.启动, 浏览器请求

http://localhost:8080/


![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/9d2d3a973d4a4fcfb7cead6a26d1af2f.png)

10.创建

src/main/java/com/zzw/springboot/bean/Admin.java

@Data@AllArgsConstructor@NoArgsConstructorpublicclassAdmin{privateString name;privateString password;}


11.创建

src/main/java/com/zzw/springboot/bean/User.java

@Data@AllArgsConstructor@NoArgsConstructorpublicclassUser{privateInteger id;privateString name;privateString password;privateInteger age;privateString email;}


12.创建

src/main/java/com/zzw/springboot/controller/AdminController.java


 springboot支持复杂参数

@ControllerpublicclassAdminController{//响应用户的登录请求@PostMapping("/login")publicStringlogin(Admin admin,HttpSession session,Model model){//验证用户是否合法if(StringUtils.hasText(admin.getName())&&"666".equals(admin.getPassword())){//合法, 携带user信息, 重定向到manage.html//回忆java web知识, 不使用请求转发, 防止刷新页面会重复提交//这里我们为什么是写的 manage.html, 因为这样可以更加明确地表示到哪个页面//manage.html 表示去找 方法的映射路径为 manage.htmlreturn"redirect:/manage.html";}else{//不合法, 返回登陆页面return"adminLogin";//走Thymeleaf的视图解析器}}//处理用户请求 manage.html@GetMapping("/manage.html")publicStringmainPage(){//用集合模拟用户数据, 放入到request域中, 并显示return"manage";//这里是我们的视图解析器,到 templates/manage.html}}


13.创建

src/main/resources/templates/manage.html
<!DOCTYPEhtml>

<htmllang="en"><head><metacharset="UTF-8"><title>管理后台</title></head><bodybgcolor="#CED3FE"><imgsrc="images/1.GIF"/><ahref='#'>返回管理界面<ahref='#'>安全退出 　　欢迎您:XXX

<divstyle="text-align: center">

管理雇员~

<tableborder="1px"cellspacing="0"bordercolor="green"style="width:800px;margin: auto"><trbgcolor="pink">idnamepwdageemailabcde
<imgsrc="images/logo.png"/></body></html> ```

14.回填<form action=“

login

” method=“post”>, 相对路径是参考浏览器地址栏
不用回填, 因为

action="#"

就是

action="/"

, 被解析成 

http://localhost:8080/

, 没有问题.

15.启动浏览器, 

http://localhost:8080/login

, 用户名密码错误, 停留在登陆页面.

在这里插入图片描述

校验正确, 进入

manage.html

在这里插入图片描述

16.补充

AdminController.java

//处理用户请求 manage.html@GetMapping("/manage.html")publicStringmainPage(Model model){//用集合模拟用户数据, 放入到request域中, 并显示List<User> users =newArrayList<>();
    users.add(newUser(1,"张三","123456",23,"张三@163.com"));
    users.add(newUser(2,"李四","123456",24,"李四@163.com"));
    users.add(newUser(3,"王五","123456",25,"王五@163.com"));
    users.add(newUser(4,"赵六","123456",26,"赵六@163.com"));
    users.add(newUser(5,"田七","123456",27,"田七@163.com"));//将数据放入到request域中
    model.addAttribute("users", users);return"manage";//这里是我们的视图解析器,到 templates/manage.html}

17.补充

manage.html

, 显示用户列表

<!DOCTYPEhtml><htmllang="en"xmlns:th="http://www.thymeleaf.org"><head><metacharset="UTF-8"><title>管理后台</title></head><bodybgcolor="#CED3FE"><imgsrc="images/1.GIF"/><ahref='#'>返回管理界面</a><ahref='#'>安全退出</a> 　　欢迎您:XXX
<hr/><divstyle="text-align: center"><h1>管理雇员~</h1><tableborder="1px"cellspacing="0"bordercolor="green"style="width:800px;margin: auto"><trbgcolor="pink"><td>id</td><td>name</td><td>pwd</td><td>age</td><td>email</td></tr><trbgcolor="#ffc0cb"th:each="user:${users}"><tdth:text="${user.id}">a</td><tdth:text="${user.name}">b</td><tdth:text="${user.password}">c</td><tdth:text="${user.age}">d</td><tdth:text="${user.email}">e</td></tr></table><br/></div><hr/><imgsrc="images/logo.png"/></body></html>

18.测试

在这里插入图片描述

19.修改

login.html

(1)显示登录错误信息

//不合法, 请求转发, 返回登陆页面
model.addAttribute("error","用户名或密码错误");return"adminLogin";//走Thymeleaf的视图解析器

<labelstyle="color: red"th:text="${error}"></label><br/>
用户：<inputtype="text"style="width:150px"name="name"><br>

(2)修改提交的

action

<formaction="#"th:action="@{/login}"method="post">

(3)处理非法登录, 防止非法进入

manage.html

@ControllerpublicclassAdminController{//响应用户的登录请求@PostMapping("/login")publicStringlogin(Admin admin,HttpSession session,Model model){//验证用户是否合法if(StringUtils.hasText(admin.getName())&&"666".equals(admin.getPassword())){//将登陆用户保存到session
            session.setAttribute("loginAdmin", admin);//合法, 携带user信息, 重定向到manage.html//回忆java web知识, 不使用请求转发, 防止刷新页面会重复提交//这里我们为什么是写的 manage.html, 因为这样可以更加明确地表示到哪个页面//manage.html 表示去找 方法的映射路径为 manage.htmlreturn"redirect:/manage.html";}else{//不合法, 请求转发, 返回登陆页面
            model.addAttribute("error","用户名或密码错误");return"adminLogin";//走Thymeleaf的视图解析器}}//处理用户请求 manage.html@GetMapping("/manage.html")publicStringmainPage(Model model,@SessionAttribute(value ="loginAdmin", required =false)Admin admin){//这里暂时在方法中验证, 后面我们统一使用拦截器if(admin ==null){
            model.addAttribute("error","请先登录");return"adminLogin";//请求转发到 templates/adminLogin.html}//用集合模拟用户数据, 放入到request域中, 并显示List<User> users =newArrayList<>();
        users.add(newUser(1,"张三","123456",23,"张三@163.com"));
        users.add(newUser(2,"李四","123456",24,"李四@163.com"));
        users.add(newUser(3,"王五","123456",25,"王五@163.com"));
        users.add(newUser(4,"赵六","123456",26,"赵六@163.com"));
        users.add(newUser(5,"田七","123456",27,"田七@163.com"));//将数据放入到request域中
        model.addAttribute("users", users);return"manage";//这里是我们的视图解析器,到 templates/manage.html}}

(4)登陆成功后信息显示, 

行内写法

欢迎您:[[${session.loginAdmin.name}]]

5)安全退出

<ahref='#'th:href="@{/}">安全退出</a>

作业布置

1.把前面我们学过的接收参数相关注解, 自定义转换器, 处理

JSON

, 内容协商, 相关代码和案例, 自己写一遍, 一定要自己写一遍, 否则没有印象, 理解不会深入.

2.将

Thymeleaf

用户管理 改成 妖怪管理列表, 字段做相应的改变, 进行联系.
1)Monster [id, name, skill, age, sal, birth]
2)基本界面保持不变
3)在完成过程中, 小伙伴会遇到各种问题, 要开始培养自己独立解决问题的能力了.

标签： spring boot 后端 java
本文转载自: https://blog.csdn.net/qq_18817831/article/details/140400104
版权归原作者 ~ 小团子 所有， 如有侵权，请联系我们删除。
登录后发布评论

“springboot系列十一:Thymeleaf”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

【Python爬虫实战】网络爬虫完整指南：HTTP/HTTPS协议与爬虫安全实践

华三服务器R4900 G5在图形界面使用PMC阵列卡（P460-B4）创建RAID，并安装系统（中文教程）

【一篇搞定配置】如何在Ubuntu上安装Hadoop（单机、伪分布配置）

配置vscode的C/C++环境

【PyCharm】从零到一：Python爬虫实战教程，小白、绕过反爬虫机制、实战案例全解析

RabbitMQ 高级特性——延迟队列

python从入门到精通：pyspark实战分析

文章导航