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

小无路 2016-04-24 vue.js 后台系统表单搜索

后台系统之搜索 表单模块

搜索模块，我的思路是给让后台给一个数据格式配置，如何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

本文标题：后台系统框架开发的理解之搜索表单篇

本文链接：https://56way.com/p/78.html

作者授权：除特别说明外，本文由无路原创编译并授权小无路刊载发布。

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

后台系统之搜索表单模块

具体步骤如下

发表评论 取消回复

发表评论取消回复