在開發中,作為初中級後臺開發,便利數據這種工作是不可避免的,而在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中只需要對該類聲明其訪問路徑---@RequestMapping("....")和@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方法都要引入一些標簽配置.而且對於初中級開發來講,那種方式感覺也不熟悉.生硬.反正我是這麽感覺的
　　

thyme leaf table便利數據跳轉(一)