木子-前端-方法标签属性小记（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"

结果：

 

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

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

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

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

          

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

显示结果

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

* 三元运算

三元运算，其实就和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

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

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

打个比方：我有一个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

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

页面：

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

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

前台接收

    
    





    这个的ID是1


    这个的ID不是1




    名字不是22





多条件判断switch  case


    这是1
    这不是1
    这不是2但是显示3

页面显示结果

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

* 获取作用域中的数据

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

然后前台使用模板获取：

    
    



Request:

    
    


Session:

    
    


Application:

    

页面显示结果：

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