ThymeLeaf实战_theamleaf

作者：数据科学灵魂 | 2024-02-06 12:11:05

踩

theamleaf

文章目录

一、导入依赖
二、配置Theamleaf解析引擎
三、后端设计
四、使用TheamLeaf渲染数据
总结

一、导入依赖

在pom.xml中添加相关依赖：

<!--整合thymeleaf-->
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
</dependency>

<!-- thymeleaf整合springsecurity5的标签库 -->
<dependency>
    <groupId>org.thymeleaf.extras</groupId>
    <artifactId>thymeleaf-extras-springsecurity5</artifactId>
</dependency>
1
2
3
4
5
6
7
8
9
10
11

二、配置Theamleaf解析引擎

public class SpringMvcConfig implements WebMvcConfigurer {

    //添加资源处理程序
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/images/**").addResourceLocations("/images/");
        registry.addResourceHandler("/css/**").addResourceLocations("/css/");
        registry.addResourceHandler("/js/**").addResourceLocations("/js/");
        registry.addResourceHandler("/lib/**").addResourceLocations("/lib/");
        registry.addResourceHandler("/pages/**").addResourceLocations("/pages/");
    }

    //开启视图解析器
    @Bean
    public SpringResourceTemplateResolver springResourceTemplateResolver() {
        SpringResourceTemplateResolver srtr = new SpringResourceTemplateResolver();
        //设置前后缀
        srtr.setPrefix("/pages/");
        srtr.setSuffix(".html");
        //解决页面的中文乱码
        srtr.setCharacterEncoding("UTF-8");
        srtr.setOrder(1);
        srtr.setTemplateMode("HTML5");
        srtr.setCacheable(false);
        return srtr;
    }

    @Bean
    public SpringSecurityDialect springSecurityDialect() {
        return new SpringSecurityDialect();
    }

    @Bean
    public SpringTemplateEngine springTemplateEngine(SpringResourceTemplateResolver springResourceTemplateResolver, SpringSecurityDialect springSecurityDialect) {
        SpringTemplateEngine ste = new SpringTemplateEngine();
        ste.setTemplateResolver(springResourceTemplateResolver);
        Set set = new HashSet();
        set.add(springSecurityDialect);
        ste.setAdditionalDialects(set);
        return ste;
    }

    //配置thymeleaf视图解析器
    @Bean
    public ThymeleafViewResolver thymeleafViewResolver(SpringTemplateEngine springTemplateEngine) {
        ThymeleafViewResolver tvr = new ThymeleafViewResolver();
        tvr.setTemplateEngine(springTemplateEngine);
        tvr.setCharacterEncoding("UTF-8");
        return tvr;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

三、后端设计

后端使用addAttribute方法向前端传递数据。

model.addAttribute("bookList",bookList);
1

具体代码如下：

    @GetMapping("/books")
    public String getAll(@RequestParam(required = false) String name, Model model) {
        System.out.println(name);
        List<Book> bookList = bookService.getAll(name);
        System.out.println(bookList);
        model.addAttribute("bookList",bookList);
        return "main";
    }
1
2
3
4
5
6
7
8

四、使用TheamLeaf渲染数据

在HTML头部标签中添加xlms属性，如下代码所示：

<html lang="en" xmlns:th="http://www.thymeleaf.org">
1

<tr  th:each="book : ${bookList}">
						<td bgcolor="#FFFFFF" style='border-bottom: 1px dotted #eeeeee;' th:text="${book.id}"></td>
						<td bgcolor="#FFFFFF" style='border-bottom: 1px dotted #eeeeee;' th:text="${book.type}"></td>
						<td bgcolor="#FFFFFF" style='border-bottom: 1px dotted #eeeeee;' th:text="${book.name}">></td>
						<td bgcolor="#FFFFFF" style='border-bottom: 1px dotted #eeeeee;' th:text="${book.description}"></td>
						<td bgcolor="#FFFFFF" style='border-bottom: 1px dotted #eeeeee;'>
							<a th:href="@{/books/id(id=${book.id})}" >
								修改</a>
							&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;
							<a th:attr="href=@{/delete/id(id=${book.id})}">
								删除</a>
						</td>
</tr>
1
2
3
4
5
6
7
8
9
10
11
12
13

前端使用${bookList}即可访问到后端传递的数据

th:each 是遍历的意思，会将bookList中的数据遍历出来，类似vue中的v-for

总结

以上是自己学习Theamleaf的记录,希望自己在以后的学习生活中每天开开心心！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/数据科学灵魂/article/detail/62679