SpringBoot03: thymeleaf模板引擎

SpringBoot: thymeleaf模板引擎

引入静态资源(2种方法)

引入Webjars

  1. 访问webjars官网,导入依赖

  2. 访问:只要是静态资源,SpringBoot就会去对应的路径寻找资源,我们这里访问:http://localhost:8080/webjars/jquery/3.6.0/jquery.js

  3. 访问成功

resource下面引入

  1. 我们可以在resources根目录下新建以下对应的文件夹,存放我们的静态文件
"classpath:/META-INF/resources/"
"classpath:/resources/"
"classpath:/static/"
"classpath:/public/"
  1. 访问:

比如访问 http://localhost:8080/1.js , 他就会去文件夹中找对应的静态资源文件,优先级从上到下

Thymeleaf模板引擎

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

Thymeleaf 在Github 的主页:https://github.com/thymeleaf/thymeleaf

Spring官方文档:找到我们对应的版本

https://docs.spring.io/spring-boot/docs/2.2.5.RELEASE/reference/htmlsingle/#using-boot-starter

入门

  1. 找到对应的pom依赖:
<!--thymeleaf-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

image-20210804133543915

写个controller跳转

@Controller
public class TestController {
    @RequestMapping("/t1")
    public String test1(){
        //classpath:/templates/test.html
        return "test";
    }
}
  1. 在templates下面放个test.html静态界面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>测试页面</h1>
</body>
</html>

启动类运行一下就可以了

Thymeleaf 语法学习

要学习语法,还是参考官网文档最为准确,我们找到对应的版本看一下;

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

我们做个最简单的练习 :我们需要查出一些数据,在页面中展示

1、修改测试请求,增加数据传输;

@RequestMapping("/t1")
public String test1(Model model){
    //存入数据
    model.addAttribute("msg","Hello,Thymeleaf");
    //classpath:/templates/test.html
    return "test";
}

2、我们要使用thymeleaf,需要在html文件中导入命名空间的约束,方便提示。

我们可以去官方文档的#3中看一下命名空间拿到html种:

<xmlns:th="http://www.thymeleaf.org">

3、我们去编写下前端页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>狂神说</title>
</head>
<body>
<h1>测试页面</h1>

<!--th:text就是将div中的内容设置为它指定的值,和之前学习的Vue一样-->
<div th:text="${msg}"></div>
</body>
</html>

4、启动测试!

image

关于更加深入的thymeleaf学习,之后要用再去官方文档查~

posted @ 2021-08-04 14:03  Lexie——01  阅读(45)  评论(0编辑  收藏  举报