你的位置:首页 > Java教程

[Java教程]EasyUI + Spring MVC + hibernate实现增删改查导入导出


(这是一个故事……)

前言

作为一个JAVA开发工程师,我觉得最基本是需要懂前端、后台以及数据库。


练习的内容很基础,包括:基本增删改查、模糊查询、分页查询、树菜单、上传下载、tab页
主管发我一个已经搭建好的框架平台,在平台上进行编码,不限制技术。
虽然说不限制技术,但还是得根据已经搭建的框架平台进行编码。

所以首先第一步,分析框架平台结构组成。
入手:看目录、看配置、看jar包、看js库、看数据库...
不难发现项目是基于:Spring + Hibernate + Spring MVC + EasyUI + MySQL
除了基本框架外,完成我需要的功能,平台还提供了如下Java类库和JS插件:
zTree:树菜单
POI:Excel读写

需求不难,可是对于Spring MVC和EasyUI,我算是第一次使用。
我之前用过Struts2和DWZ。这次Spring MVC替代了Strut2、EasyUI替代了DWZ。
我觉得曾经接触过类似东西的话,再学同类型的就会容易上手。所以我对我自己有信心。

当要完成一个完整的功能的时候,我3/4的时间花在了前端数据展示和前端后台数据交互上。

大部分细节的问题,都需要前端的处理,同时也需要后台的配合。

做项目绝对不能盲目开始,必须先掌握基本的理论知识。

首先展示一下效果:


EasyUI它做出来的应用是一个富客户端。
大概的特点是:所有资源文件只加载一次,页面局部刷新,所有请求都基于ajax请求,所有打开的tab页在同一个浏览器窗口算是同一个页面,这个就要注意当通过id(在同一个页面应该是唯一的)或者name(如果同一个页面存在相同的name)获取页面元素的值时的问题。




树菜单

这是个4级菜单,在一个表中,每一行数据含有以上4个列。根据Hibernate一个实体bean对应一个表的思想,这4列就是bean的4个属性。在整个功能需求中,都是对单表进行操作。
菜单要求的层级关系为:所属城市 =》 设备类型 =》 设备型号 =》 设备名,即对一个设备进行分类显示。
对于树菜单,现成的插件有EasyUI自带的插件和zTree。因为我之前有接触过zTree,但还没用过EasyUI的树菜单插件,所以我用zTree实现这一功能。(我加入了zTree的技术交流群(1806431),群老大就是写zTree插件的人,他告诉我,基于EasyUI开发的话,其实用EasyUI自带树菜单插件更好,而且它自身的树菜单功能强大,整合得更好。后续会学习,暂时是用zTree实现了)
 
zTree支持两种格式的JSON数据:


平台提供了一个zTree的实体bean。


上面的属性跟zTree的插件本身定义的属性是一一对应的,这样可以方便转换成JSON之后直接生成树菜单,而无须重新指定属性。
需要注意的是:url赋的值默认就是在zTree的树菜单中的a标签的href的值。在EasyUI中,当点击菜单节点,会打开一个新的浏览器窗口,这肯定是不符合要求的。API中如下说明,可以重新指向属性,其他重新指向属性原理相同,具体查看API。

Spring MVC返回JSON需要添加@ResponseBody注解

根据我的bean生成的JSON为标准JSON格式,可以直接使用(我一开始还傻傻的将它拆来拼成简单格式的JSON,后来发现傻了~)




我指定当节点被点击时执行onClick()函数


至于JAVA,首先不知道好不好,但还是实现了,分享一下我的思路:
1、从数据库获取所有的设备信息
2、遍历将设备信息按城市分类

3、遍历Map,将List传入添加子结点

4、同理先分类,再将List传入进行下一级分类,最后得到的就是一个树结构
这功能,第一次也是大概这样的思路,但是查数据库实现分类的,结果查了N次数据库,那肯定是不行的,然后就改成了这样只查一次数据库,再遍历处理数据。虽然写得不是很好,但功能是实现了。期待更好的思路~

查询
查询包括了模糊查询和分页查询


