springboot-thymeleaf

最新推荐文章于 2023-03-11 13:52:17 发布

张小猿ε٩(๑> ₃ <)۶ з

最新推荐文章于 2023-03-11 13:52:17 发布

阅读量1.8k

点赞数 5

文章标签： spring springboot intellij-idea

本文链接：https://blog.csdn.net/weixin_56349691/article/details/124331480

版权

一、thymeleaf简介

Thymeleaf 可以轻易地与 Spring MVC等Web 框架进行集成。Thymeleaf 语法并不会破坏文档的结构,所以 Thymeleaf 模板依然是有效的HTML文档。模板还可以被用作工作原型, Thymeleaf 会在运行期内替换掉静态值。它的模板文件能直接在浏览器中打开并正确显示页面,而不需要启动整个Web 应用程序。

二、使用thymeleaf

1、添加依赖

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

2、在模板文件中加入解析

在加入依赖后,还需要在 HTML.文件中加入

命名空间。这样就能完成 Thymeleaf 的标签的渲染。

三、配置视图解析器

在创建springboot项目时只要勾选了thymeleaf模板引擎之后springboot配置文件中会自动配置视图解析器，但是我们需要关闭thymeleaf的缓存，否则在修改代码的时候会出现不能及时刷新的情况。

# 应用名称
spring.application.name=demo
# 应用服务 WEB 访问端口
server.port=8080
# THYMELEAF (ThymeleafAutoConfiguration)
# 开启模板缓存（默认值： true ）
spring.thymeleaf.cache=false
# 检查模板是否存在，然后再呈现
spring.thymeleaf.check-template=true
# 检查模板位置是否正确（默认值 :true ）
spring.thymeleaf.check-template-location=true
#Content-Type 的值（默认值： text/html ）
spring.thymeleaf.content-type=text/html
# 开启 MVC Thymeleaf 视图解析（默认值： true ）
spring.thymeleaf.enabled=true
# 模板编码
spring.thymeleaf.encoding=UTF-8
# 要被排除在解析之外的视图名称列表，⽤逗号分隔
spring.thymeleaf.excluded-view-names=
# 要运⽤于模板之上的模板模式。另⻅ StandardTemplate-ModeHandlers( 默认值： HTML5)
spring.thymeleaf.mode=HTML5
# 在构建 URL 时添加到视图名称前的前缀（默认值： classpath:/templates/ ）
spring.thymeleaf.prefix=classpath:/templates/
# 在构建 URL 时添加到视图名称后的后缀（默认值： .html ）
spring.thymeleaf.suffix=.html

四、基础语法

1、引用命名空间

要使用thymeleaf模板首先引入依赖然后在html文件中引入命名空间：

2、常用th标签

（1）th:text

<div th:text="${session.user.username}">name</div>

用来接受控制器传来的值，如果username不存在的话显示标签中原来的内容。

（2）th:object

<div th:object="${session.user}">

<p th:text="*{username}"></p>

<p th:text="*{age}"></p>

<p th:text="*{role}"></p>

</div>

*{}获取对象中的属性。

（3）th:action

<form th:action="@{/artical/}"></form>

当涉及到url的时候都需要在前面加@

（4）th:value

<input type="text" th:value="${session.user.username}" value="哈哈">

将input中的value值替换为username。

3、thymeleaf中的URL写法

Thymeleaf 是通过语法@来处理URL的,需要使用 “th:href”和“th:src”等属性,“如下代码：

<a th:href="@{http://eg.com/}">绝对路径</a>
<a th:href="@{/}">相対路径</a>
<a th:href="@{css/bootstrap.min.css}">默认访问static 下的css文件夹</a>

4、使用thymeleaf进行条件求值

Thymeleaf 通过“th:if”和“th:unless”属性进行条件判断。在下面的例子中,<a>标签只有在“th:if” 中的条件成立时才显示.

<a th:href="@{/test01}" th:if="${session.user}!=null">哈哈</a>

“th:unless” 与 “th:if”恰好相反——只有当表达式中的条件不成立时才显示其内容。在下方代码中,如果用户 sesion为空,则不显示登录(test01)链接。

<a th:href="@{/test01}" th:unless="${session.user}!=null">哈哈</a>

五、th:switch……th:case

<div th:switch="${session.user.role}">
    <p th:case="管理员">管理员</p>
    <p th:case="会员">会员</p>
    <p th:case="*">普通用户</p>
</div>

上述代码的意思是:如果用户角色(role )是管理员,则显示“管理员”;如果用户角色是会员,显示“会员”;如果都不是,则显示“普通用户”,即使用“*”表示默认情况。

六、Thymeleaf运算符

1、算数运算符

以下代码表示算数运算：

<!--加减运算-->
<p th:text="1+3"></p>
<!--取模运算-->
<p th:text="9%2"></p>
<!--乘法运算-->
<p th:text="9*2"></p>
<!--除法运算-->
<p th:text="9/2"></p>

结果：

2、条件运算符th:if

gt:大于

ge:大于或者等于

eq:等于

lt:小于

le:小于或等于

ne:不等于

<span th:if="${session.user.role eq '管理员'}">欢迎您，管理员！</span>

上述代码表示只有role等于管理员的时候才会显示欢迎您管理员。

3、判断空值

<span th:if="${session.user.username==null}">当前值为null</span>
<span th:if="${session.user.username!=null}">当前值不为null</span>

七、处理循环遍历

1、遍历对象

<div th:each="item:${session.user}">
    <li th:text="${item.username}"></li>
    <li th:text="${item.age}"></li>
    <li th:text="${item.role}"></li>
