Thymeleaf 在項目中的應用及前后端交互的一些知識（1）

經過一段時間的工作，我的第一個項目已經快要上線了。本篇文章介紹些thymeleaf在工作中的實際應用，但是更多的還是一些前端處理后台數據的一些思路，如果有什么不正確的地方，希望大家指點。

1.th:each

 <dd th:each="grade: ${application.sysDictMap.learnPeriod}">//application.sysDictMap 是從數據字典取出的方式。
     <label class="">
　　　　　　<input type="checkbox" th:value="${grade.AA}" th:attr="val=${grade.BB}"> //這里面的AA 和 BB就是你需要的數據的名稱比如說AA可以是name，BB可以是id。。。
　　  </label>
     <span th:text="${grade.CC}" th:attr="val=${grade.DD}"></span>
 </dd>

　　1’ .上述的${application.sysDictMap.learnPeriod}是可以直接從model里面取出來的，但如果，從model里面取不出來，必須要走接口才能取得到，那樣就需要用如下的方法（與Thymeleaf沒什么聯系，是一種前端方法）：

　　 a.以下是寫在子頁面上的js:

<div th:include="jsLead::jsLead">
   <!-- jsLead 全局js引入 -->
</div>
<script th:inline="javascript">
　　App2.orgtid = [[${session.XXXXX.id}]]; //這里是從頁面model取出並作為公共變量。
   //列表獲取需要顯示的信息
   App2.screenSchoolList(App2.orgtid);//此處為調用名為screenSchoolList的一個方法，括號里面為傳遞的一個參數，但是這個參數同時也調用了名為orgtid的值。
 </script>

 

　　b.以下是寫在app2.js文件里面的js代碼：

　　//當前切換區域下的校區列表

var erpApp2 = {
　　　　 orgtid : '',
　　 　　aa: '',//XX篩選條件收集param
        bb: '',//XX篩選條件收集param
        cc: '',//XX篩選條件收集param
        dd: 20,//頁數
        ee:'',//學生
        ff:'',//職位
        gg:'',//校區
        screenSchoolList: function (id){
            $.ajax({
                 url: '/XX/XX/'+id,//接口地址
                type: 'GET',//請求類型
                dataType: "JSON",//數據類型
                success: function(data){
                    $.each(data.data.XX,function (index, el){
                        var dd = '<dd>'+
                                   '<label class=""><input type="checkbox" value="'+this.Name+'" val="'+this.id+'"></label>'+
                                   '<span val="'+this.id+'">'+this.Name+'</span>'+
                                 '</dd>';
                        $('.XX').after(dd);
                    });
                }
           });
        }

}


attention:如果參數傳的方式是如下的a,切記加上traditional,如果是方式b,要使用contentType.
　　a.
　　data: {'ids':ids},//參數
   traditional: true,
　　b.
　　data: JSON.stringify(parameter),//參數
   contentType : 'application/json;charset=utf-8',

 2.th:if

　　這條補充呢就是說th:if里面可以放各種各樣的表達式~~~高大上啦，下面是兩個例子：

<li class="XX" th:if="${User.Status == 0 || AA != 0 || BB != 0}" >
<p class="XX" th:if="${!(User.userCode == null || User.userCode == '')}"></p>

　　  第二個 th:if 呢有一個需要注意的point。

　　判斷不能寫成 （User.userCode ！= null && User.userCode ！= ' '；）如果要寫就要寫成上述例子2的形式。

3.th:class

<span th:class="${User.Sex == 1 ? 'new-radio pull-left on':'new-radio pull-left'}" is-male="1"></span>

　　如果 user.sex是 1 的話，執行問號后面的，也就是說class會變成 new-radiio pull-left on,否則就會變成 new-radiio pull-left 。這種方法在angular里面也同樣適用。

4.th:selected

<select class="" name="account">
        <option th:each="subject :${application.subjectList}" th:selected="${student.Subject} == ${teacher.teachSubject} ? 'selected':'false'" th:text="${subject.name}" th:value="${subject.id}"></option>
</select>

 5.th:href

