本文共 2495 字，大约阅读时间需要 8 分钟。
注意：
以下内容，请勿转载，已申请专利，请在授权下使用，如需使用请于本人联系,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(){ }, } }}