Thymeleaf的List各类问题（后端接收对象集合）

最近在Thymeleaf做一个页面的时候，因为需要使用List循环展示，提交List到后端，出现各种问题，解决起来也不甚痛苦，这里把解决问题的方式分享一下，也便于自己记录。

介绍：

需求是前端页面循环展示一个后端来的数据，并且前端循环的列表每个都有点击事件，需要把列表中的自己的id传入到触发事件中，最后提交的时候把循环列表的数据全部提交到后端。
我使用的是SpringBoot+Thymeleaf，下面用代码一步步展示过程

1.开始的页面，简单的展示(无循环)

前端：

后端：

@RequestMapping( "/getSchInsTimeByItemsId")public String getSchInsTimeByItemsId(String insItemsId,ModelMap mmap){mmap.put("schInsTime", scheduledApplicationService.getSchInsTimeByItemsId(insItemsId));mmap.put("insItemId", insItemsId);return prefix + "/schInsTime";}

上面是一个简单的跳转页面，展示ModelMap 里的数据的无循环的。url访问xxx/getSchInsTimeByItemsId?insItemsId=xxx 即可跳转到前端页面，如下图

 2.接着需求 需要改成循环列表展示，并且实现可以点击循环的列表，并将其中的id传入触发事件，(贴上前端代码和后端的Controller和实体类代码)

@RequestMapping( "/schInsTimeToView")public String schInsTimeToView(@RequestParam List insItemsIds,ModelMap mmap){mmap.put("schAppInsVOs",scheduledApplicationService.schInsTimeToView(insItemsIds));return prefix + "/schInsTime";}@RequestMapping( "/activeInsTime")@ResponseBodypublic AjaxResult activeInsTime(String insItemsId,Date insActiveTime) throws Exception{Date resultActiveTime = scheduledApplicationService.activeInsTime(insItemsId, insActiveTime);if(resultActiveTime == null){return AjaxResult.success("该时间可以预约");}else{SchApplicationVO schApplicatiOnVO= new SchApplicationVO();schApplicationVO.setApplicationTime(resultActiveTime);schApplicationVO.setInsItemsId(insItemsId);return AjaxResult.warn("该时间已被预约/不在上班时间，已为您调整至最近可预约时间",schApplicationVO);}}

//省略get,set
public class SchApplicationVO implements Serializable {/** 检查项目编码 */private String insItemsId;/** 检查项目名称 */private String insItemsName;private Date applicationTime;
}

动图有点不太会弄，凑合看看吧，目前实现了循环展示列表和改变列表中的任意一个都可以把他的id传参

3.最后需求需要改成 需要把选好的循环列表数据提交后端

这里需求后端接收对象集合，这里坑坑了我挺久，先总结下，首先后端需要把 想跟前端交互的对象装成一个List再封装到一个新的类中，前端需要改th:field进行绑定（当然也需要先用th:object解析），最后的最后，因为我这边是时间格式的，从后端过来的格式还需要处理下，具体看代码，在代码中我添加注释加以说明，最后的效果是前端点击提交，后端接收获取得到List数据

 后端代码 （Controller）：
 

/*** 获取当前预约的能预约到的预约时间* @param insItemsIds 检查项目id集合* @return*/@RequestMapping( "/schInsTimeToView")public String schInsTimeToView(@RequestParam List insItemsIds,ModelMap mmap){SchApplicationOutWap schApplicatiOnOutWap= new SchApplicationOutWap();schApplicationOutWap.setList(scheduledApplicationService.schInsTimeToView(insItemsIds));mmap.put("schAppInsVOs",schApplicationOutWap);return prefix + "/schInsTime";}/*** 医生主动设置预约时间来预约* @param insItemsId 检查项目id* @param insActiveTime 主动申请预约时间*/@RequestMapping( "/activeInsTime")@ResponseBodypublic AjaxResult activeInsTime(String insItemsId,Date insActiveTime) throws Exception{Date resultActiveTime = scheduledApplicationService.activeInsTime(insItemsId, insActiveTime);if(resultActiveTime == null){return AjaxResult.success("该时间可以预约");}else{SchApplicationVO schApplicatiOnVO= new SchApplicationVO();schApplicationVO.setApplicationTime(resultActiveTime);schApplicationVO.setInsItemsId(insItemsId);return AjaxResult.warn("该时间已被预约/不在上班时间，已为您调整至最近可预约时间",schApplicationVO);}}/*** 确定预约 。前端点提交进入此方法。*/@RequestMapping( "/test")@ResponseBodypublic AjaxResult test(SchApplicationOutWap list){System.out.println(list.getList());return AjaxResult.success();}

这里我们可以看到 schInsTimeToView方法里面我改动了些，增加了SchApplicationOutWap  这个类里面一个外包裹，其实里面就是只有个List的SchApplicationVO的属性

Pojo

public class SchApplicationOutWap implements Serializable {private List list;//省略get set
}

//省略get,set
public class SchApplicationVO implements Serializable {/** 检查项目编码 */private String insItemsId;/** 检查项目名称 */private String insItemsName;// 加上这个可以让前端以此格式输出time@JsonFormat(pattern = "yyyy-MM-dd HH:mm",timezOne="GMT+8")private Date applicationTime;
}

后端想要接收SchApplicationVO对象集合，就必须在其外面再写个对象，像上面这样，才可以跟前端进行绑定（这里本人觉得...一言难尽的设计）

最后附上前端代码：