浅浅入门SpringBoot之Thymeleaf模板

Thymeleaf是一个流行的模板引擎,该模板引擎采用Java语言开发模板引擎是一个技术名词,是跨领域跨平台的概念,在Java语言体系下有模板引擎,在C#、PHP语言体系下也有模板引擎,甚至在 Javascript中也会用到模板引擎技术,Java生态下的模板引擎有 Thymeleaf、 Freemaker、Ⅴ elocity、 Beetl(国产)等。

Thymeleaf对网络环境不存在严格的要求,既能用于web环境下,也能用于非web环境下。在非web环境下,他能直接显示模板上的静态数据;在web环境下,它能像Jsp一样从后台接收数据并替换掉模板上的静态数据。它是基于HTML的,以HIML标签为载体,Thymeleaf要寄托在HTML标签下实现。

Spring Boot集成了 Thymeleaf模板技术,并且 Spring boot官方也推荐使用 Thymeleaf来替代JSP技术, Thymeleaf是另外的一种模板技术,它本身并不属于 Spring Boot, Spring Boot只是很好地集成这种模板技术,作为前端页面的数据展示,在过去的 Java Web开发中,我们往往会选择使用Jsp去完成页面的动态渲染,但是jsp需要翻译编译运行,效率低

官网https://www.thymeleaf.org/

浅浅入门SpringBoot之Thymeleaf模板_第1张图片

SpringBoot框架集成Thymealeaf,Thymealeaf代替jsp。

IDEA设置默认模板

浅浅入门SpringBoot之Thymeleaf模板_第2张图片

SpringBoot简单实用Thymealeaf

浅浅入门SpringBoot之Thymeleaf模板_第3张图片

浅浅入门SpringBoot之Thymeleaf模板_第4张图片

@Controller

public class ControllerA {
    @RequestMapping("/hello")

    public String A(HttpServletRequest request){

        request.setAttribute("data","Thymeleaf hello world");

        //指定视图

        //逻辑名称

        return "A";

    }

}







    

    Title





Thymeleaf显示数据:

浅浅入门SpringBoot之Thymeleaf模板_第5张图片

Thymeleaf模板之常用设置

application.properties配置

#开发阶段,关闭模板缓存,立即生效

spring.thymeleaf.cache=false
#编码格式

spring.thymeleaf.encoding=utf-8
#模型的类型(默认html)

spring.thymeleaf.mode=HTML
#模板前缀、模板引擎存放路径 默认classpath:/templates/

spring.thymeleaf.prefix=classpath:/templates/

#模板后缀 默认.html

spring.thymeleaf.suffix=.html

Thymeleaf模板之标准变量表达式

 表达式是在页面获取数据的一种Thymeleaf语法。列:${ key}

注意:th:text=””是Thymeleaf的一个属性,用于显示文本信息。

标准变量表达式用于访问容器(tomcat)上下文环境中的变量,功能和EL中的${}相同。Thymeleaf中的变量表达式使用${变量名}的方式获取Controller中model其中的数据(request作用域中的数据)。

标准变量表达式语法:${key},作用:获取key对于的文本数据,key是request作用域中的key,使用request.setAttribute(),model.addAttribute()

在html页面中获取数据th:text=”${key}”

@Controller

@RequestMapping("/t")

public class ControllerB {

    @RequestMapping("/hello2")

    public String B(Model model){

        model.addAttribute("Student",new Student(1,"小红","女"));

        System.out.println("ControllerB");

        return "abc";

    }

}

浅浅入门SpringBoot之Thymeleaf模板_第6张图片


student:

Thymeleaf模板之选择变量表达式

语法格式:*{key}             作用:获取key对应的数据库,*{key}需要和th:object这个属性一起使用。

@RequestMapping("/hello3")

public String C(Model model){

    model.addAttribute("Student",new Student(1,"小明","男"));

    System.out.println("ControllerC");

    return "C";

}

浅浅入门SpringBoot之Thymeleaf模板_第7张图片

Thymeleaf模板之链接表达式

语法:@{url}  作用:表示链接

列如:







//链接表达式

@GetMapping("/link")

public String link(Model model){

    model.addAttribute("userId",101);

    return "link";

}
@GetMapping("/link2")

@ResponseBody

public String link2(int id){

    return "id:"+id;

}
@GetMapping("/link3")

@ResponseBody

public String link3(int id ,String name){

    return "id+name:"+id+name;

}

链接表达式

绝对地址
百度链接 相对地址
相对地址,传递参数
获取model数据,传递一个参数 传递多个参数

 

浅浅入门SpringBoot之Thymeleaf模板_第8张图片

