SpringBoot集成Thymeleaf从入门到精通（全）

SpringBoot集成Thymeleaf
1. 关闭缓存
2. 表达式
3. 常用属性
4. 遍历元素
5. 条件判断
6. 字面量
7. 字符串拼接
8. 数学运算

本篇文章的学习
在这之前可以补充springboot的基础
详情可看我之前的文章

springboot从入门到精通（全）

SpringBoot集成Thymeleaf

Thymeleaf 是一个流行的模板引擎，该模板引擎采用 Java 语言开发
Thymeleaf 是另外的一种模板技术，它本身并不属于 Spring Boot，Spring Boot只是很好地集成这种模板技术，作为前端页面的数据展示

在创建模板的时候还需要多选择一个这个
之后默认会自动添加这些依赖

Springboot 使用 thymeleaf 作为视图展示，约定将模板文件放置在src/main/resource/templates 目录下，静态资源放置在 src/main/resource/static 目录下
创建一个控制层面

@Controller
public class UserController {

    @RequestMapping(value = "/message")
    public String message(Model model) {

        model.addAttribute("data","SpringBoot集成Thymeleaf模版引擎");

        return "message";
    }
}

页面这个要配置在特定的目录下
还要加上名称空间才能用她的函数xmlns:th="http://www.thymeleaf.org"
具体使用名称空间的text后的数据，如果有数据传入就会将其替代，如果没有数据才会显示后面的内容
具体底层是html，通过这个名称空间，以及他的函数才可以进行加载识别参数

xmlns:th=“http://www.thymeleaf.org”
xmlns -> 命名空间
命名空间后面的地址是一个约束文件,约束你使用thymeleaf表达式
的一个规则文件,就好比我们之前在xml文件中的一此dtd文件




    
    Title



展示要显示的内容0

配置后启动

@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

}

也可以配置一个视图解析器
默认是有视图解析器的
所谓的视图解析器，下面才是真实跳转的路径

#设置thymeleaf模版引擎的前/后缀,(可选项)
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

为什么使用了th前缀就可以获取后台数据?
那是因为项目中添加了thymeleaf的核心依赖,它的核心依赖会去
解析thymeleaf自己定义的这些标签名称,通过thymeleaf自己的java核心代码来获取我们的后台数据

html 不会认识${}语法。
请求的流程是，发送请求给服务器，服务器接收请求后，处理请求，跳转到指定的静态 html 页面，在服务器端，Thymeleaf 模板引擎会按照它的语法，对动态数据进行处理，
所以如果要是 th 开头，模板引擎能够识别，会在服务器端进行处理，获取数据；如果没有以 th 开头，那么 Thymeleaf 模板引擎不会处理，直接返回给客户端了

1. 关闭缓存

不用再进行编译只有修改代码，刷新网页就会有显示

#设置thymeleaf模版引擎的缓存,设置为false关闭,默认为true开启
spring.thymeleaf.cache=false

之所以thymeleaf可以代替jsp，是因为jsp要渲染，编译了才可执行

还需要额外配置启动的更新资源

2. 表达式

要配置一个依赖


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

Thymeleaf 中的变量表达式使用 ${变量名} 的方式获取 Controller 中 model 其中的数据

th:text="" 是 Thymeleaf 的一个属性，用于文本的显示

向 model 放入 User 对象

public class User {

    private Integer id;

    private String username;

    private Integer age;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }
}

创建 user.html 页面获取 User 对象数据

@RequestMapping(value = "/user/detail")
public ModelAndView userDetail() {
    ModelAndView mv = new ModelAndView();
    User user = new User();
    user.setId(1001);
    user.setAge(23);
    user.setUsername("lisi");

    mv.setViewName("userDetail");
    mv.addObject("user",user);

    return mv;
}

标准变量表达式 ${} （推荐）
html页面的主要功能

标准变量表达式:${} -> (推荐)
用户编号:

用户姓名:

用户年龄:

选择变量表达式

{}必须使用th:object属性来绑定这个对象
在div子标签中使用来代替绑定的对象${user}

选择变量表达式(星号表达式):*{} -> (不推荐)


    用户编号:

    用户姓名:

    用户年龄:



标准变量表达式与选择变量表达式的混合使用(不推荐)
用户编号

用户年龄

用户姓名

