SpringBoot学习5之整合thymeleaf

最新推荐文章于 2024-09-05 23:16:39 发布

kenewstar

最新推荐文章于 2024-09-05 23:16:39 发布

阅读量933

点赞数 2

分类专栏： SpringBoot 文章标签： spring boot web

本文链接：https://blog.csdn.net/weixin_45840947/article/details/105667116

版权

SpringBoot 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

SpringBoot整合视图层技术(2)

SpringBoot官方推荐使用Thymeleaf模板引擎做视图层开发；

创建一个SpringBoot项目

在这里插入图片描述

修改pom文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.kenewstar</groupId>
    <artifactId>springboot02</artifactId>
    <version>1.0-SNAPSHOT</version>
<!--        父项目       -->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.6.RELEASE</version>
    </parent>

    <dependencies>
<!--        添加springboot启动器     -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
<!--        springboot整合thymeleaf-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>

</project>

（一）创建第一个Thymeleaf程序

① 创建一个控制器类

package com.kenewstar.thymeleaf;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * @Author:kenewstar
 * @Description: springboot整合thymeleaf, 第一个程序
 * @Date:Created in 2020/4/23
 */
@Controller
public class IndexController {

    @RequestMapping("/show")
    public String show(Model model){
        model.addAttribute("msg","thymeleaf学习");
        return "index";
    }
}

这是一个很普通的控制器，与以往并没有什么不同，当前台发起/show的请求时，控制器将msg字符串信息响应给用户；

② 创建一个index.html页面，使用thymeleaf

首先必须在resources目录下创建一个名为templates的目录，我们将html页面放在此目录下，thymeleaf的文件后缀是.html；
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf学习</title>
</head>
<body>
<!--    Thymeleaf做视图渲染  -->
    <h4 th:text="${msg}"></h4>
    <hr/>
<!--    常量      -->
    <p th:text="thymeleaf第一个程序"></p>
</body>
</html>

上述代码中，将响应内容msg取出数据，通过th:text=" "，双引号中使用EL表达式，常量字符串直接使用即可，更多关于Thymeleaf的知识请参考官网；

③ 创建SpeingBoot启动类

代码如下：

package com.kenewstar.thymeleaf;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
/**
 * @Author:kenewstar
 * @Description: springboot启动类
 * @Date:Created in 2020/4/23
 */
@SpringBootApplication
public class ThymeleafApp {

    public static void main(String[] args) {
        //启动springboot程序
        SpringApplication.run(ThymeleafApp.class,args);

    }
}

启动项目，在浏览器地址栏输入localhost:8080/show
在这里插入图片描述
我们可以看出响应数据被取出来了；

（二）Thymeleaf语法

1 变量输出与字符串

① th:text ：在页面中输出值
② th:value：将值放在input中，等同于input中的value

<input type="text" name="name" th:value="abc"/>

2 条件判断

① th:if ：

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

② th:switch ：

<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>

3 迭代遍历

① th:each ：

<table>
	<tr>
		<th>ID</th>
		<th>NAME</th>
		<th>AGE</th>
	</tr>
	<tr th:each="u : ${list}">
		<td th:text="${u.userid}"></td>
		<td th:text="${u.username}"></td>
		<td th:text="${u.userage}"></td>
	</tr>
</table>

可以与<c:forEach>标签作对比
其他更多标签请参考官方文档

4 域对象操作

① HttpServletRequest

//java代码
request.setAttribute("req", "HttpServletRequest");

<!--html代码-->
<span th:text="${#httpServletRequest.getAttribute('req')}"></span>

② HttpSession

//java代码
request.getSession().setAttribute("sess", "HttpSession");

<!--html代码-->
<span th:text="${session.sess}"></span>

③ ServletContext

request.getSession().getServletContext().setAttribute("app","Application");

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

5URL表达式

① 绝对路径

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

② 相对路径
相对于项目的上下文的相对路径

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

③ 在 url 中实现参数传递

<a th:href="@{/show(id=1,name=kenewstar)}">传参</a>

相当于下面的

<a href="/show?id=1&name=kenewstar">传参</a>

④ 在 url 中通过 restful 风格进行参数传递

<a th:href="@{/path/{id}/show(id=1,name=zhagnsan)}">传参</a>

篇幅限制，只介绍这么多，详情请参考官方文档