SpringBoot整合Thymeleaf(十三)

标签：SpringBoot 展示十三 addAttribute Thymeleaf user th model

二八佳人体似酥，腰间仗剑斩愚夫。虽然不见人头落，暗里教君骨髓枯。

上一章简单介绍了SpringBoot整合Velocity(十二)如果没有看过，请观看上一章

一. Thymeleaf 的介绍

Thymeleaf 是适用于 Web 和独立环境的现代服务器端 Java 模板引擎，

能够处理 HTML，XML，JavaScript，CSS 甚至纯文本。

Thymeleaf 的主要目标是提供一种优雅且高度可维护的模板创建方式。

为此，它以“自然模板”的概念为基础，以不影响模板用作设计原型的方式将其逻辑注入模板文件。

这样可以改善设计沟通，并缩小设计团队与开发团队之间的差距。

关于Thymeleaf 的详细介绍，可以访问: https://www.docs4dev.com/docs/zh/thymeleaf/3.0/reference/using_thymeleaf.html 进行学习。

二. SpringBoot 整合 Thymeleaf

按照 SpringBoot 整合 BootStrap 的Maven方式创建相应的项目。

将模板 html 文件放置在 resources/templates 目录下

SpringBoot整合Thymeleaf(十三)_bootstrap

二.一 pom.xml 中添加依赖

在原先依赖的基础上，添加 spring-boot-starter-thymeleaf 的依赖

<!--引入 spring-boot-starter-thymeleaf的依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

二.二 application.yml 配置 thymeleaf的相关属性

spring:
  # 配置thymeleaf的相关信息
  thymeleaf:
    # 开启视图解析
    enabled: true
    #编码格式
    encoding: UTF-8
    #前缀配置
    prefix: classpath:/templates/
    # 后缀配置
    suffix: .html
    #是否使用缓存 开发环境时不设置缓存
    cache: false
    # 格式为 HTML 格式
    mode: HTML5
    # 配置类型
    servlet:
      content-type: text/html

二.三配置静态资源映射

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
    /**
     * 配置静态的资源信息
     * @param registry
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("doc.html").addResourceLocations("classpath:/META-INF/resources/");
        registry.addResourceHandler("swagger-ui.html").addResourceLocations("classpath:/META-INF/resources/");
        //映射 static 目录
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
        //放置其他 业务页面资源
        registry.addResourceHandler("/**").addResourceLocations("classpath:/templates/");
    }
}

二.四 UserController 响应控制器

/**
 * @ClassName:InfoController
 * @Description 整合Thymeleaf所使用的Controller
 * @Author yjl
 * @Date 2021/6/15 10:55
 * @Version 1.0
 **/
@Controller
public class InfoController {
    
}

注意，使用是 @Controller, 并不是 @RestController

二.五 User.java 实体类

@Data
public class User {
    private Integer id;
    private String name;
    private Integer sex;
    private Integer age;
    private String description;
}

这些是基础的配置信息.

三. SpringBoot整合Thymeleaf的详细介绍

三.一基础信息显示

三.一.一后端响应

/**
     * 普通展示
     * @param model
     * @return
     */
    @RequestMapping("/index")
    public String info(Model model){
        return "index";
    }

返回到首页

三.一.二前端页面 index.html

<!doctype html>
<!--注意：引入thymeleaf的名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type"content="text/html;charset=UTF-8">
    <title>Welcome <span th:text="'整合Thymeleaf'"/></title>
    <link rel="StyleSheet" href="webjars/bootstrap/3.4.1/css/bootstrap.css" type="text/css">
</head>
<body class="container">
<h1>Welcome <span th:text="'两个蝴蝶飞'"/></h1>
<h2>我有一个朋友,她的名字叫: <span th:text="'周小欢'"/></h2>
<script type="text/javascript" src="webjars/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript" src="webjars/bootstrap/3.4.1/js/bootstrap.js"></script>
</body>
</html>

引入 thymeleaf 的名称空间

<!--注意：引入thymeleaf的名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

用: th:text 展示基础的文本信息

三.一.三响应展示

通过前端页面进行响应

SpringBoot整合Thymeleaf(十三)_spring boot_02

通过控制器进行响应,会将数据展示出来。

SpringBoot整合Thymeleaf(十三)_html_03

三.二对象信息显示

三.二.一后端响应

