Thymeleaf 在项目中的应用及前后端交互的一些知识（1）-白红宇

Thymeleaf 在项目中的应用及前后端交互的一些知识（1）

阅读量：6153 次

发布时间：2019-06-21

本文共 3937 字，大约阅读时间需要 13 分钟。

经过一段时间的工作，我的第一个项目已经快要上线了。本篇文章介绍些thymeleaf在工作中的实际应用，但是更多的还是一些前端处理后台数据的一些思路，如果有什么不正确的地方，希望大家指点。

1.th:each


     
      //application.sysDictMap  是从数据字典取出的方式。     
       　　　　　　 //这里面的AA 和 BB就是你需要的数据的名称比如说AA可以是name，BB可以是id。。。

　　1’ .上述的${application.sysDictMap.learnPeriod}是可以直接从model里面取出来的，但如果，从model里面取不出来，必须要走接口才能取得到，那样就需要用如下的方法（与Thymeleaf没什么联系，是一种前端方法）：

　　 a.以下是写在子页面上的js:

　　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 = '
     
      '+                                   '
      '+                                   '
      '+this.Name+''+                                 '
     
';                        $('.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里面可以放各种各样的表达式~~~高大上啦，下面是两个例子：

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

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

3.th:class

　　如果 user.sex是 1 的话，执行问号后面的，也就是说class会变成 new-radiio pull-left on,否则就会变成 new-radiio pull-left 。这种方法在angular里面也同样适用。

4.th:selected

5.th:href

基本信息

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

共个人

7*.前端从数据字典取出数据的方法。

　　这次项目接触了数据字典，下面是从数据字典取出数据的一些方式。其实上面的第一个例子里面就有从数据字典取出数据放入HTML的例子，但是那是类似angular，以model形式直接将数据放入标签内。

1.

2.

　　除上述两个例子之外，还可能存在这种情况，

　　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
     
      '+App2.learnPeriod[nuM-1].dataLabel+'';      }      $(".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

你可能感兴趣的文章