SpringBoot集成Thymeleaf前端模板

boyanx8个月前 (04-28)技术教程34

Thymeleaf是一个模板引擎。它是一个强大的模板引擎，可以处理HTML、XML、JavaScript、CSS等多种类型的模板。Thymeleaf可以与Spring MVC框架集成，以便在Web应用程序中使用模板。本文介绍一下与SpringBoot集成过程和案例。

首先配置依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    <version>2.7.10</version>
</dependency>

配置模板信息

templates是模板文件存放位置，在resources资源路径下

.html 是模板文件后缀


@Configuration
public class ThymeleafConfig {
    Logger logger = LoggerFactory.getLogger(ThymeleafConfig.class);

    @Bean
    public SpringResourceTemplateResolver templateResolver() {
        SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
        templateResolver.setApplicationContext(applicationContext);
        //文件存储位置 
        templateResolver.setPrefix("classpath:/templates/");
        //模板文件后缀
        templateResolver.setSuffix(".html");
        templateResolver.setTemplateMode(TemplateMode.HTML);
        templateResolver.setCharacterEncoding("UTF-8");
        templateResolver.setCheckExistence(true);
        return templateResolver;
    }

    @Autowired
    private ApplicationContext applicationContext;
}

Controller写法

返回ModelAndView,跳转到指定页面

@RequestMapping("/userView")
public ModelAndView userView(Long userId) {
    logger.info("userView controller");
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.addObject("userEntity", helloBiz.getUser(userId));
    modelAndView.setViewName("user");
    return modelAndView;
}

通过addObject 存储一个键值对 key是userEntity ，value是一个用户实体

设置viewName是 user ,对应的模板为user.html

界面写法

界面文件路径为
/resources/templates/user.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
用户标识：<span class="author" th:text="${userEntity.userId}"></span>
用户名称：<span class="author" th:text="${userEntity.nickName}"></span>
</body>
</html>

模板语法参考官方文档，文档地址如下

官方文档：
https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html