新手做这个功能的时候都是一步一步慢慢演变成完整功能的。(过程略……)
为了确保查询条件的不变,我需要设置一个隐藏的表单,存储查询条件,当点击分页工具栏的按钮时,获取隐藏表单的数据作为分页条件,进行分页查询。所以当我们点击查询按钮的时候,实际上先将表单中的数据赋值到隐藏表单中,然后触发分页查询。

EasyUI获取下拉或者日期控件的值需要采用控件的方法去获取
 
在EasyUI中,每一个控件都含有属性,事件和方法。
大概用法是:
$("#id").控件名('方法名', {
    属性名:属性值,
    事件名:function(){
    }
});
具体的查看API

新增和修改
这个看似两个功能,但传到后台java处理是对应同一个处理。对应的是saveOrUpdate方法。
hibernate中提供了saveOrUpdate方法实现保存或更新操作。
saveOrUpdate方法:如果设置了主键则执行update操作,如果主键为null(null和“”是有区别的,jsp获取到的空值为"",我们需要将其置为null)则执行inset操作 。


至于前端页面,肯定打开的是同一个窗口,但是点击【新增】和【更新】按钮时需要修改窗口内的相应值,最后获取值通过Ajax提交即可。


删除

删除和新增、跟新都需要为方法添加事务注解,否则运行不报错,但数据库数据死活不变



到这里,应该注意到,新增、修改、删除都对设备信息造成影响,那么我们应该重新获取菜单和表格的数据,同时下拉框(我的下拉选项是当前存在在数据库的分类)的数据也要相应变化。

导入/上传


那个上传的地址后面有个/,我搞了半天上传不了,结果是少了一个/

基本都是固定的


导出/下载

Spring MVC的下载也是相对固定的,最后返回的是一个byte数组,只要将需要下载的内容转换为byte数组,就可以实现下载。


简单地通过window.open就可以打开下载的窗口

但当我通过window.open传递中文时,出现乱码,经查阅资料,可以用过encodeURL编码url,然后在JAVA再通过URLDecoder.decode解码即可解决中文乱码问题

POI读写
主要就基本步骤:
1、创建Excel工作簿:Workbook
2、在Workbook创建工作表Sheet
3、在Sheet创建行Row
4、在行Row创建单元格Cell

对于Excel,POI有三个实现了Workbook接口的对象,分别是:
HSSFWorkbook:主要用于创建2003版格式的Excel,文件后缀为.xls,数据量大会报错
XSSFWorkbook:主要用于创建2007版格式的Excel,文件后缀为.xlsx,对于数据量大需要使用此类
SXSSFWorkbook:扩展了XSSFWorkbook,提高了性能

这样就可以生成baye数组


远程验证
<input class="easyui-textbox easyui-validatebox" type="text" id="wid" name="id" required="true" invalidmessage="设备ID已存在"  missingMessage="设备ID不能为空" validType="remote['validateId', 'id']" />
有资料显示使用data-options的方法设置远程验证,结果出现单双引号混合使用的情况,导致不能正确执行,不知道有没有解,然后我就用了上面这种方式写,没问题


动态启动禁用验证
$("#wid").removeAttr("readonly");
$('#wid').validatebox('reduce'); // 恢复 
 
$("#wid").attr("readonly", "readonly");// ID列不能改
$('#wid').validatebox('remove'); // 删除
/* 动态禁用启用验证 */
$.extend($.fn.validatebox.methods, {
    remove : function(jq, newposition) {
        return jq.each(function() {
            $(this).removeClass("validatebox-text validatebox-invalid").unbind(
                    'focus').unbind('blur');
        });
    },
    reduce : function(jq, newposition) {
        return jq.each(function() {
            var opt = $(this).data().validatebox.options;
            $(this).addClass("validatebox-text").validatebox(opt);
        });
    }




另外发现一开发神器:
Eclipse反编译插件 :Eclipse Class Decompiler
插件安装使用教程:http://www.blogjava.net/DLevin/archive/2012/11/02/390685.html




来自为知笔记(Wiz)



附件列表