下面讲解的是路径表达式中常用的区别
路径表达式 @{...}

绝对路径跳转（不带参数）

传统写法:跳转至百度

路径表达式:路径到动力节点

跳转至:/user/detail1

传统写法跳转至:/user/detail1

相对路径跳转（不带参数）

URL路径表达式,相对路径[没有参数](实际开发中推荐使用的)
跳转至:/user/detail1

绝对路径跳转（带参数）

绝对路径(带参数)(不推荐使用)
绝对路径,带参数:/test,并带参数username

路径表达工写法,带参数:/test,并带参数username

相对路径跳转（带参数）

相对路径(带参数)
相对路径,带参数

相对路径(带参数:后台获取的参数值)

相对路径:获取后台参数值

相对路径(带多个参数:后台获取的参数值)

相对路径(带多个参数:后台获取的参数值)
强烈推荐使用:@{}相对路径(带多个参数:后台获取的参数值)

请求路径为RESTful风格

请求路径为RESTful风格

在控制层面的代码为

@RequestMapping(value = "/user/detail1")
public String userDetail1(Model model) {
    User user = new User();
    user.setId(1002);
    user.setAge(24);
    user.setUsername("wangwu");

    model.addAttribute("user",user);

    return "userDetail";
}

@RequestMapping(value = "/url")
public String urlexpression(Model model) {

    model.addAttribute("id",1001);
    model.addAttribute("age",28);
    model.addAttribute("username","zhaoliu");

    return "url";
}


@RequestMapping(value = "/test")
public @ResponseBody String test(String username) {
    return "请求路径/test,参数是:" + username;
}

@RequestMapping(value = "/test1")
public @ResponseBody String test1(Integer id,String username,Integer age) {
    return "请求路径/test1,参数id=" + id+",username="+username+",age="+age;
}

@RequestMapping(value = "/test2/{id}")
public @ResponseBody String test2(@PathVariable("id") Integer id) {
    return "ID="+id;
}

@RequestMapping(value = "/test3/{id}/{username}")
public @ResponseBody String test3(@PathVariable("id") Integer id,
                                  @PathVariable("username") String username) {
    return "ID="+id+"----username="+username;
}

3. 常用属性

属性

描述

th:action

th:action 定义后台控制器的路径，类似标签的 action 属性，主要结合 URL 表达式,获取动态变量

th:method

设置请求方法

th:href

定义超链接，主要结合 URL 表达式,获取动态变量

th:src

用于外部资源引入，比如 4. 遍历元素

此处只po出关键代码

遍历List 集合

@RequestMapping("/each/list")
public String eachList(Model model) {
    List userList = new ArrayList();

    for (int i = 0; i < 10; i++) {
        User user = new User();
        user.setId(100 + i);
        user.setNick("张" + i);
        user.setPhone("1361234567" + i);
        user.setAddress("北京市大兴区" + i);
        userList.add(user);
    }
    model.addAttribute("userList", userList);
    model.addAttribute("data", "SpringBoot");
    return "eachList";
}

user 当前循环的对象变量名称(随意)
userStat 当前循环对象状态的变量(可选默认就是对象变量名称+Stat)
${userList} 当前循环的集合

count: 当前迭代对象的个数（从 1 开始计算）这两个用的较多
size: 被迭代对象的大小
current: 当前迭代变量
even/odd: 布尔值，当前循环是否是偶数/奇数（从 0 开始计算）
first: 布尔值，当前循环是否是第一个
last: 布尔值，当前循环是否是最后一个
注意：循环体信息 interStat 也可以不定义，则默认采用迭代变量加上 Stat 后缀，即 userStat

遍历Map 集合

@RequestMapping(value = "/each/map")
public String eachMap(Model model) {
    Map userMaps = new HashMap();

    for (int i = 0; i < 10; i++) {
        User user = new User();
        user.setId(i);
        user.setNick("李四" + i);
        user.setPhone("1390000000" + i);
        user.setAddress("天津市" + i);
        userMaps.put(i, user);
    }
    model.addAttribute("userMaps", userMaps);
    return "eachMap";
}

遍历数组

