在开发中,作为初中级后台开发,便利数据这种工作是不可避免的,而在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}}" alt=""/></td><!-->图片判断处理<--><td><span th:text="${resource.area}">397</span><em>m²</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:οnclick="'javascript:officePage('+${resource.resourceId}+','+${buildingForm.projectDto.projectId}+')'"    这里的officePage是我们JS中写的function的name,${resource.resourceId}+','+${buildingForm.projectDto.projectId}则是function所需要的参数.这里是拼接出来的    注意:参数的顺序是不可改变的.而且这种方式的优势在于:可以动态的从后台获取跳转所需要的参数.    当然我感觉还有其他更加简便的跳转传参方式,正在思考,待优化.....
   可以采用这种方式来触发,看其他笔记中也有对于thyme leaf框架JS的一些写法的,但是个人感觉比较麻烦,毕竟一个JS方法都要引入一些标签配置.而且对于初中级开发来讲,那种方式感觉也不熟悉.生硬.反正我是这么感觉的  

    

转载于:https://www.cnblogs.com/kxkl123/p/7722769.html

thyme leaf学习笔记2之 table便利数据跳转(一)相关推荐

  1. golang学习笔记12 beego table name `xxx` repeat register, must be unique 错误问题

    golang学习笔记12 beego table name `xxx` repeat register, must be unique 错误问题 今天测试了重新建一个项目生成新的表,然后复制到旧的项目 ...

  2. Oracle中用system存数据,【学习笔记】Oracle表空间 数据存放system表空间影响数据库性能...

    天萃荷净 分享一篇,关于Oracle数据库system表空间研究,不能将用户数据存放在system表空间的原因 为什么不建议客户把业务数据存放到SYSTEM表空间中,一直想通过试验的数据来说明问题,今 ...

  3. 2023-01-29 学习笔记:常见28种数据分析模型

    2023-01-29 学习笔记:常见28种数据分析模型 知乎上的一篇文章,虽然之前对深度学习相关模型有所了解,但通过这篇文章了解了更多模型的应用场景,同时也知道了日常一共有多少种实用模型. Excel ...

  4. 数据导不进oracle数据库,学习笔记:Oracle逻辑导出/导入 数据逻辑导出时跳过指定表不进行导出...

    天萃荷净 Oracle数据库逻辑exp导出时,跳过指定某些表,对其表中数据不进行导出 有一个需求,某个用户有很多张表,但是只能使用exp导出,而且想跳过其中某几张表,其他对象包括依赖关系都需要.针对这 ...

  5. 2021-09-01 学习笔记:Python爬虫、数据可视化

    2021-09-01 学习笔记:Python爬虫.数据可视化 结于2021-09-07: 内容来自 成都工业大学 数字媒体专业实训: 主要内容: PyCharm开发Python脚本的基础配置: Pyt ...

  6. R语言小白学习笔记3—R语言读取数据

    R语言小白学习笔记3-R语言读取数据 笔记链接 想说的话 学习笔记3-R语言读取数据 3.1 读取CSV文件 3.1.1 read_delim函数 3.1.2 fread函数 3.2 读取Excel数 ...

  7. tensorflow学习笔记——使用TensorFlow操作MNIST数据(1)

    续集请点击我:tensorflow学习笔记--使用TensorFlow操作MNIST数据(2) 本节开始学习使用tensorflow教程,当然从最简单的MNIST开始.这怎么说呢,就好比编程入门有He ...

  8. Python学习笔记_1_基础_2:数据运算、bytes数据类型、.pyc文件(什么鬼)

    Python学习笔记_1_基础_2:数据运算.bytes数据类型..pyc文件(什么鬼) 一.数据运算 Python数据运算感觉和C++,Java没有太大的差异,百度一大堆,这里就不想写了.比较有意思 ...

  9. Python学习笔记:用Python获取数据(本地数据与网络数据)

    Python学习笔记:用Python获取数据(本地数据与网络数据) 一.用Python获取本地数据 读写文件(三种基本模式:r, w, a) 1.写文件 2.读文件

最新文章

  1. 柜位预測(一)——显示柜位曲线图
  2. 网络营销——浅析网站改版之后对网站展开新的网络营销有哪些影响?
  3. 网络编程学习笔记(RES_USE_INET6解析器选项)
  4. linux中信号的处理,linux中关于信号处理笔记(二)
  5. 基于kb的问答系统_1KB以下基于表的Q学习
  6. div中同时存在文本和数字超过两行出省略号
  7. 我的100篇随笔纪念,关于JScript开发
  8. 启动的时候闪退_APP突然闪退怎么办?学会这五个妙招比换手机实用,看完望周知...
  9. mysql查询结果作为附件_python3+mysql查询数据并通过邮件群发excel附件
  10. Python学习入门基础教程(learning Python)--6 Python下的list数据类型
  11. 【机器人】项目疑难杂症
  12. anaconda安装——添加镜像源
  13. Hibernate的单向N-N关联(四)
  14. 【OpenCV实战】简洁易懂的车牌号识别Python+OpenCV实现“超详解”(含代码)
  15. android程序毕业答辩ppt,软件毕业答辩PPT范例
  16. Oracle计算两个日期的月份
  17. 伸展树算法c语言,数据结构之伸展树详解
  18. imx6获取和同步时间
  19. opencv的抠图程序
  20. Day03 BSP工程师小白的第一步-------今天开始正式学C语言

热门文章

  1. websocketpp端口问题
  2. 寻求合作 - 求职 - 创业 / 有意向的来这里交流一下
  3. STM32 TIM定时器的使用(2)——输入捕获
  4. extjs 导出简单的excel表格
  5. python iterable对象_Python迭代器Iterable判断方法解析
  6. 全球经济走势及我国制造业的发展方向
  7. 一键登录服务端原理_一键登录已成大势所趋,Android端操作指南来啦!
  8. 【人工智能】一致代价搜索(Uniform Cost Search, UCS) Python实现
  9. python数组和链表的区别_数组和链表的区别 - toddler的个人空间 - OSCHINA - 中文开源技术交流社区...
  10. 程序员的好,失去以后才懂的,这么好的男人你心动吗?