Thymeleaf模板之属性使用

属性是放在html元素中的,就是html元素的属性,加上th,属性的值由模板引擎处理。

属性:th:action  th:method th:href th:src th:text th:style th:each

th:action

定义后台控制器的路径,类似

标准的action属性 th:action="@{/t/login}"

th:method

定义get,post方法  th:method="${method}"

th:href

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

百度链接

th:src

用于引入外部资源,类似

th:text

设置显示文本 ${key}

//Thymeleaf属性的使用

@GetMapping ("/property01")
public String property(Model model){
    model.addAttribute("id","12345");
    model.addAttribute("method","post");
    model.addAttribute("password","123455");
    model.addAttribute("color","color:#f76730");
    return "pro";
}
@PostMapping("/login")
@ResponseBody
public String login(int id,String password){
    return "账户id:"+id+"账户密码:"+password;
}


属性的使用

hello world

hello world

hello world

浅浅入门SpringBoot之Thymeleaf模板_第9张图片

Thymeleaf模板之循环

th:each这个属性非常常用,与JSTL中的类似.可以循环遍历集合,也可以循环变量数组和map

循环List

循环的状态变量

Index: 当前迭代对象的下标(0-n)

Count:当前迭代对象个数(0-n)

Size:被迭代对象的大小

Current:当前迭代变量

even/odd :布尔值,当前循环是否为偶数/奇数

first:是否第一个

last:是否最后一个

浅浅入门SpringBoot之Thymeleaf模板_第10张图片

Controller

//    循环list

    @GetMapping("/eachList")
    public String eachList(Model model){
        List strList = new ArrayList<>();
        strList.add("张三");
        strList.add("李四");
        strList.add("保国");
        model.addAttribute("strList",strList);

        List students = new ArrayList<>();
        students.add(new Student(10,"张三","男"));
        students.add(new Student(11,"李四","男"));
        students.add(new Student(12,"保国","男"));
        model.addAttribute("students",students);
        return "E";
    }

Html页面

下标 id name sex

浅浅入门SpringBoot之Thymeleaf模板_第11张图片

循环数组Array

controller

//循环数组

@GetMapping("/eachArray")

public  String array(Model model){
    String[] name =new String[3];
    name[0]="张三2";
    name[1]="李四2";
    name[2]="保国2";
    model.addAttribute("names",name);
    return "array";
}

Html页面

循环Array

编号 name

循环Map

Controller

//循环map

    @GetMapping("/eachMap")
    public String eachMap(Model model){
        Map map =new HashMap<>();
        map.put("stu1",new Student(11,"保国1","男"));
        map.put("stu2",new Student(12,"保国2","男"));
        map.put("stu3",new Student(13,"保国3","男"));
        map.put("stu4",new Student(14,"菜坤","男"));
        model.addAttribute("stuMap",map);
        return "Map";
    }

Html页面

循环Map

编号 key id name sex

浅浅入门SpringBoot之Thymeleaf模板_第12张图片

循环List>

@GetMapping("/eachListMap")
public String eachListMap(Model model){

    List> listMap =new ArrayList<>();
    Map map1 =new HashMap<>();
    map1.put("stu1",new Student(11,"保国11","男"));
    map1.put("stu2",new Student(12,"保国12","男"));
    map1.put("stu3",new Student(13,"保国13","男"));
    map1.put("stu4",new Student(14,"菜坤1","男"));

    Map map2 =new HashMap<>();
    map2.put("stu12",new Student(11,"保国112","男"));
    map2.put("stu22",new Student(12,"保国122","男"));
    map2.put("stu32",new Student(13,"保国132","男"));
    map2.put("stu42",new Student(14,"菜坤12","男"));
    listMap.add(map1);
    listMap.add(map2);
    model.addAttribute("ListMap",listMap);
    model.addAttribute("listMap",listMap);
    return "Map";
}

循环List-Map

编号 key id name sex

 浅浅入门SpringBoot之Thymeleaf模板_第13张图片

Thymeleaf模板之if和unless

语法:th:if”boolean条件”,条件为true显示体内容

Th:unless是th:if的一个相反操作

显示内容

显示内容

用例

controller

@GetMapping("/ifl")

public String ifanUnless(Model model){

    model.addAttribute("name","z");
    model.addAttribute("login","true");
    model.addAttribute("age",30);
    model.addAttribute("empty1","");
    model.addAttribute("fnull",null);
    return "IfUnless";

}

html


张三
登入成功
年龄小于40
true
为null

浅浅入门SpringBoot之Thymeleaf模板_第14张图片

Thymeleaf模板之switch-case

