后台系统框架开发的理解之搜索表单篇

后台系统搜索表单模块

搜索模块,我的思路是给让后台给一个数据格式配置,如何js根据这个配置生成对应的表单控件,在这个配置里,定义好后端的接口字段和提交的url,

具体步骤如下

  1. 首先是html的格式,这个没啥说的如下

    <html>
    <head>
    <style>
    [v-cloak]{display: none;}
     
    </style>
    </head>
    <body>
     <div class="search-box" id="searchBox">
     
    </div>
    </body>

     

    后端完全不用关心html嵌套和表单元素布局

  2. 接下来是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 是后端暴露给前端的表单配置,可以直接写在模板变量里面

  3. 接着是前端封装的表单控件模块,不过我这里没有封装,直接裸露在外面

    	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;
     }
  4. 重点是那个解析配置的模板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来生成对应的控件而已。

  5. 然后我们在button上绑定个click事件,用getSearchParam方法来解析用户在表单的选择状态,然后我们和后端约定一个固定参数search,把这堆数据发过去,额这里约定参数只是我觉得这样比较简单明了,后面就是ajax获取数据后的操作。。。callback。。。

  6. over, 点击这里查看demo

本文标题:后台系统框架开发的理解之搜索表单篇
本文链接:https://56way.com/p/78.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。