0%

SpringBoot集成Thymeleaf

Posted on Edited on
本文主要是一个前后端交互的小例子

thymeleaf实现前后端交互

要求：实现的页面如：

首页 发布文章 查询文章
id title type 操作
删除 修改
删除 修改
删除 修改

基于这样的要求，我们来看看具体操作

一、数据源配置

1.引入thyme Leaf支持，在pom.xml中引入如下配置

1
2
3
4
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2.由于数据源信息的需要，我们还要在pom.xml中引入如下配置

1
2
3
4
5
<dependency>
    <groupId>net.sourceforge.nekohtml</groupId>
    <artifactId>nekohtml</artifactId>
    <version>1.9.22</version>
</dependency>

3.配置数据源信息

在application.properties中配置如下信息

1
2
3
4
5
6
#thymeleaf start
spring.thymeleaf.mode=LEGACYHTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false
spring.thymeleaf.servlet.content-type=text/html
#thymeleaf end

全部配置完成后就可以用thymeleaf来实现页面了

二、html代码部分

主页 index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html xml:th="http://www.thymeleaf.orf" xmlns:th="http://www.w3.org/1999/xhtml">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title></title>
</head>
<body>
<h1 href="http://127.0.0.1:8080/index">首页</h1>
<a th:href="@{/add}">发布文章</a>
<a th:href="@{/articles}">查询文章</a>
</body>
</html>
</html>

文章列表 articles.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html xml:th="http://www.thymeleaf.orf" xmlns:th="http://www.w3.org/1999/xhtml">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title></title>
</head>
<body>
<table border="1">
    <th>id</th>
    <th>title</th>
    <th>type</th>
    <th colspan="2">操作</th>
    <tr th:each="article : ${articles}">
        <td><a th:href="@{'/articles/' + ${article.id}}" th:text="'文章' + ${article.id}">id</a></td>
        <td th:text="${article.title}">title</td>
        <td th:text="${article.type}">type</td>
        <td><a th:href="@{'/deleteArticle/' + ${article.id}}">删除</a></td>
        <td><a th:href="@{'/update/' + ${article.id}}">修改</a></td>
    </tr>
</table>
</body>
</html>
</html>

获取文章 article.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html xml:th="http://www.thymeleaf.orf" xmlns:th="http://www.w3.org/1999/xhtml">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title></title>
</head>
<body>

<h3 th:text="${article.title}">title</h3>
<h5 th:text="${article.type}">type</h5>
<h4 th:text="${article.content}">content</h4>


</body>
</html>
</html>

添加文章 add_page.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html xml:th="http://www.thymeleaf.orf" xmlns:th="http://www.w3.org/1999/xhtml">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title></title>
</head>
<body>
<form th:action="@{/addArticle}" th:object="${article}" method="post">
    id：<input type="text" th:field="*{id}"/>
    <br>
    题目：<input type="text" th:field="*{title}"/>
    <br>
    类型：<input type="text" th:field="*{type}"/>
    <br>
    正文：<input type="text" th:field="*{content}"/>
    <br>
    <input type="submit"/>
</form>
</body>
</html>
</html>

添加文章成功 add_success.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html xml:th="http://www.thymeleaf.orf" xmlns:th="http://www.w3.org/1999/xhtml">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title></title>
</head>
<body>
<h1>恭喜你文章发布成功</h1>
<a th:href="@{/articles}">查询所有文章</a>
</body>
</html>
</html>

删除文章成功 delete_success.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html xml:th="http://www.thymeleaf.orf" xmlns:th="http://www.w3.org/1999/xhtml">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title></title>
</head>
<body>
<h1>文章删除成功</h1>
<a th:href="@{/articles}">查询所有文章</a>

</body>
</html>
</html>

修改文章 update.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html xml:th="http://www.thymeleaf.orf" xmlns:th="http://www.w3.org/1999/xhtml">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title></title>
</head>
<body>

<form th:action="@{/updateArticle}" th:object="${article}" method="post">
    <input type="hidden" th:field="${article.id}">
    <input type="text" th:field="${article.title}">
    <input type="text" th:field="${article.type}">
    <input type="text" th:field="${article.content}">
    <input type="submit" value="push">
</form>

</body>
</html>
</html>

修改文章成功 update_success.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html xml:th="http://www.thymeleaf.orf" xmlns:th="http://www.w3.org/1999/xhtml">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title></title>
</head>
<body>
<h1>恭喜你文章修改成功</h1>
<a th:href="@{/articles}">查询所有文章</a>

</body>
</html>
</html>

三、Article类代码部分

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
52
53
54
55
56
57
58
public class Article {
    private Integer id;
    private String title;
    private String type;
    private String content;
    private boolean deleteFlag;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public boolean isDeleteFlag() {
        return deleteFlag;
    }

    public void setDeleteFlag(boolean deleteFlag) {
        this.deleteFlag = deleteFlag;
    }

    @Override
    public String toString() {
        return "Article{" +
                "id=" + id +
                ", title='" + title + '\'' +
                ", type='" + type + '\'' +
                ", content='" + content + '\'' +
                ", deleteFlag=" + deleteFlag +
                '}';
    }
}

四、Controller类代码部分

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

@Controller
public class MainController {
    static Map<Integer, Article> map = new HashMap();

    static {
        for (int i = 0; i < 10; i++) {
            map.put(i, getArticle(i));
        }
    }

    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String index() {
        return "index";
    }

    @RequestMapping(value = "/add", method = RequestMethod.GET)
    public String addPage(Model model) {
        model.addAttribute("article", new Article());
        return "add_page";
    }

    @RequestMapping(value = "/articles", method = RequestMethod.GET)
    public String getArticleList(Model model) {
        List<Article> list = new ArrayList<>();
        System.out.println(map);
        for (Map.Entry<Integer, Article> entry : map.entrySet()) {
            if (!entry.getValue().isDeleteFlag()) {
                continue;
            }
            list.add(entry.getValue());
        }
        model.addAttribute("articles", list);
        return "articles";
    }

    @RequestMapping(value = "/articles/{id}", method = RequestMethod.GET)
    public String getArticle(Model model, @PathVariable("id") int id) {
        Article article = map.get(id);
        model.addAttribute("article", article);
        return "article";
    }

    @RequestMapping(value = "/deleteArticle/{id}", method = RequestMethod.GET)
    public String deleteArticle(Model model, @PathVariable("id") int id) {
        Article article = map.get(id);
        article.setDeleteFlag(false);
        return "delete_success";
    }

    @RequestMapping(value = "/addArticle", method = RequestMethod.POST)
    public String addArticle(Model model, @ModelAttribute(value = "article") Article article) {
        map.put(article.getId(), article);
        return "add_success";
    }

    @RequestMapping(value = "/update/{id}", method = RequestMethod.GET)
    public String update(Model model, @PathVariable("id") int id) {
        Article article = map.get(id);
        model.addAttribute("article", article);
        return "update";

    }

    @RequestMapping(value = "/updateArticle",method = RequestMethod.POST)
    public String updateArticle(Model model,
                                @ModelAttribute(value = "article") Article article){
        Article article1 = map.get(article.getId());
        article1.setTitle(article.getTitle());
        article1.setType(article.getType());
        article1.setContent(article.getContent());
        return "update_success";
    }


    static public Article getArticle(int i) {
        Article article = new Article();
        article.setId(i);
        article.setTitle("题目" + i);
        article.setType("类型" + i);
        article.setContent("正文" + i);
        article.setDeleteFlag(true);
        return article;
    }
}

注：本例没有使用jdbc，没用通过数据库来传数据，Controller中使用的是假数据。