后台系统框架开发的理解之搜索表单篇
后台系统之搜索表单模块
搜索模块,我的思路是给让后台给一个数据格式配置,如何js根据这个配置生成对应的表单控件,在这个配置里,定义好后端的接口字段和提交的url,
具体步骤如下
首先是html的格式,这个没啥说的如下
<html> <head> <style> [v-cloak]{display: none;} </style> </head> <body> <div class="search-box" id="searchBox"> </div> </body>
后端完全不用关心html嵌套和表单元素布局
接下来是js,
var searchConf = [ { type:"text", label:"姓名", name:"m", value:"" }, { type:"select", label:"性别", name:"s", value:"2", item:[ {text:"男",value:1}, {text:"女",value:2}, {text:"我不告诉你",value:3}, ] } ];
searchConf 是后端暴露给前端的表单配置,可以直接写在模板变量里面
接着是前端封装的表单控件模块,不过我这里没有封装,直接裸露在外面
function formatConf(data){ //主要是格式化select data.forEach(function(v,index){ if(v.type==="select"){ if(v.value===undefined||v.value==""){ v.value=item[0].value;//设置select的默认选中项 } } }); return data; } var searchBox = new vue({ el:"#searchBox", data:{ conf:formatConf(searchConf) }, replace: false, template:'<label v-for="item in conf"><span>{{item.label}}</span><template v-if="item.type=='text'"><input type="text"v-model="item.value"></template><template v-if="item.type=='select'"><select v-model="item.value"><option v-for="option in item.item"v-bind:value="option.value">{{option.text}}</option></template></label><input type="button" value="查询" v-on:click="searchClick"/>', methods:{ searchClick:function(){ var s = JSON.parse(JSON.stringify(this.conf));//深度复制conf对象获取用户选中的信息 var p = getSearchParam(s); //balabala //可以让后端暴露一个url接口,我们约定参数为search $.get("url",{search:p},function(serverData){ //巴拉巴拉 },"JSON"); // } } }); function getSearchParam(data){ var p = {}; data.forEach(function(v){ p[v.name]=v.value; }); return p; }
重点是那个解析配置的模板template 大致代码如下:
<label v-for="item in conf"><span>{{item.label}}}</span> <template v-if="item.type=='text'"><input type="text" v-model="item.value"> </template> <template v-if="item.type=='select'"> <select v-model="item.value"> <option v-for="option in item.item" v-bind:value="option.value"> {{ option.text }} </option> </template> </label>
是的,这段代码很简单只是根据我们约定的type来生成对应的控件而已。
然后我们在button上绑定个click事件,用getSearchParam方法来解析用户在表单的选择状态,然后我们和后端约定一个固定参数search,把这堆数据发过去,额这里约定参数只是我觉得这样比较简单明了,后面就是ajax获取数据后的操作。。。callback。。。
over, 点击这里查看demo
发表评论