@GetMapping("/switch")
public String switchCase(Model model){
        model.addAttribute("sex",'m');
        return "switch";
    }

switch的使用

未知

浅浅入门SpringBoot之Thymeleaf模板_第15张图片

Thymeleaf模板之内联text

@GetMapping("/inline")
public String inlineDemo(Model model){
    model.addAttribute("name","z");
    model.addAttribute("age",30);
    model.addAttribute("sex","m");
    model.addAttribute("stu",new Student(14,"菜坤","男"));
return "inline";
}

名字[[${name}]]

年龄[(${age})]

[['I love yue']]

[[${stu.id}]],[[${stu.name}]],[[${stu.sex}]]

Thymeleaf模板之内联javascript

浅浅入门SpringBoot之Thymeleaf模板_第16张图片

Thymeleaf模板之字面值

文本字面量

数字字面量

年龄小于40

Bollean字面量

登入成功

Null字面量

name不为null

true
为null

Thymeleaf模板之字符串连接

方式1

方式2

浅浅入门SpringBoot之Thymeleaf模板_第17张图片

Thymeleaf模板之运算符

算术运算符:+,-,*,/,%

关系比较:>,<,>=,<=  (gt,lt,ge,le)

相等判断:==,!=  (eq,ne)

@GetMapping("/inline")

public String inlineDemo(Model model){

    model.addAttribute("name","z");
    model.addAttribute("age",30);
    model.addAttribute("sex","m");
    model.addAttribute("stu",new Student(14,"菜坤","男"));
    model.addAttribute("fnull",null);
    model.addAttribute("login",true);

return "inline";
}

 运算符的使用

年龄大于10

结果

为null

三元运算符:

浅浅入门SpringBoot之Thymeleaf模板_第18张图片

Thymeleaf模板之内置对象使用

//内置对象

@GetMapping("/object")

public String built_in_Object(Model model, HttpServletRequest request, HttpSession session){

    model.addAttribute("name","坤坤");
    request.setAttribute("requestFata","request作用域数据");
    request.getSession().setAttribute("sessionData","session作用域的数据");
    return "builtinObject";

}

hello builtinObject

获取作用域中的数据

获取request域中的数据

浅浅入门SpringBoot之Thymeleaf模板_第19张图片

Thymeleaf模板之内置#request对象方法

使用内置对象的方法

浅浅入门SpringBoot之Thymeleaf模板_第20张图片

Thymeleaf模板之内置对象#session对象方法

Session表示HttpSession对象的,是#session的简单表示方式。

Thymeleaf模板之param对象

Param对象表示url请求的参数集合

Thymeleaf模板之内置工具类

#dates

@GetMapping("/unlist")

public String utileObject(Model model){

    model.addAttribute("Mdate",new Date());

    return "utileObject";

}

日期类工具类对象

#numbers

@GetMapping("/unlist")

public String utileObject(Model model){

    model.addAttribute("numbers",45.01);
    return "utileObject";

}

#strings

@GetMapping("/unlist")

public String utileObject(Model model){

    model.addAttribute("Stirng","1234fdghdtgjuefS");
    return "utileObject";

}

浅浅入门SpringBoot之Thymeleaf模板_第21张图片

#lists

浅浅入门SpringBoot之Thymeleaf模板_第22张图片

@GetMapping("/unlist")

public String utileObject(Model model){

    List list = Arrays.asList("A","B","C");

    return "utileObject";

}

浅浅入门SpringBoot之Thymeleaf模板_第23张图片

Null处理

浅浅入门SpringBoot之Thymeleaf模板_第24张图片

@GetMapping("/unlist")

public String utileObject(Model model){

    Cat cat =new Cat();
    cat.setName("狸花猫");
    Dog dog =new Dog();
    dog.setName("阿拉斯加");
    Pet p =new Pet(cat,dog);
    model.addAttribute("pet",p);
    return "utileObject";

}

浅浅入门SpringBoot之Thymeleaf模板_第25张图片

当cat值不为null时,才执行name

null处理

浅浅入门SpringBoot之Thymeleaf模板_第26张图片

Thymeleaf模板之自定义模板

自定义模板,在其他模板文件中多次使用

Hello为自定义模板名称

hello world

引用模板

插入模板方式1

浅浅入门SpringBoot之Thymeleaf模板_第27张图片

                   

插入模板方式2

包含模板

方式2

浅浅入门SpringBoot之Thymeleaf模板_第28张图片

                 

html页面做模板

浅浅入门SpringBoot之Thymeleaf模板_第29张图片



浅浅入门SpringBoot之Thymeleaf模板_第30张图片

使用其他目录中的模板

你可能感兴趣的:(spring,boot,java,servlet)