本文共 2808 字，大约阅读时间需要 9 分钟。

想大家在阅读本文章之前先阅读

博主提供的开源组件 Mybatis-JPA 组件开源地址 

1 什么叫做组件

          组件 1.0  就是js插件，比如一个下拉，一个文件上传。

           组件2.0  几个js插件组合而成，比如可以吧省市区 变成一个组件，也可能是业务组件，比如 很多地方都写这么个功能，每次复制粘贴 不好维护，那么就抽离引入吧。

           组件 3.0 直接和DB打交道的组件。

                          根据约定，这个省市区的 三个字段的命名是什么，对应数据库的哪个字段，这个省市区组件，和校验插件(他们可能不是一家的)，如何去集成。

 2   为啥需要组件

           有了组件，我们可以把代码写到最简单。只关注核心业务逻辑，不写一行多余的代码。

 3   使用组件后的代码是怎样的？

           A  使用JS来做项目配置，业务代码和配置代码在一起，如果你想，你甚至可以把SQL写这里(不要先喷我安全问题，后面讲安全)。

           B   上干货吧，以下是初版本的设计。 

var modelConfig= {title:'学生',pkey:'student_id',orderBy:'student_id Desc',db:'ucenter',name="student",table:'t_student'};var listPage={   getListSett:function(){	  return [		  {field:'name',title:'姓名',width:'25%',formart:'testFormart',align:'center'},	      {field:'sex',title:'姓名',width:'25%',formart:'testFormart',align:'center',trans:'wordbook',key:'sex',showField:'transMap.sexName'}  ]},  getFilter:function(){      return [		  {field:'type',type:'select',url:'${path.basePath}/ms/xx?xx=${param.fatherId}',val:'id',text:'typeName',title:'分类'},		  {field:'sex',type:'wordbook',code:'sex',title:'性别'},		  {field:'name',type:'input',title:'姓名',filterType:'like'},		  {field:'startDate',type:'date',title:'开始日期',dateSett:'{formart:"yyyy-MM-dd"}',filterType:'>='},	  ];        },   getButtons:function(){       return {'你好':'sayHello'};  },  getDisableButton:function(){	    return ['del','export'];    },  otherFunction:function(){      return {	     formart:function(index,val){	        return '' + row.val + ''	    },	     sayHello:function(row){		    	    }	  }		  }};var add={ 	getFormField:function(){	     return [			  {field:'name',title:'姓名',required:true,max:10,type:'input'},			  {field:'age',title:'姓名',required:true,dataType:'n0-3',type:'input'},			  {field:'sex',title:'性别',required:true,type:'wordbook',code:'sex'},		 ];	},	otherFunction:function(){      return {	     ready:function(){	        	    },	    loadSuccess:function(info){		    	    },	    onSave:function(){		    	    },		saveSucess:function(){		    	    },		saveError:function(){		    	    },	  }		   }}

        是不是都能看懂？无论你是个java程序员，还是个php程序员，又或者是个前端程序员，只要你弄懂数据库设计，就可以写CRUD了。

          上面代码中的部分解释：trans:wordbook 字典，code:字典编码。

                                                  dataType： 数据验证规则，如果有多个可以写  a&b 或者 a|b。

           listPage 代表列表页面， 包含列表字段配置，过滤条件配置，自定义按钮配置，禁用系统默认按钮配置，以及自定义js配置。

            add 代表添加/修改/详情 页面，包含表单字段配置，以及几个handel，当然也可以自己写其他的方法。

4   实现思路--FOR 页面代码生成。

       1  将js加载到java中，当做配置文件读取，JDK 1.8自带了JS引擎，看看你就懂了

       2  根据规则拦截请求，我会拦截pagex/ms/namespace  然后根据namespace找到js，把js的配置项解析为html(说白了就是拼接字符串就是这么简单)

       3   把拼接出来的字符串给前端写过去。

4   后端实现思路。

      在项目启动的时候，遍历所有的js，根据js配置拼接sql 动态添加到mybatis中。

      提供一个统一个控制器对外提供api  传namespace 可以定位到sql 执行，返回结果。

5    安全

          虽然这个配置文件是一个js，但是他不能被浏览器直接访问到，一个filter就搞定拦截了，然后虽然他是一个js，但是他实际上是给后端用的，js做配置，不觉得xml json property  yml 都弱爆了么。。(仅针对这个场景)。

6   扩展性

         你说，我有一些前端代码，系统组件+配置 无法实现，中间包含非公共的业务，那怎么办呢？

         我没说不让你写html代码！！！！

         你自己在写一段代码，加载进来就完了。

         比如上面我们是student.js，在他的目录下面你可以写一个student.jsp，配置不出来的写到这里面，引擎自动帮你把student.jsp 执行结果给前端返回回去，这个jsp中你爱写啥写啥。

转载地址：http://dgwni.baihongyu.com/