郭心全

IT者,程序员,在读硕士研究生

“返回”按钮惹的“祸”

先介绍下我们开发系统使用的框架,整个时SSM(Spring,Spring MVC,Mybatis),前端用的easyUI,掺杂了点viewe、ajax等。
一开始整个系统的查询,就是再页面上展示的数据都是根据mybatis的逆向工程生成的.xml文件选出来,然后在Java代码里进行两个表的连接,因此没有用到mybatis的多表连接等,如下图:
1

红色线的圈里的绿色的线标的是在本类下写的方法,根据主键去另外一个表选择需要的属性,具体实现如下:
2
3
其中,Food,Category是所需要的属性所在的表对应的实体类,比如需要trFoodName,需要去food表对应的Food实体类。
老师让加查询,好啊,我们给加查询,但是查询数据库的数据,我们不再使用上面的查询方法,而是使用mybatis的多表查询,具体是在.xml中用把需要的表对应的.xml文件连接起来,用sql语句实现查询,具体如下:
4
其中,红色圈里的是该.xml文件对应表(ft_basic_info)的属性所在的地,而上面的紫红色横线标的是连接的另外的表(province),javaType是连接的表province对应的实体类Province(也是mybatis逆向工程生成的实体类),property是province表在ft_basic_info对应的实体类中实例化的Province的对象。mybatis逆向生成的如下图:
5
6
7

好了,开始正题,返回按钮

上面说也和返回按钮有关吧。
在基本信息表里,觉得数据库表的字段太多,按行显示不好,想加个超链接,点进去后,具体的信息会竖着显示,在新的页面有一个返回按钮,有一个导出按钮,返回按钮返回到上一个状态,是上一个状态,不是上一页,上一页的查询是在本页面跟新easyUI的datagrid,相当于只更新了数据显示,所以用网上的返回上一页的js代码实现是达不到效果了,因为加入我选择了查询条件,根据条件进行了查询,且翻了页怎么办?只能想着留着条件,或者返回时再重新赋值到文本框或下拉框,然后再执行查询,并且翻页。逻辑是这么个逻辑,但是其中的坎坷曲折可恶心死我这个代码能力不强的人了。
调试返回按钮我的内心是崩溃的,但是在我和远哥的共同努力下最后基本实现了。首先我们问了一直在我导师教研室的同事方老师的公司写SSM代码的李井平同志,他让用session试试,保存条件,返回来时再赋值给文本框和下拉框执行查询,实现“返回到上一个状态”的功能。我就开始了跟返回作斗争的工作,首先我在点击提交按钮绑定的函数中获得查询条件的值,放到session中,这里说一下,我用的sessionStorage(好像我这只显示有sessionStorage),还有session,cookies,其区别百度一下就可以了,很多的。如下图:
8
最一开始,我还想着在跳转的页面里,从session中获得其值,然后再重新存一遍,其实没意义,session的存储时间没有这么短。
然后在返回后,在加载页面时就从session中取出来存的值,判断其是否有值,若有赋值给文本框或下拉框,具体如下:
9
不知道还是不现实或者不执行查询或查询了无结果,我又加了一遍

$(function () {}) //等于$(document).ready(function(){…})在整个DOM文档加载完后加载执行

或者

$(window).load(function () {}) //是等待所有的内容都加载完后执行的

然后调用函数,重新数据加载
具体如下图

10
11
以上这些,都忽略了一个大的问题,就是没有关注分页的事,显然返回后重新加载数据也是第一页,即使从第五页点击的详细信息,返回的话也是查询后的第一页数据,只是模拟了返回的功能,没有考虑清楚,这时候得考虑页数(page)的问题
开会分配任务时,把这个交给了我远哥,现在想想也挺好,加入给我的话我基本会在上面的基础上去加页码记忆,而交给远哥,他去调页码,没太关注查询条件的保存我觉得,这也使得后面的页数加条件更容易一些。
下面来说说分页的实现:如下图:点击左侧树形菜单,page赋初值为1
13
然后在响应页面获得page的值,然后付给easy UI datagrid的pageNumber属性,刷新时会显示相应的页面
12
下图是超链接,点击详细信息,跳转到详细信息JSP页面,这次带着page的值传过去如下图红圈里的
14
接着在详细信息的页面点击返回时的响应函数如下图:首先获得传过来的page,然后通过

window.location.href=”${pageContext.request.contextPath}/fruit/fruit_index.jsp?page=”+page;
实现,以打开页面来实现返回的效果

15
提一下,不管返回时还是第一次打开第一个带超链接的JSP都是从缓存中加载对应关键字的值,若没有该关键字就不给文本框或下拉框赋值
所以返回时,从sessioStorage取值,若有对应值则对文本框或下拉框赋值,没有不做操作,然后从对话框中获取值,若有值则进行数据重新查询加载,显示的页数根据easyUI datagrid的pageNumber显示,实现返回的效果,如下图:
16
17
同时,这也不需要

$(function () {})

或者

$(window).load(function () {})

进行多次get或post提交查询数据了
即第一次展示上面两行代码的后面两张显示的注释的前台代码的图片