</div>

结果：

3、遍历集合

<div th:each="item:${session.user.hobbies}">
  <li th:text="${item}"></li>
</div>

遍历数组和集合都差不多就是，方式还是一样的。

八、处理公共代码块

1、使用fragment标记重复代码块

2、调用重复代码

代码运行结果：

九、处理分页(mybatis-Plus)

在使用mybatis-plus进行分页的时候需要写一个配置类，这个配置类是必须要有的！！代码如下：

@Configuration
public class MPConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor(){
        MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();
        mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());
        return mybatisPlusInterceptor;
    }
}

编写完配置类之后需要在后端实现分页给功能,代码如下：

/*分页查询，相比较mybatis的拦截器，这里mybatis-plus的拦截器需要使用配置类添加到spring*/
    @GetMapping("/RetailerList")
    public String UserList(@RequestParam(value = "current",defaultValue = "1") Integer current ,
                           @RequestParam(value = "size",defaultValue = "5") Integer size,
                           Model model){
        /*查询全部的数据*/
        IPage<Retailer> iPage = new Page(current,size);
        IPage<Retailer> iPage1 = retailerDao.selectPage(iPage, null);
        model.addAttribute("retailersInfo",iPage1);
        return "Retailer/RetailerList";
    }

current表示当前是第几页，size表示当前页显示多少条数据。defaultValue表示如果当前访问该controller的路径中不包含current和size参数的话默认使用defaultValue的值。

Ipage:和mybatis中的分页对象pageHelper差不多，Ipage记录了分页的总页数，当前页数。当前页中有多少数据等等的信息。

将数据保存到model中转发到前端，前端代码：

 <div class="box-tools pull-right">
                            <ul class="pagination">
                                <!--th:href="@{/RetailerList(current=1,size=5)}"就相当于是:
                                href="@{/RetailerList?current=1&size=5)}-->
                                <li>
                                    <a th:href="@{/RetailerList(current=1,size=5)}" aria-label="Previous">首页</a>
                                </li>
                                <!--先判断当前页是不是第一页，不是第一页的话通过当前页-1跳转到上一页。-->
                                <!--如果当前页是第一页的话，使按键禁用-->
                                <li th:if="${retailersInfo.current>1}" class="prev"><a th:href="@{/RetailerList(current=${retailersInfo.current}-1)}">上一页</a></li>
                                <li th:if="${retailersInfo.current==1}" class="prev disabled"><a>上一页</a></li>

                                <!--遍历总页数，范围是第一页到最后一页-->
                                <li th:each="num:${#numbers.sequence(1,retailersInfo.pages)}">
                                    <a th:href="@{/RetailerList(current=${num})}">[[${num}]]</a>
                                </li>

                                <!--和上一页的原理一样-->
                                <li th:if="${retailersInfo.current<retailersInfo.pages}"><a th:href="@{/RetailerList(current=${retailersInfo.current}+1)}">下一页</a></li>
                                <li th:if="${retailersInfo.current==retailersInfo.pages}" class="next disabled"><a>下一页</a></li>
                                <li>
                                    <a th:href="@{/RetailerList(current=${retailersInfo.pages})}" aria-label="Next">尾页</a>
                                </li>
                            </ul>
                        </div>

首页：首页参数就是current=1，size=5没啥好说的。但是需要注意书写的形式；在jsp中是href="/RetailerList?current=1&size=5"

但是使用thymeleaf就变成了：href="@{/RetailerList(current=1,size=5)

上一页：在进行上一页之前需要先判断当前页是不是第一页，是第一页的话上一页的按键应该是禁用的。如果不是第一页的话就需要将当前页减一。

下一页：和上一页的原理是一样的只不过就是在当前页上加一罢了。

页面显示页码：就是遍历页数，num:${#numbers.sequence(1,retailersInfo.pages)} 范围是第一页到总页数。

十、验证和提示错误消息

大多数表单信息都需要进行字符串的验证，以及提供错误消息反馈。Thymeleal 提供了几种示错误信息的方法。

1.字段错误信息提示

Thymeleaf通过“th:field”" 提供了“herrors" 和“th:error和th:errorclass"属性，用来验证和提示错误消息，如以下代码。如果邮箱信息验证出错，则会提示错误信息。

<div>
<span>邮箱:</span>
<span><input type="text" th:field="*{email}"/></span>
<span class="warn" th:if-="${#fields hasErrors('email')" th:erorsr="*{emai}">邮箱错误</span>
</div>

#fields.haserror()方法接收字段返回来的错误信息，并显示给用户。在Spring Boot 中，#fields.hasErrors()方法常常结合其内置的验证器( Validator)一起使用，它直接通过实体定义的API返回信息。比如在实体中加入Email验证，如下:

@Email(message = "请输入邮箱")
@NotBlank(message = "邮箱不能为空")
private String email;

除反馈错误信息外，还可以定义错误的CSS样式，如以下代码:

<input type="text" th:field="*{name}" class="small" th:errorclass="warn" >

张小猿ε٩(๑> ₃ <)۶ з

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
springboot-thymeleaf

目录一、thymeleaf简介二、使用thymeleaf1、添加依赖2、在模板文件中加入解析三、配置视图解析器四、基础语法1、引用命名空间2、常用th标签（1）th:text（2）th:object（3）th:action（4）th:value3、thymeleaf中的URL写法4、使用thymeleaf进行条件求值五、th:switch……th:case一、thymeleaf简介Thymeleaf 可以轻易地与 Spring M.
复制链接

扫一扫