thyme leaf table便利数据跳转

Posted 2020-10-11 时间随风

　　在开发中,作为初中级后台开发,便利数据这种工作是不可避免的,而在JSP中便利数据需要编辑大量的辅助js代码,甚至有些还需要在JS中拼接代码显示数据.

　　比如:

.........
for(var i = (pageNo - 4) ; i < pageNo; i ++) {
   if(arroundProjects[i].mainPicUrl != null) {
         pict = arroundProjects[i].mainPicUrl
   }
   if(arroundProjects[i].pricingUnit == 20) {
         priceUnit = "元/月";
   }
   arroundhtml += "<li><a href=‘/search/building?projectId="+arroundProjects[i].projectId+"‘>"
   arroundHtml +=  ‘<img src="‘+pict+‘" onerror="this.src=‘+"‘/upload/1/collectionMid.png‘"+‘"  width="195px" height="120px"/>‘
   arroundHtml += "<h4>"+arroundProjects[i].projectName+"</h4>"
   arroundHtml += "<p>"+arroundProjects[i].unitPriceAvg+priceUnit+"<span>"+arroundProjects[i].districtName+"-"+arroundProjects[i].hotAreaName+"</span></p>"
   arroundHtml += "</a></li>";
}

　　这种便利方式在JS编写代码的过程中会浪费大量的时间,(特别是对于后台开发来讲,写前端的会特别头痛-.-).

　　而thyme leaf 框架给我们提供了非常便利的方式,因为他兼容了EL表达式和OGNL,所以在数据的获取上要方便很多.特别是thymeleaf框架与springboot框架的良好的兼容性.

　　后台代码的设计上:

　　　　很常规:controller中只需要对该类声明其访问路径[email protected]("....")和@Controller.当然,这里对于springboot框架的声明方式还有其他的方法,就不在多介绍.

　　　　代码:

@RequestMapping("xxxx")//这是我们访问该controller的访问路径
@Controller
public class BuildingController {

       private BuildingForm buildingForm;//这是页面中要访问的实体类,这里给做了下封装.

　　　　@RequestMapping
　　　　public String index(@RequestParam("projectId") String projectId) {
　　　　    buildingForm.set(....)
   　　　　 return DEFAULT_VIEW;
　　　　}

　　//对页面要访问的实体类提供get/set方法 
　　public BuildingForm getBuildingForm() { return buildingForm; } 
　　@ModelAttribute//该注解声明是必不可少的. 
　　public void setBuildingForm(BuildingForm buildingForm) { this.buildingForm = buildingForm; } } 

　　　　特别是在页面加载的时候就需要便利出来的数据,我们可以放到controller的index(即默认方法)中,这样在加载页面的时候就会执行该方法,Form中的数据也就可以取到了.

　　　　前端页面代码:　

　　<table border="0" width="800">
       <tr>
          <th>照片</th>
          <th>面积</th>
          <th>单价</th>
          <th>楼层</th>
          <th>装修</th>
          <th>更新</th>
          </tr>
       <tr th:each="resource : ${buildingForm.resourceList}"
           th:if="${resource.area > 1000}"
           th:onclick="‘javascript:officePage(‘+${resource.resourceId}+‘,‘+${buildingForm.projectDto.projectId}+‘)‘">
          <td><img src="" th:src="@{${#resource == null ? ‘/upload/1/collectionMin.png‘ : resource.mainPicUrl}}" /></td><!-->图片判断处理<-->
          <td><span th:text="${resource.area}">397</span><em>m2</em></td>
          <td><span th:text="${resource.unitPrice}">5.5</span><em>[[${@codeService.getCodeLabel(‘PRICING_UNIT‘, resource.pricingUnit)}]]</em></td>
          <td>[[${@codeService.getCodeLabel(‘FLOOR_CATEGORY‘, resource.floorCategory)}]]</td>
          <td>[[${@codeService.getCodeLabel(‘FITMENT_CATEGORY‘, resource.fitmentCategory)}]]</td>
          <td th:text="${resource.upDtString}">20分钟前</td>
        </tr>
     </table>
　　.....　

　　function officePage(resourceId , projectId) {
        window.location.href = "/search/office?resourceId="+resourceId+"&projectId="+projectId;
　　}
　　.....

　　　　前端HTML中,与EL表达式类似,直接就可以把我们需要的数据放到标签中,且不会对原本前端人员设计的页面产生太大冲突.

　　　　并且对于时间的格式化,字符串的拼接,图片错误的判断等等,都有非常简便的处理方法.这样,作为后台开发人员来讲,我们就只需要在前端人员设计的页面中,把需要的数据放到th:xxxx标签中,即可.

　　　　对于点击整行触发方法:

 　　　　th:onclick="‘javascript:officePage(‘+${resource.resourceId}+‘,‘+${buildingForm.projectDto.projectId}+‘)‘"
　　　　这里的officePage是我们JS中写的function的name,${resource.resourceId}+‘,‘+${buildingForm.projectDto.projectId}则是function所需要的参数.这里是拼接出来的
　　　　注意:参数的顺序是不可改变的.而且这种方式的优势在于:可以动态的从后台获取跳转所需要的参数.
　　　　当然我感觉还有其他更加简便的跳转传参方式,正在思考,待优化.....

　　　可以采用这种方式来触发,看其他笔记中也有对于thyme leaf框架JS的一些写法的,但是个人感觉比较麻烦,毕竟一个JS方法都要引入一些标签配置.而且对于初中级开发来讲,那种方式感觉也不熟悉.生硬.反正我是这么感觉的