也许是世界上最简单最灵活的JAVA CRUD开发方法

注意:

          以下内容,请勿转载,已申请专利,请在授权下使用,如需使用请于本人联系,QQ 921888199

1    开发方式演变过程

      A 很早之前的CRUD开发模式

          设计DB, 写 页面,控制器,服务,DAO

     B  近2年流行的CRUD开发模式

           设计DB,代码生成器+base类,后端甚至可以做到一行代码不写,前端看UI插件,如果用ELEMENT UI就比较麻烦,用easyui会有少量编码。

     C  和B同时产生的解决方案

            使用模型解析器,通过简单的配置就可以做出来一个CRUD,但是这种扩展性很差,几乎没扩展性,想自己写2行代码都无法实现。

 2   困局

      代码复用难(可以用模板引擎的标签封装解决,但非最好的解决方案),需要学习的插件可能比较多,比如我们公司一个项目用到了 my97,easyui,百度富文本,百度地图,validaform 等等,每个都要学习。

      前端开发工作量比较大,特别是VUE的UI框架,做出来漂亮但是开发效率不是很高。

      代码copy,后面发现一个bug后无法一次修改全部都修改。

3   新的玩法,pagex

        把CRUD分为2个页面,一个是列表页面,一个是添加/修改/详情 页面

        列表页面又包含了 过滤条件,按钮,列表显示字段配置,当然缺少不了 表配置。

        于是我们可以把列表页面抽象成下面这样:

         以下这行代码是模型(表)配置:

var modelConfig= {title:'学生',pkey:'student_id',type:'uuid',orderBy:'student_id Desc',db:'ucenter', namespace:"student",table:'t_student',trans:true};

          以下这样代码是列表页面的过滤条件,按钮,列表显示字段配置:

var listPage={
    listFieldSett:function(){
	  // 默认的formater - > 图片放大,tips
	  return [
		  {name:'name',title:'姓名',width:'25%',showTips:true,align:'center'},
		  //下面为字典配置
	      {name:'sex',title:'性别',width:'25%',align:'center',trans:'book',key:'sex',showField:'transMap.sexName'}
  ]},
    isColumnButton:function(){
	  return  true;
  },
  filters:function(){
      return [
		  {name:'type',type:'select',url:'${path.basePath}/ms/xx?xx=${param.fatherId}',val:'id',text:'typeName',title:'分类'},
		 //  {field:'sex',type:'book',key:'sex',title:'性别'},
		  {name:'name',type:'input',title:'姓名',filterType:'like'},
		  //  {field:'startDate',type:'date',title:'开始日期',dateSett:'{formart:"yyyy-MM-dd"}',filterType:'>='},
	  ];      
  }, 
  buttons:function(){
	  //自定义按钮 点击可以触发otherFunctions中配置的方法
      return [{title:'审核',fun:'shenhe',permissionsCode:'student:add',isRow:true}];
  },
  disableButtons:function(){
  	    //默认提供了 CRUD和导出的按钮,下面的配置将会把导出excel按钮禁用
	    return ['export'];
  },
  otherFunctions:function(){
      return {
      	//otherFunctions 的代码将会被输出到浏览器上
        testFormart:function(index,val){
	        return '' + row.val + ''
	    },
        shenhe:function(row){
	    }
	  }		
  }
};

         添加/修改/详情 页面:我们把页面分为  document.ready 周期,form加载成功周期,提交保存周期,保存成功周期和保存失败周期,每个周期都可以自定义一些代码。

   


var add={ 
	formFields:function(){
	     return [
			  {name:'name',title:'姓名',required:true,type:'input',style:'diaplay:none;',class:'imInputClass'},
             {name:'sex',title:'性别',required:true,type:'book',code:'sex'},
			   //{field:'sex',type:'div',id:'house'},
		 ];
	},
    otherFunctions:function(){
      return {
	     ready:function(){
	    },
	    loadSuccess:function(info){

	    },
	    onSave:function(){

	    },
		saveSucess:function(){
	    },
		saveError:function(){
		    
	    },
	  }		
   }
}

                

你可能感兴趣的:(组件开发)