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

目录

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

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

* 公共代码抽取第二种方法(选择器抽取)

* 基本迭代 th:each

* 三元运算

* 时间转换工具类

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

* 项目通过后台访问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"

木子-前端-方法标签属性小记(SpringBoot thymeleaf篇)_第1张图片

结果:

木子-前端-方法标签属性小记(SpringBoot thymeleaf篇)_第2张图片

 

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

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

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

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

          木子-前端-方法标签属性小记(SpringBoot thymeleaf篇)_第3张图片

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

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

                

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

               

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

               

     插入:是将公共标签插入到div中,假设公共标签是P   引入后的样式:

123

     替换:是将公共标签替换原本的标签,假设公共标签是P  引入后的样式:

123

     包含:是将公共标签的内容放到div中,假设公共标签是P  引入后的样式:

123

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

* 公共代码抽取第二种方法(选择器抽取)

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

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

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

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

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

* 基本迭代 th:each

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

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

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

前端:

       

姓名性别

扩展写法:

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 map=new HashMap();
        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";
    }




    
    Title


    

显示结果

木子-前端-方法标签属性小记(SpringBoot thymeleaf篇)_第4张图片

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

* 三元运算

三元运算,其实就和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是转成类型

更多工具方式参考模板api

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

木子-前端-方法标签属性小记(SpringBoot thymeleaf篇)_第5张图片

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

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

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

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

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

木子-前端-方法标签属性小记(SpringBoot thymeleaf篇)_第6张图片

如何获取?:不要在意let,那是ES6的东西,我们用var就好

木子-前端-方法标签属性小记(SpringBoot thymeleaf篇)_第7张图片

木子-前端-方法标签属性小记(SpringBoot thymeleaf篇)_第8张图片

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

* 项目通过后台访问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的地址

木子-前端-方法标签属性小记(SpringBoot thymeleaf篇)_第9张图片木子-前端-方法标签属性小记(SpringBoot thymeleaf篇)_第10张图片

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

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

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

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


        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        

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";
    }
}

页面:

木子-前端-方法标签属性小记(SpringBoot thymeleaf篇)_第11张图片

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

* 模板逻辑判断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";
    }

前台接收




    
    Title





    这个的ID是1


    这个的ID不是1


名字不是22
多条件判断switch case
这是1 这不是1 这不是2但是显示3

页面显示结果

木子-前端-方法标签属性小记(SpringBoot thymeleaf篇)_第12张图片

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

* 获取作用域中的数据

获取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";
    }

然后前台使用模板获取:




    
    Title



Request:

Session:

Application:

页面显示结果:

木子-前端-方法标签属性小记(SpringBoot thymeleaf篇)_第13张图片

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

 

 

 

你可能感兴趣的:(木子-前端-方法标签属性小记(SpringBoot thymeleaf篇))