【郑州校区】springboot学习（4）springboot使用thymeleaf完成数据 - 黑马程序员技术交流社区

上一篇介绍了使用jsp完成数据的页面展示，但是springboot并不推荐使用jsp，会产生很多问题。官方推荐使用thymeleaf，这里我们将上一篇的jsp页面展示修改为使用thymeleaf，通过对比来熟悉thymeleaf，其实改动的地方并不大。

第一篇springboot入门时介绍了项目的大致结构，当时图省事所有的类都放在一个包中，这里略做调整，然后再resource下新建文件夹存放thymeleaf模板，使用springboot生成工程时应该会默认有这几个文件夹，此时项目结构大致如下：

为thymeleaf添加依赖

[AppleScript] 纯文本查看 复制代码

[html] view plain copy

<dependency>  

        <groupId>org.springframework.boot</groupId>  

        <artifactId>spring-boot-starter-thymeleaf</artifactId>  

</dependency>

查询接口（接上一篇，基本没变）

[AppleScript] 纯文本查看 复制代码

[java] view plain copy

/** 

     * @return 

     * 查询全部信息 

     */  

    @RequestMapping("/list")  

    public ModelAndView  itemsList() {  

        String sql = "select * from items";  

        List<Map<String, Object>> list = jdbcTemplate.queryForList(sql);  

        ModelAndView mav = new ModelAndView("items");  

        mav.addObject("list", list);  

        return mav;  

    }

对应thymeleaf 模板页面

[AppleScript] 纯文本查看 复制代码

[html] view plain copy

<!DOCTYPE html>  

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

<head>  

<meta charset="utf-8" />  

<meta name="viewport" content="width=device-width, initial-scale=1.0" />  

<title>springboot学习</title>  

</head>  

  

<body>  

    <div th:each="item : ${list}">  

        <h1 th:text="${{item.title}}"></h1>  

        <p><a th:text="${{item.name}}"></a></p>  

        <p><a th:text="${{item.detail}}"></a></p>  

    </div>  

</body>  

</html>

此时我们可以运行了

[AppleScript] 纯文本查看 复制代码

[java] view plain copy

/** 

     * 新增数据 

     * @param items 

     * @return 

     */  

    @RequestMapping("/add")  

    public @ResponseBody boolean  addItems(Items items) {  

        String sql = "insert into items (title,name,detail) value (?,?,?)";  

        Object args[] = {items.getTitle(),items.getName(),items.getDetail()};    

        int temp = jdbcTemplate.update(sql, args);   

        if(temp > 0) {  

            return true;  

        }  

        return false;  

    }  

对应的thymeleaf 模板页面

[html] view plain copy

<!DOCTYPE html>  

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

<head>  

<meta charset="utf-8" />  

<meta name="viewport" content="width=device-width, initial-scale=1.0" />  

<title>springboot学习</title>  

<script th:src="@{/js/jquery-1.8.3.js}"></script>  

</head>  

<body>  

    <div>  

        <form name="addItems">  

            <input type="text" name="title" />  

            <input type="text" name="name" />  

            <input type="text" name="detail" />  

            <input type="button" value="提交"/>  

        </form>  

    </div>  

</body>  

<script type="text/javascript">  

        function add(){  

            var title = addItems.title.value;  

            var name = addItems.name.value;  

            var detail = addItems.detail.value;  

             $(document).ready(function(){  

                $.post("add",  

                {"title":title,"name":name,"detail":detail},  

                function(data){  

                    if(data == true){  

                        alert("新建成功");  

                    }  

                    if(data == false){  

                        alert("新建失败");  

                    }  

                });  

            });  

        }  

    </script>  

</html>

表单提交方式的写法（更多可以参考：http://itutorial.thymeleaf.org；很全面）

[AppleScript] 纯文本查看 复制代码

[html] view plain copy

<!DOCTYPE html>  

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

    <head>  

        <title>Thymeleaf tutorial: exercise 12</title>  

        <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />  

        <meta charset="utf-8" />  

    </head>  

    <body>  

        <h1>Thymeleaf tutorial - Solution for exercise 12: forms</h1>  

        <h2>Customer edition</h2>  

        <form action="saveCustomer.html" th:action="@{/exercise12/saveCustomer.html}" th:object="${customer}" method="post">  

            <input type="hidden" th:field="*{id}" />  

              

            <label for="firstName">First name:</label>  

            <input type="text" th:field="*{firstName}" value="John" />  

              

            <label for="lastName">Last name:</label>  

            <input type="text" th:field="*{lastName}" value="Wayne" />  

              

            Genre:  

            <div th:each="gender : ${genders}" class="radio">  

                <input type="radio" th:value="${gender}" th:field="*{gender}" />  

                <label th:for="${#ids.prev('gender')}" th:text="${gender.description}">Male</label>  

            </div>  

            <div th:remove="all" class="radio">  

                <input type="radio" />  

                <label>Female</label>  

            </div>  

              

            <label for="paymentMethod">Payment method:</label>  

            <select th:field="*{paymentMethod}" th:remove="all-but-first">  

                <option th:each="paymentMethod : ${paymentMethods}"  

                        th:value="${paymentMethod}" th:text="${paymentMethod.description}">Credit card</option>  

                <option>Another payment method</option>  

                <option>Another payment method</option>  

            </select>  

              

            <label for="balance">Balance (dollars):</label>  

            <input type="text" th:field="*{balance}" size="10" value="2500" />  

              

            <input type="submit" />  

        </form>  

    </body>  

</html>

这里列举常见用法：

1、在html页面中引入thymeleaf命名空间：<html xmlns:th=http://www.thymeleaf.org></html>，此时在html模板文件中动态的属性使用th:命名空间修饰；

2、引用静态资源文件：比如CSS和JS文件，语法格式为“@{}”，比如引用resource/static/js下的jquery文件：<script th:src="@{/js/jquery-1.8.3.js}"></script>；

3、页面显示时将时间的格式化： ${#dates.format(worker.updateTime,'yyyy-MM-dd HH:mm:ss')} 表示将时间格式化为”yyyy-MM-dd HH:mm:ss”；

4、字符串拼接：比如拼接这样一个URL:/items/delete/{itemId} 写法是：th:href="'/items/delete/' + ${items.id }"

5、for循环遍历出数据，以上查询全部中已有例子：<div th:each="item : ${list}"><h1 th:text="${{item.title}}"></h1></div>