/**
     * 基本信息展示
     * @param model
     * @return
     */
    @RequestMapping("/basic")
    public String basic(Model model){
        model.addAttribute("title","学习 Thymeleaf的基本标签");
        model.addAttribute("name","岳泽霖");
        model.addAttribute("girlName","周小欢");
        model.addAttribute("id",1);
        model.addAttribute("utext","<span style='color:red;font-size:20px;'>嘿嘿,总会有人一直记得,岳泽霖和周小欢的故事</span>");
        model.addAttribute("age","26");
        model.addAttribute("inputValue","一个快乐的程序员");
        model.addAttribute("href","https://yuejl.blog.csdn.net/");
        return "basic";
    }

返回到首页

三.二.二前端页面 basic.html

<!doctype html>
<!--注意：引入thymeleaf的名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type"content="text/html;charset=UTF-8">
    <title>Welcome <span th:text="${title}"/></title>
    <link rel="StyleSheet" th:href="@{webjars/bootstrap/3.4.1/css/bootstrap.css}" type="text/css">
</head>
<body class="container">
<h1>th:text 展示普通的文本信息</h1>
<h2>我的名字是: <span th:text="${name}"/></h2>
<h2>我的朋友的名字是: <span th:text="${girlName}"/> </h2>
<h3>id的编号是: <span th:id="${id}"/></h3>
<h1>展示HTML信息:</h1>
<h2>用 text展示HTML文本: <span th:text="${utext}"/></h2>
<h2>用 utext 展示HTML文本: <span th:utext="${utext}"/></h2>
<h1>展示回显输入框的值:
    年龄: <input type="text" th:value="${age}"/> </h1>
我的描述:
 <textarea>
     <th:block th:text="${inputValue}">
     </th:block>
 </textarea>
<h1>展示链接信息</h1>
我的CSDN网址 <a th:href="@{${href}}"> CSDN网址</a>
    <h1>展示src的信息</h1>
    <img th:src="@{static/self.jpg}" th:width="200px" th:height="200px"/>
<script type="text/javascript" th:src="@{webjars/jquery/3.5.1/jquery.js}"></script>
<script type="text/javascript" th:src="@{webjars/bootstrap/3.4.1/js/bootstrap.js}"></script>
</body>
</html>

引入 thymeleaf 的名称空间

<!--注意：引入thymeleaf的名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

用: th:text 展示基础的文本信息

用: th:href 进行引入链接 th:utext 放置html形式的文本，可以解析

th:id 放置id值 th:value 放置输入框的值

th:src 引入图片的信息

三.二.三响应展示

通过控制器进行响应,会将数据展示出来。

SpringBoot整合Thymeleaf(十三)_html_04

三.三 If 显示

三.三.一后端响应

/**
     * If对象展示
     * @param model
     * @return
     */
    @RequestMapping("/if")
    public String ifModel(Model model){
        model.addAttribute("title","学习 Thymeleaf的If标签");
        //放置 java bean 对象
        User user=new User();
        user.setName("岳泽霖");
        user.setAge(26);
        user.setDescription("一个快乐的程序员");
        model.addAttribute("user",user);
        //放置if 语句
        model.addAttribute("sex","男");
        model.addAttribute("enable","0");
        model.addAttribute("score",85);
        return "if";
    }

返回到首页

三.三.二前端页面 if.html

<!doctype html>
<!--注意：引入thymeleaf的名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type"content="text/html;charset=UTF-8">
    <title>Welcome <span th:text="${title}"/></title>
    <link rel="StyleSheet" th:href="@{webjars/bootstrap/3.4.1/css/bootstrap.css}" type="text/css">
</head>
<body class="container">
<h1>Java Bean 展示信息</h1>
我的名字是: <span th:text="${user.name}"/>
    年龄是: <span th:text="${user['age']}"/>
    描述是: <textarea th:block th:text="${user.getDescription()}"/>
<h1>IF 条件语句</h1>
<h2>三目条件表达式</h2>
性别: <span th:text="${sex=='男'}?'男':'女'"/>
<h2>th:if 的处理</h2>
<span th:if="${sex}=='男'">
    男性
</span>

<th:block>
    <span th:if="${enable}=='1'">
        正常
    </span>
    <span th:unless="${enable}=='1'">
        禁用
    </span>
