暑假学习13（7.28 周二）

       今天的工程是修改昨天返回按钮，返回页面会出现部分内容消失，这主要是因为之前初始化页面时加了对应的commudityId而在验证出错时没有传回对应的信息，导致一些内容无法找到，出现页面空缺的现象。所以我们在对应的controller中加入值的接收以使我们在后台的代码中可以用个一个form来找到对应的显示在页面上的属性。对应的省和市问题才可以得到解决，当然还有商品的供应商和商品列表问题。

       注意springMVC的标签使用:<form:form>以及对应的<form:input>标签的使用。这两个标签中都有path属性，这个属性的作用相当于html标签中的input标签和form标签中的name和value属性，所以在使用时，没有绑定数据值但是还可以接收传值，当然此时对应的path值必须为属性名，这样才可以绑定数据。

        在修改返回按钮功能之后，我们修改了商品的修改和添加信息功能，因为之前传入的图片是一个，现在要求传入多个图片，首先是在修改商品信息的页面，我们需要添加七个商品图片的添加按钮，这些按钮都是为了更改对应的商品图片。修改时我们需要对应的在页面CommodityFoem中添加对应的多个pictureId以区别不同的图片。然后通过<input type="file" >标签将对应的本地图像经过后台上传到数据库中。

     首先解决的页面的排版问题：使用了一个table来列举商品的信息，注意第一行的第一列属性中有rowspan属性，这个属性用来表示该列跨几行，在下边一个列属性中有colspan是跨几列的属性值。在这个中，我们定义了一个占据9行的一列用来显示我们的图像，图像调用了showImage的controller方法来显示图片。style属性来设置图片的长和宽，注意该项的写法，style="width:300px;height:400px"

<td rowspan="9" style="height:300px;width:400px;"><img alt="" src="showImage?pictureId=${commodityForm.pictureId}" style="height:300px;width:400px;"></td>

       但是，对于多张图片，我们需要显示在以一列中，一个大图片，下边多个下图片，而且可以对应的点击一个图片将对应的图片显示在大的图片中。这需要我们使用一个新的样式表，然后引用新的样式表中的格式对应显示图片内容，样式表是css文件夹下的style.css。当然使用这个样式表，我们需要在对应的jsp页面上使用，对应的class值。因为div以及其他标签中的class值是用来找到对应的样式表的。然后我们需要设置点击和左右按钮的功能，这就需要对应的jquery,即在js中要添加script.js文件。添加点击链接执行的操作。对应页面实现的写法如下：

<div id="tFocus">

<div class="prev" id="prev"></div>

<div class="next" id="next"></div>

<ul id="tFocus-pic">

<li><a href="#"><img src="images/706-131119110625157.jpg" width="338" height="243" alt="" /></a></li>

<li><a href="#"><img src="images/645-1311191056130-L.jpg" width="338" height="243" alt=" " /></a></li>

<li><a href="#"><img src="images/706-13111Q1234X03.jpg" width="338" height="243" alt="" /></a></li>

<li><a href="#"><img src="images/645-13111Q354530-L.jpg" width="338" height="243" alt="" /></a></li>

<li><a href="#"><img src="images/706-13111Q359433J.jpg" width="338" height="243" alt="" /></a></li>

<li><a href="#"><img src="images/645-13111Q136160-L.jpg" width="338" height="243" alt="" /></a></li>

</ul>

<div id="tFocusBtn">

<a href="javascript:void(0);" id="tFocus-leftbtn">上一张</a>

<div id="tFocus-btn">

<ul>

<li class="active"><img src="images/706-131119110625157.jpg" width="87" height="57" alt="" /></li>

<li><img src="images/645-1311191056130-L.jpg" width="87" height="57" alt="  " /></li>

<li><img src="images/706-13111Q1234X03.jpg" width="87" height="57" alt="" /></li>

<li><img src="images/645-13111Q354530-L.jpg" width="87" height="57" alt="" /></li>

<li><img src="images/706-13111Q359433J.jpg" width="87" height="57" alt="" /></li>

<li><img src="images/645-13111Q136160-L.jpg" width="87" height="57" alt="" /></li>

</ul>

</div>

<a href="javascript:void(0);" id="tFocus-rightbtn">下一张</a>

</div>

</div><!--tFocus end-->

<script type="text/javascript">addLoadEvent(Focus());</script>

        在上边的代码使用中，需要注意对应的图片设置大小，因为可能和div样式表中的大小冲突出现显示图片不完整现象。在ul无序标签中，<li class="active">这个表示该项被默认选中。下面对应的script.js中的代码在工程中查看吧，地址：https://git.oschina.net/kain80817/agriculture-mvc.git

       在修改商品信息中，因为涉及到input的type为file标签，我们需要在对应的controller中加入参数：

@RequestParam(value = "file", required = false) MultipartFile file

@RequestParam(value = "attachments", required = false) MultipartFile attachments

      这两个参数value都是对应的input中的name属性，MultipartFile表明传入的是一个文件。在执行添加商品的service中，我们涉及了一个select，这个sql语句是执行了从数据库中自动生成一个pictureId.它的sql文写法如下：

<select id="getSeq" resultClass="java.lang.Integer">

SELECT _nextval('commodityId')

</select>

      在service中addCommodity的写法如下：

public boolean addCommodity(CommodityForm frm) {

Integer sequee = queryDao.executeForObject("Commodity.getSeq", null, Integer.class);

          //得到一个自增的commundityId；

String commodityId = frm.getUpdateTime().substring(0, 4) + String.format("%011d", sequee);

          //将得到的Id与更新日期想拼接

frm.setCommodityId(commodityId);

if (frm.getPicture().length != 0) {            //可以得到图片

frm.setPictureId(commodityId);

int picResult = updateDao.execute("Commodity.addPicture", frm);   //插入图片

if (picResult != 1) {

return false;

}

}

int result = updateDao.execute("Commodity.addCommodity", frm);//插入除图片外的其他数据

if (result == 1) {                                                            //插入成功

return true;

}

return false;                                                       //插入失败

}

       

转载于:https://my.oschina.net/u/2411765/blog/484925