木子-前端-方法标签属性小记（SpringBoot thymeleaf篇）

最新推荐文章于 2024-05-07 02:37:51 发布

我本狂儒

最新推荐文章于 2024-05-07 02:37:51 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_38005982/article/details/89305548

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

* html如何获取在后台存入的session的数据(用的是springBoot框架使用了thymeleaf的模板)

* 项目通过后台访问static文件夹下的html/页面直接访问html文件的方法

* 项目通过后台跳转动态文件夹templates的方法

* 模板逻辑判断if与switch的写法

* 获取作用域中的数据

* html如何获取在后台存入的session的数据(用的是springBoot框架使用了thymeleaf的模板)

用thymeleaf取数据：我存入的是个对象

后台：

session.setAttribute("muziUser", map.get("muziUser"));

前台：首先页面必须要有第一个红框的内容，否则th不会生效，其次第二个红框中的session是固定的，代表的是从session取数据，如果是reques的话就是muziUser.name。muziUser代表我存入的那个的key，name代表我对象的参数

红框内的内容也可能是这个，应该是都支持，但是建议使用下面的文本中的

xmlns:th="http://www.thymeleaf.org"

结果：

//-----------------------------------------------------------------------------------------------------------------------------------//

* 模板将html公共标签抽取与写入

公共标签抽取：例如我们有一个员工姓名的P标签，上面写的从后台获取的员工姓名，我们每次点击菜单是打开一个新页面，我们总不能每次都写一个P标签去取数据吧，thymeleaf模板提供了三个简单快捷便利的方法

1、将某一标签设为公共标签：th:fragment="A" A就是设定这个公共标签的名字

2、现在公共模板已经准备好了，我们该怎么去别的页面获取呢？

1）、插入 th:insert=~{html名 :: 公共标签名}

2）、替换 th:replace=~{html名 :: 公共标签名}

3）、包含 th:include="~{html名 :: 公共标签名}"

插入：是将公共标签插入到div中，假设公共标签是P 引入后的样式：<div><p>123</p></div>

替换：是将公共标签替换原本的标签，假设公共标签是P 引入后的样式：<p>123</p>

包含：是将公共标签的内容放到div中，假设公共标签是P 引入后的样式：<div>123</div>

//-----------------------------------------------------------------------------------------------------------------------------------//

* 公共代码抽取第二种方法（选择器抽取）

使用方法很简单，给公共代码加个ID/CLASS等等

然后在需要获取代码的html写如下：

th:replace=~{html名 :: 选择器}

根据公共代码块的选择器类型如果是ID，选择器是#xxx 如果是class，选择器是.xxx

//-----------------------------------------------------------------------------------------------------------------------------------//

* 基本迭代 th:each

thymeleaf中的迭代和表达式的forEcah差不多

首先是后端传值给前端：例如Mode,Model,ModelAndView等等，返回一个定义了key值得集合

存入就不写了，你们肯定都会

前端：

<table>
    <tr><td>姓名</td><td>性别</td></tr>
    <tr th:each="自定义的名字假设是a:${后台的key}">
        <td th:text="${a.name}"></td>
        <td th:text="${a.sex}"></td>
    </tr>
</table>

扩展写法：

th:each="a，sss:${key}" //sss代表的是这个循环的对象的属性（可以渲染输出的）

th:text=${sss.index}

index:当前循环的这个对象的下标

count:当前循环的这个对象是第几个（从1开始的）

size:当前循环的这个对象的大小

even:当前这个对象的位数是不是双数（有点对应count）布尔类型

odd:同上不过判断的是单数

first:判断这个对象是不是第一个遍历的（布尔类型）

last:判断这个对象是不是最后一个遍历的

循环取map数据的方法

 /**
     * 传数据给前台，测试一下模板循环map属性
     */
    @RequestMapping("/domeHello2")
    public String domeHello2(Model mode){
        Map<String,User> map=new HashMap<String,User>();
        map.put("1",new User("1","A"));
        map.put("2",new User("2","B"));
        map.put("3",new User("3","C"));
        map.put("4",new User("4","D"));
        mode.addAttribute("map",map);
        return "domeHello2";
    }

