注意:
以下内容,请勿转载,已申请专利,请在授权下使用,如需使用请于本人联系,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(){
},
}
}
}