newstyles项目实战（十二）规格参数模板生成表单、表单参数提交

    规格参数模板生成表单

 上一节只是生成了一个模板，那么我们怎么使用呢？我们需要将在添加商品时读取出来，生成一个表单，然后在页面上进行显示，然后对应的参数后面会随添加商品中的其它数据一起提交到数据库。基本流程为上一节的时序图中的第2步中。

   所以来分析一下我们的需求：

   在商品添加的jsp中，可以发现，我们在点击商品类目的时候会将列表的内容读取出来，那么前端是怎么执行的呢？

首先，分析一下为当我们选择好了商品的分类id，就会弹出一个表单，表单中的内容为我们读取的之前保存在数据库中的模板。

之后我们找到此方法：

   changeItemParam : function(node,formId){
    	$.getJSON("/item/param/query/itemcatid/" + node.id,function(data){
			  if(data.status == 200 && data.data){
				 $("#"+formId+" .params").show();
				 var paramData = JSON.parse(data.data.paramData);
				 var html = "<ul>";
				 for(var i in paramData){
					 var pd = paramData[i];
					 html+="<li><table>";
					 html+="<tr><td colspan=\"2\" class=\"group\">"+pd.group+"</td></tr>";
					 
					 for(var j in pd.params){
						 var ps = pd.params[j];
						 html+="<tr><td class=\"param\"><span>"+ps+"</span>: </td><td><input autocomplete=\"off\" type=\"text\"/></td></tr>";
					 }
					 
					 html+="</li></table>";
				 }
				 html+= "</ul>";
				 $("#"+formId+" .params td").eq(1).html(html);
			  }else{
				 $("#"+formId+" .params").hide();
				 $("#"+formId+" .params td").eq(1).empty();
			  }
		  });
    },

   分析代码可以发现，当请求的node.id成功时，会将读取paramData，并将其转换为json格式，之后进行html的拼接，拼接内容为生成一个表单，表单的内容其实是有之前的模板创建的时候就已经做好了，这个地方仅仅是读取上一步储存在数据库中的结果。从上面图片中可以得知，其参数为一个回掉方法，也就说当我们点击完叶子结点之后，会毁掉上面的代码。

    之后进行测试，结果并没有取出来，这是为什么呢？

可以发现，这是由于我们的Service层有了错误，解决方案为：

下面分析一下前面使用的selectByExample和selectByExampleWithBLOBs的不同：

这个需要我们来分析一下ItemParamMapper对应的xml文件，也就是TbItemParam对应的xml映射文件：

首先可以看到对于查找的参数的定义：

然后看一下图中的1和2.1是定义了出了param_data之外的所有的字段，而2则定义了这个字段，之后咱看一下组装的sql代码：

可以看到selectByExample方法引用的是1中的内容，而没有2中的内容，在比较一下selectByExampleWithBLOBs方法:

可以看到其包含了对于两部分的引用，所以，但我们遇到大文本处理时，需要使用selectByExampleWithBLOBs方法。

测试一下：

可以看到，但我们选择完成泪目之后，对应的列表显示了出来：

\

商品参数的提交：

那么如何将商品的规格参数进行添加呢？也就是说我们如何将规格参数和表单中的内容一块提交到数据库呢？(提交表单之前，先把规格参数表单中的内容转换成json数据然后跟商品基本信息、商品描述同时提交给后台。保存至数据库。)

    结合数据库分析，这些内容需要提交到数据库的专门的记录这些参数的表中，所以这个是要存储的位置。而前端是怎么实现的呢？

  同时可以看到请求的内容为itemParams，储存的轮径为item/save。其中在将数据转换为json格式的数据之后将其储存到表单的Hidden域之中，随着表单一块提交。

接下来实现后端的逻辑处理过程：

Dao层：

需要向tb_item_param_item表中添加数据，此过程也是单表的操作，并不涉及到多个表之间的连接等，所以可以使用逆向工程生成的代码。

Servcie层：

接收规格参数的内容，和商品id。拼装成pojo调用mapper 的方法tb_item_param_item表中添加数据返回NewstylesResult。对于表单的提交工作我们之前已经修改过了，所以同样的再修改一下与商品添加相关的接口和实现类就可以满足我们的要求。

修改此接口，在参数列表中添加新的字段，用于提交规格参数的内容；

	NewstylesResult createItem(TbItem item,String desc,String itemParams) throws Exception;

之后在对应的实现类中实现，还需要我们增加一个此实现类的一个私有方法，用来处理提交商品规格参数的动作：

	private NewstylesResult insertParamItem(Long itemId,String itemParams){
		//创建新的对象来存储要储存的信息
		TbItemParamItem itemParamItem = new TbItemParamItem();
		//补全商品规格参数中没有完整的字段
		itemParamItem.setItemId(itemId);
		itemParamItem.setParamData(itemParams);
		itemParamItem.setCreated(new Date());
		itemParamItem.setUpdated(new Date());
		//向表格中插入数据
		itemParamItemMapper.insert(itemParamItem);
		return NewstylesResult.ok();
	}

     之后我们在接口的实现类中调用此方法，实现同步，当我们需要保证对应时，这个是通过itemId实现商品的对应的，这个外键保证了商品能够对应正确的规格参数。

	@Override
	public NewstylesResult createItem(TbItem item,String desc,String itemParams) throws Exception{
		//将item补全
		//1.生成商品id，可以使用uuid，不过在url中使用时，不美观
		//可以使用IDUtils类生城
		Long itemId = IDUtils.getItemId();
		item.setId(itemId);
		
		//设置商品的状态，1正常，2，下架，3，删除
		item.setStatus((byte)1);
		
		//商品的创建时间和更新时间
		item.setCreated(new Date());
		item.setUpdated(new Date());
		//插入到数据库
		itemMapper.insert(item);
		//添加商品描述
		NewstylesResult result = insertItemDesc(itemId, desc);
		if(result.getStatus() != 200){
			throw new Exception();
		}
		/***********************************************************************************/
		//添加商品规格信息
        result = insertParamItem(itemId,itemParams);
		if(result.getStatus() != 200){
			throw new Exception();
		}
		return NewstylesResult.ok();
	}

    可以看到标识线后面的代码对创建的私有方法的调用，并判断其返回状态是否合理。

Controller层：

由于service层的业务逻辑发生了变化，所以我们需要对应的变动一下controller层的逻辑：

添加了新的参数，这个是实现了对私有方法处理过程所需参数的传递，也就是说在原来的controller控制的方法中添加这个参数即可。

测试一下：

数据库中的对应字段的展示：

tb_item表中：

tb_item_desc表中：

tb_item_param表中：

tb_item_param_item表格中：

可以发现，能够同时提交我们的内容了。