<!--需要将maps再次循环。。原因不知道，第一次循环获取的是map中的key与实体类坐标。第二次循环的这个我就很懵逼了。但是亲测可行-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <tr th:each="maps :${map}">
            <!--<td th:each="user:${maps}" th:text="${user.key}"></td>-->
            <td th:each="user:${maps}" th:text="${user.value.name}"></td>
        </tr>
    </table>

</body>
</html>

显示结果

//-----------------------------------------------------------------------------------------------------------------------------------//

* 三元运算

三元运算，其实就和if else差不多。

唯一的区别在于三元运算是，条件+对的结果+错的结果。就是说相当于只有一个if一个else没有第三种结果

而if，else可以写多个不同的判断

例如if(i==1){

}else if(1==2){

}else if(i==3){

}else{

}

言归正传，说一下这个三元的写法以及可以的用途

写法：th:text="${emp.gender}==0?'女':'男'"

${获取到的数据}判断是否等于0，如果等于存入女，如果不等于存入男

${emp.gender}获取到的数据

${emp.gender}==0一个boolean

?==true

:==false

用途：就是一个判断如上图所示，判断如果是数字0就让页面展示女，如果是数字1就让页面展示男

不止这一个用途，刚刚发现一个新的用途，可以对th:href也起作用（亲测有效）

想一下，除了跳转网页，也可以跳转到后台的

//-----------------------------------------------------------------------------------------------------------------------------------//

* 时间转换工具类

thymeleaf模板为我们提供了一系列转换的工具类

这里提供一下时间类型的转换方式

#dates是时间类型工具

format（）是方法

emp.birth是需要转换的时间参数

YYYY-MM-dd是转成类型

//-----------------------------------------------------------------------------------------------------------------------------------//

* 模板为标签添加自定义属性的方法

打个比方：我有一个button标签，我现在呢点击它，想给他的点击事件里加一个他对应的这一行的用户名字。但是我又不可以写一个onclick事件里面加，该怎么办？

模板为我们提供了一个自定义标签属性的方法：th:attr

写法：th:attr="sss=${xxxx}" 相当于为这个button加一个名字为sss的自定义属性

如何获取？：不要在意let，那是ES6的东西，我们用var就好

//-----------------------------------------------------------------------------------------------------------------------------------//

* 项目通过后台访问static文件夹下的html/页面直接访问html文件的方法

本来不想写这个的，但是怕自己忘，就记一下

springBoot项目极其支持html文件这是众所周知的，在项目中会自动生成两个文件夹

一个是static静态文件夹（可以通过页面直接访问的，通常放置js与css文件）

另一个是tmeplates动态文件夹（只能通过后台跳转到页面，浏览器无法直接访问html文件的）

有时候我们会将一个登陆页面写在static下，这时候我们该如何访问呢通过后台

首先：我们的pom中不可以有tmeplates的jar，因为这个jar的默认是我们使用了模板，路径会强行指定到tmeplates文件夹下的

其次：编写配置文件的静态路径前缀和后缀

##设置静态页面前缀static默认
##spring.mvc.view.prefix甚至可以不用写，因为默认路径就是static下的。
##spring.mvc.view.prefix=/
spring.mvc.view.suffix=.html

次之：编写后台代码return返回的前台地址，我的html地址在resources/static/jsp/DomeHelloWord.html

static是静态资源目录

jsp是我自己设置的一个文件夹

因为我在上一步设置了后缀（前缀的static不需要写，默认地址就在static下，如果不写前缀需要在返回路径前加/。）

    /**
     * @第二步测试是否可以后台访问静态页面的html
     */
    @RequestMapping("/domeMvcStatic")
    public String domeMvcStatic(){
        return "/jsp/DomeHelloWord";
    }

