商品模块——文件上传和商品详情（1）

---

主要任务：文件上传和商品详情

---

上节课的优化

1. 创建goods表
   
2. 将CodeBuilder中的代码作如下修改

		//定义占位符变量，给个值
		String modelClass = "GoodsCondition";
		String model = "Goods";
		String modelName = "goods";

3. 修改分类表时，改了一些内容，先更新下jsp.vm模板（在</form>之前），然后再自动生成goods的代码。

	<div style="text-align:right;"> 
		<ul id="pageLimit"></ul> 
	</div>

	<input class="btn2 formButton" type="button" value="保存"	onClick="create()" />
	<input class="btn2 formButton" type="button" value="关闭"	onClick="closeDiv()" />
	<script type="text/javascript">
		function closeDiv(){
			$(".box").hide();
		}
	</script>
	<style type="text/css">
		.btn2{
			width:40% !important;
			margin-left:10px;
		}
	</style>

4. 自动生成代码，会发现，对于商品来说，字段太多，新增页面太长，改下，让它有滚动条；变宽点，位置稍微挪一下。（部分代码如下：在Goods.jsp中）

<div class="box">
		<!-- overflow:加滚动条 -->
		<div id="loginDiv" style="height:600px;width:800px;overflow:scroll;position:fixed;top:20%;left:20%;">
			<p class="logTitle">新增</p>

5. 测试：http://localhost:8080/shop/goods/list.do
   

6. 文件上传

多数文件上传都是通过表单形式提交给后台服务器的，因此，要实现文件上传功能，就需要提供一个文件上传的表单，而该表单必须满足以下3个条件：

1. form表单的method属性设置为post；
2. form表单的enctype属性设置为multipart/form-data（form有个默认编码方式：application/x-www-form-urlencoded不是不能上传文件，是只能上传文本格式的文件，multipart/form-data是将文件以二进制的形式上传，这样可以实现多种类型的文件上传）。
3. 提供<input type=“file” name=“filename” />的文件上传输入框

在goods.jsp中添加

	<div class="formInput">
		<span>商品图片：</span> 
		<input id="file" type="file" name="uploadfile" multiple="multiple" />
	</div>	

注意原来的新增保存用的$(“#saveForm”).serialize()来提交form表单的数据，但是缺点是不能提交file文件。

//保存
function create(){
	//$("#saveForm").serialize()这种方式不能提交file类型的数据。所以改成下面那种方式
	var formData = new FormData($("#saveForm")[0]);
	//formData = [Object object]
	alert(formData.get('goodName'));
	alert(formData.get('uploadfile'));

	$.ajax({
		type: "post",
		url:"${ ctx}/goods/create.do",
		data: formData,
		async: false,//从这往下3行必须要写，不然file文件传不到后台去
		processData: false,
		contentType: false,
		success:function(data){
			if(data){
				alert("保存成功");
				window.location.reload();
			}else{
				alert("失敗");
			}
		}
	});

7. 文件上传-后台代码

Spring MVC提供了可以直接上传文件的一个类： CommonsMultipartResolver。 CommonsMultipartResolver 这个类的实现方式其实Spring MVC内部通过Apache Commons FileUpload技术实现的，所以Spirng MVC的文件上传还需要依赖Apache Commons FileUpload的组件，即需要导入支持文件上传的相关JAR包

步骤：
（1）导入jar包（可去maven下载）

commons-fileupload-1.3.3.jar 、commons-io-2.6.jar

（2）Springmvc配置文件中配置文件上传的解析器CommonsMultipartResolver

	<bean id="multipartResolver"          	     
            class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
             <property name="defaultEncoding" value="UTF-8" />
             <property name="maxUploadSize" value="2097152" />
     </bean>

（3）在GoodsCondition中书写代码如下：(添加路径变量后)

package com.lf.model;

import java.util.List;

import org.springframework.web.multipart.MultipartFile;

public class GoodsCondition extends Goods {
	private List<MultipartFile> uploadFile;

	public List<MultipartFile> getUploadFile() {
		return uploadFile;
	}

	public void setUploadFile(List<MultipartFile> uploadFile) {
		this.uploadFile = uploadFile;
	}
}

（4）在GoodsController中书写代码如下：

package com.lf.controller;

import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.github.pagehelper.PageInfo;
import com.lf.model.MenuCondition;
import com.lf.service.MenuService;
import com.lf.model.GoodsCondition;
import com.lf.service.GoodsService;

@RequestMapping("/goods")
@Controller
public class GoodsController {

	@Autowired
	private GoodsService goodsService;
	@Autowired
	private MenuService menuService;
	
	@ResponseBody
	@RequestMapping("/delete.do")
	public boolean delete(Integer id){
		try{
			goodsService.delete(id);
		}catch(Exception e){
			System.out.println(e.getMessage());
			return false;
		}
		return true;
	}
	
	@ResponseBody
	@RequestMapping("/findById.do")
	public GoodsCondition findById(Integer id){
		return goodsService.findById(id);
	}
	
	@ResponseBody
	@RequestMapping("/create.do")
	public boolean create(GoodsCondition goods,HttpServletRequest request){
		try{
			String path = request.getSession().getServletContext().getRealPath("/");
			System.out.println(path);
			goodsService.create(goods,path);
		}catch(Exception e){
			System.out.println(e.getMessage());
			return false;
		}
		return true;
	}
	
	@RequestMapping("/list.do")
	public String list(GoodsCondition goods,Model model,
			@RequestParam(required=true,value="pageNum",defaultValue="1") Integer pageNum,
			@RequestParam(required=true,value="pageSize",defaultValue="3") Integer pageSize
			){
		PageInfo<GoodsCondition> goodss  = goodsService.list(pageNum,pageSize,goods);
		model.addAttribute("pageInfo", goodss);
		
		List<MenuCondition> menuList = menuService.list(null);
		model.addAttribute("menuList", menuList);
		return "goods";
	}
	
	@ResponseBody
	@RequestMapping("/listData.do")
	public List<GoodsCondition> list(GoodsCondition goods,Model model){
		return goodsService.list(goods);
	}
}

OK，先到这，还有部分剩余。下节课继续~