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的验证可以使用自定义验证器。

<p style="margin:10px">
   输入新密码:<input class="easyui-validatebox textbox"name="password"id="pwd"type="password"placeholder="******"data-options="required:true"validType="lengthTo[5,10]"style="margin-left:10px"/> 
</p>
<p style="margin:10px">
   确认输入:    <input class="easyui-validatebox textbox"type="password"placeholder="******"data-options="required:true"validType="equalTo['pwd']"style="margin-left:10px"/>
</p>
$.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<tb_user> queryUser(String username,String password){            //查询给定用户与密码的结果集
		  ArrayList<tb_user> result=new ArrayList<tb_user>();
		  QueryRunner runner= new QueryRunner(c3p0Support.getDataSource()); 
		  String sql="select * from user where username=? and password=?";
		  Object[]params=new Object[]{username,password};
		  try {
			  result=(ArrayList<tb_user>)runner.query(sql,new BeanListHandler<tb_user>(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崩了怎么办?数据库崩了怎么办?) 

一个真正成熟的上千万人用的大型网站架构系统,和一个人用的系统、二三十个人用的系统、上千个人用的系统是从需求分析、设计、编码、测试、部署是有着天壤之别的,我意识到了,但是现在并没有能力来改进,哎,路漫漫其修远兮,吾将上下而求索......

顺便趁着这篇博文,感谢一下带我进入编程世界张龙、李彦辉老师,素未谋面,神交已久。他们的声音带给我智慧、思考与力量!非常感谢!

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页