【SpringBoot系列】首页和模板引擎

技术蜗牛-阿春

已于 2023-05-04 16:03:45 修改

阅读量453

点赞数

CC 4.0 BY-SA版权

分类专栏： ➤SpringBoot 文章标签：模板引擎 Thymeleaf

于 2021-06-24 11:35:56 首次发布

本文链接：https://blog.csdn.net/whc888666/article/details/118161802

➤SpringBoot 专栏收录该内容

5 篇文章

订阅专栏

一、欢迎页是如何映射？

1、还是原来的办法：在WebMvcAutoConfiguration.java中找到welcomePageHandlerMapping

public WelcomePageHandlerMapping welcomePageHandlerMapping(ApplicationContext applicationContext,
  FormattingConversionService mvcConversionService, ResourceUrlProvider mvcResourceUrlProvider) {
WelcomePageHandlerMapping welcomePageHandlerMapping = new WelcomePageHandlerMapping(
   new TemplateAvailabilityProviders(applicationContext), applicationContext, getWelcomePage(),
   this.mvcProperties.getStaticPathPattern());
welcomePageHandlerMapping.setInterceptors(getInterceptors(mvcConversionService, mvcResourceUrlProvider));
welcomePageHandlerMapping.setCorsConfigurations(getCorsConfigurations());
return welcomePageHandlerMapping;
}

2、继续点击getWelcomePage()

private Optional<Resource> getWelcomePage() {
    String[] locations = getResourceLocations(this.resourceProperties.getStaticLocations());
    return Arrays.stream(locations).map(this::getIndexHtml).filter(this::isReadable).findFirst();
}

// 欢迎页就是一个location下的的 index.html 而已
private Resource getIndexHtml(String location) {
    return this.resourceLoader.getResource(location + "index.html");
}

3、欢迎页，静态资源文件夹下的所有 index.html 页面；被 /** 映射。比如我访问 http://localhost:8080/ ，就会找静态资源文件夹下的 index.html。新建一个 index.html ，在我们上面的3个目录中任意一个；然后访问测试 http://localhost:8080/ 看结果！

二、Thymeleaf初识

1、依赖地址

Thymeleaf 官网： Thymeleaf

Thymeleaf 在Github 的主页： GitHub - thymeleaf/thymeleaf: Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

Spring官方文档：找到我们对应的版本 Spring Boot Reference Documentation

2、依赖

 <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf-spring5</artifactId>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf.extras</groupId>
            <artifactId>thymeleaf-extras-java8time</artifactId>
        </dependency>
    </dependencies>

3、底层源码，很容易找到应该放到的文件夹，我们可以在其中看到默认的前缀和后缀！我们只需要把我们的html页面放在类路径下的templates下，thymeleaf就可以帮我们自动渲染了。使用thymeleaf什么都不需要配置，只需要将他放在指定的文件夹下即可！

@ConfigurationProperties(prefix = "spring.thymeleaf")
    public class ThymeleafProperties {
    private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;
    public static final String DEFAULT_PREFIX = "classpath:/templates/";
    public static final String DEFAULT_SUFFIX = ".html";
}

4、测试

@Controller
public class IndexController {
  @RequestMapping("/a")
  public String index() {
    return "index";
  }
}

5、在templates目录下建立一个测试页面index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>您好！</h1>
</body>
</html>

三、Thymeleaf语法

1、修改请求，增加数据传输

@Controller
public class IndexController {
  @RequestMapping("/a")
  public String index(Model model) {
    model.addAttribute("msg", "hello,springboot");
    return "index";
  }
}

2、需要在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</title>
</head>
<body>

<div th:text="${msg}"></div>
</body>
</html>

4、遍历

（1）controller层

@Controller
public class IndexController {
  @RequestMapping("/a")
  public String index(Model model) {
    model.addAttribute("msg", "hello,springboot");
    model.addAttribute("users", Arrays.asList("jason", "jack"));
    return "index";
  }
}

（2）测试

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div th:text="${msg}"></div>
<div th:utext="${msg}"></div>
<hr>
<h3 th:each="user:${users}" th:text="${user}"></h3>
</body>
</html>