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('未编辑成功,请重新编辑');
        }
      }
 });