springboot02thymeleaf学习

最新推荐文章于 2023-04-26 16:15:47 发布

小冯小冯冲冲冲

最新推荐文章于 2023-04-26 16:15:47 发布

阅读量479

点赞数

分类专栏： springboot

本文链接：https://blog.csdn.net/qq_43881663/article/details/115497064

版权

springboot 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

springboot02thymeleaf学习

1 thymeleaf配置

1.1 导入thymeleaf包

<!-- springboot整合 thymeleaf 视图展示技术-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
            <version>2.1.2.RELEASE</version>
        </dependency>

1.2 配置视图

1.2.1 配置视图

如果不配置，官方默认在/templates下，如果想访问/templates下的目录如/templates/page，可以在return里返回 return “page/test01”;
在这里插入图片描述

1.2.2 测试

在/templates下新建一个test01.html

在TestController.java里：

//跳转到test01.html
    @GetMapping("/t1")
    public String toTest01Html(){
        return "test01";//默认是转发
    }

结果：
在这里插入图片描述
测试成功

1.3 templates目录介绍

templates是放模板的目录，不允许外界通过url直接访问，是安全的，类似WEB-INF目录。
static是存放html、css、js、图片等静态资源

2 thymeleaf语法

在html页面要加

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

2.1 变量输出与字符创操作

2.1.1 th:text

在页面输出值

<span th:text="该标签的作用是在页面输出值"></span>

2.1.2 th:value

将值放入到input标签的value中

<input th:value="fk">

效果：
在这里插入图片描述

2.1.3 判断字符串是否为空

