专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

SpringBoot集成Thymeleaf前端模板

ins518 2024-09-14 08:38:57 技术文章 28 ℃ 0 评论

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

看看效果


后面介绍如何集成LayUI,做个管理后台界面,喜欢请关注,不对的地方请指正

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表