JQuery EasyUI+Java实现web管理系统
各行各业需要各种各样的web管理系统，优点肯定是显而易见的（比人工记录管理在在纸上、在excel和word表上方便多了），其基本功能无非就是增删改查。
当然了，我的web管理系统就做的很简单也很粗糙了，该系统是管理计算机设备的。该系统主要管理关于设备自身固有属性（SN号、型号）与设备关联属性（所在位置、所处状态、拥有者）。
系统前端使用模板样式+JQuery EasyUI组件，使用JSON交换数据，后端语言使用Java，服务器使用Tomcat，与MySQL数据库交互采用DbUtils。
自定义样式
这个主要包括注册、登录、管理页面的整体格调、色彩搭配、页面样式、布局等等。要想真的前端搞好，要狠下功夫！然而我并不懂设计，也没有太多经验。为了敏捷开发（先把东西做出来 是最重要的，改进优化以r后再说！），直接搜各种网站素材模板（主要是图片资源和静态的html代码），借用它的皮囊。JQuery EasyUI 组件
tabs（选项卡）组件在项目中主要用于 切换不同的tabs窗口，注意不同的tabs其实处在同一个页面上，切换tab其实只是将该显示的show出来，不该显示的hide掉。因此如果不做特殊选择，操作多个相同类型的tabs会操作所有该类型的tabs（因为选择器一样），如果有这样的需求，请使用iframe。
dialog（对话框）组件主要负责呈现提交form组件，dialog中可包括各种类型的validatebox，对validatebox的验证可以使用自定义验证器。
输入新密码:
确认输入:
$.extend($.fn.validatebox.defaults.rules,{
lengthTo:{
validator:function(value,param){
return value.length>=param[0] &&value.length<=param[1];
},
message:'密码应该为5到10位'
},
equalTo:{
validator:function(value,param){
if ($("#"+param[0]).val()!=""&&value!=""){
return $("#" + param[0]).val() ===value;
}else{
return true;
}
},
message:'两次输入的密码不一致'
},
}); 对form的整体验证可以使用提供的方法，但注意jquery提供的serializeArray()封装的json数据为name:''value:''格式，可能与期望json格式不符，因此可以在前端对其进行转换，将其转换为{'属性名':'属性值'}类型json。
var isValid=$('#update_form').form('enableValidation').form('validate'); function formToJson(form) {
var result = {};
var fieldArray = $(form).serializeArray();
for (var i = 0; i < fieldArray.length; i++) {
var field = fieldArray[i];
if (field.name in result) {
result[field.name] += ',' + field.value;
} else {
result[field.name]=field.value;
}
}
return JSON.stringify(result);
}
messager（消息窗口）组件主要负责显示操作辅助信息，如在ajax请求前（ 显示操作进度条）、响应接收后回调函数（显示操作成功或者操作失败提示框 ）
combobox（组合框）组件主要负责构建下拉列表框，以方便于模糊匹配设备sn码等特征信息，可以为combobox绑定一个回车监听事件（实现继承自combo组件的keyHandler方法比较麻烦，可以不使用）
$(input_combo).combobox('textbox').keydown(function(event){
if(event.keyCode=='13'){ //回车键
...
}
}); datagrid（数据表格）组件主要呈现设备信息，远程请求url设置为servlet，在servlet中调用service方法获取数据库中的数据，将其转换为json后，使用输出流写出来。
treegrid（树形表格）组件以树形式呈现数据 它所请求的json也比较特殊，必须要传一个id，注意id必须保持其唯一性，两个id相同的根节点或者子节点或者一个根节点与一个子节点，其中一个都是不能够正常使用的。
treegrid加载初始化完成之后，有子节点的根节点可以正常的展开与关闭，对于没有子节点的根节点来说，展开该根节点时，EasyUI会默认把此节点id的值作为http请求参数并命名为'id'，发送到之前设定好的url服务器端。如果此url和之前treegrid初始化url相同时（事实上确实就是相同的），程序再次响应，会输出含有所有数据的json（与之前初始化的相同），进而导致treegrid卡死。为防止此类现象产生，两种做法，一种在后端进行判断，如果含有id参数，直接返回空，另一种是前端进行判断，为treegrid添加onBeforeExpand事件，如果该根节点没有子节点，该事件直接return false，禁止展开该根节点，从而禁止请求服务器。
onBeforeExpand:function(row){
if(row.children.length==0){
return false;
}
},JSON
EasyUI 控件获取、提交都支持JSON格式，因此使用JSON传输数据将会变得非常方便。
但是ajax提交之前需要注意控件方法获取到的值为JSON对象，应将其使用JSON.stringify()解析为JSON字符串提交，要不然获取到的只是生硬的[Object object],其原因在于jquery提供的ajax方法会将请求数据自动转换为String格式。
在服务器端使用json-lib.jar包，将请求传来的json数组转换成对应的javaBean 对象并进行进一步的操作，将从数据库中获取的、需要响应的javaBean对象转换成json数组，实现了与前端的数据通信。
//解析json数据 并封装为equipmentBean对象
JSONObject jsonObject = JSONObject.fromObject(request.getParameter("formdata"));
equipmentBean eb=(equipmentBean)JSONObject.toBean(jsonObject,equipmentBean.class);DbUtils
当使用了jdbc写了那么多条sql冗长而且容易出错语句之后，你就会发现使用DbUtils会多么简化你的代码，它实现了对jdbc最简单的封装。具体使用方法就是 引入c3p0.jar包与commons-dbutils.jar包,从c3p0构建的数据库连接池里获取连接，写sql执行，就这么简单。
public class c3p0Support {
private static ComboPooledDataSource cpsd=new ComboPooledDataSource(); //从c3p0池中获取连接
public static DataSource getDataSource(){
return cpsd;
}
}
public ArrayList queryUser(String username,String password){ //查询给定用户与密码的结果集
ArrayList result=new ArrayList();
QueryRunner runner= new QueryRunner(c3p0Support.getDataSource());
String sql="select * from user where username=? and password=?";
Object[]params=new Object[]{username,password};
try {
result=(ArrayList)runner.query(sql,new BeanListHandler(tb_user.class),params);
} catch (SQLException e){
System.out.println("出现错误"+e.getErrorCode()+e.getMessage());
e.printStackTrace();
}
return result;
}
MySQL数据库
关于数据库的设计，只设计了两种类型的表，基础属性表与关联表，基础属性表就主要是 自增主键id+设备自身属性+操作信息（操作人+时间）。由于数据库的现有数据是从文档中整体导入，不全面也有些错误，为避免麻烦，关联表并没有设计成外键形式，而是以 自增主键id+关联事物主键id+被关联事物主键id+操作信息（操作人+时间）。
通过联表查询 获取并修改数据。
创建数据库表的时候一定要设置好表的字符集和核对校验规则，我采用的是utf8编码格式与utf8_general_ci校验规则,不同类型的核对校验规则会有一定的差别，一个数据库中的所有表一般都要保持一致，不然的话，联表查询会出现错误，只能重新建表。
测试
开发者永远是根据开发者的思维和逻辑在构建系统和编写代码，如果他自己测试，肯定测试的不全面。
让别人测试 可以找到很多意想不到的BUG。
我越来越意识到在软件发布之前进行完整的测试是多么重要！很关键！
总结
纸上得来终觉浅，绝知此事要躬行。虽然很简单，但是我通过自己的实践获取到了一定的知识，分享出来，欢迎指正，欢迎交流。其实客观的评价这个系统，只是能用而已，它存在着很多很多的问题。
比如说 交互性问题（生硬到极致的人机交互）、可维护性（换个人能不能接着开发？）、安全性问题（用户行为真的很规矩吗？系统真的很安全吗？）、可用性（只能在内网Linux服务器上跑？能不能在全市跑？能不能在全国跑？）、容灾性（tomcat崩了怎么办？数据库崩了怎么办？）
一个真正成熟的上千万人用的大型网站架构系统，和一个人用的系统、二三十个人用的系统、上千个人用的系统是从需求分析、设计、编码、测试、部署是有着天壤之别的，我意识到了，但是现在并没有能力来改进，哎，路漫漫其修远兮，吾将上下而求索......
顺便趁着这篇博文，感谢一下带我进入编程世界张龙、李彦辉老师，素未谋面，神交已久。他们的声音带给我智慧、思考与力量！非常感谢！