@RequestMapping(value = "/each/array")
public String eachArray(Model model) {

    User[] userArray = new User[10];

    for (int i = 0; i < 10; i++) {

        User user = new User();
        user.setId(i);
        user.setNick("赵六" + i);
        user.setPhone("1380000000" + i);
        user.setAddress("深圳市" + i);
        userArray[i] = user;

    }
    model.addAttribute("userArray", userArray);
    return "eachArray";
}

循环遍历Array数组(使用方法同list一样)

遍历混合组合
List 里面放 Map，Map 里面又放的是 List

@RequestMapping(value = "/each/all")
public String eachAll(Model model) {
    //list -> Map -> List -> User
    List>> myList = new ArrayList>>();

    for (int i = 0; i < 2; i++) {

        Map> myMap = new HashMap>();
        for (int j = 0; j < 2; j++) {
            List myUserList = new ArrayList();
            for (int k = 0; k < 3; k++) {
                User user = new User();
                user.setId(k);
                user.setNick("张三" + k);
                user.setPhone("1350000000" + k);
                user.setAddress("广州市" + i);
                myUserList.add(user);
            }
            myMap.put(j, myUserList);
        }
        myList.add(myMap);

    }
    model.addAttribute("myList", myList);
    return "eachAll";
}

循环遍历复杂集合:list -> Map -> list -> User

    
        Map集合的key:

5. 条件判断

控制层类的代码没变

@Controller
public class UserController {

    @RequestMapping(value = "/condition")
    public String condition(Model model) {

        model.addAttribute("sex",1);

        model.addAttribute("flag",true);

        model.addAttribute("productType",0);


        return "condition";
    }
}

主要的区别是在于
下面的判断语句
if判断

th:if 用法:如果满足条件显示(执行),否则相反

    男


    女

unless判断

th:unless 用法:与th:if用法相反,即条件判断取反

    女

switch判断

th:switch/th:case用法

    产品0
    产品1
    无此产品

6. 字面量

字面量主要有

文本字面量，用单引号’…'的字符串就是字面量
数字字面量，用双引号数字就是字面量
boolean字面量
null字面量

主要的部分代码展示如下

文本字面量,用单引号'....'的字符串就是字面量
查看性别


数字字面量
今年是1949年

20年后是1969年


boolean字面量

    执行成功


    不成功


null字面量


    对象已创建,地址不为空



    空

7. 字符串拼接

这个拼接类似java代码
在html代码中的展示

共120条12页,当前第1页,首页 上一页 下一页 尾页

8. 数学运算

三元运算：表达式?” 正确结果”:” 错误结果”
算术运算：+ , - , * , / , %
关系比较：> , < , >= , <= ( gt , lt , ge , le )
相等判断：== , != ( eq , ne )

表达式	描述
ne	not equal
eq	equal
ge	great equal
le	little equal
gt	great
lt	little

部分代码展示

三元运算符 表达式?正确:错误



算术运算
20+5=

20-5=

20*5=

20/5=

20%3=


关系比较
5>2为真

5>2为 2">真

5<2真

5<2真

1>=1真

1>=1= 1">真

1<=1真

1<=1真


相等判断
男
男
女

转载请注明：文章转载自 www.mshxw.com

本文地址：https://www.mshxw.com/it/356393.html

上一篇 Process exited with an error: 1 (Exit value: 1)

下一篇 Java学习01---MarkDown语法学习

Java相关栏目本月热门文章

关于我们文章归档网站地图联系我们

SpringBoot集成Thymeleaf从入门到精通（全）

展示要显示的内容0

标准变量表达式:${} -> (推荐)

选择变量表达式(星号表达式):*{} -> (不推荐)

标准变量表达式与选择变量表达式的混合使用(不推荐)

URL路径表达式,相对路径[没有参数](实际开发中推荐使用的)

绝对路径(带参数)(不推荐使用)

相对路径(带参数)

相对路径(带参数:后台获取的参数值)

相对路径(带多个参数:后台获取的参数值)

循环遍历Array数组(使用方法同list一样)

循环遍历复杂集合:list -> Map -> list -> User

th:if 用法:如果满足条件显示(执行),否则相反

th:unless 用法:与th:if用法相反,即条件判断取反

th:switch/th:case用法

文本字面量,用单引号'....'的字符串就是字面量

数字字面量

boolean字面量

null字面量

三元运算符 表达式?正确:错误

算术运算

关系比较

相等判断

Java相关栏目本月热门文章

三元运算符表达式?正确:错误