###Springmvc封装复杂表单数据:表单提交多个实体类的参数【对象类型参数,自动封装】name属性值不能重复。和实体类属性名一致

###Springmvc封装复杂表单数据:表单提交多个实体类的参数【对象类型参数,自动封装】name属性值不能重复。和实体类属性名一致。

=====================【很简单，实例加深印象】

===实例：

===页面：

只看标签。===js是提交时 封装参数用的。===额外学习。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:include page="${pageContext.request.contextPath }/layout/inc.jsp"></jsp:include>
<style>
<!--

-->
tr{
	font-size: 12px;
}
</style>
<div style="padding:10px 10px 10px 10px">
	<form id="itemAddForm" class="itemForm" method="post">
	    <table cellpadding="5">
	        <tr>
	            <td style="font: italic;">商品类目:</td>
	            <td>
	            	<a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a>
	            	<input type="hidden" name="cid" style="width: 280px;"></input>
	            </td>
	        </tr>
	        <tr>
	            <td>商品标题:</td>
	            <td><input class="easyui-textbox" type="text" name="title" data-options="required:true" style="width: 280px;"></input></td>
	        </tr>
	        <tr>
	            <td>商品卖点:</td>
	            <td><input class="easyui-textbox" name="sellPoint" data-options="multiline:true,validType:'length[0,150]'" style="height:60px;width: 280px;"></input></td>
	        </tr>
	        <tr>
	            <td>商品价格:</td>
	            <td><input class="easyui-numberbox" type="text" name="priceView" data-options="min:1,max:99999999,precision:2,required:true" />
	            	<input type="hidden" name="price"/>
	            </td>
	        </tr>
	        <tr>
	            <td>库存数量:</td>
	            <td><input class="easyui-numberbox" type="text" name="num" data-options="min:1,max:99999999,precision:0,required:true" /></td>
	        </tr>
	        <tr>
	            <td>条形码:</td>
	            <td>
	                <input class="easyui-textbox" type="text" name="barcode" data-options="validType:'length[1,30]'" />
	            </td>
	        </tr>
	        <tr>
	            <td>商品图片:</td>
	            <td>
	            	 <a href="javascript:void(0)" class="easyui-linkbutton picFileUpload">上传图片</a>
	                 <input type="hidden" name="image"/>
	            </td>
	        </tr>
	        <tr>
	            <td>商品描述:</td>
	            <td>
	                <textarea style="width:800px;height:300px;visibility:hidden;" name="itemDesc"></textarea>
	            </td>
	        </tr>
	        <tr class="params hide">
	        	<td>商品规格:</td>
	        	<td>
	        		
	        	</td>
	        </tr>
	    </table>
	    <input type="hidden" name="itemParams"/>
	</form>
	<div style="padding:5px">
	    <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="submitForm()">提交</a>
	    <a href="javascript:void(0)" class="easyui-linkbutton" οnclick="clearForm()">重置</a>
	</div>
