[TOC] ## 步骤 1 : 先运行，看到效果，再学习 先将完整的 spring 项目（向老师要相关资料），配置运行起来，确认可用之后，再学习做了哪些步骤以达到这样的效果。 ## 步骤 2 : 模仿和排错 在确保可运行项目能够正确无误地运行之后，再严格照着教程的步骤，对代码模仿一遍。 模仿过程难免代码有出入，导致无法得到期望的运行结果，此时此刻通过比较**正确答案** ( 可运行项目 ) 和自己的代码，来定位问题所在。 采用这种方式，**学习有效果，排错有效率**，可以较为明显地提升学习速度，跨过学习路上的各个槛。 ## 步骤 3 : 页面截图 重启tomcat,通过访问地址 `http://127.0.0.1:8080/tmall_ssm/admin_productImage_list?productId=4` 可以看到产品图片管理的界面 注： 这productId=4是产品的id，根据你的实际运行情况，采取不同的id值  ## 步骤 4 : ProductImage ProductImage直接使用自动生成的，没有变化，略过不表 ## 步骤 5 : ProductImageService 创建ProductImageService，提供CURD。 同时还提供了两个常量，分别表示单个图片和详情图片： ~~~ String type_single = "type_single"; String type_detail = "type_detail"; ~~~ 除此之外，还提供了根据产品id和图片类型查询的list方法 `List list(int productId, String type);` ~~~ package com.dodoke.tmall.service; import java.util.List; import com.dodoke.tmall.pojo.ProductImage; public interface ProductImageService { String type_single = "type_single"; String type_detail = "type_detail"; void add(ProductImage pi); void delete(int id); void update(ProductImage pi); ProductImage get(int id); List list(int productId, String type); } ~~~ ## 步骤 6 : ProductImageServiceImpl 创建ProductImageServiceImpl，实现CURD相关方法 关于list方法，使用了ProductImageExample 类，这样的写法表示同时匹配productId和type。 ~~~ example.createCriteria().andProductIdEqualTo(productId).andTypeEqualTo(type); ~~~ ~~~ package com.dodoke.tmall.service.impl; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.dodoke.tmall.mapper.ProductImageMapper; import com.dodoke.tmall.pojo.ProductImage; import com.dodoke.tmall.pojo.ProductImageExample; import com.dodoke.tmall.service.ProductImageService; @Service public class ProductImageServiceImpl implements ProductImageService { @Autowired ProductImageMapper productImageMapper; @Override public void add(ProductImage pi) { productImageMapper.insert(pi); } @Override public void delete(int id) { productImageMapper.deleteByPrimaryKey(id); } @Override public void update(ProductImage pi) { productImageMapper.updateByPrimaryKeySelective(pi); } @Override public ProductImage get(int id) { return productImageMapper.selectByPrimaryKey(id); } @Override public List list(int productId, String type) { ProductImageExample example = new ProductImageExample(); example.createCriteria().andProductIdEqualTo(productId).andTypeEqualTo(type); example.setOrderByClause("id desc"); return productImageMapper.selectByExample(example); } } ~~~ ## 步骤 7 : ProductImageController ProductImageController提供了list,add和delete方法。 edit和update没有相关业务，所以不提供。 ~~~ package com.dodoke.tmall.controller; import java.awt.image.BufferedImage; import java.io.File; import java.util.List; import javax.imageio.ImageIO; import javax.servlet.http.HttpSession; 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 com.dodoke.tmall.pojo.Product; import com.dodoke.tmall.pojo.ProductImage; import com.dodoke.tmall.service.ProductImageService; import com.dodoke.tmall.service.ProductService; import com.dodoke.tmall.util.ImageUtil; import com.dodoke.tmall.util.UploadedImageFile; @Controller @RequestMapping("") public class ProductImageController { @Autowired ProductService productService; @Autowired ProductImageService productImageService; /** * 新增产品图片 * @param pi 产品图片对象 * @param session 用于在后续获取当前应用的路径 * @param uploadedImageFile 用于接受上传的图片 * @return 页面路径 */ @RequestMapping("admin_productImage_add") public String add(ProductImage pi, HttpSession session, UploadedImageFile uploadedImageFile) { productImageService.add(pi); String fileName = pi.getId() + ".jpg"; String imageFolder; String imageFolder_small = null; String imageFolder_middle = null; if (ProductImageService.type_single.equals(pi.getType())) { imageFolder = session.getServletContext().getRealPath("img/productSingle"); imageFolder_small = session.getServletContext().getRealPath("img/productSingle_small"); imageFolder_middle = session.getServletContext().getRealPath("img/productSingle_middle"); } else { imageFolder = session.getServletContext().getRealPath("img/productDetail"); } File f = new File(imageFolder, fileName); f.getParentFile().mkdirs(); try { uploadedImageFile.getImage().transferTo(f); BufferedImage img = ImageUtil.change2jpg(f); ImageIO.write(img, "jpg", f); if (ProductImageService.type_single.equals(pi.getType())) { File f_small = new File(imageFolder_small, fileName); File f_middle = new File(imageFolder_middle, fileName); ImageUtil.resizeImage(f, 56, 56, f_small); ImageUtil.resizeImage(f, 217, 190, f_middle); } } catch (Exception e) { e.printStackTrace(); } return "redirect:admin_productImage_list?productId=" + pi.getProductId(); } /** * 删除产品图片 * @param id 产品图片id * @param session 用于在后续获取当前应用的路径 * @return 页面路径 */ @RequestMapping("admin_productImage_delete") public String delete(int id, HttpSession session) { ProductImage pi = productImageService.get(id); String fileName = pi.getId() + ".jpg"; String imageFolder; String imageFolder_small = null; String imageFolder_middle = null; if (ProductImageService.type_single.equals(pi.getType())) { imageFolder = session.getServletContext().getRealPath("img/productSingle"); imageFolder_small = session.getServletContext().getRealPath("img/productSingle_small"); imageFolder_middle = session.getServletContext().getRealPath("img/productSingle_middle"); File imageFile = new File(imageFolder, fileName); File f_small = new File(imageFolder_small, fileName); File f_middle = new File(imageFolder_middle, fileName); imageFile.delete(); f_small.delete(); f_middle.delete(); } else { imageFolder = session.getServletContext().getRealPath("img/productDetail"); File imageFile = new File(imageFolder, fileName); imageFile.delete(); } productImageService.delete(id); return "redirect:admin_productImage_list?productId=" + pi.getProductId(); } /** * 产品列表 * @param productId 产品id * @param model 模型 * @return 页面路径 */ @RequestMapping("admin_productImage_list") public String list(int productId, Model model) { Product p = productService.get(productId); List<ProductImage> pisSingle = productImageService.list(productId, ProductImageService.type_single); List<ProductImage> pisDetail = productImageService.list(productId, ProductImageService.type_detail); model.addAttribute("p", p); model.addAttribute("pisSingle", pisSingle); model.addAttribute("pisDetail", pisDetail); return "admin/listProductImage"; } } ~~~ ## 步骤 8 : listProductImage.jsp 增加`listProductImage.jsp` ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@include file="../include/admin/adminHeader.jsp"%> <%@include file="../include/admin/adminNavigator.jsp"%> <title>产品图片管理</title> <div class="workingArea"> <ol class="breadcrumb"> <li><a href="admin_category_list">所有分类</a></li> <li><a href="admin_product_list?categoryId=${p.category.id}">${p.category.name}</a></li> <li class="active">${p.name}</li> <li class="active">产品图片管理</li> </ol> <table class="addPictureTable" align="center"> <tr> <td class="addPictureTableTD"> <div> <div class="panel panel-warning addPictureDiv"> <div class="panel-heading">新增产品<b class="text-primary"> 单个 </b>图片</div> <div class="panel-body"> <form method="post" class="addFormSingle" action="admin_productImage_add" enctype="multipart/form-data"> <table class="addTable"> <tr> <td>请选择本地图片 尺寸400X400 为佳</td> </tr> <tr> <td> <input id="filepathSingle" type="file" name="image" /> </td> </tr> <tr class="submitTR"> <td align="center"> <input type="hidden" name="type" value="type_single" /> <input type="hidden" name="productId" value="${p.id}" /> <button type="submit" class="btn btn-success">提 交</button> </td> </tr> </table> </form> </div> </div> <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr class="success"> <th>ID</th> <th>产品单个图片缩略图</th> <th>删除</th> </tr> </thead> <tbody> <c:forEach items="${pisSingle}" var="pi"> <tr> <td>${pi.id}</td> <td> <a title="点击查看原图" href="img/productSingle/${pi.id}.jpg"><img height="50px" src="img/productSingle/${pi.id}.jpg"></a> </td> <td><a deleteLink="true" href="admin_productImage_delete?id=${pi.id}"><span class=" glyphicon glyphicon-trash"></span></a></td> </tr> </c:forEach> </tbody> </table> </div> </td> <td class="addPictureTableTD"> <div> <div class="panel panel-warning addPictureDiv"> <div class="panel-heading">新增产品<b class="text-primary"> 详情 </b>图片</div> <div class="panel-body"> <form method="post" class="addFormDetail" action="admin_productImage_add" enctype="multipart/form-data"> <table class="addTable"> <tr> <td>请选择本地图片 宽度790 为佳</td> </tr> <tr> <td> <input id="filepathDetail" type="file" name="image" /> </td> </tr> <tr class="submitTR"> <td align="center"> <input type="hidden" name="type" value="type_detail" /> <input type="hidden" name="productId" value="${p.id}" /> <button type="submit" class="btn btn-success">提 交</button> </td> </tr> </table> </form> </div> </div> <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr class="success"> <th>ID</th> <th>产品详情图片缩略图</th> <th>删除</th> </tr> </thead> <tbody> <c:forEach items="${pisDetail}" var="pi"> <tr> <td>${pi.id}</td> <td> <a title="点击查看原图" href="img/productDetail/${pi.id}.jpg"><img height="50px" src="img/productDetail/${pi.id}.jpg"></a> </td> <td><a deleteLink="true" href="admin_productImage_delete?id=${pi.id}"><span class=" glyphicon glyphicon-trash"></span></a></td> </tr> </c:forEach> </tbody> </table> </div> </td> </tr> </table> </div> <script> $(function(){ $(".addFormSingle").submit(function(){ if(checkEmpty("filepathSingle","图片文件")){ $("#filepathSingle").value(""); return true; } return false; }); $(".addFormDetail").submit(function(){ if(checkEmpty("filepathDetail","图片文件")) return true; return false; }); }); </script> ``` ## 步骤 9 : 查询功能讲解 通过产品页面的图片管理访问ProductImageController的list()方法 1. 获取参数productId 2. 根据productId获取Product对象 3. 根据productId对象获取单个图片的集合pisSingle 4. 根据productId对象获取详情图片的集合pisDetail 5. 把product 对象，pisSingle ，pisDetail放在model上 6. 服务端跳转到admin/listProductImage.jsp页面 7. 在listProductImage.jsp，使用c:forEach 遍历pisSingle 8. 在listProductImage.jsp，使用c:forEach 遍历pisDetail  ProductImageController： ~~~ @RequestMapping("admin_productImage_list") public String list(int productId, Model model) { Product p = productService.get(productId); List<ProductImage> pisSingle = productImageService.list(productId, ProductImageService.type_single); List<ProductImage> pisDetail = productImageService.list(productId, ProductImageService.type_detail); model.addAttribute("p", p); model.addAttribute("pisSingle", pisSingle); model.addAttribute("pisDetail", pisDetail); return "admin/listProductImage"; } ~~~ listProductImage.jsp 片段1： ~~~ <c:forEach items="${pisSingle}" var="pi"> <tr> <td>${pi.id}</td> <td> <a title="点击查看原图" href="img/productSingle/${pi.id}.jpg"><img height="50px" src="img/productSingle/${pi.id}.jpg"></a> </td> <td><a deleteLink="true" href="admin_productImage_delete?id=${pi.id}"><span class=" glyphicon glyphicon-trash"></span></a></td> </tr> </c:forEach> ~~~ listProductImage.jsp 片段2： ~~~ <c:forEach items="${pisDetail}" var="pi"> <tr> <td>${pi.id}</td> <td> <a title="点击查看原图" href="img/productDetail/${pi.id}.jpg"><img height="50px" src="img/productDetail/${pi.id}.jpg"></a> </td> <td><a deleteLink="true" href="admin_productImage_delete?id=${pi.id}"><span class=" glyphicon glyphicon-trash"></span></a></td> </tr> </c:forEach> ~~~ ## 步骤 10 : 增加功能讲解 增加产品图片分单个和详情两种，其区别在于增加所提交的type类型不一样。 这里就对单个的进行讲解，详情图片的处理同理。 首先， 在listProductImage.jsp准备一个form，提交到admin_productImage_add <form method="post" class="addFormSingle" action="admin_productImage_add" enctype="multipart/form-data"> 接着在ProductImageController的add()方法中进行处理 1. 通过pi对象接受type和productId的注入 2. 借助productImageService，向数据库中插入数据。 3. 根据session().getServletContext().getRealPath( "img/productSingle")，定位到存放单个产品图片的目录 除了productSingle，还有productSingle_middle和productSingle_small。 因为每上传一张图片，都会有对应的正常，中等和小的三种大小图片，并且放在3个不同的目录下 4. 文件命名以保存到数据库的产品图片对象的id+".jpg"的格式命名 5. 通过uploadedImageFile保存文件 6. 借助ImageUtil.change2jpg()方法把格式真正转化为jpg，而不仅仅是后缀名为.jpg 7. 再借助ImageUtil.resizeImage把正常大小的图片，改变大小之后，分别复制到productSingle_middle和productSingle_small目录下。 8. 处理完毕之后，客户端条跳转到admin_productImage_list?productId=，并带上productId。 详情图片做的是一样的事情，区别在于复制到目录productDetail下，并且不需要改变大小 > 注：ImageUtil.resizeImage 使用了swing自带的修改图片大小的API，底层工作原理不必深入研究，反正这么写就行了。   listProductImage.jsp 片段： ~~~ <form method="post" class="addFormSingle" action="admin_productImage_add" enctype="multipart/form-data"> <table class="addTable"> <tr> <td>请选择本地图片 尺寸400X400 为佳</td> </tr> <tr> <td> <input id="filepathSingle" type="file" name="image" /> </td> </tr> <tr class="submitTR"> <td align="center"> <input type="hidden" name="type" value="type_single" /> <input type="hidden" name="productId" value="${p.id}" /> <button type="submit" class="btn btn-success">提 交</button> </td> </tr> </table> </form> ~~~ ProductImageController.add()： ~~~ /** * 新增产品图片 * @param pi 产品图片对象 * @param session 用于在后续获取当前应用的路径 * @param uploadedImageFile 用于接受上传的图片 * @return 页面路径 */ @RequestMapping("admin_productImage_add") public String add(ProductImage pi, HttpSession session, UploadedImageFile uploadedImageFile) { productImageService.add(pi); String fileName = pi.getId() + ".jpg"; String imageFolder; String imageFolder_small = null; String imageFolder_middle = null; if (ProductImageService.type_single.equals(pi.getType())) { imageFolder = session.getServletContext().getRealPath("img/productSingle"); imageFolder_small = session.getServletContext().getRealPath("img/productSingle_small"); imageFolder_middle = session.getServletContext().getRealPath("img/productSingle_middle"); } else { imageFolder = session.getServletContext().getRealPath("img/productDetail"); } File f = new File(imageFolder, fileName); f.getParentFile().mkdirs(); try { uploadedImageFile.getImage().transferTo(f); BufferedImage img = ImageUtil.change2jpg(f); ImageIO.write(img, "jpg", f); if (ProductImageService.type_single.equals(pi.getType())) { File f_small = new File(imageFolder_small, fileName); File f_middle = new File(imageFolder_middle, fileName); ImageUtil.resizeImage(f, 56, 56, f_small); ImageUtil.resizeImage(f, 217, 190, f_middle); } } catch (Exception e) { e.printStackTrace(); } return "redirect:admin_productImage_list?productId=" + pi.getProductId(); } ~~~ ## 步骤 11 : 删除功能讲解 点击删除超链，进入ProductImageController的delete方法 1. 获取id 2. 根据id获取ProductImage 对象pi 3. 借助productImageService，删除数据 4. 如果是单个图片，那么删除3张正常，中等，小号图片 5. 如果是详情图片，那么删除一张图片 6. 客户端跳转到admin_productImage_list地址 ~~~ /** * 删除产品图片 * @param id 产品图片id * @param session 用于在后续获取当前应用的路径 * @return 页面路径 */ @RequestMapping("admin_productImage_delete") public String delete(int id, HttpSession session) { ProductImage pi = productImageService.get(id); String fileName = pi.getId() + ".jpg"; String imageFolder; String imageFolder_small = null; String imageFolder_middle = null; if (ProductImageService.type_single.equals(pi.getType())) { imageFolder = session.getServletContext().getRealPath("img/productSingle"); imageFolder_small = session.getServletContext().getRealPath("img/productSingle_small"); imageFolder_middle = session.getServletContext().getRealPath("img/productSingle_middle"); File imageFile = new File(imageFolder, fileName); File f_small = new File(imageFolder_small, fileName); File f_middle = new File(imageFolder_middle, fileName); imageFile.delete(); f_small.delete(); f_middle.delete(); } else { imageFolder = session.getServletContext().getRealPath("img/productDetail"); File imageFile = new File(imageFolder, fileName); imageFile.delete(); } productImageService.delete(id); return "redirect:admin_productImage_list?productId=" + pi.getProductId(); } ~~~ ## 步骤 12 : 编辑和修改 因为只有图片，就不提供编辑和修改功能。**要做修改，先删除，再增加即可**。 ## 步骤 13 : Product 回到产品管理里的**页面截图**，在产品列表页面，是没有图片的。 因为当时还没有产品图片管理功能，现在支持了，所以需要对Product做一些调整。 新增属性： `private ProductImage firstProductImage;`  ~~~ package com.dodoke.tmall.pojo; import java.util.Date; public class Product { private Integer id; private String name; private String subTitle; private Float originalPrice; private Float promotePrice; private Integer stock; private Date createDate; private Integer categoryId; /*非数据库字段*/ private Category category; private ProductImage firstProductImage; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name == null ? null : name.trim(); } public String getSubTitle() { return subTitle; } public void setSubTitle(String subTitle) { this.subTitle = subTitle == null ? null : subTitle.trim(); } public Float getOriginalPrice() { return originalPrice; } public void setOriginalPrice(Float originalPrice) { this.originalPrice = originalPrice; } public Float getPromotePrice() { return promotePrice; } public void setPromotePrice(Float promotePrice) { this.promotePrice = promotePrice; } public Integer getStock() { return stock; } public void setStock(Integer stock) { this.stock = stock; } public Date getCreateDate() { return createDate; } public void setCreateDate(Date createDate) { this.createDate = createDate; } public Integer getCategoryId() { return categoryId; } public void setCategoryId(Integer categoryId) { this.categoryId = categoryId; } public Category getCategory() { return category; } public void setCategory(Category category) { this.category = category; } public ProductImage getFirstProductImage() { return firstProductImage; } public void setFirstProductImage(ProductImage firstProductImage) { this.firstProductImage = firstProductImage; } } ~~~ ## 步骤 14 : ProductService 新增方法： ` void setFirstProductImage(Product p);` ~~~ package com.dodoke.tmall.service; import java.util.List; import com.dodoke.tmall.pojo.Product; public interface ProductService { void add(Product c); void delete(int id); void update(Product c); Product get(int id); List list(int categoryId); void setFirstProductImage(Product p); } ~~~ ## 步骤 15 : ProductServiceImpl 增加方法 setFirstProductImage(Product p)： 根据productId和图片类型查询出所有的单个图片，然后把第一个取出来放在firstProductImage上。 增加方法 setFirstProductImage(List<Product> ps) 给多个产品设置图片 在get方法中调用setFirstProductImage(Product p) 为单个产品设置图片 在list方法中调用setFirstProductImage(List<Product> ps) 为多个产品设置图片 ~~~ package com.dodoke.tmall.service.impl; import java.util.Date; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.dodoke.tmall.mapper.ProductMapper; import com.dodoke.tmall.pojo.Category; import com.dodoke.tmall.pojo.Product; import com.dodoke.tmall.pojo.ProductExample; import com.dodoke.tmall.pojo.ProductImage; import com.dodoke.tmall.service.CategoryService; import com.dodoke.tmall.service.ProductImageService; import com.dodoke.tmall.service.ProductService; @Service public class ProductServiceImpl implements ProductService { @Autowired ProductMapper productMapper; @Autowired CategoryService categoryService; @Autowired ProductImageService productImageService; @Override public void add(Product p) { p.setCreateDate(new Date()); productMapper.insert(p); } @Override public void delete(int id) { productMapper.deleteByPrimaryKey(id); } @Override public void update(Product p) { productMapper.updateByPrimaryKeySelective(p); } @Override public Product get(int id) { Product p = productMapper.selectByPrimaryKey(id); setFirstProductImage(p); setCategory(p); return p; } private void setCategory(Product p) { int categoryId = p.getCategoryId(); Category category = categoryService.get(categoryId); p.setCategory(category); } @Override public List list(int categoryId) { ProductExample example = new ProductExample(); example.createCriteria().andCategoryIdEqualTo(categoryId); example.setOrderByClause("id desc"); List result = productMapper.selectByExample(example); setFirstProductImage(result); setCategory(result); return result; } public void setCategory(List<Product> ps) { for (Product p : ps) { setCategory(p); } } /** * 根据productId和图片类型查询出所有的单个图片，然后把第一个取出来放在firstProductImage上。 * @param p 产品 */ @Override public void setFirstProductImage(Product p) { List<ProductImage> pis = productImageService.list(p.getId(), ProductImageService.type_single); if (!pis.isEmpty()) { ProductImage pi = pis.get(0); p.setFirstProductImage(pi); } } /** * 给多个产品设置图片 * @param ps 产品集合 */ public void setFirstProductImage(List<Product> ps) { for (Product p : ps) { setFirstProductImage(p); } } } ~~~ ## 步骤 16 : listProduct.jsp 去掉关于图片显示的注释 ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@include file="../include/admin/adminHeader.jsp"%> <%@include file="../include/admin/adminNavigator.jsp"%> <title>产品管理</title> <div class="workingArea"> <ol class="breadcrumb"> <li><a href="admin_category_list">所有分类</a></li> <li><a href="admin_product_list?categoryId=${c.id}">${c.name}-产品</a></li> <li class="active">产品管理</li> </ol> <div class="listDataTableDiv"> <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr class="success"> <th>ID</th> <th>图片</th> <th>产品名称</th> <th>产品小标题</th> <th width="53px">原价格</th> <th width="80px">优惠价格</th> <th width="80px">库存数量</th> <th width="80px">图片管理</th> <th width="80px">设置属性</th> <th width="42px">编辑</th> <th width="42px">删除</th> </tr> </thead> <tbody> <c:forEach items="${ps}" var="p"> <tr> <td>${p.id}</td> <td> <c:if test="${!empty p.firstProductImage}"> <img width="40px" src="img/productSingle/${p.firstProductImage.id}.jpg"> </c:if> </td> <td>${p.name}</td> <td>${p.subTitle}</td> <td>${p.originalPrice}</td> <td>${p.promotePrice}</td> <td>${p.stock}</td> <td><a href="admin_productImage_list?productId=${p.id}"><span class="glyphicon glyphicon-picture"></span></a></td> <td><a href="admin_propertyValue_edit?productId=${p.id}"><span class="glyphicon glyphicon-th-list"></span></a></td> <td><a href="admin_product_edit?id=${p.id}"><span class="glyphicon glyphicon-edit"></span></a></td> <td><a deleteLink="true" href="admin_product_delete?id=${p.id}"><span class=" glyphicon glyphicon-trash"></span></a></td> </tr> </c:forEach> </tbody> </table> </div> <div class="pageDiv"> <%@include file="../include/admin/adminPage.jsp" %> </div> <div class="panel panel-warning addDiv"> <div class="panel-heading">新增产品</div> <div class="panel-body"> <form method="post" id="addForm" action="admin_product_add" enctype="multipart/form-data"> <table class="addTable"> <tr> <td>产品名称</td> <td><input id="name" name="name" type="text" class="form-control"></td> </tr> <tr> <td>产品小标题</td> <td><input id="subTitle" name="subTitle" type="text" class="form-control"></td> </tr> <tr> <td>原价格</td> <td><input id="originalPrice" value="99.98" name="originalPrice" type="text" class="form-control"></td> </tr> <tr> <td>优惠价格</td> <td><input id="promotePrice" value="19.98" name="promotePrice" type="text" class="form-control"></td> </tr> <tr> <td>库存</td> <td><input id="stock" value="99" name="stock" type="text" class="form-control"></td> </tr> <tr class="submitTR"> <td colspan="2" align="center"> <input type="hidden" name="categoryId" value="${c.id}"> <button type="submit" class="btn btn-success">提 交</button> </td> </tr> </table> </form> </div> </div> </div> <%@include file="../include/admin/adminFooter.jsp"%> <script> $(function(){ $("#addForm").submit(function(){ if(!checkEmpty("name","产品名称")) { return false; } // if (!checkEmpty("subTitle", "小标题")) // return false; if (!checkNumber("originalPrice", "原价格")) return false; if (!checkNumber("promotePrice", "优惠价格")) return false; if (!checkInt("stock", "库存")) return false; return true; }); }); </script> ~~~ ## 步骤 17 : 产品缩略图效果