<a th:href="@{'/AA/BB/CCpage/'+${userTid}}">基本信息</a>

6.th表達式工具對象

 

• #dates 與java.util.Date對象的方法對應，格式化、日期組件抽取等等
• #calendars 類似#dates，與java.util.Calendar對象對應
• #numbers 格式化數字對象的工具方法
• #strings 與java.lang.String對應的工具方法：contains、startsWith、prepending/appending等等
• #objects 用於對象的工具方法
• #bools 用於布爾運算的工具方法
• #arrays 用於數組的工具方法
• #lists 用於列表的工具方法
• #sets 用於set的工具方法
• #maps 用於map的工具方法
• #aggregates 用於創建數組或集合的聚合的工具方法
• #messages 用於在變量表達式內部獲取外化消息的工具方法，與#{…}語法獲取的方式相同
• #ids 用於處理可能重復出現（例如，作為遍歷的結果）的id屬性的工具方法

 

eg1:判斷集合的長度  #lists

<span>共<i class="XX" th:text="${#lists.size(people)}"></i>個人</span>

 

7*.前端從數據字典取出數據的方法。

　　這次項目接觸了數據字典，下面是從數據字典取出數據的一些方式。其實上面的第一個例子里面就有從數據字典取出數據放入HTML的例子，但是那是類似angular，以model形式直接將數據放入標簽內。

1.<dd th:each="grade: ${application.sysDictMap.learnPeriod}"</dd>

2.<span class="" th:text="${application.subjectMap[teacherInfo.teachSubject].name}"></span>        

　　除上述兩個例子之外，還可能存在這種情況，

　　1.Java后台返回來的是‘1,2,3’字符串的形式，但是實際上比如1代表小學，2代表初中，3代表高中。這樣就無法向上述那樣直接放在HTML標簽里去取，而是需要在js中做處理，然后用prepend或者before或者after等jQuery方法再拼接到HTML中：

var AAAA= [[${teacherInfo.teachLearnPeriod}]];//xueduan
//學段 Period
      var arr= AAAA.split(',');
      var teaPeriodHtml = '';
      for(var i=0;i<arr.length;i++){//var num = parseInt(arr[i]);
          var n= i+1;
                nuM = parseInt(teaPeriodArr[i]);
          teaPeriodHtml +='<span class="" val="'+nuM+'">'+App2.learnPeriod[nuM-1].dataLabel+'</span>';
      }
      $(".prepend").before(teaPeriodHtml);

　　2. 讓返回來的數據被選中。

　　　　a.$('.AA .BB[value='+val+']').addClass('sklx-hover');

　　　　b.讓下拉框選中：

$('.AA').find('option').each(function (index,el){
    if($(this).attr('value')-1 == CC){
        $(this).attr('selected','selected');
    }
})

　　當然，后台還會返回很多各種各樣稀奇古怪的東西，還需要前端的各位程序員機智應對。

 8.刷新當前頁

　　往往在ajax走到success的函數后，如果成功了，一般會選擇刷新當前頁或者選擇跳新頁面。刷新當前頁比如說是編輯頁面有彈出框，在彈出框編輯好后，點擊確定，彈出框消失，刷新當前頁，更新當前頁編輯的內容，這種方法為：

 $.ajax({
      url: '',//接口地址
      type: '',//請求類型：get post
      data: ,//參數
      contentType : 'application/json;charset=utf-8',
      dataType: "JSON",//數據類型
      success: function(data){ 
        if(data.result.code == 0){//成功
            //刷新當前頁
            window.location.reload(true);
        }else{
            layer.msg('未編輯成功,請重新編輯');
        }
      }
 }); 

 

9.跳轉其他頁

$.ajax({
      url: '',//接口地址
      type: '',//請求類型：get post
      data: ,//參數
      contentType : 'application/json;charset=utf-8',
      dataType: "JSON",//數據類型
      success: function(data){ 
        if(data.result.code == 0){//成功
            //跳轉其他頁
           window.location.href='此處是接口';
        }else{
            layer.msg('未編輯成功,請重新編輯');
        }
      }
 });