</div>
<script type="text/javascript">
	var itemAddEditor ;
	//页面初始化完毕后执行此方法
	$(function(){
		//创建富文本编辑器
		itemAddEditor = E3MALL.createEditor("#itemAddForm [name=itemDesc]");
		//初始化类目选择和图片上传器
		E3MALL.init({fun:function(node){
			//根据商品的分类id取商品 的规格模板，生成规格信息。第6天内容。===选中分类后加载规格末班信息
			//E3MALL.changeItemParam(node, "itemAddForm");//===404注释掉
			E3MALL.changeItemParam(node, "itemAddForm");
		}});
	});
	//提交表单
	function submitForm(){
		//有效性验证
		if(!$('#itemAddForm').form('validate')){
			$.messager.alert('提示','表单还未填写完成!');
			return ;
		}
		//取商品价格，单位为“分”
		$("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100);
		//同步文本框中的商品描述======同步
		itemAddEditor.sync();
		//取商品的规格===###
		var paramJson = [];
		$("#itemAddForm .params li").each(function(i,e){
			var trs = $(e).find("tr");//JQuery对象  
			var group = trs.eq(0).text();
			var ps = [];
			for(var i = 1;i<trs.length;i++){
				var tr = trs.eq(i);
				ps.push({
					"k" : $.trim(tr.find("td").eq(0).find("span").text()),
					"v" : $.trim(tr.find("input").val())
				});
			}
			paramJson.push({
				"group" : group,
				"params": ps
			});//===数组添加json对象
		});
		
		//把json对象转换成字符串
		paramJson = JSON.stringify(paramJson);//==转String===封装整个规格  参数//===不能直接提交?===显示的规格都是在 tr里,规格数据没有 name属性
		$("#itemAddForm [name=itemParams]").val(paramJson);
		
		//=================【参数组装完毕】ajax的post方式提交表单
		//$("#itemAddForm").serialize()将表单序列号为key-value形式的字符串
		//http请求体数据格式:username=zhangsan&age=19&address=.
		$.post("/item/save",$("#itemAddForm").serialize(), function(data){
			if(data.status == 200){
				$.messager.alert('提示','新增商品成功!');
			}
		});
	}
	
	function clearForm(){
		$('#itemAddForm').form('reset');
		itemAddEditor.html('');
	}
</script>

===controller：

/**
	 * 需求:保存商品对象
	 * 请求:/item/save
	 * 参数:TbItem item,TbItemDesc itemDesc,String praram  ===规格：String，页面表单序列化的一个String参数
	 * 返回值:json格式E3mallResult
	 * 
	 *==============页面传递都是: name=itemParams ,这里可以用praram接收规格参数??? 
	 * 
	 */
	@RequestMapping("/item/save")
	@ResponseBody
	//===######【Springmvc封装表单多个实体类的数据】：规律:
	//===######【参数自动封装】name属性值不能重复。和实体类属性名一致
	//==【###有name属性的直接对象参数,(多个对象参数也行)没有name的单独接收--亲测】
	public E3mallResult saveItem(TbItem item,TbItemDesc itemDesc,String praram){
		//调用远程service服务方法
		E3mallResult result = itemService.saveItem(item, itemDesc,praram);
		return result;
	}

service：

/**
	 * 需求:保存商品对象
	 * 参数:TbItem item,TbItemDesc itemDesc,ItemParam praram
	 * 返回值:E3mallResult
	 */
	public E3mallResult saveItem(TbItem item, TbItemDesc itemDesc,String itemParams) {
		// 生成商品id
		//毫秒+随机数
		long itemId = IDUtils.genItemId();
		item.setId(itemId);
		//商品状态，1-正常，2-下架，3-删除'
		item.setStatus((byte)1);
		//创建时间
		Date date = new Date();
		item.setCreated(date);
		item.setUpdated(date);
		
		//保存商品对象
		itemMapper.insert(item);
		
		//保存商品描述对象
		itemDesc.setItemId(itemId);
		itemDesc.setCreated(date);
		itemDesc.setUpdated(date);
		
		//保存商品描述对象
		itemDescMapper.insert(itemDesc);
		
		//创建商品规格对象,封装规格值
		TbItemParamItem itemParamItem = new TbItemParamItem();
		//设置相关属性值
		itemParamItem.setItemId(itemId);
		itemParamItem.setParamData(itemParams);//###### 具体规格参数信息 ，数据库自保存一个字符串。
		itemParamItem.setCreated(date);
		itemParamItem.setUpdated(date);
		
		
		//保存商品规格参数
		itemParamItemMapper.insertSelective(itemParamItem);
		
		return E3mallResult.ok();
	}

dao：mybatis面向接口开发。

调用逆向工程生成的接口函数。===######单表操作都 不需自定义 接口函数和SQL。===insertSelective比insert方法 对应的SQL语句更高效。

<insert id="insert" parameterType="cn.e3.pojo.TbItemParamItem" >
    insert into tb_item_param_item (id, item_id, created, 
      updated, param_data)
    values (#{id,jdbcType=BIGINT}, #{itemId,jdbcType=BIGINT}, #{created,jdbcType=TIMESTAMP}, 
      #{updated,jdbcType=TIMESTAMP}, #{paramData,jdbcType=LONGVARCHAR})
  </insert>
  <insert id="insertSelective" parameterType="cn.e3.pojo.TbItemParamItem" >
    insert into tb_item_param_item
    <trim prefix="(" suffix=")" suffixOverrides="," >
      <if test="id != null" >
        id,
      </if>
      <if test="itemId != null" >
        item_id,
      </if>
      <if test="created != null" >
        created,
      </if>
      <if test="updated != null" >
        updated,
      </if>
      <if test="paramData != null" >
        param_data,
      </if>
    </trim>
    <trim prefix="values (" suffix=")" suffixOverrides="," >
      <if test="id != null" >
        #{id,jdbcType=BIGINT},
      </if>
      <if test="itemId != null" >
        #{itemId,jdbcType=BIGINT},
      </if>
      <if test="created != null" >
        #{created,jdbcType=TIMESTAMP},
      </if>
      <if test="updated != null" >
        #{updated,jdbcType=TIMESTAMP},
      </if>
      <if test="paramData != null" >
        #{paramData,jdbcType=LONGVARCHAR},
      </if>
    </trim>
  </insert>