</th:block>
<h2>th:switch 的处理</h2>
<div th:switch="${score}>=0">
  <span th:case="${score}>=90">
      优秀
  </span>
    <span th:case="${score}>=80">
        良好
    </span>
    <span th:case="${score}>=70">
        中
    </span>
    <span th:case="${score}>=60">
        及
    </span>
    <span th:case="*">
        差
    </span>
</div>
<script type="text/javascript" th:src="@{webjars/jquery/3.5.1/jquery.js}"></script>
<script type="text/javascript" th:src="@{webjars/bootstrap/3.4.1/js/bootstrap.js}"></script>
</body>
</html>

引入 thymeleaf 的名称空间

<!--注意：引入thymeleaf的名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

th:if th:unless th:switch 进行条件判断语句。

th:case="*" 表示其他剩余的全部情况。

三.三.三响应展示

通过控制器进行响应,会将数据展示出来。

SpringBoot整合Thymeleaf(十三)_html_05

三.四 each 循环显示

三.四.一后端响应

/**
     * for 循环展示
     * @param model
     * @return
     */
    @RequestMapping("/for")
    public String forModel(Model model){
        model.addAttribute("title","学习 Thymeleaf的If标签");
        //放置 java bean 对象
        User user=new User();
        user.setName("岳泽霖");
        user.setAge(26);
        user.setDescription("一个快乐的程序员");
        model.addAttribute("user",user);
        //放置if 语句
        //放置foreach 语句
        String[] hobbies=new String[]{"看书","编程","打游戏"};
        model.addAttribute("hobbies",hobbies);
        List<User> userList=getUserList();
        model.addAttribute("userList",userList);
        return "for";
    }

返回到首页

三.四.二前端页面 for.html

<!doctype html>
<!--注意：引入thymeleaf的名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type"content="text/html;charset=UTF-8">
    <title>Welcome <span th:text="${title}"/></title>
    <link rel="StyleSheet" th:href="@{webjars/bootstrap/3.4.1/css/bootstrap.css}" type="text/css">
</head>
<body class="container">
<h1>Java Bean 展示信息</h1>
我的名字是: <span th:text="${user.name}"/>
    年龄是: <span th:text="${user['age']}"/>
    描述是: <textarea th:block th:text="${user.getDescription()}"/>
<h1>循环 th:each 的处理</h1>
我的爱好:
<div th:each="hobby:${hobbies}">
    <span th:text="${hobby}"></span>
</div>

<table class="table table-hover">
    <th>
        <td>id编号</td>
        <td>名称</td>
        <td>年龄</td>
        <td>性别</td>
        <td>描述</td>
    </th>
    <th:block th:each="u:${userList}">
    <tr>
        <td></td>
        <td th:text="${u.id}"></td>
        <td th:text="${u.name}"></td>
        <td th:text="${u.age}"></td>
        <td th:text="${u.sex=='男'}?'男':'女'">
        </td>
        <td th:text="${u.description}"></td>
    </tr>
    </th:block>
</table>



<script type="text/javascript" th:src="@{webjars/jquery/3.5.1/jquery.js}"></script>
<script type="text/javascript" th:src="@{webjars/bootstrap/3.4.1/js/bootstrap.js}"></script>
</body>
</html>

引入 thymeleaf 的名称空间

<!--注意：引入thymeleaf的名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

th:each 表示循环处理

也可以

<th:block th:each="u,stat:${userList}">
    <tr>
        <td></td>
        <td th:text="${u.id}"></td>
        <td th:text="${u.name}"></td>
        <td th:text="${u.age}"></td>
        <td th:text="${u.sex=='男'}?'男':'女'">
        </td>
        <td th:text="${u.description}"></td>
    </tr>
    </th:block>

stat对象包含以下属性：

index，从0开始的角标
count，元素的个数，从1开始
size，总元素个数
current，当前遍历到的元素
even/odd，返回是否为奇偶，boolean值
first/last，返回是否为第一或最后，boolean值
进行处理.

三.四.三响应展示

通过控制器进行响应,会将数据展示出来。

SpringBoot整合Thymeleaf(十三)_spring boot_06

三.五 js里面引入数据显示

三.五.一后端响应

@RequestMapping("/myjs")
    public String myjs(Model model){
        model.addAttribute("title","学习 Thymeleaf的If标签");
        //放置 java bean 对象
        User user=new User();
        user.setName("岳泽霖");
        user.setAge(26);
        user.setDescription("一个快乐的程序员");
        model.addAttribute("user",user);
        return "myjs";
    }

