分布式商城项目-后台开发4-商品管理功能实现（三）

通常我们在商城页面中浏览商品的时候，都会有一组图片而不是一张，所以对于一件商品来说，它除了包含主图以外，还需要包含一组预览图，相应的在我们的后台就需要有对预览图的管理功能，这里呢我们就专门来写一个图片管理的页面：

一样使用列表管理

图片查询

首先完成查询图片显示的功能，编写controller

@RequestMapping("/toProImg")
	private String toProImg(ModelMap model, String proid) {
		Product product = productService.selectProductById(proid);
		if (product.getSubimages() != null) {
			String subimages = product.getSubimages();
			String[] proimg = subimages.split(",");
			List<Images> proimgList = new ArrayList<>();
			for (int i = 0; i < proimg.length; i++) {
				Images images=new Images();
				images.setIndex(i);
				images.setUrl(proimg[i]);
				proimgList.add(images);
			}
			model.addAttribute("proImg", proimgList);
		}
		model.addAttribute("serverUrl", Config.getFileserver());
		model.addAttribute("product", product);
		return "ProImg";
	}

这里把数据库中读出来的数据通过字符串分割，取出每张图片的url这里为了方便后续操作，我们给给张图片加上索引，所以先创建一个Images类：

package cn.yuechenc.pojo;
import java.io.Serializable;
public class Images implements Serializable{
	int index;
	public int getIndex() {
		return index;
	}
	public void setIndex(int index) {
		this.index = index;
	}
	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}
	String url;
}

然后再controller里面给他加上索引，这样我们就得到了所有的数据，只要显示到页面就行了：

<table class="mws-datatable-fn mws-table">
	<thead>
		<tr>
			<th class="tdcenter">图片</th>
			<th class="tdcenter">操作</th>
		</tr>
	</thead>

	<tbody>
		<c:forEach items="${proImg}" var="pro">
			<tr class="gradeX">
				<td class="tdcenter"><img style="height: 200px" alt=""
					src="${serverUrl}${pro.url}"></td>
				<td class="tdcenter"><a
					href="${pageContext.request.contextPath}/product/delPic?proid=${product.proid}&aa=${pro.index}"
					class="mws-i-24 i-pencil-edit">删除图片</a></td>
			</tr>
		</c:forEach>
	</tbody>
</table>

在table中使用img标签，设置其值为${serverUrl}${pro.url}

上传图片

上传图片的操作和之前的上传主图一样，我们只需要修改数据库中的值就行了，因为是多张图片使用字符串拼接
controller如下：

@RequestMapping("/uploadPic")
	private String uploadPic(ModelMap model, String proid, @RequestParam("file") MultipartFile file) throws Exception {
		String filename = file.getOriginalFilename();
		String url="";
		if (filename != null && !filename.equals("")) {
			FastDFSClient dfs = new FastDFSClient();
			String extName = filename.substring(filename.lastIndexOf(".") + 1);
			url = dfs.uploadFile(file.getBytes(), extName);
		}
		Product product = productService.selectProductById(proid);
		String newImages="";
		if(product.getSubimages()!=null){
			String subimages=product.getSubimages();
			newImages=subimages+","+url;
		}else {
			newImages=url;
		}
		product.setSubimages(newImages);
		int rtn=productService.updateProduct(product);
		if(rtn>0){
			model.addAttribute("msg", "上传图片成功！");
		}
		else {
			model.addAttribute("msg", "上传图片失败！");
		}
		return "redirect:/product/toProImg?proid="+product.getProid();
	}

这时候，就可以测试一下，选择一张图片上传


可见上传成功了

删除图片

删除图片相当于也是修改字符串，把对应的字符串删除
controller

@RequestMapping("/delPic")
	private String delPic(ModelMap model,String proid,int aa){
		Product product = productService.selectProductById(proid);
		if (product.getSubimages() != null) {
			String subimages = product.getSubimages();
			String[] proimg = subimages.split(",");
			String newImg="";
			for (int i = 0; i < proimg.length; i++) {
				if(aa!=i){
					if(newImg!=null && !newImg.equals("")){
						newImg=newImg+","+proimg[i];
					}else {
						newImg=proimg[i];
					}
				}
			}
			System.out.println(newImg);
			product.setSubimages(newImg);
			productService.updateProduct(product);
		}
		return "redirect:/product/toProImg?proid="+product.getProid();
	}

再次测试，此时有两张图片，我们点击删除


删除成功，到此所有的商品管理就做完了。