最后测试结果图以及我特意使用浏览器直接访问html的地址

//-----------------------------------------------------------------------------------------------------------------------------------//

* 项目通过后台跳转动态文件夹templates的方法

首先上一步我们知道使用static文件夹时我们都会移除templates.jar

当我们想让后台访问templates文件夹时需要重新引入该jar

<!--SpringBoot模板引擎thymeleaf引入-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

templates.jar在引入时系统已经默认为我们配置好了前缀和后缀，我们不需要配置

如果默认配置失效我们还是需要自己配置（该配置仅仅只是配置地址，无法更换文件夹地址，作用只是在配置失效时我们给重新唤醒类似于）

##设置默认访问路径
spring.mvc.view.prefix=classpath:/templates/
spring.mvc.view.suffix=.html

第二种设置路径的方法：该方法可以自由更改我要访问的文件夹名，不需要固定使用thymeleaf文件

个人推荐该方法配置

#设置默认访问路径
spring.thymeleaf.prefix=classpath:/sss/
spring.thymeleaf.suffix=.html

后台：

@Controller
public class domeTemplates {
    /**
     * @尝试访问动态资源html通过后台
     */
    @RequestMapping("/domeMvcTemplates")
    public String domeMvcTemplates(){
        return "jsp/TemplatesHelloWord";
    }
}

页面：

//-----------------------------------------------------------------------------------------------------------------------------------//

* 模板逻辑判断if与switch的写法

首先我们先去后台controller编写一个方法，返回数据

    /**
     * 传数据给前台，测试一下模板逻辑属性
     * 返回一个对象，里面包含2个参数id,name
     */
    @RequestMapping("/domeHello")
    public String jspDome(Model mode){
        User user=new User("1","2");
        mode.addAttribute("user",user);
        return "domeHello";
    }

前台接收

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title</title>
</head>
<body>
<!--<img th:src="@{/book_photo/2019-05-06.jpg}"/>-->
<!--if判断-->
<span th:if="${user.id}=='1'">
    这个的ID是1
</span>
<span th:if="${user.id}!='1'">
    这个的ID不是1
</span>
<hr/>

<span th:if="${user.name}!='22'">
    名字不是22
</span>
<hr/>



多条件判断switch  case
<div th:switch="${user.id}">

    <span th:case="1">这是1</span>
    <span th:case="2">这不是1</span>
    <span th:case!="2">这不是2但是显示3</span>
</div>

</body>
</html>

页面显示结果

//-----------------------------------------------------------------------------------------------------------------------------------//

* 获取作用域中的数据

获取3个作用域的数据（request,session,application）

首先后台存入：

    /**
     * 传数据给前台，测试一下模板获取域对象参数
     */
    @RequestMapping("/domeHello3")
    public String domeHello3(HttpServletRequest request){
        request.setAttribute("AA","AAA");
        request.getSession().setAttribute("BB","BBB");
        request.getSession().getServletContext().setAttribute("CC","CCC");
        return "domeHello3";
    }

然后前台使用模板获取：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title</title>
</head>
<body>

Request:<br/>
    <span th:text="${#httpServletRequest.getAttribute('AA')}"></span>
    <hr/>

Session:<br/>
    <span th:text="${session.BB}"></span>
    <hr/>

Application:<br/>
    <span th:text="${application.CC}"></span>
</body>
</html>

页面显示结果：

//-----------------------------------------------------------------------------------------------------------------------------------//

我本狂儒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
木子-前端-方法标签属性小记（SpringBoot thymeleaf篇）

目录* html如何获取在后台存入的session的数据(用的是springBoot框架使用了thymeleaf的模板)* 模板将html公共标签抽取与写入* 公共代码抽取第二种方法（选择器抽取）* 基本迭代 th:each* 三元运算* 时间转换工具类* 模板为标签添加自定义属性的方法* 项目通过后台访问static文件夹下的html/页面直接访问html文件的方...
复制链接

扫一扫