thymeleaf的初次使用（带参请求以及调用带参js方法）

Posted 2020-07-31 tiger_张小虎

之前对于前端框架接触较少，第一次接触thymeleaf，虽说看起来并不复杂但我还是花费了好一会儿才弄懂。

话不多少下面就简单说一下我在项目中的应用。

首先是java代码 controller层 将需要在前端展示的信息放入model中：

@RequestMapping("getAll")
    public String getAll(Model model){
        List<ScheduleJob> list = scheduleJobService.getAllJob();
        model.addAttribute("list", list);
        return "sch/quartz/list";
    }

之后便是在前端html页面的遍历

 1 <tr th:each="job:${list}">
 2             <td th:text="${job.name }">任务名</td>
 3             <td th:text="${job.group }">任务组</td>
 4             <td th:text="${job.status }">状态</td>
 5             <td th:text=‘${job.cronExpression }‘></td>
 6             <td th:text="${job.className }">类名</td>
 7             <td th:text="${job.description }">描述</td>
 8             <td><a href="#" th:href="@{/quartz/pause(name=${job.name},group=${job.group})}">暂停</a></td>
 9             <td><a href="#" th:href="@{/quartz/resume(name=${job.name},group=${job.group})}">恢复</a></td>
10             <td><a href="#" th:href="@{/quartz/run(name=${job.name},group=${job.group})}">执行一次</a></td>
11             <td><a href="#" th:href="@{/quartz/delete(name=${job.name},group=${job.group})}">删除</a></td>
12             <td><button id="edit" th:name="${job.name}" th:id="${job.group}" onclick="test(this)">修改cron表达式</button></td>
13         </tr>

这里直接在<tr>标签中  用 th:each 放入需要遍历的内容，以及定义变量名；在<td>标签中用th:text来展示内容。

在<a>标签中用 普通的href不能实现带参的接口请求，所以需要使用 th:href 的这种语法来实现带参的接口请求，参数用（）跟在后面就可以。

至于调用js的带参方法就需要用12行那种办法 将参数作为 th 标签的name或者id传入方法中，具体的js方法如下；

1 function test(obj){
2         var cron = $("#cron").val();
3         var name = $(obj).attr("name");
4         var group = $(obj).attr("id");
5         $.post("edit",{"name":name,"group":group,"cron":cron},function(){
6             alert("更新成功！！！");
7             window.location.reload();
8         });
9     }

这样就能实现js带参方法的调用，目前来说我所知道的可以实现的就是这种方式。

补充一点，前端遍历的实体类需要重写toString方法，并且必须是如下格式的：

 1 @Override
 2     public String toString() {
 3         StringBuilder builder = new StringBuilder();
 4         builder.append("{name:\"");
 5         builder.append(name);
 6         builder.append("\", group:\"");
 7         builder.append(group);
 8         builder.append("\", cronExpression:\"");
 9         builder.append(cronExpression);
10         builder.append("\", status:\"");
11         builder.append(status);
12         builder.append("\", description:\"");
13         builder.append(description);
14         builder.append("\", className:\"");
15         builder.append(className);
16         builder.append("\"}");
17         return builder.toString();
18     }

这样才能在页面上成功遍历。

对于thymeleaf，目前我也就掌握了这些简单的使用。