${#strings.isEmpty(key)}
判断字符串是否为空，为空返回true 不为空返回false

${#strings.contains(msg,‘1’)
判断字符串是否包含指定子串，如果包含返回true 否则返回false

${#strings.startsWith(msg,‘h’)
判断字符串是否以指定的子串开头如果是返回true，否则返回false

${#strings.endsWith(msg,‘h’)
判断字符串是否以指定的子串结尾如果是返回true，否则返回false

${#strings.length(msg)
获取字符串的长度

${#strings.indexOf(msg,‘h’)
查找子串的位置，并返回改字串的下标，没有找到返回-1

${#strings.substring(msg,10) 从指定位置开始截取字符串到末尾

${#strings.substring(msg,10,12) 从指定位置开始截取字符串到指定下标位置

${#strings.toUpperCase(msg) 将字符串的小写字母转成大写

${#strings.toLowerCase(msg) 将字符串的大写字母转成小写

2.2 绑定数据

2.2.1 使用model绑定数据

后台：

//跳转到test01.html
    @GetMapping("/t1")
    public String toTest01Html(Model model){
        //使用model绑定数据，在test01.html页面获取服务端绑定的数据
        model.addAttribute("username","fengkang");
        return "test01";//默认是转发
    }

前台取username值：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span th:text="${username}"></span>
</body>
</html>

效果：
在这里插入图片描述

2.2.2 使用HttpServletRequest绑定数据

使用HttpServletRequest绑定数据，在test01.html页面获取服务端绑定的数据
调用内置对象要加#号

后台：

 //跳转到test01.html
    @GetMapping("/t1")
    public String toTest01Html(HttpServletRequest request){
        //使用HttpServletRequest绑定数据，在test01.html页面获取服务端绑定的数据
        request.setAttribute("username","fengkang");
        return "test01";//默认是转发
    }

前台：

<span th:text="${#httpServletRequest.getAttribute('username')}"></span>

2.2.3 使用HttpSession绑定数据

//跳转到test01.html
    @GetMapping("/t2")
    public String toTest02Html(HttpServletRequest request, HttpSession session){
        //使用HttpSession绑定数据，在test01.html页面获取服务端绑定的数据
        session.setAttribute("username","fengkang");
        return "test01";//默认是转发
    }

前台：

<span th:text="${session.username}"></span>

或者

<span th:text="${#httpSession.getAttribute('username')}"></span>

2.2.4 使用ServletContext绑定数据

//跳转到test01.html
    @GetMapping("/t3")
    public String toTest03Html(HttpServletRequest request, HttpSession session){
        //使用ServletContext绑定数据，在test01.html页面获取服务端绑定的数据
        ServletContext context = request.getServletContext();
        context.setAttribute("username","fengkang");
        return "test01";//默认是转发
    }

前台：

<span th:text="${application.username}"></span>

2.2.5 使用ModelAndView绑定数据

//跳转到test01.html
    @GetMapping("/t4")
    public ModelAndView toTest04Html(ModelAndView modelAndView){
        //使用ModelAndView绑定数据，在test01.html页面获取服务端绑定的数据
        modelAndView.addObject("username","fengkang");
        //封装视图
        modelAndView.setViewName("test01");
        return modelAndView;
    }

前台：

<span th:text="${username}"></span>

2.3 日期格式化处理

${#dates.format(time)}
格式化日期，按照浏览器格式输出

${#dates.format(time,‘yyyy-MM-dd’)}
格式化日期，按照指定格式输出

取出时间中的年、月、日

<span th:text="${#dates.year(time)}"></span>
<span th:text="${#dates.month(time)}"></span>
<span th:text="${#dates.day(time)}"></span>

2.4 条件判断

2.4.1 th:if

服务端绑定的sex值进行判断，显示哪个标签

<span th:if="${sex}=='男'">男</span>
<span th:if="${sex}=='女'">女</span>

2.4.2 th:switch th:case

<div th:switch="${id}">

        <span th:case="1">id为1</span>
        <span th:case="2">id为2</span>
        <span th:case="3">id为3</span>

</div>

2.5 迭代遍历

<table border="1px" width="300px" >
    <tr>
        <td>ID</td>
        <td>NAME</td>
        <td>ADDRESS</td>
    </tr>
    <tr th:each="u : ${list}">
        <td th:text="${u.id}"></td>
        <td th:text="${u.name}"></td>
        <td th:text="${u.address}"></td>
    </tr>
</table>

2.5.1 th:each 下的状态变量

Index 当前遍历对象的下标从0开始
Count 当前迭代对象的计数从1开始
Size 当前迭代对象长度
Even /old 当前迭代对象是否是偶数/奇数布尔值从0开始
First 当前循环是否是第一条是返回true 否则返回false
Last 当前循环是否是最后一条是返回true 否则返回false

2.5.2 th:each 遍历list

后台：

//绑定list集合
    @GetMapping("/t6")
    public String getList(Model model){
        List<String> list = new ArrayList<>();
        //将数据封装到list集合里
        list.add("张三");
        list.add("李四");
        list.add("王二麻");
        model.addAttribute("name",list);
        return "test02";

    }

前台：

<table border="2px" width="500px">
    <tr>
        <td>学号</td>
        <td>姓名</td>
    </tr>
    <!--n：用来遍历name的变量名，随便写；${name}：获取到绑定的list集合；
        s：获取index的变量名；${s.index}：获取index，从0开始，这里代表学号-->
    <tr th:each="n,s : ${name}">
        <td th:text="${s.index}"></td>
        <td th:text="${n}"></td>
    </tr>
</table>

效果：
在这里插入图片描述

2.5.3 th:each 遍历map

创建实体类Student.java

package com.fk.smashing.pojo;

import lombok.Data;

@Data
public class Student {
    private Integer id;
    private String name;
    private double score;

    //生成构造器
    public Student(Integer id, String name, double score) {
        this.id = id;
        this.name = name;
        this.score = score;
    }
}

后台：

//绑定map集合
    @GetMapping("/t5")
    public String getMap(Model model){
        Map<String, Student> map = new HashMap<>();
        //将数据封装到map集合里
        map.put("u1",new Student(1,"张三",88));
        map.put("u2",new Student(2,"李四",97));
        map.put("u3",new Student(3,"王二麻",92));
        model.addAttribute("map",map);
        return "test02";

    }

前台：

<table border="2px" width="500px">
    <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>成绩</td>
    </tr>
    <!--"maps"：用来遍历的变量名，随便写；${map}：获取到绑定的map集合-->
    <tr th:each="maps: ${map}">
        <td th:each="a : ${maps}" th:text="${a.value.id}"></td>
        <td th:each="a : ${maps}" th:text="${a.value.name}"></td>
        <td th:each="a : ${maps}" th:text="${a.value.score}"></td>
    </tr>
</table>

效果：
在这里插入图片描述

2.5.4 绑定Student对象

后台：

//绑定Student对象
    @GetMapping("/t7")
    public String getStudent(Model model){
        //将数据封装到student对象里
        Student student = new Student(1,"张三",88);
        model.addAttribute("student",student);
        return "test02";

    }

前台：

<span th:text="${student.id}"></span>
<span th:text="${student.name}"></span>
<span th:text="${student.score}"></span>

效果：
在这里插入图片描述

2.6 URL表达式

2.6.1 绝对路径

<a th:href="@{http://www.baidu.com}">绝对路径</a>
<a href="http://www.baidu.com">绝对路径</a>
<a href="@{http://localhost:8066/t7}">绝对路径</a>

2.6.2 相对路径

相对于项目的根，一般是同一个项目下

<a th:href="@{/t11}">相对路径</a>

相对于服务器路径的根，可以访问另一个项目

<a th:href="@{~/项目名/访问路径}">相对服务器的根</a>

2.6.3 通过url在路径上传参数

前台页面将参数传给后台接收处理

<a href="/t8?id=1&name='lisi'">以前的url路径传参</a>
<a th:href="@{/t8(id=1,name='lisi')}">thymeleaf的url路径传参</a>

小冯小冯冲冲冲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
springboot02thymeleaf学习

springboot02thymeleaf文章目录1 thymeleaf1.1 导入thymeleaf包1.21 thymeleaf1.1 导入thymeleaf包 <dependency> <groupId>org.springframework.boot</groupId> <artifactId&.
复制链接

扫一扫