SpringBoot系列(五)Thymeleaf 模板引擎

导读:本篇文章讲解 SpringBoot系列(五)Thymeleaf 模板引擎,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

拓展

点击跳转哦~:SpringBoot系列学习汇总和拓展

一、介绍 Thymeleaf

  • 前端交给我们的页面,是html页面。如果是我们以前开发,我们需要把他们转成jsp页面,jsp好处就是当我们查出一些数据转发到JSP页面以后,我们可以用jsp轻松实现数据的显示,及交互等。
  • jsp支持非常强大的功能,包括能写Java代码,但是呢,我们现在的这种情况,SpringBoot这个项目首先是以jar的方式,不是war,像第二,我们用的还是嵌入式的Tomcat,所以呢,他现在默认是不支持jsp的。
  • 作用: 比如值是动态的,这些值的来源是后台封装返回的数据。模板引擎可以将数据、表达式解析和填充到我们指定的位置。

二、引入 Thymeleaf

<!--thymeleaf-->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
  • ③查看是否下载成功
    在这里插入图片描述

三、分析 Thymeleaf

  • ①打开ThymeleafProperties类
    在这里插入图片描述

  • ②我们可以在其中看到默认的前缀和后缀!

    • 我们只需要把我们的html页面放在类路径下的templates下,thymeleaf就可以帮我们自动渲染了。
    • 使用thymeleaf什么都不需要配置,只需要将他放在指定的文件夹下即可!
  • ③测试:

    • 编写controller
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class helloWorldController {

    @RequestMapping(value = "/test",method = RequestMethod.GET)
    public String hello(){
        return "test";
    }
}

- 编写测试页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>我是标题一!!!!</h1>
</body>
</html>
- 启动测试

在这里插入图片描述

四、Thymeleaf 语法

  • ①controller
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class helloWorldController {

    @RequestMapping(value = "/test",method = RequestMethod.GET)
    public String hello(Model model){
        //存入数据
        model.addAttribute("msg","我是大大丁大大");
        return "test";
    }
}
  • ②html
<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>大大丁大大</title>
</head>
<body>
<h1>我是标题一!!!!</h1>
<!-- 测试thymeleaf填充数据-->
<div th:text="${msg}"></div>
</body>
</html>
  • ③启动后测试结果
    在这里插入图片描述

五、Thymeleaf 总结

  • ①在线文档:点击跳转

  • ②如何阅读?可以使用翻译软件来看,因为博主英文也不大行,所以看着也痛苦!
    在这里插入图片描述

  • ③如何寻找所需的东西?需要啥找啥即可。全部背下来不现实,用的时候知道哪里有即可。
    在这里插入图片描述

  • ④我们可以使用任意的 th:attr 来替换Html中原生属性的值!

路漫漫其修远兮,吾必将上下求索~
如果你认为i博主写的不错!写作不易,请点赞、关注、评论给博主一个鼓励吧**转载请注明出处哦**

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/17100.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!