[TOC] ## 步骤 1 : 先运行，看到效果，再学习 先将完整的 tmall_ssm 项目（向老师要相关资料），配置运行起来，确认可用之后，再学习做了哪些步骤以达到这样的效果。 ## 步骤 2 : 模仿和排错 在确保可运行项目能够正确无误地运行之后，再严格照着教程的步骤，对代码模仿一遍。 模仿过程难免代码有出入，导致无法得到期望的运行结果，此时此刻通过比较**正确答案** ( 可运行项目 ) 和自己的代码，来定位问题所在。 采用这种方式，**学习有效果，排错有效率**，可以较为明显地提升学习速度，跨过学习路上的各个槛。 ## 步骤 3 : 界面效果 访问如下地址： `http://127.0.0.1:8080/tmall_ssm/foreproduct?pid=844`  目录结构图：  ## 步骤 4 : Product 修改Product,增加如下属性 1. 单个产品图片集合 `private List<ProductImage> productSingleImages;` 2. 详情产品图片集合 `private List<ProductImage> productDetailImages;` 3. 销量 `private int saleCount;` 4. 累计评价 `private int reviewCount;` ~~~ package com.dodoke.tmall.pojo; import java.util.Date; import java.util.List; 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; private List<ProductImage> productSingleImages; private List<ProductImage> productDetailImages; private int saleCount; private int reviewCount; 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; } public List<ProductImage> getProductSingleImages() { return productSingleImages; } public void setProductSingleImages(List<ProductImage> productSingleImages) { this.productSingleImages = productSingleImages; } public List<ProductImage> getProductDetailImages() { return productDetailImages; } public void setProductDetailImages(List<ProductImage> productDetailImages) { this.productDetailImages = productDetailImages; } public int getSaleCount() { return saleCount; } public void setSaleCount(int saleCount) { this.saleCount = saleCount; } public int getReviewCount() { return reviewCount; } public void setReviewCount(int reviewCount) { this.reviewCount = reviewCount; } } ~~~ ## 步骤 5 : Review 修改自动生成的评价类Review, 增加User属性 `private User user;` ~~~ package com.dodoke.tmall.pojo; import java.util.Date; public class Review { private Integer id; private String content; private Date createDate; private Integer productId; private Integer userId; /* 非数据库字段 */ private User user; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getContent() { return content; } public void setContent(String content) { this.content = content == null ? null : content.trim(); } public Date getCreateDate() { return createDate; } public void setCreateDate(Date createDate) { this.createDate = createDate; } public Integer getProductId() { return productId; } public void setProductId(Integer productId) { this.productId = productId; } public Integer getUserId() { return userId; } public void setUserId(Integer userId) { this.userId = userId; } public User getUser() { return user; } public void setUser(User user) { this.user = user; } } ~~~ ## 步骤 6 : ReviewService 增加ReviewService，提供CURD以及通过产品获取评价方法： List list(int pid); int getCount(int pid); ~~~ package com.dodoke.tmall.service; import java.util.List; import com.dodoke.tmall.pojo.Review; public interface ReviewService { void add(Review c); void delete(int id); void update(Review c); Review get(int id); /** * 通过产品获取评价 * @param pid 产品id * @return List */ List list(int pid); /** * 获取产品有多少评价 * @param pid 产品id * @return int */ int getCount(int pid); } ~~~ ## 步骤 7 : User 修改User, 增加一个getAnonymousName方法，用于在显示评价者的时候，进行匿名显示 ~~~ package com.dodoke.tmall.pojo; public class User { private Integer id; private String name; private String password; 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 getPassword() { return password; } public void setPassword(String password) { this.password = password == null ? null : password.trim(); } /** * 在显示评价者的时候进行匿名显示 * * @return String */ public String getAnonymousName() { if (null == name) return null; if (name.length() <= 1) return "*"; if (name.length() == 2) return name.substring(0, 1) + "*"; char[] cs = name.toCharArray(); for (int i = 1; i < cs.length - 1; i++) { cs[i] = '*'; } return new String(cs); } } ~~~ ## 步骤 8 : ReviewServiceImpl 增加ReviewServiceImpl，实现对应方法 ~~~ 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.ReviewMapper; import com.dodoke.tmall.pojo.Review; import com.dodoke.tmall.pojo.ReviewExample; import com.dodoke.tmall.pojo.User; import com.dodoke.tmall.service.ReviewService; import com.dodoke.tmall.service.UserService; @Service public class ReviewServiceImpl implements ReviewService { @Autowired ReviewMapper reviewMapper; @Autowired UserService userService; @Override public void add(Review c) { reviewMapper.insert(c); } @Override public void delete(int id) { reviewMapper.deleteByPrimaryKey(id); } @Override public void update(Review c) { reviewMapper.updateByPrimaryKeySelective(c); } @Override public Review get(int id) { return reviewMapper.selectByPrimaryKey(id); } public List<Review> list(int pid) { ReviewExample example = new ReviewExample(); example.createCriteria().andProductIdEqualTo(pid); example.setOrderByClause("id desc"); List<Review> result = reviewMapper.selectByExample(example); setUser(result); return result; } public void setUser(List<Review> reviews) { for (Review review : reviews) { setUser(review); } } private void setUser(Review review) { int uid = review.getUserId(); User user = userService.get(uid); review.setUser(user); } @Override public int getCount(int pid) { return list(pid).size(); } } ~~~ ## 步骤 9 : OrderItemService 修改OrderItemService，增加根据产品获取销售量的方法： `int getSaleCount(int pid);` ~~~ package com.dodoke.tmall.service; import java.util.List; import com.dodoke.tmall.pojo.Order; import com.dodoke.tmall.pojo.OrderItem; public interface OrderItemService { void add(OrderItem c); void delete(int id); void update(OrderItem c); OrderItem get(int id); List list(); void fill(List<Order> os); void fill(Order o); int getSaleCount(int pid); } ~~~ ## 步骤 10 : OrderItemServiceImpl 修改OrderItemServiceImpl，实现getSaleCount方法 ~~~ 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.OrderItemMapper; import com.dodoke.tmall.pojo.Order; import com.dodoke.tmall.pojo.OrderItem; import com.dodoke.tmall.pojo.OrderItemExample; import com.dodoke.tmall.pojo.Product; import com.dodoke.tmall.service.OrderItemService; import com.dodoke.tmall.service.ProductService; @Service public class OrderItemServiceImpl implements OrderItemService { @Autowired OrderItemMapper orderItemMapper; @Autowired ProductService productService; @Override public void add(OrderItem c) { orderItemMapper.insert(c); } @Override public void delete(int id) { orderItemMapper.deleteByPrimaryKey(id); } @Override public void update(OrderItem c) { orderItemMapper.updateByPrimaryKeySelective(c); } @Override public OrderItem get(int id) { OrderItem result = orderItemMapper.selectByPrimaryKey(id); setProduct(result); return result; } public List<OrderItem> list() { OrderItemExample example = new OrderItemExample(); example.setOrderByClause("id desc"); return orderItemMapper.selectByExample(example); } @Override public void fill(List<Order> os) { // 遍历每个订单，然后挨个调用fill(Order order)。 for (Order o : os) { fill(o); } } public void fill(Order o) { // 1. 根据订单id查询出其对应的所有订单项 OrderItemExample example = new OrderItemExample(); example.createCriteria().andOrderIdEqualTo(o.getId()); example.setOrderByClause("id desc"); List<OrderItem> ois = orderItemMapper.selectByExample(example); // 2. 通过setProduct为所有的订单项设置Product属性 setProduct(ois); float total = 0; int totalNumber = 0; // 3. 遍历所有的订单项，然后计算出该订单的总金额和总数量 for (OrderItem oi : ois) { total += oi.getNumber() * oi.getProduct().getPromotePrice(); totalNumber += oi.getNumber(); } o.setTotal(total); o.setTotalNumber(totalNumber); // 4. 最后再把订单项设置在订单的orderItems属性上。 o.setOrderItems(ois); } public void setProduct(List<OrderItem> ois) { for (OrderItem oi : ois) { setProduct(oi); } } private void setProduct(OrderItem oi) { Product p = productService.get(oi.getProductId()); oi.setProduct(p); } @Override public int getSaleCount(int pid) { OrderItemExample example = new OrderItemExample(); example.createCriteria().andProductIdEqualTo(pid).andOrderIdIsNotNull(); List<OrderItem> ois = orderItemMapper.selectByExample(example); int result = 0; for (OrderItem oi : ois) { result += oi.getNumber(); } return result; } } ~~~ > 销量显示问题 把商品加入购物车，还没完成付款，而产品的销量理应完成付款才算一笔销量。应该在OrderItemExample后面加上`.andOidIsNotNull()`这个条件。 ## 步骤 11 : ProductService 修改ProductService，增加为产品设置销量和评价数量的方法： ~~~ void setSaleAndReviewNumber(Product p); void setSaleAndReviewNumber(List<Product> ps); ~~~ ~~~ package com.dodoke.tmall.service; import java.util.List; import com.dodoke.tmall.pojo.Category; 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); /** * 为分类填充产品集合 * * @param categorys */ public void fill(List<Category> categorys); /** * 为多个分类填充产品集合 * * @param category */ public void fill(Category category); /** * 为多个分类填充推荐产品集合，即把分类下的产品集合，按照8个为一行，拆成多行，以利于后续页面上进行显示 * * @param categorys */ public void fillByRow(List<Category> categorys); /** * 为产品设置销量和评价数量 * @param p 产品对象 */ void setSaleAndReviewNumber(Product p); void setSaleAndReviewNumber(List<Product> ps); } ~~~ ## 步骤 12 : ProductServiceImpl 修改ProductServiceImpl，实现为产品设置销量和评价数量的方法： void setSaleAndReviewNumber(Product p); void setSaleAndReviewNumber ~~~ package com.dodoke.tmall.service.impl; import java.util.ArrayList; 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.OrderItemService; import com.dodoke.tmall.service.ProductImageService; import com.dodoke.tmall.service.ProductService; import com.dodoke.tmall.service.ReviewService; @Service public class ProductServiceImpl implements ProductService { @Autowired ProductMapper productMapper; @Autowired CategoryService categoryService; @Autowired ProductImageService productImageService; @Autowired OrderItemService orderItemService; @Autowired ReviewService reviewService; @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); } } /** * 为分类填充产品集合 * * @param categorys */ @Override public void fill(Category c) { List<Product> ps = list(c.getId()); c.setProducts(ps); } /** * 为多个分类填充产品集合 * * @param category */ @Override public void fill(List<Category> cs) { for (Category c : cs) { fill(c); } } /** * 为多个分类填充推荐产品集合，即把分类下的产品集合，按照8个为一行，拆成多行，以利于后续页面上进行显示 * * @param categorys */ @Override public void fillByRow(List<Category> cs) { // 把分类下的产品集合，按照8个为一行，拆成多行，以利于后续页面上进行显示 int productNumberEachRow = 8; // 将categorylist中每个category拿出来循环 for (Category c : cs) { // 获取每个分类中对应的产品，在使用fillByRow(List<Category> // cs)这个方法前,需要先使用fill方法，注入分类中的所有产品，因此在这里才可以取出产品 List<Product> products = c.getProducts(); // 设置每一页的头图 setFirstProductImage(products); // 每一行产品的list List<List<Product>> productsByRow = new ArrayList<>(); for (int i = 0; i < products.size(); i += productNumberEachRow) { int size = i + productNumberEachRow; // 界限判断 size = size > products.size() ? products.size() : size; // 该方法返回的是父list的一个子集合，从fromIndex（包含），到toIndex（不包含） List<Product> productsOfEachRow = products.subList(i, size); productsByRow.add(productsOfEachRow); } c.setProductsByRow(productsByRow); } } @Override public void setSaleAndReviewNumber(Product p) { int saleCount = orderItemService.getSaleCount(p.getId()); p.setSaleCount(saleCount); int reviewCount = reviewService.getCount(p.getId()); p.setReviewCount(reviewCount); } @Override public void setSaleAndReviewNumber(List<Product> ps) { for (Product p : ps) { setSaleAndReviewNumber(p); } } } ~~~ ## 步骤 13 :`ForeController.product()` 通过访问地址 `http://127.0.0.1:8080/tmall_ssm/foreproduct?pid=844` 导致`ForeController.product() `方法被调用 1. 获取参数pid 2. 根据pid获取Product 对象p 3. 根据对象p，获取这个产品对应的单个图片集合 4. 根据对象p，获取这个产品对应的详情图片集合 5. 获取产品的所有属性值 6. 获取产品对应的所有的评价 7. 设置产品的销量和评价数量 8. 把上述取值放在request属性上 9. 服务端跳转到 "product.jsp" 页面 ~~~ package com.dodoke.tmall.controller; import java.util.List; 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 org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.util.HtmlUtils; import com.dodoke.tmall.pojo.Category; import com.dodoke.tmall.pojo.Product; import com.dodoke.tmall.pojo.ProductImage; import com.dodoke.tmall.pojo.PropertyValue; import com.dodoke.tmall.pojo.Review; import com.dodoke.tmall.pojo.User; import com.dodoke.tmall.service.CategoryService; import com.dodoke.tmall.service.OrderItemService; import com.dodoke.tmall.service.OrderService; import com.dodoke.tmall.service.ProductImageService; import com.dodoke.tmall.service.ProductService; import com.dodoke.tmall.service.PropertyValueService; import com.dodoke.tmall.service.ReviewService; import com.dodoke.tmall.service.UserService; @Controller @RequestMapping("") public class ForeController { @Autowired CategoryService categoryService; @Autowired ProductService productService; @Autowired UserService userService; @Autowired ProductImageService productImageService; @Autowired PropertyValueService propertyValueService; @Autowired OrderService orderService; @Autowired OrderItemService orderItemService; @Autowired ReviewService reviewService; @RequestMapping("forehome") public String home(Model model) { List<Category> cs = categoryService.list(); productService.fill(cs); productService.fillByRow(cs); model.addAttribute("cs", cs); return "fore/home"; } @RequestMapping("foreregister") public String register(Model model, User user) { String name = user.getName(); // 把账号里的特殊符号进行转义 name = HtmlUtils.htmlEscape(name); user.setName(name); boolean exist = userService.isExist(name); if (exist) { String m = "用户名已经被使用,不能使用"; model.addAttribute("msg", m); model.addAttribute("user", null); return "fore/register"; } userService.add(user); return "redirect:registerSuccessPage"; } @RequestMapping("forelogin") public String login(@RequestParam("name") String name, @RequestParam("password") String password, Model model, HttpSession session) { name = HtmlUtils.htmlEscape(name); User user = userService.get(name, password); if (null == user) { model.addAttribute("msg", "账号密码错误"); return "fore/login"; } session.setAttribute("user", user); return "redirect:forehome"; } @RequestMapping("forelogout") public String logout(HttpSession session) { session.removeAttribute("user"); return "redirect:forehome"; } @RequestMapping("foreproduct") public String product(int pid, Model model) { Product p = productService.get(pid); // 根据对象p，获取这个产品对应的单个图片集合 List<ProductImage> productSingleImages = productImageService.list(p.getId(), ProductImageService.type_single); // 根据对象p，获取这个产品对应的详情图片集合 List<ProductImage> productDetailImages = productImageService.list(p.getId(), ProductImageService.type_detail); p.setProductSingleImages(productSingleImages); p.setProductDetailImages(productDetailImages); // 获取产品的所有属性值 List<PropertyValue> pvs = propertyValueService.list(p.getId()); // 获取产品对应的所有的评价 List<Review> reviews = reviewService.list(p.getId()); // 设置产品的销量和评价数量 productService.setSaleAndReviewNumber(p); model.addAttribute("reviews", reviews); model.addAttribute("p", p); model.addAttribute("pvs", pvs); return "fore/product"; } } ~~~ ## 步骤 14 : product.jsp 与 register.jsp 相仿，product.jsp也包含了header.jsp, top.jsp, simpleSearch.jsp， footer.jsp 等公共页面。 中间是产品业务页面 productPage.jsp ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="../include/fore/header.jsp"%> <%@include file="../include/fore/top.jsp"%> <%@include file="../include/fore/simpleSearch.jsp"%> <%@include file="../include/fore/product/productPage.jsp"%> <%@include file="../include/fore/footer.jsp"%> ~~~ ## 步骤 15 : productPage.jsp productPage.jsp 又由3个页面组成 1. imgAndInfo.jsp 单个图片和基本信息 2. productReview.jsp 评价信息 3. productDetail.jsp 详情图片 ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <title>模仿天猫官网 ${p.name}</title> <div class="categoryPictureInProductPageDiv"> <img class="categoryPictureInProductPage" src="img/category/${p.category.id}.jpg"> </div> <div class="productPageDiv"> <%@include file="imgAndInfo.jsp" %> <%@include file="productReview.jsp" %> <%@include file="productDetail.jsp" %> </div> ~~~ ## 步骤 16 : imgAndInfo.jsp 1. 左侧显示5张单个图片 （1）默认显示第一张图片 ~~~ <img src="img/productSingle/${p.firstProductImage.id}.jpg" class="bigImg"> ~~~ （2）5张小图片 ~~~ <c:forEach items="${p.productSingleImages}" var="pi"> <img src="img/productSingle_small/${pi.id}.jpg" bigImageURL="img/productSingle/${pi.id}.jpg" class="smallImage"> </c:forEach> ~~~ 2. 右边显示基本信息 （1）标题和小标题 ~~~ <div class="productTitle"> ${p.name} </div> <div class="productSubTitle"> ${p.subTitle} </div> ~~~ （2）原始价格和促销价 ~~~ <fmt:formatNumber type="number" value="${p.originalPrice}" minFractionDigits="2"/> <fmt:formatNumber type="number" value="${p.promotePrice}" minFractionDigits="2"/> ~~~ （3）销量和累计评价 ~~~ <div>销量 <span class="redColor boldWord"> ${p.saleCount }</span></div> <div>累计评价 <span class="redColor boldWord"> ${p.reviewCount}</span></div> ~~~ （4）库存 `<span>库存${p.stock}件</span>`  > 其中模态框在下一个章节讲解 ### 显示缩略图效果js代码讲解 ~~~ $("img.smallImage").mouseenter(function(){ var bigImageURL = $(this).attr("bigImageURL"); $("img.bigImg").attr("src",bigImageURL); }); ~~~ 首先在小图片上有一个自定义属性bigImageURL，用于存放对应的图片的位置 ~~~ <img width="100px" class="smallImage" src="img/productSingle_small/8620.jpg" bigImageURL="img/productSingle/8620.jpg"> ~~~ 监听小图片的mouseenter事件，获取小图片的bigImageURL属性,把大图片的src修改为该图片 预加载，因为图片比较大，所以需要进行预加载。 ~~~ $("img.bigImg").load( function(){ $("img.smallImage").each(function(){ var bigImageURL = $(this).attr("bigImageURL"); img = new Image(); img.src = bigImageURL; img.onload = function(){ console.log(bigImageURL); $("div.img4load").append($(img)); }; }); } ); ~~~ > 当指定的元素（及子元素）已加载时，会发生 `load() `事件。 根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件 在大图片加载好之后，根据每个小图片的bigImageURL ，创建一个Image对象，然后把这个image对象的src属性，设置为bigImageURL。 当这个img对象加载完毕之后，再放到被隐藏的`div.img4load`中，从而达到预加载的效果。 >小图片和大图片的img，分别使用的是不同的图片。 > 小图片本身就是分辨率低的图片，直接使用小图的src，放大显示就会看上去很糊了。 > > 预加载是这样的：如果不使用预加载，那么当上面的主图片位置显示大图片的时候，浏览器"才"会到服务器去取大图片，而大图片加载比较慢，会影响用户体验。 > > 使用了预加载，就是用户没有把鼠标移动到小图片之前，浏览器已经去把大图片加载了，当上面的主图片位置显示大图片的时候，直接就显示了，用户不会感受到加载的时间，感觉一下就显示出来了。 > > 预加载的技术是通过js创建Image对象来实现，创建 Image对象，并设置其src,会导致浏览器去服务端获取图片，从而达到在未使用前，事先加载大图片的缓存效果。 真正需要显示大图片的时候，用户就觉得大图片一下就出来了，不会感觉到大图片加载的卡顿。 ### 修改价格 1. 效果： 可以向上调整数量，但是不能超过最大库存 可以向下调整数量，但是不能小于1 输入任何非数字，都会恢复为原来数字 输入的数字超过库存，恢复为最大库存 2. js代码讲解 ~~~ $(".productNumberSetting").keyup(function(){ var num= $(".productNumberSetting").val(); num = parseInt(num); if(isNaN(num)) num= 1; if(num<=0) num = 1; if(num>stock) num = stock; $(".productNumberSetting").val(num); }); ~~~ 监听keyup键盘弹起事件 获取输入框的值 * 如果是非数字，那么就设置为1。 > 注： parseInt会把文本中的非数字前的数字解析出来，所以如果文本框的内容是22B,那么解析出来是22. * 如果是负数，那么设置为1。 * 如果大于库存，设置为最大库存。 ~~~ $(".increaseNumber").click(function(){ var num= $(".productNumberSetting").val(); num++; if(num>stock) num = stock; $(".productNumberSetting").val(num); }); ~~~ 点击增加按钮的时候，获取当前的值，并在当前值的基础上`+1`，如果超过了库存就取库存最大值 ~~~ $(".decreaseNumber").click(function(){ var num= $(".productNumberSetting").val(); --num; if(num<=0) num=1; $(".productNumberSetting").val(num); }); ~~~ 点击减少按钮的时候，获取当前的值，并在当前值的基础上`-1`，如果`<=0`，则取1。 ## 步骤 17 : productReview.jsp 暂时没有数据，所以看不到截图。 这里借助`c:forEach`遍历request中的reviews。  ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <div class="productReviewDiv" > <div class="productReviewTopPart"> <a href="#nowhere" class="productReviewTopPartSelectedLink">商品详情</a> <a href="#nowhere" class="selected">累计评价 <span class="productReviewTopReviewLinkNumber">${p.reviewCount}</span> </a> </div> <div class="productReviewContentPart"> <c:forEach items="${reviews}" var="r"> <div class="productReviewItem"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> ${r.content } </div> <div class="productReviewItemDate"><fmt:formatDate value="${r.createDate}" pattern="yyyy-MM-dd"/></div> </div> <div class="productReviewItemUserInfo"> ${r.user.anonymousName}<span class="userInfoGrayPart">（匿名）</span> </div> <div style="clear:both"></div> </div> </c:forEach> </div> </div> ~~~ ## 步骤 18 : productDetail.jsp 如图所示，productDetail.jsp做了两件事 1. 显示属性值 ~~~ <c:forEach items="${pvs}" var="pv"> <span>${pv.property.name}: ${fn:substring(pv.value, 0, 10)} </span> </c:forEach> ~~~ 2. 显示详情图片 ~~~ <c:forEach items="${p.productDetailImages}" var="pi"> <img src="img/productDetail/${pi.id}.jpg"> </c:forEach> ~~~ ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <div class="productDetailDiv" > <div class="productDetailTopPart"> <a href="#nowhere" class="productDetailTopPartSelectedLink selected">商品详情</a> <a href="#nowhere" class="productDetailTopReviewLink">累计评价 <span class="productDetailTopReviewLinkNumber">${p.reviewCount}</span> </a> </div> <div class="productParamterPart"> <div class="productParamter">产品参数：</div> <div class="productParamterList"> <c:forEach items="${pvs}" var="pv"> <span>${pv.property.name}: ${fn:substring(pv.value, 0, 10)} </span> </c:forEach> </div> <div style="clear:both"></div> </div> <div class="productDetailImagesPart"> <c:forEach items="${p.productDetailImages}" var="pi"> <img src="img/productDetail/${pi.id}.jpg"> </c:forEach> </div> </div> ~~~