程序博客网 > java构造其作用原理

struts2+spring+hibernate+json+jquery+flexigrid开发笔记-封装视图层增删改查

来源：互联网 发布：java构造其作用原理 编辑：程序博客网 时间：2024/06/03 21:48

     任何一个项目说白了,无非就是对数据进行增删改查的操作,为了使开发人员不过多的关注视图层而去关注业务逻辑层,我们一般都需要对视图层代码进行封装,这样可以减少开发量,缩短开发时间,特别是在使用ajax的开发过程中所涉及到的js代码特别多,而大多数又是重复的,进行封装是完全有必要的.

     1,定义整个视图层的样式,把样式与html分开这是在B/S开发中非常重要且必要的.如果把样式带入html,对于后期有维护是非常困难的,比如:我要改变表格的高度,那么所以涉及到表格的页面你都要去改到,看上去是简单,无非是改变一个数字,但是作为一个开发人员一定要清楚一定,改动的同时,我们会不可避免的带入新的问题,而且这种问题是在无意识中带入的,在查找起来是非常非常困难的,比如在页面里多出一个>号,你可能找一天你都找不出来,到底是在什么地方带进去了.所以在开始做项目的时候,一定要把样式与html分开,以后的改动都在css里面改动.

    2,尽量减少在页面中使用js代码,在ajax开发中,作为系统分析人员,一定要最大限度的减少页面中的js代码,在项目组里面,每个人编写代码的风格是不一样,特别向js这种灵活性较强的脚本语言,这样有利于后期的维护,要不然当某个开发人员走了,后期属于他的那一个模块交给谁去维护谁都头疼啊,很多时候读别人的代码,还不如自己写.

    下面是我在这个项目的封装代码,贴出来大家参考参考,如有不足之处,望见谅.

   1,增加

  <%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@include file="../include/head.jsp"%>
<title>客户增加</title>
</head>
<body>
<div id="divtable">
<form id="form">
<table class="table" width="95%">
<tr>
<td class="one">
客户姓名:
</td>
<td colspan="3"><input type="text" name="clName"  id="clName" class="input_out"  >
<span title="必填项" class="asterisk">*</span>
</td>
</tr>
<tr>
<td class="one">
客户姓别:
</td>
<td>
<select name="clSex"  id="clSex" class="input_out">
<option value='男'>男</option>
<option value='女'>女</option>
</select>
</td>
<td class="one">
客户电话:
</td>
<td><input type="text" name="clHtel"  id="clHtel" class="input_out" />
</td>
<tr>
<td class="one">
客户手机:
</td>
<td>
<input type="text" name="clTel"  id="clientTel" class="input_out" />
</td>
<td class="one">
身份证号
</td>
<td><input type="text" name="clCertificate"  id="clCertificate" class="input_out" />
</td>
</tr>
<tr>
<td class="one">
客户地址:
</td>
<td colspan="3"><input type="text" name="clAddr"  id="clAddr" class="input_out" />
</td>
</tr>
<tr>
<td class="one">
备注:
</td>
<td colspan="3">
<textarea rows="4" cols="51" class="input_out" name="remark"  id="remark"></textarea>
</td>
</tr>
<tr>
<td colspan="4">
<input type="button" value="保  存"  class=btn_mouseout onmouseover="this.className='btn_mouseover'"
onmouseout="this.className='btn_mouseout'" title="保  存" onclick="add('Addclient.action','post','form','client',2,'','')"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<input type="reset" value="重  置" class=btn_mouseout onmouseover="this.className='btn_mouseover'"
onmouseout="this.className='btn_mouseout'" title="重  置"/>
</td>
</tr>
</table>
</form>
</div>
<body>
</html>

上面是一个增加的页面,页面里没有过多的代码,开发人员,只需要改到input的name属性,调用add方法把相应的参数传过去就可以了

 

add方法的js代码

function add(url,type,fromName,beanName,butcon,menu,refresh,boole){
 var b=true;

//表单验证
 if(boole!=""&&boole=="true"){
 b=doValidate(fromName);
 }
 if(b){

//提交
 $.ajax({url:url,
            type:type,
            data:getData(fromName,beanName,butcon),//通过这个方法构造发送到服务器的json数据
            dataType:'json',
            timeout:1000,
            error:function(data) {
             alert("增加失败");
            },
            success:function(data) {
               alert("增加成功");
                $("#grid",window.parent.document).flexReload();
               if(menu!=""&&menu=="true"){
               window.parent.document.frames('I1').location.reload('../menu.jsp');
               }
               if(refresh!=""){
               window.location.reload(refresh);
               }
 }
 })
 }
 }

function getData(fromName,beanName,butcon){
         var a=document.getElementById(fromName);
         var str="";
         var i=0;
         if(a.elements[0].name=="pId"){
         i=1;
         str+=beanName+"."+a.elements[0].name+"="+a.elements[0].pid+"&";
         }
          /**
         $("#form").each(function (index, domEle){
         })
        */
         for(i;i<a.length-butcon;i++){
             //if(a.elements[i].value!=""){//这里的作用把隐藏的input和为空的input过虑,减少数据传输成本
             if(beanName!=""){//如果没有传beanName说明在name属性上就做了转换
              str+=beanName+"."+a.elements[i].name;
              }else{
              str+=a.elements[i].name;
              }
              str+="=";
              str+=a.elements[i].value;
              if(i!=a.length-butcon-1){
              str+="&";
              }
             // }
         }
     // alert(str);
         return str;
      
 }

其它页面基本操作也一样

java构造其作用原理 java构造其作用原理
原创粉丝点击
热门IT博客
大数据是什么大数据是什么
php中文乱码问题php中文乱码问题
mac excel 输入慢
java 轻量级的orm框架
淘宝客ev是什么
msp430用什么语言编程
adobe muse是什么软件
机器人编程软件有哪些
取什么淘宝店铺名大全
mysql中的主键是什么
vscode设置字体颜色
手机拍照投稿软件
网络浏览器
access数据库开发实例
u盘mac重装系统教程
python黑帽子中文网盘
任剑辉 白雪仙 知乎
程序员修炼之道百度云
博图hmi编程控制实例
虚无世界2手机版js使用
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 擦皮鞋dj洋洋 dj舞曲网 0898dj 5丫dj新地 清风dj网 雪十郎谁dj版 dj耶耶 深港dj总站 dj网站 dj何鹏 dj马哥 dj宝贝网 宝贝dj网站 嘟嘟宝贝 bbdj www.宝贝dj bbdj网 宝贝网dj 宝宝dj www.bbdj 7妹dj电音网 车载dj 车载dj重低音 车载dj串烧 车载中文dj歌曲大全 dj车载 好听的车载dj dj水晶网超重低音慢摇 重低音dj dj车载低音炮 超重低音dj djkk d亅舞曲串烧 酒吧dj打碟 dj打碟怎么学 dj打碟教学 酒吧dj是干嘛的 dj打碟哪里学 上海酒吧dj 王绎龙dj学校 dj打碟培训学校

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里