返回到首页

三.五.二前端页面 myjs.html

<!doctype html>
<!--注意：引入thymeleaf的名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type"content="text/html;charset=UTF-8">
    <title>Welcome <span th:text="${title}"/></title>
    <link rel="StyleSheet" th:href="@{webjars/bootstrap/3.4.1/css/bootstrap.css}" type="text/css">
</head>
<body class="container">
<h1>Java Bean 展示信息</h1>
我的名字是: <span th:text="${user.name}"/>
    年龄是: <span th:text="${user['age']}"/>
    描述是: <textarea th:block th:text="${user.getDescription()}"/>
<script th:inline="javascript">
    const user = /*[[${user}]]*/ {};
    const age = /*[[${user.age}]]*/ 24;
    const name = /*[[${user.name}]]*/ "两个蝴蝶飞";
    console.log(user);
    console.log(age)
    console.log(name)
</script>
<script type="text/javascript" th:src="@{webjars/jquery/3.5.1/jquery.js}"></script>
<script type="text/javascript" th:src="@{webjars/bootstrap/3.4.1/js/bootstrap.js}"></script>
</body>
</html>

引入 thymeleaf 的名称空间

<!--注意：引入thymeleaf的名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

使用 th:inline ，通过 /*[[Thymeleaf表达式]]*/ 默认值进行处理

三.五.三响应展示

通过控制器进行响应,会将数据展示出来。

SpringBoot整合Thymeleaf(十三)_css_07

标签：SpringBoot,展示,十三,addAttribute,Thymeleaf,user,th,model
From： https://blog.51cto.com/u_13420484/5845477

SpringBoot整合Thymeleaf(十三)

一. Thymeleaf 的介绍

二. SpringBoot 整合 Thymeleaf

二.一 pom.xml 中添加依赖

二.二 application.yml 配置 thymeleaf的相关属性

二.三配置静态资源映射

二.四 UserController 响应控制器

二.五 User.java 实体类

三. SpringBoot整合Thymeleaf的详细介绍

三.一基础信息显示

三.一.一后端响应

三.一.二前端页面 index.html

三.一.三响应展示

三.二对象信息显示

三.二.一后端响应

三.二.二前端页面 basic.html

三.二.三响应展示

三.三 If 显示

三.三.一后端响应

三.三.二前端页面 if.html

三.三.三响应展示

三.四 each 循环显示

三.四.一后端响应

三.四.二前端页面 for.html

三.四.三响应展示

三.五 js里面引入数据显示

三.五.一后端响应

三.五.二前端页面 myjs.html

三.五.三响应展示

相关文章

赞助商

阅读排行

SpringBoot整合Thymeleaf(十三)

一. Thymeleaf 的介绍

二. SpringBoot 整合 Thymeleaf

二.一 pom.xml 中添加依赖

二.二 application.yml 配置 thymeleaf的相关属性

二.三 配置静态资源映射

二.四 UserController 响应控制器

二.五 User.java 实体类

三. SpringBoot整合Thymeleaf的详细介绍

三.一 基础信息显示

三.一.一 后端响应

三.一.二 前端页面 index.html

三.一.三 响应展示

三.二 对象信息显示

三.二.一 后端响应

三.二.二 前端页面 basic.html

三.二.三 响应展示

三.三 If 显示

三.三.一 后端响应

三.三.二 前端页面 if.html

三.三.三 响应展示

三.四 each 循环 显示

三.四.一 后端响应

三.四.二 前端页面 for.html

三.四.三 响应展示

三.五 js里面引入数据显示

三.五.一 后端响应

三.五.二 前端页面 myjs.html

三.五.三 响应展示

相关文章

赞助商

阅读排行

二.三配置静态资源映射

三.一基础信息显示

三.一.一后端响应

三.一.二前端页面 index.html

三.一.三响应展示

三.二对象信息显示

三.二.一后端响应

三.二.二前端页面 basic.html

三.二.三响应展示

三.三.一后端响应

三.三.二前端页面 if.html

三.三.三响应展示

三.四 each 循环显示

三.四.一后端响应

三.四.二前端页面 for.html

三.四.三响应展示

三.五.一后端响应

三.五.二前端页面 myjs.html

三.五.三响应展示