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('未编辑成功,请重新编辑');
        }
      }
 }); 
原文地址:https://www.cnblogs.com/beyrl-blog/p/7281033.html