[SpringBoot3]视图技术Thymeleaf

七、视图技术Thymeleaf

  • Thymeleaf是一个表现层的模板引擎,一般被使用在Web环境中,它可以处理HTML、XML、JS等文档,简单来说,它可以将JSP作为Java Web应用的表现层,有能力展示与处理数据。
  • 这样,同一个模板文件,既可以使用浏览器直接打开,也可以放到服务器中用来显示数据,并且样式之间基本上不会存在差异,因此界面设计人员与程序设计人员可以使用同一个模板文件,来查看静态与动态数据的效果。
  • Thymeleaf作为视图展示模型数据,用于和用户交互操作。JSP的代替技术。比较适合做管理系统,是一种易于学习、掌握的。

7.1表达式

  • 表达式用于在页面展示数据的,有多种表达式语法,最常用的是变量表达式、链接表达式。
表达式 作用 例子
${…} 变量表达式,可用于获取后台传过来的值

中国

@{…} 链接网址表达式 链接表达式,传递参数

1.在static/main.html中创建首页

  • 静态资源默认放在static目录,SpringBoot按约定可直接访问。main.html就是普通的HTML文件。
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <div style="margin-left: 200px">
        <h3>学习Thymeleafh3>
        <a href="expression">1.使用表达式a>
        <a href="link">2.链接表达式a>
    div>
body>
html>

2.创建Controller,提供数据给页面

@Controller
public class ThymeleafController {
    //表达式,方法的返回值表示视图,一个xxx.html页面
    @GetMapping("/expression")
    public String exp(Model model) {
        //model中的数据,最后放到request作用域的。
        model.addAttribute("name", "张三");
        model.addAttribute("address", "河南");
        return "exp";
    }

    //链接表达式
    @GetMapping("/link")
    public String link(Integer id, String name, Model model) {
        model.addAttribute("id", id);
        model.addAttribute("myname", name);
        return "link";
    }
}

3.templates/目录下创建Thymeleaf的文件

  • exp.html
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<h3>表达式h3>
<div th:text="${name}">div>
<div th:text="${address}">div>
<br/><br/><br/>
<h3>链接表达式h3>
<a th:href="@{http://www.baidu.com}">链接到百度a><br/>
<a th:href="@{/link}">链接到link地址,无参数a><br/>
<a th:href="@{/link(id=111,name=lisi)}">链接表达式,传递参数a>
body>
html>
  • link.html
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<h3>表达式h3>
<div th:text="${id}">div>
<div th:text="${myname}">div>
body>
html>

7.2if-for

  • Thymeleaf同样支持if、for语句的使用。
表达式 作用 例子
th:if=“boolean 表达式” th:if当条件满足时,显示代码片段。条件常用boolean表示,true满足,反之不满足。
10大于2
th:each处理循环,类似jstl中的

1.main.html

<a href="if-for">3.if和fora>

2.创建UserVO

@Data
@NoArgsConstructor
@AllArgsConstructor
public class UserVO {
  private Integer id;
  private String name;
  private Integer age;
}

3.创建控制器方法

//if,for
@GetMapping("/if-for")
public String ifFor(Model model) {
    model.addAttribute("login", true);
    UserVO user = new UserVO();
    user.setId(10);
    user.setName("张三");
    user.setAge(20);
    model.addAttribute("user", user);

    //创建List集合
    UserVO user1 = new UserVO(11, "李四", 21);
    UserVO user2 = new UserVO(12, "王五", 22);
    ArrayList<UserVO> users = new ArrayList<>();
    users.add(user1);
    users.add(user2);
    model.addAttribute("users", users);
    return "base";
}

4.创建base.html模板页面

DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<h3>ifh3>
<div th:if="10>2">10大于2div>
<div th:if="${login}">用户已经登录div>
<div th:if="${user.age>18}">用户成年了div>
<br/>

<h3>forh3>
<table border="1px">
    <tr>
        <th>idth>
        <th>nameth>
        <th>ageth>
    tr>
    <tr th:each="u:${users}">
        <td th:text="${u.id}">td>
        <td th:text="${u.name}">td>
        <td th:text="${u.age}">td>
    tr>
table>
body>
html>

5.浏览器访问

[SpringBoot3]视图技术Thymeleaf_第1张图片

你可能感兴趣的:(springboot,java,thymeleaf)