• SpringBoot电商项目之实现购物车功能

    目录

    一、自定义的参数解析器

    在使用自定义的参数解析器之前的做法：

    使用自定义的参数解析器之后的做法：

    二、购物车后台

    1.定义购物车对象ShopCar

     2.web层定义ShopCarController.java

    三、商品详情页面实现

    四、购物车查询以及新增的前台

    五、购物车删除功能和修改功能

    删除

    修改

    上节内容完成了首页以及登录的功能，登录之后弹出“OK”提示，忘记实现自动跳页面了，这里先继续简单完善一下，比较简单：

     login.js：

     再次去登录成功之后就会自动跳转回主页并且绑定了用户名：

    OK，进入今日主题：

    一、自定义的参数解析器

    在使用自定义的参数解析器之前的做法：

    shopCarController ：

    1. package com.ycx.spbootpro.controller;
    2.  
    3. import com.ycx.spbootpro.exception.BusinessException;
    4. import com.ycx.spbootpro.model.User;
    5. import com.ycx.spbootpro.service.IRedisService;
    6. import com.ycx.spbootpro.utils.JsonResponseBody;
    7. import com.ycx.spbootpro.utils.JsonResponseStatus;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.web.bind.annotation.CookieValue;
    10. import org.springframework.web.bind.annotation.RequestMapping;
    11. import org.springframework.web.bind.annotation.RestController;
    12.  
    13. /**
    14.  * @author 杨总
    15.  * @create 2022-11-07 18:28
    16.  */
    17. @RestController
    18. @RequestMapping("/shopCar")
    19. public class shopCarController {
    20.     @Autowired
    21.     private IRedisService redisService;
    22.  
    23.     /**
    24.      * 使用参数解析器之前的做法 弊端：
    25.      * 在每一个需要登录之后才能操作的功能，都需要做用户登录验证，即以下代码都需要再写一遍
    26.      * @param token
    27.      * @return
    28.      */
    29.     @RequestMapping("/check")
    30.     public JsonResponseBody check(@CookieValue("token") String token){
    31.        if(token==null)
    32.            throw new BusinessException(JsonResponseStatus.TOKEN_EEROR);
    33.             User user=redisService.getUserByToken(token);
    34.        if(user==null)
    35.            throw new BusinessException(JsonResponseStatus.TOKEN_EEROR);
    36.             return new JsonResponseBody();
    37.     }
    38.  
    39. }

     弊端：
         在每一个需要登录之后才能操作的功能，都需要做用户登录验证，即以下代码都需要再写一遍

    运行时，点击加入购物车

    会出现关于Mybatis-plus时间字段代码生成问题

     org.springframework.data.redis.serializer.SerializationException: Could not read JSON: Cannot construct instance of `java.time.LocalDateTime` (no Creators, like default constructor, exist): cannot deserialize from Object value (no delegate- or property-based Creator)
     at [Source: (byte[])"{"@class":"com.zking.testspbootpro.model.User","nickname":"小胖","password":"6502cbf0ac7d357831536b119ff26d28","salt":"7ceff545c6944e5cb7da355ae6243939","registerDate":{"month":"DECEMBER","year":2021,"dayOfMonth":11,"hour":2,"minute":36,"monthValue":12,"nano":0,"second":56,"dayOfWeek":"SATURDAY","dayOfYear":345,"chronology":{"@class":"java.time.chrono.IsoChronology","id":"ISO","calendarType":"iso8601"}},"lastLoginDate":null,"loginCount":0}"; line: 1, column: 172] (through reference chain: com.zking.testspbootpro.model.User["registerDate"]); nested exception is com.fasterxml.jackson.databind.exc.InvalidDefinitionException: Cannot construct instance of `java.time.LocalDateTime` (no Creators, like default constructor, exist): cannot deserialize from Object value (no delegate- or property-based Creator)
     at [Source: (byte[])"{"@class":"com.zking.testspbootpro.model.User","nickname":"小胖","password":"6502cbf0ac7d357831536b119ff26d28","salt":"7ceff545c6944e5cb7da355ae6243939","registerDate":{"month":"DECEMBER","year":2021,"dayOfMonth":11,"hour":2,"minute":36,"monthValue":12,"nano":0,"second":56,"dayOfWeek":"SATURDAY","dayOfYear":345,"chronology":{"@class":"java.time.chrono.IsoChronology","id":"ISO","calendarType":"iso8601"}},"lastLoginDate":null,"loginCount":0}"; line: 1, column: 172] (through reference chain: com.zking.testspbootpro.model.User["registerDate"])

     出现上述错误，原因是使用了lastLoginDate，去User.java类，将其改成java.util.Date;

    改完之后将redis中的数据以及cookie中的数据清空，再次登录测试；

     此外我们还要在User类里面添加一个id属性，因为后面有需要涉及到：

    1. package com.ycx.spbootpro.model;
    2.  
    3. import com.baomidou.mybatisplus.annotation.TableName;
    4. import java.time.LocalDateTime;
    5. import java.io.Serializable;
    6. import java.util.Date;
    7.  
    8. import lombok.Data;
    9. import lombok.EqualsAndHashCode;
    10.  
    11. /**
    12.  * 
    13.  * 用户信息表
    14.  * 
    15.  *
    16.  * @author yangzong
    17.  * @since 2022-11-05
    18.  */
    19. @Data
    20. @EqualsAndHashCode(callSuper = false)
    21. @TableName("t_user")
    22. public class User implements Serializable {
    23.  
    24.     private Long id;
    25.  
    26.     /**
    27.      * 昵称
    28.      */
    29.     private String nickname;
    30.  
    31.     /**
    32.      * MD5(MD5(pass明文+固定salt)+salt)
    33.      */
    34.     private String password;
    35.  
    36.     /**
    37.      * 随机salt
    38.      */
    39.     private String salt;
    40.  
    41.     /**
    42.      * 注册时间
    43.      */
    44.     private Date registerDate;
    45.  
    46.     /**
    47.      * 最后一次登录时间
    48.      */
    49.     private Date lastLoginDate;
    50.  
    51.     /**
    52.      * 登录次数
    53.      */
    54.     private Integer loginCount;
    55.  
    56.  
    57. }

     使用自定义的参数解析器之后的做法：

    shopCarController更改之后 :

    1. package com.ycx.spbootpro.controller;
    2.  
    3. import com.ycx.spbootpro.exception.BusinessException;
    4. import com.ycx.spbootpro.model.User;
    5. import com.ycx.spbootpro.service.IRedisService;
    6. import com.ycx.spbootpro.utils.JsonResponseBody;
    7. import com.ycx.spbootpro.utils.JsonResponseStatus;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.web.bind.annotation.CookieValue;
    10. import org.springframework.web.bind.annotation.RequestMapping;
    11. import org.springframework.web.bind.annotation.RestController;
    12.  
    13. /**
    14.  * @author 杨总
    15.  * @create 2022-11-07 18:28
    16.  */
    17. @RestController
    18. @RequestMapping("/shopCar")
    19. public class shopCarController {
    20.     @Autowired
    21.     private IRedisService redisService;
    22.  
    23.  
    24.     @RequestMapping("/check")
    25.     public JsonResponseBody check(User user){
    26.         return new JsonResponseBody();
    27.     }
    28. }

    UserArgumentResovler : 

    1. package com.ycx.spbootpro.config;
    2.  
    3. import com.ycx.spbootpro.exception.BusinessException;
    4. import com.ycx.spbootpro.model.User;
    5. import com.ycx.spbootpro.service.IRedisService;
    6. import com.ycx.spbootpro.utils.CookieUtils;
    7. import com.ycx.spbootpro.utils.JsonResponseStatus;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.core.MethodParameter;
    10. import org.springframework.stereotype.Component;
    11. import org.springframework.web.bind.support.WebDataBinderFactory;
    12. import org.springframework.web.context.request.NativeWebRequest;
    13. import org.springframework.web.method.support.HandlerMethodArgumentResolver;
    14. import org.springframework.web.method.support.ModelAndViewContainer;
    15.  
    16. import javax.servlet.http.HttpServletRequest;
    17.  
    18. /**
    19.  * @author 杨总
    20.  * @create 2022-11-07 19:14
    21.  *
    22.  * 凡是实现HandlerMethodArgumentResolver接口的类都是参数解析器类
    23.  */
    24.  
    25.  
    26. @Component
    27. public class UserArgumentResovler implements HandlerMethodArgumentResolver {
    28.         @Autowired
    29.         private IRedisService redisService;
    30.     /**
    31.      * supportsParameter方法的返回值，
    32.      * true：则会调用下面resolveArgument
    33.      * false：则不调用
    34.      * @param methodParameter
    35.      * @return
    36.      */
    37.     @Override
    38.     public boolean supportsParameter(MethodParameter methodParameter) {
    39.         return methodParameter.getParameterType() == User.class;
    40.     }
    41.  
    42.  
    43.     /**
    44.      * resolveArgument:具体的业务代码处理
    45.      * @param methodParameter
    46.      * @param modelAndViewContainer
    47.      * @param nativeWebRequest
    48.      * @param webDataBinderFactory
    49.      * @return
    50.      * @throws Exception
    51.      */
    52.     @Override
    53.     public Object resolveArgument(MethodParameter methodParameter,
    54.                                   ModelAndViewContainer modelAndViewContainer,
    55.                                   NativeWebRequest nativeWebRequest,
    56.                                   WebDataBinderFactory webDataBinderFactory) throws Exception {
    57.         HttpServletRequest request =(HttpServletRequest) nativeWebRequest.getNativeRequest();
    58.         String token = CookieUtils.getCookieValue(request, "token");
    59.         if(token==null)
    60.             throw new BusinessException(JsonResponseStatus.TOKEN_EEROR);
    61.         User user=redisService.getUserByToken(token);
    62.         if(user==null)
    63.             throw new BusinessException(JsonResponseStatus.TOKEN_EEROR);
    64.         return user;
    65.     }
    66. }

    WebConfig :

    1. package com.ycx.spbootpro.config;
    2.  
    3. import org.springframework.beans.factory.annotation.Autowired;
    4. import org.springframework.context.annotation.Configuration;
    5. import org.springframework.web.method.support.HandlerMethodArgumentResolver;
    6. import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    7. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    8.  
    9. import java.util.List;
    10.  
    11. /**
    12.  * @author 杨总
    13.  * @create 2022-11-07 19:37
    14.  *
    15.  * WebMvcConfigurer添加之后，会覆盖application.yml中静态资源映射
    16.  * mvc:
    17.  *         static-path-pattern: /static/**
    18.  */
    19.  
    20. @Configuration
    21. public class WebConfig implements WebMvcConfigurer {
    22.     @Autowired
    23.     private UserArgumentResovler userArgumentResovler;
    24.  
    25.     /**
    26.      * 将对应的解析器添加到配置中
    27.      * 配置静态资源访问映射，使用了WebMvcConfigurer会覆盖原有的application.yml文件中的静态资源配置
    28.      * @param registry
    29.      */
    30.     @Override
    31.     public void addResourceHandlers(ResourceHandlerRegistry registry) {
    32.         registry.addResourceHandler("/static/**")
    33.                 .addResourceLocations("classpath:/static/");
    34.     }
    35.  
    36.     /**
    37.      * 添加自定义的参数解析器
    38.      * @param resolvers
    39.      */
    40.     @Override
    41.     public void addArgumentResolvers(List resolvers) {
    42.         resolvers.add(userArgumentResovler);
    43.     }
    44. }


    测试：

     

     然后去进行登录之后，再点击去购物车：

    目前是404，因为queryShopCar页面还没有编写：

     但是此时redis已经存在用户的值了（如下图）：

    经过测试，我们会发现，凡是controller中的方法中包含参数User，都会进参数解析器UserArgumentResovler中的resolveArgument方法；这样一定程度下可以减少用户信息登录检验；

    当然，我们也可以通过拦截器、过滤器、aop等方式，来解决这一类问题。

    二、购物车后台

    购物车明细

     ShopCarItem ：

    1. package com.ycx.spbootpro.model.vo;
    2.  
    3. import lombok.AllArgsConstructor;
    4. import lombok.Data;
    5. import lombok.NoArgsConstructor;
    6.  
    7. import java.math.BigDecimal;
    8. import java.util.ArrayList;
    9. import java.util.List;
    10.  
    11. /**
    12.  * @author 杨总
    13.  * @create 2022-11-07 22:01
    14.  *
    15.  * 购物车明细
    16.  */
    17.  
    18. @Data
    19. @NoArgsConstructor
    20. @AllArgsConstructor
    21. public class ShopCarItem {
    22.  
    23.     private Long gid;//商品id
    24.     private String goodsName;//名称
    25.     private String goodsImg;//图片
    26.     private BigDecimal goodsPrice;//价格
    27.     private Integer quantity;//数量
    28.  
    29.     /**
    30.      * 这是个虚拟方法，用于计算商品的小计
    31.      * 公式：商品的单价*数量=小计
    32.      * @return
    33.      */
    34.     public BigDecimal smalltotal(){
    35.         BigDecimal num=new BigDecimal(quantity);
    36.         return goodsPrice.multiply(num);
    37.     }
    38. }

    1.定义购物车对象ShopCar

    1.1购物车中商品集合
    定义购物车商品详情对象ShopCarItem
    商品ID/商品名称/商品单价/商品图片/商品数量/小计计算方法
    1.2加入购物车
    1.3删除购物车中指定商品
    1.4更新购物车中商品数量
    1.5清空购物车
    1.6总价计算

    1. package com.ycx.spbootpro.model.vo;
    2.  
    3. import java.math.BigDecimal;
    4. import java.util.ArrayList;
    5. import java.util.Arrays;
    6. import java.util.List;
    7. import java.util.ListIterator;
    8.  
    9. /**
    10.  * @author 杨总
    11.  * @create 2022-11-07 22:00
    12.  *
    13.  * vo:view object
    14.  *
    15.  * 购物车对象
    16.  */
    17. public class ShopCar {
    18.     //    1.1购物车中商品集合
    19.     private List<ShopCarItem> items=new ArrayList<>();
    20.  
    21.     public List<ShopCarItem> getItems() {
    22.         return items;
    23.     }
    24.  
    25.     public void setItems(List items) {
    26.         this.items = items;
    27.     }
    28.  
    29.     //    1.2加入购物车（增加）
    30.     public void add(ShopCarItem shopCarItem) {
    31.         //循环遍历购物车集合
    32.         for (ShopCarItem item : items) {
    33.             //判断加入购物车中的商品ID与购物车中的商品ID是否一致
    34.             if (item.getGid().equals(shopCarItem.getGid()+"")) {
    35.                 //获取购物车中原有商品的数量，再进行+1
    36.                 Integer num = item.getQuantity();
    37.                 item.setQuantity(num + 1);
    38. //              item.setQuantity(item.getQuantity()+1);
    39.                 return;
    40.             }
    41.         }
    42.         //加入购物车
    43.         items.add(shopCarItem);
    44.     }
    45.  
    46.     //    1.3删除购物车中指定商品（删除）
    47.     public void delete(String gids) {
    48.         //将gids分割后转换成List集合
    49.         List<String> ids = Arrays.asList(gids.split(","));
    50.         //获取商品集合迭代器对象
    51.         ListIterator<ShopCarItem> it = items.listIterator();
    52.         //循环遍历迭代器
    53.         while (it.hasNext()) {
    54.             //获取迭代器元素并移动下标
    55.             ShopCarItem shopCarItem = it.next();
    56.             //判断购物车中的商品ID是否在被删除商品的ID集合中
    57.             if (ids.contains(shopCarItem.getGid() + "")) {
    58.                 //删除商品
    59.                 it.remove();
    60.             }
    61.         }
    62.     }
    63.  
    64.     //    1.4更新购物车中商品数量（修改）
    65.     public void update(ShopCarItem shopCarItem) {
    66.         //循环遍历购物车集合
    67.         for (ShopCarItem item : items) {
    68.             //判断加入购物车中的商品ID与购物车中的商品ID是否一致
    69.             if (item.getGid().equals(shopCarItem.getGid())) {
    70.                 //将更新的商品数量覆盖购物车中对应商品的数量
    71.                 item.setQuantity(shopCarItem.getQuantity());
    72.                 break;
    73.             }
    74.         }
    75.     }
    76.  
    77.     //    1.5清空购物车
    78.     public void clear() {
    79.         items.clear();
    80.     }
    81.  
    82.     //    1.6总价计算
    83.     public BigDecimal total() {
    84.         BigDecimal total = new BigDecimal(0);
    85.         for (ShopCarItem item : items) {
    86.             total = total.add(item.smalltotal());
    87.         }
    88.         return total;
    89.     }
    90.  
    91. }

      2.web层定义ShopCarController.java

    1) 从session中获取购物车对象ShopCar
    注：根据当前登陆用户ID绑定购物车，确保一人一车
    2) 加入购物车方法
    3) 查询购物车商品方法
    4) 删除购物车指定商品方法
    5) 更新购物车商品数量方法

    1. package com.ycx.spbootpro.controller;
    2.  
    3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    4. import com.ycx.spbootpro.exception.BusinessException;
    5. import com.ycx.spbootpro.model.Goods;
    6. import com.ycx.spbootpro.model.User;
    7. import com.ycx.spbootpro.model.vo.ShopCar;
    8. import com.ycx.spbootpro.model.vo.ShopCarItem;
    9. import com.ycx.spbootpro.service.IGoodsService;
    10. import com.ycx.spbootpro.service.IRedisService;
    11. import com.ycx.spbootpro.utils.JsonResponseBody;
    12. import com.ycx.spbootpro.utils.JsonResponseStatus;
    13. import org.springframework.beans.factory.annotation.Autowired;
    14. import org.springframework.stereotype.Controller;
    15. import org.springframework.web.bind.annotation.CookieValue;
    16. import org.springframework.web.bind.annotation.RequestMapping;
    17. import org.springframework.web.bind.annotation.ResponseBody;
    18. import org.springframework.web.bind.annotation.RestController;
    19. import org.springframework.web.servlet.ModelAndView;
    20.  
    21. import javax.servlet.http.HttpServletRequest;
    22. import javax.servlet.http.HttpServletResponse;
    23. import javax.servlet.http.HttpSession;
    24.  
    25. /**
    26.  * @author 杨总
    27.  * @create 2022-11-07 18:28
    28.  */
    29. @Controller
    30. @RequestMapping("/shopCar")
    31. public class shopCarController {
    32.     @Autowired
    33.     private IRedisService redisService;
    34.  
    35.     @ResponseBody
    36.     @RequestMapping("/check")
    37.     public JsonResponseBody check(User user) {
    38.         return new JsonResponseBody();
    39.     }
    40.  
    41.     //    从session中获取购物车对象
    42.     private ShopCar getShopCar(User user, HttpServletRequest request) {
    43.         HttpSession session = request.getSession();
    44.         ShopCar shopCar = (ShopCar) session.getAttribute(user.getId() + "_shopCar");
    45.         if (shopCar == null) {
    46.             shopCar = new ShopCar();
    47.             session.setAttribute(user.getId() + "_shopCar", shopCar);
    48.         }
    49.         return shopCar;
    50.     }
    51.  
    52.     //    查询
    53.     @RequestMapping("/queryShopCar")
    54.     public ModelAndView queryShopCar(User user,
    55.                                      HttpServletRequest request,
    56.                                      HttpServletResponse resp) {
    57.         ModelAndView mv = new ModelAndView();
    58.         ShopCar shopCar = getShopCar(user, request);
    59.         mv.addObject("shopCar", shopCar);
    60.         mv.setViewName("cart.html");
    61.         return mv;
    62.     }
    63.  
    64.  
    65.     @Autowired
    66.     private IGoodsService goodsService;
    67.  
    68.     /**
    69.      * 增加
    70.      * @param user
    71.      * @param request
    72.      * @param resp
    73.      * @param gid
    74.      * @return
    75.      */
    76.     @ResponseBody
    77.     @RequestMapping("/add")
    78.     public JsonResponseBody add(User user,
    79.                                 HttpServletRequest request,
    80.                                 HttpServletResponse resp,
    81.                                 Long gid) {
    82.  
    83.         ModelAndView mv = new ModelAndView();
    84.         ShopCar shopCar = getShopCar(user, request);
    85.         Goods goods = goodsService.getOne(new QueryWrapper<Goods>().eq("gid", gid));
    86. //       初始化商品详情ShopCarItem
    87.         ShopCarItem item = new ShopCarItem();
    88.         item.setQuantity(1);
    89.         item.setGid(goods.getGid());
    90.         item.setGoodsImg(goods.getGoodsImg());
    91.         item.setGoodsName(goods.getGoodsName());
    92.         item.setGoodsPrice(goods.getGoodsPrice());
    93.         //加入购物车
    94.         shopCar.add(item);
    95.        
    96.         return new JsonResponseBody<>();
    97.     }
    98.  
    99.     /**
    100.      * 修改
    101.      * @param user
    102.      * @param request
    103.      * @param resp
    104.      * @param shopCarItem
    105.      * @return
    106.      */
    107.     @ResponseBody
    108.     @RequestMapping("/update")
    109.     public JsonResponseBody update(User user,
    110.                                 HttpServletRequest request,
    111.                                 HttpServletResponse resp,
    112.                                ShopCarItem shopCarItem) {
    113.  
    114.         ModelAndView mv = new ModelAndView();
    115.         ShopCar shopCar = getShopCar(user, request);
    116.         //加入购物车
    117.         shopCar.update(shopCarItem);
    118.         return new JsonResponseBody<>();
    119.     }
    120.  
    121.  
    122.     /**
    123.      * 删除购物车中指定的商品
    124.      * @param user 用户对象
    125.      * @param gids 商品ID
    126.      * @param request
    127.      * @return
    128.      */
    129.     @RequestMapping("/delete")
    130.     @ResponseBody
    131.     public JsonResponseBody delete(User user,
    132.                                       HttpServletRequest request,
    133.                                       HttpServletResponse resp,
    134.                                       String gids){
    135.         ModelAndView mv = new ModelAndView();
    136.         //从session中获取购物车对象
    137.         ShopCar shopCar = getShopCar(user, request);
    138.         //更新商品数量
    139.         shopCar.delete(gids);
    140.         return new JsonResponseBody<>();
    141.     }
    142.  
    143. }

    三、商品详情页面实现

    index.html修改如下：

    1. DOCTYPE html>
    2. <html>
    3. 	<head lang="en">
    4. 		<#include "common/head.html" />
    5. 		<link rel="stylesheet" type="text/css" href="css/public.css"/>
    6. 		<link rel="stylesheet" type="text/css" href="css/index.css" />
    7. 	head>
    8. 	<div>
    9. 		
    10. 		<#include "common/top.html" />
    11.  
    12. 		
    13. 		<div class="block_home_slider">
    14. 			<div id="home_slider" class="flexslider">
    15. 				<ul class="slides">
    16. 					<li>
    17. 						<div class="slide">
    18. 							<img src="img/banner2.jpg"/>
    19. 						div>
    20. 					li>
    21. 					<li>
    22. 						<div class="slide">
    23. 							<img src="img/banner1.jpg"/>
    24. 						div>
    25. 					li>
    26. 				ul>
    27. 			div>
    28. 		div>
    29. 		
    30. 		
    31. 		<div class="thImg">
    32. 			<div class="clearfix">
    33. 				<a href="${ctx}/page/vase_proList.html"><img src="img/i1.jpg"/>a>
    34. 				<a href="${ctx}/page/proList.html"><img src="img/i2.jpg"/>a>
    35. 				<a href="#2"><img src="img/i3.jpg"/>a>
    36. 			div>
    37. 		div>
    38. 		
    39. 		
    40. 		<div class="news">
    41. 			<div class="wrapper">
    42. 				<h2><img src="img/ih1.jpg"/>h2>
    43. 				<div class="top clearfix">
    44. 					<a href="${ctx}/page/proDetail.html"><img src="img/n1.jpg"/><p>p>a>
    45. 					<a href="${ctx}/page/proDetail.html"><img src="img/n2.jpg"/><p>p>a>
    46. 					<a href="${ctx}/page/proDetail.html"><img src="img/n3.jpg"/><p>p>a>
    47. 				div>
    48. 				<div class="bott clearfix">
    49. 					<a href="${ctx}/page/proDetail.html"><img src="img/n4.jpg"/><p>p>a>
    50. 					<a href="${ctx}/page/proDetail.html"><img src="img/n5.jpg"/><p>p>a>
    51. 					<a href="${ctx}/page/proDetail.html"><img src="img/n6.jpg"/><p>p>a>
    52. 				div>
    53. 				<h2><img src="img/ih2.jpg"/>h2>
    54. 				<#if gt01?? && gt01?size gt 0>
    55. 				
    56. 					<#list gt01?keys as key>
    57. 						<div class="flower clearfix tran">
    58. 						<#list gt01[key] as g>
    59. 							<a href="${ctx}/goods/detail/${g.gid}" class="clearfix">
    60. 								<dl>
    61. 									<dt>
    62. 										<span class="abl">span>
    63. 										<img src="${g.goodsImg}"/>
    64. 										<span class="abr">span>
    65. 									dt>
    66. 									<dd>${g.goodsName}dd>
    67. 									<dd><span>￥ ${g.goodsPrice}span>dd>
    68. 								dl>
    69. 							a>
    70. 						
    71. 						div>
    72. 					
    73. 				
    74.  
    75.  
    76. 			div>
    77. 		div>
    78.  
    79. 		
    80. 		<a href="#" class="ad"><img src="img/ib1.jpg"/>a>
    81. 		
    82. 		
    83. 		<div class="people">
    84. 			<div class="wrapper">
    85. 				<h2><img src="img/ih3.jpg"/>h2>
    86. 				<#if gt07?? && gt07?size gt 0>
    87. 				<#list gt07?keys as key>
    88. 				<div class="pList clearfix tran">
    89. 					<#list gt07[key] as g>
    90. 					<a href="${ctx}/goods/detail/${g.gid}">
    91. 						<dl>
    92. 							<dt>
    93. 								<span class="abl">span>
    94. 								<img src="${g.goodsImg}"/>
    95. 								<span class="abr">span>
    96. 							dt>
    97. 							<dd>${g.goodsName}dd>
    98. 							<dd><span>￥ ${g.goodsPrice}span>dd>
    99. 						dl>
    100. 					a>
    101. 					
    102. 				div>
    103. 				
    104. 				>
    105.  
    106. 			div>
    107. 		div>
    108.  
    109. 		<#include "common/footer.html"/>
    110.  
    111. 		<script src="js/public.js" type="text/javascript" charset="utf-8">script>
    112. 		<script src="js/nav.js" type="text/javascript" charset="utf-8">script>
    113. 		<script src="js/jquery.flexslider-min.js" type="text/javascript" charset="utf-8">script>
    114. 		<script type="text/javascript">
    115. 			$(function() {
    116. 				$('#home_slider').flexslider({
    117. 					animation: 'slide',
    118. 					controlNav: true,
    119. 					directionNav: true,
    120. 					animationLoop: true,
    121. 					slideshow: true,
    122. 					slideshowSpeed:2000,
    123. 					useCSS: false
    124. 				});
    125.  
    126. 			});
    127. 		script>
    128.

    cart.html修改如下:

    1. html>
    2. <html>
    3. 	<head lang="en">
    4. 		<#include "common/head.html">
    5. 		<link rel="stylesheet" type="text/css" href="css/public.css"/>
    6. 		<link rel="stylesheet" type="text/css" href="css/proList.css" />
    7. 	head>
    8. 	<body>
    9. 		
    10. 		<div class="head ding">
    11. 			<div class="wrapper clearfix">
    12. 				<div class="clearfix" id="top">
    13. 					<h1 class="fl"><a href="${ctx}/"><img src="img/logo.png"/>a>h1>
    14. 					<div class="fr clearfix" id="top1">
    15. 						<form action="#" method="get" class="fl">
    16. 							<input type="text" placeholder="搜索" />
    17. 							<input type="button" />
    18. 						form>
    19. 					div>
    20. 				div>
    21. 			div>
    22. 		div>
    23. 		<div class="cart mt">
    24. 			
    25. 			
    26. 			
    27. 			<div class="site">
    28. 				<p class=" wrapper clearfix">
    29. 					<span class="fl">购物车span>
    30. 					<img class="top" src="img/temp/cartTop01.png">
    31. 					<a href="${ctx}/" class="fr">继续购物>a>
    32. 				p>
    33. 			div>
    34. 			
    35. 			<div class="table wrapper">
    36. 				<div class="tr">
    37. 					<div>商品div>
    38. 					<div>单价div>
    39. 					<div>数量div>
    40. 					<div>小计div>
    41. 					<div>操作div>
    42. 				div>
    43. 				<#if shopCar??>
    44. 				<#list shopCar.items as g>
    45. 				<div class="th">
    46. 					<div class="pro clearfix">
    47. 						<label class="fl">
    48. 							<input type="hidden" value="${g.gid!}"/>
    49. 							<input type="checkbox"/>
    50. 							<span>span>
    51. 						label>
    52. 						<a class="fl" href="#">
    53. 							<dl class="clearfix">
    54. 								<dt class="fl"><img style="width: 120px;height: 120px;" src="${g.goodsImg}">dt>
    55. 								<dd class="fl">
    56. 									<p>${g.goodsName}p>
    57. 									<p>颜色分类:p>
    58. 									<p>白色瓷瓶+白色串枚p>
    59. 								dd>
    60. 							dl>
    61. 						a>
    62. 					div>
    63. 					<div class="price">￥${g.goodsPrice}div>
    64. 					<div class="number">
    65. 						<p class="num clearfix">
    66. 							<img class="fl sub" src="img/temp/sub.jpg">
    67. 							<span class="fl">${g.quantity}span>
    68. 							<img class="fl add" src="img/temp/add.jpg">
    69. 						p>
    70. 					div>
    71. 					<div class="price sAll">￥${g.smalltotal()}div>
    72. 					<div class="price"><a class="del" href="javascript:void(0)">删除a>div>
    73. 				div>
    74. 			    
    75. 		        
    76.  
    77. 				<div class="goOn">空空如也~<a href="${ctx}/">去逛逛a>div>
    78. 				<div class="tr clearfix">
    79. 					<label class="fl">
    80. 						<input class="checkAll" type="checkbox"/>
    81. 						<span>span>
    82. 					label>
    83. 					<p class="fl">
    84. 						<a href="javascript:void(0);">全选a>
    85. 						<a href="javascript:void(0);" class="del">删除a>
    86. 					p>
    87. 					<p class="fr">
    88. 						<span>共<small id="sl">0small>件商品span>
    89. 						<span>合计: <small id="all">￥0.00small>span>
    90. 						<a class="count">结算a>
    91. 					p>
    92. 				div>
    93. 			div>
    94. 		div>
    95. 		<div class="mask">div>
    96. 		<div class="tipDel">
    97. 			<p>确定要删除该商品吗？p>
    98. 			<p class="clearfix">
    99. 				<a class="fl cer" href="javascript:void(0);">确定a>
    100. 				<a class="fr cancel" href="javascript:void(0);">取消a>
    101. 			p>
    102. 		div>
    103. 		
    104. 		<#include "common/footer.html">
    105. 		
    106. 		<div class="mask">div>
    107. 		
    108. 		<div class="proDets">
    109. 			<img class="off" src="img/temp/off.jpg" />
    110. 			<div class="proCon clearfix">
    111. 				<div class="proImg fr">
    112. 					<img class="list" src="img/temp/proDet.jpg"  />
    113. 					<div class="smallImg clearfix">
    114. 						<img src="img/temp/proDet01.jpg" data-src="img/temp/proDet01_big.jpg">
    115. 						<img src="img/temp/proDet02.jpg" data-src="img/temp/proDet02_big.jpg">
    116. 						<img src="img/temp/proDet03.jpg" data-src="img/temp/proDet03_big.jpg">
    117. 						<img src="img/temp/proDet04.jpg" data-src="img/temp/proDet04_big.jpg">
    118. 					div>
    119. 				div>
    120. 				<div class="fl">
    121. 					<div class="proIntro change">
    122. 						<p>颜色分类p>
    123. 						<div class="smallImg clearfix">
    124. 							<p class="fl on"><img src="img/temp/prosmall01.jpg" alt="白瓷花瓶+20支快乐花" data-src="img/temp/proBig01.jpg">p>
    125. 							<p class="fl"><img src="img/temp/prosmall02.jpg" alt="白瓷花瓶+20支兔尾巴草" data-src="img/temp/proBig02.jpg">p>
    126. 							<p class="fl"><img src="img/temp/prosmall03.jpg" alt="20支快乐花" data-src="img/temp/proBig03.jpg">p>
    127. 							<p class="fl"><img src="img/temp/prosmall04.jpg" alt="20支兔尾巴草" data-src="img/temp/proBig04.jpg">p>
    128. 						div>
    129. 					div>
    130. 					<div class="changeBtn clearfix">
    131. 						<a href="#2" class="fl"><p class="buy">确认p>a>
    132. 						<a href="#2" class="fr"><p class="cart">取消p>a>
    133. 					div>
    134. 				div>
    135. 			div>
    136. 		div>
    137. 		<div class="pleaseC">
    138. 			<p>请选择宝贝p>
    139. 			<img class="off" src="img/temp/off.jpg" />
    140. 		div>
    141. 		<script src="js/public.js" type="text/javascript" charset="utf-8">script>
    142. 		<script src="js/pro.js" type="text/javascript" charset="utf-8">script>
    143. 		<script src="js/cart.js" type="text/javascript" charset="utf-8">script>
    144. 	body>
    145. html>

    proDetail.html修改如下：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<#include "common/head.html">
    5. 		<link rel="stylesheet" type="text/css" href="css/public.css"/>
    6. 		<link rel="stylesheet" type="text/css" href="css/proList.css"/>
    7. 	head>
    8. 	<body>
    9. 		
    10. 		<#include "common/top.html">
    11. 		
    12. 		<div class="address">
    13. 			<div class="wrapper clearfix">
    14. 				<a href="${ctx}/">首页a>
    15. 				<span>/span>
    16. 				<a href="${ctx}/page/flowerDer.html">装饰摆件a>
    17. 				<span>/span>
    18. 				<a href="${ctx}/page/proList.html">干花花艺a>
    19. 				<span>/span>
    20. 				<#--
    21. 				注意：
    22. 				1）${goods.goodsTitle!}：只能判断goodsTitle属性是否为空，不能判断goods对象是否为空
    23. 				2）${(goods.goodsTitle)!}：既可以判断goods对象是否为空，也可以判断goodsTitle属性是否为空
    24. 				-->
    25. 				<a href="#" class="on">【最家】非洲菊仿真花干花a>
    26. 			div>
    27. 		div>
    28. 		
    29. 		<div class="detCon">
    30. 			<div class="proDet wrapper">
    31. 				<div class="proCon clearfix">
    32. 					<div class="proImg fl">
    33. 						<img class="det" src="${goods.goodsImg}" />
    34. 					div>
    35. 					<div class="fr intro">
    36. 						<div class="title">
    37. 							<h4>【最家】${goods.goodsName}h4>
    38. 							<p>${goods.goodsDetail}p>
    39. 							<span>￥ ${goods.goodsPrice}span>
    40. 						div>
    41. 						<div class="proIntro">
    42. 							<p>颜色分类p>
    43. 							<div class="smallImg clearfix categ">
    44. 								<p class="fl"><img src="img/temp/prosmall01.jpg" alt="白瓷花瓶+20支快乐花" data-src="img/temp/proBig01.jpg">p>
    45. 								<p class="fl"><img src="img/temp/prosmall02.jpg" alt="白瓷花瓶+20支兔尾巴草" data-src="img/temp/proBig02.jpg">p>
    46. 								<p class="fl"><img src="img/temp/prosmall03.jpg" alt="20支快乐花" data-src="img/temp/proBig03.jpg">p>
    47. 								<p class="fl"><img src="img/temp/prosmall04.jpg" alt="20支兔尾巴草" data-src="img/temp/proBig04.jpg">p>
    48. 							div>
    49. 							<p>数量  库存<span>${goods.goodsStock}span>件p>
    50. 							<div class="num clearfix">
    51. 								<img class="fl sub" src="img/temp/sub.jpg">
    52. 								<span class="fl" contentEditable="true">1span>
    53. 								<img class="fl add" src="img/temp/add.jpg">
    54. 								<p class="please fl">请选择商品属性!p>
    55. 							div>
    56. 						div>
    57. 						<div class="btns clearfix">
    58. 							<a href="#2"><p class="buy fl">立即购买p>a>
    59. 							<a href="javascript:void(0);"><p class="cart fr">加入购物车p>a>
    60. 						div>
    61. 					div>
    62. 				div>
    63. 			div>
    64. 		div>
    65. 		<div class="introMsg wrapper clearfix">
    66. 			<div class="msgL fl">
    67. 				<div class="msgTit clearfix">
    68. 					<a class="on">商品详情a>
    69. 					<a>所有评价a>
    70. 				div>
    71. 				<div class="msgAll">
    72. 					<div class="msgImgs">
    73. 						<img src="img/temp/det01.jpg">
    74. 						<img src="img/temp/det02.jpg">
    75. 						<img src="img/temp/det03.jpg">
    76. 						<img src="img/temp/det04.jpg">
    77. 						<img src="img/temp/det05.jpg">
    78. 						<img src="img/temp/det06.jpg">
    79. 						<img src="img/temp/det07.jpg">
    80. 					div>
    81. 					<div class="eva">
    82. 						<div class="per clearfix">
    83. 							<img class="fl" src="img/temp/per01.jpg">
    84. 							<div class="perR fl">
    85. 								<p>馨***呀p>
    86. 								<p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分p>
    87. 								<div class="clearfix">
    88. 									<p><img src="img/temp/eva01.jpg">p>
    89. 									<p><img src="img/temp/eva02.jpg">p>
    90. 									<p><img src="img/temp/eva03.jpg">p>
    91. 									<p><img src="img/temp/eva04.jpg">p>
    92. 									<p><img src="img/temp/eva05.jpg">p>
    93. 								div>
    94. 								<p><span>2016年12月27日08:31span><span>颜色分类：大中小三件套（不含花）span>p>
    95. 							div>
    96. 						div>
    97. 						<div class="per clearfix">
    98. 							<img class="fl" src="img/temp/per02.jpg">
    99. 							<div class="perR fl">
    100. 								<p>么***周p>
    101. 								<p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！p>
    102. 								<p><span>2016年12月27日08:31span><span>颜色分类：大中小三件套（不含花）span>p>
    103. 							div>
    104. 						div>
    105. 						<div class="per clearfix">
    106. 							<img class="fl" src="img/temp/per01.jpg">
    107. 							<div class="perR fl">
    108. 								<p>馨***呀p>
    109. 								<p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分p>
    110. 								<div class="clearfix">
    111. 									<p><img src="img/temp/eva01.jpg">p>
    112. 									<p><img src="img/temp/eva02.jpg">p>
    113. 									<p><img src="img/temp/eva03.jpg">p>
    114. 									<p><img src="img/temp/eva04.jpg">p>
    115. 									<p><img src="img/temp/eva05.jpg">p>
    116. 								div>
    117. 								<p><span>2016年12月27日08:31span><span>颜色分类：大中小三件套（不含花）span>p>
    118. 							div>
    119. 						div>
    120. 						<div class="per clearfix">
    121. 							<img class="fl" src="img/temp/per02.jpg">
    122. 							<div class="perR fl">
    123. 								<p>么***周p>
    124. 								<p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！p>
    125. 								<p><span>2016年12月27日08:31span><span>颜色分类：大中小三件套（不含花）span>p>
    126. 							div>
    127. 						div>
    128. 						<div class="per clearfix">
    129. 							<img class="fl" src="img/temp/per01.jpg">
    130. 							<div class="perR fl">
    131. 								<p>馨***呀p>
    132. 								<p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分p>
    133. 								<div class="clearfix">
    134. 									<p><img src="img/temp/eva01.jpg">p>
    135. 									<p><img src="img/temp/eva02.jpg">p>
    136. 									<p><img src="img/temp/eva03.jpg">p>
    137. 									<p><img src="img/temp/eva04.jpg">p>
    138. 									<p><img src="img/temp/eva05.jpg">p>
    139. 								div>
    140. 								<p><span>2016年12月27日08:31span><span>颜色分类：大中小三件套（不含花）span>p>
    141. 							div>
    142. 						div>
    143. 						<div class="per clearfix">
    144. 							<img class="fl" src="img/temp/per02.jpg">
    145. 							<div class="perR fl">
    146. 								<p>么***周p>
    147. 								<p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！p>
    148. 								<p><span>2016年12月27日08:31span><span>颜色分类：大中小三件套（不含花）span>p>
    149. 							div>
    150. 						div>
    151. 						<div class="per clearfix">
    152. 							<img class="fl" src="img/temp/per01.jpg">
    153. 							<div class="perR fl">
    154. 								<p>馨***呀p>
    155. 								<p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分p>
    156. 								<div class="clearfix">
    157. 									<p><img src="img/temp/eva01.jpg">p>
    158. 									<p><img src="img/temp/eva02.jpg">p>
    159. 									<p><img src="img/temp/eva03.jpg">p>
    160. 									<p><img src="img/temp/eva04.jpg">p>
    161. 									<p><img src="img/temp/eva05.jpg">p>
    162. 								div>
    163. 								<p><span>2016年12月27日08:31span><span>颜色分类：大中小三件套（不含花）span>p>
    164. 							div>
    165. 						div>
    166. 						<div class="per clearfix">
    167. 							<img class="fl" src="img/temp/per02.jpg">
    168. 							<div class="perR fl">
    169. 								<p>么***周p>
    170. 								<p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！p>
    171. 								<p><span>2016年12月27日08:31span><span>颜色分类：大中小三件套（不含花）span>p>
    172. 							div>
    173. 						div>
    174. 						<div class="per clearfix">
    175. 							<img class="fl" src="img/temp/per01.jpg">
    176. 							<div class="perR fl">
    177. 								<p>馨***呀p>
    178. 								<p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分p>
    179. 								<div class="clearfix">
    180. 									<p><img src="img/temp/eva01.jpg">p>
    181. 									<p><img src="img/temp/eva02.jpg">p>
    182. 									<p><img src="img/temp/eva03.jpg">p>
    183. 									<p><img src="img/temp/eva04.jpg">p>
    184. 									<p><img src="img/temp/eva05.jpg">p>
    185. 								div>
    186. 								<p><span>2016年12月27日08:31span><span>颜色分类：大中小三件套（不含花）span>p>
    187. 							div>
    188. 						div>
    189. 						<div class="per clearfix">
    190. 							<img class="fl" src="img/temp/per02.jpg">
    191. 							<div class="perR fl">
    192. 								<p>么***周p>
    193. 								<p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！p>
    194. 								<p><span>2016年12月27日08:31span><span>颜色分类：大中小三件套（不含花）span>p>
    195. 							div>
    196. 						div>
    197. 					div>
    198. 				div>
    199. 			div>
    200. 			<div class="msgR fr">
    201. 				<h4>为你推荐h4>
    202. 				<div class="seeList">
    203. 					<a href="#">
    204. 						<dl>
    205. 							<dt><img src="img/temp/see01.jpg">dt>
    206. 							<dd>【最家】复古文艺风玻璃花瓶dd>
    207. 							<dd>￥193.20dd>
    208. 						dl>
    209. 					a>
    210. 					<a href="#">
    211. 						<dl>
    212. 							<dt><img src="img/temp/see02.jpg">dt>
    213. 							<dd>【最家】复古文艺风玻璃花瓶dd>
    214. 							<dd>￥193.20dd>
    215. 						dl>
    216. 					a>
    217. 					<a href="#">
    218. 						<dl>
    219. 							<dt><img src="img/temp/see03.jpg">dt>
    220. 							<dd>【最家】复古文艺风玻璃花瓶dd>
    221. 							<dd>￥193.20dd>
    222. 						dl>
    223. 					a>
    224. 					<a href="#">
    225. 						<dl>
    226. 							<dt><img src="img/temp/see04.jpg">dt>
    227. 							<dd>【最家】复古文艺风玻璃花瓶dd>
    228. 							<dd>￥193.20dd>
    229. 						dl>
    230. 					a>
    231. 				div>
    232. 				
    233. 			div>
    234. 		div>
    235. 		<div class="like">
    236. 			<h4>猜你喜欢h4>
    237. 			<div class="bottom">
    238. 				<div class="hd">
    239. 					<span class="prev"><img src="img/temp/prev.png">span>
    240. 					<span class="next"><img src="img/temp/next.png">span>
    241. 				div>
    242. 				<div class="imgCon bd">
    243. 					<div class="likeList clearfix">
    244. 						<div>
    245. 							<a href="${ctx}/page/proDetail.html">
    246. 								<dl>
    247. 									<dt><img src="img/temp/like01.jpg">dt>
    248. 									<dd>【最家】复古文艺风玻璃花瓶dd>
    249. 									<dd>￥193.20dd>
    250. 								dl>
    251. 							a>
    252. 							<a href="${ctx}/page/proDetail.html">
    253. 								<dl>
    254. 									<dt><img src="img/temp/like02.jpg">dt>
    255. 									<dd>【最家】复古文艺风玻璃花瓶dd>
    256. 									<dd>￥193.20dd>
    257. 								dl>
    258. 							a>
    259. 							<a href="${ctx}/page/proDetail.html">
    260. 								<dl>
    261. 									<dt><img src="img/temp/like03.jpg">dt>
    262. 									<dd>【最家】复古文艺风玻璃花瓶dd>
    263. 									<dd>￥193.20dd>
    264. 								dl>
    265. 							a>
    266. 							<a href="${ctx}/page/proDetail.html">
    267. 								<dl>
    268. 									<dt><img src="img/temp/like04.jpg">dt>
    269. 									<dd>【最家】复古文艺风玻璃花瓶dd>
    270. 									<dd>￥193.20dd>
    271. 								dl>
    272. 							a>
    273. 							<a href="${ctx}/page/proDetail.html" class="last">
    274. 								<dl>
    275. 									<dt><img src="img/temp/like05.jpg">dt>
    276. 									<dd>【最家】复古文艺风玻璃花瓶dd>
    277. 									<dd>￥193.20dd>
    278. 								dl>
    279. 							a>
    280. 						div>
    281. 						<div>
    282. 							<a href="${ctx}/page/proDetail.html">
    283. 								<dl>
    284. 									<dt><img src="img/temp/like01.jpg">dt>
    285. 									<dd>【最家】复古文艺风玻璃花瓶dd>
    286. 									<dd>￥193.20dd>
    287. 								dl>
    288. 							a>
    289. 							<a href="${ctx}/page/proDetail.html">
    290. 								<dl>
    291. 									<dt><img src="img/temp/like02.jpg">dt>
    292. 									<dd>【最家】复古文艺风玻璃花瓶dd>
    293. 									<dd>￥193.20dd>
    294. 								dl>
    295. 							a>
    296. 							<a href="${ctx}/page/proDetail.html">
    297. 								<dl>
    298. 									<dt><img src="img/temp/like03.jpg">dt>
    299. 									<dd>【最家】复古文艺风玻璃花瓶dd>
    300. 									<dd>￥193.20dd>
    301. 								dl>
    302. 							a>
    303. 							<a href="${ctx}/page/proDetail.html">
    304. 								<dl>
    305. 									<dt><img src="img/temp/like04.jpg">dt>
    306. 									<dd>【最家】复古文艺风玻璃花瓶dd>
    307. 									<dd>￥193.20dd>
    308. 								dl>
    309. 							a>
    310. 							<a href="${ctx}/page/proDetail.html" class="last">
    311. 								<dl>
    312. 									<dt><img src="img/temp/like05.jpg">dt>
    313. 									<dd>【最家】复古文艺风玻璃花瓶dd>
    314. 									<dd>￥193.20dd>
    315. 								dl>
    316. 							a>
    317. 						div>
    318. 					div>
    319. 				div>
    320. 			div>
    321. 		div>
    322. 		
    323. 		<#include "common/footer.html">
    324. 		<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8">script>
    325. 		<script src="js/public.js" type="text/javascript" charset="utf-8">script>
    326. 		<script src="js/nav.js" type="text/javascript" charset="utf-8">script>
    327. 		<script src="js/pro.js" type="text/javascript" charset="utf-8">script>
    328. 		<script src="js/cart.js" type="text/javascript" charset="utf-8">script>
    329. 		<script type="text/javascript">
    330. 			jQuery(".bottom").slide({titCell:".hd ul",mainCell:".bd .likeList",autoPage:true,autoPlay:false,effect:"leftLoop",autoPlay:true,vis:1});
    331. 		script>
    332. 	body>
    333. html>

    GoodsController :

    1. package com.ycx.spbootpro.controller;
    2.  
    3.  
    4. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    5. import com.ycx.spbootpro.model.Goods;
    6. import com.ycx.spbootpro.service.IGoodsService;
    7. import org.springframework.beans.factory.annotation.Autowired;
    8. import org.springframework.web.bind.annotation.PathVariable;
    9. import org.springframework.web.bind.annotation.RequestMapping;
    10.  
    11. import org.springframework.web.bind.annotation.RestController;
    12. import org.springframework.web.servlet.ModelAndView;
    13.  
    14. /**
    15.  * 
    16.  * 商品信息表 前端控制器
    17.  * 
    18.  *
    19.  * @author yangzong
    20.  * @since 2022-11-05
    21.  */
    22. @Controller
    23. @RequestMapping("/goods")
    24. public class GoodsController {
    25.  
    26.     @Autowired
    27.     private IGoodsService goodsService;
    28.  
    29.     /**
    30.      * 根据商品ID查询商品详情信息
    31.      * @param gid
    32.      * @return
    33.      */
    34.     @RequestMapping("/detail/{gid}")
    35.     public ModelAndView detail(@PathVariable("gid") Long gid){
    36.         ModelAndView mv=new ModelAndView();
    37.         //根据商品ID查询单个商品信息
    38.         Goods goods = goodsService.getOne(new QueryWrapper<Goods>().eq("gid", gid));
    39.         //将商品存入model带入前端展示
    40.         mv.addObject("goods",goods);
    41.         //设置跳转页面，商品详情页
    42.         mv.setViewName("proDetail.html");
    43.         return mv;
    44.     }
    45.  
    46. }

    测试查看商品详情页面：

     

     

     ——————————————————————————————————————————

    查看商品详情功能已完成呢

    四、购物车查询以及新增的前台

    修改proDetail.html:

    1. html>
    2. <html>
    3. 	<head>
    4. 		<#include "common/head.html">
    5. 		<link rel="stylesheet" type="text/css" href="css/public.css"/>
    6. 		<link rel="stylesheet" type="text/css" href="css/proList.css"/>
    7. 	head>
    8. 	<body>
    9. 		
    10. 		<#include "common/top.html">
    11. 		
    12. 		<div class="address">
    13. 			<div class="wrapper clearfix">
    14. 				<a href="${ctx}/">首页a>
    15. 				<span>/span>
    16. 				<a href="${ctx}/page/flowerDer.html">装饰摆件a>
    17. 				<span>/span>
    18. 				<a href="${ctx}/page/proList.html">干花花艺a>
    19. 				<span>/span>
    20. 				<#--
    21. 				注意：
    22. 				1）${goods.goodsTitle!}：只能判断goodsTitle属性是否为空，不能判断goods对象是否为空
    23. 				2）${(goods.goodsTitle)!}：既可以判断goods对象是否为空，也可以判断goodsTitle属性是否为空
    24. 				-->
    25. 				<a href="#" class="on">【最家】非洲菊仿真花干花a>
    26. 			div>
    27. 		div>
    28. 		
    29. 		<div class="detCon">
    30. 			<div class="proDet wrapper">
    31. 				<div class="proCon clearfix">
    32. 					<div class="proImg fl">
    33. 						<img class="det" src="${goods.goodsImg}" />
    34. 					div>
    35. 					<div class="fr intro">
    36. 						<div class="title">
    37. 							
    38. 							<input type="hidden" id="gids" value="${goods.gid}">
    39. 							<h4>【最家】${goods.goodsName}h4>
    40. 							<p>${goods.goodsDetail}p>
    41. 							<span>￥ ${goods.goodsPrice}span>
    42. 						div>
    43. 						<div class="proIntro">
    44. 							<p>颜色分类p>
    45. 							<div class="smallImg clearfix categ">
    46. 								<p class="fl"><img src="img/temp/prosmall01.jpg" alt="白瓷花瓶+20支快乐花" data-src="img/temp/proBig01.jpg">p>
    47. 								<p class="fl"><img src="img/temp/prosmall02.jpg" alt="白瓷花瓶+20支兔尾巴草" data-src="img/temp/proBig02.jpg">p>
    48. 								<p class="fl"><img src="img/temp/prosmall03.jpg" alt="20支快乐花" data-src="img/temp/proBig03.jpg">p>
    49. 								<p class="fl"><img src="img/temp/prosmall04.jpg" alt="20支兔尾巴草" data-src="img/temp/proBig04.jpg">p>
    50. 							div>
    51. 							<p>数量  库存<span>${goods.goodsStock}span>件p>
    52. 							<div class="num clearfix">
    53. 								<img class="fl sub" src="img/temp/sub.jpg">
    54. 								<span class="fl" contentEditable="true">1span>
    55. 								<img class="fl add" src="img/temp/add.jpg">
    56. 								<p class="please fl">请选择商品属性!p>
    57. 							div>
    58. 						div>
    59. 						<div class="btns clearfix">
    60. 							<a href="#2"><p class="buy fl">立即购买p>a>
    61. 							<a href="javascript:void(0);"><p class="cart fr">加入购物车p>a>
    62. 						div>
    63. 					div>
    64. 				div>
    65. 			div>
    66. 		div>
    67. 		<div class="introMsg wrapper clearfix">
    68. 			<div class="msgL fl">
    69. 				<div class="msgTit clearfix">
    70. 					<a class="on">商品详情a>
    71. 					<a>所有评价a>
    72. 				div>
    73. 				<div class="msgAll">
    74. 					<div class="msgImgs">
    75. 						<img src="img/temp/det01.jpg">
    76. 						<img src="img/temp/det02.jpg">
    77. 						<img src="img/temp/det03.jpg">
    78. 						<img src="img/temp/det04.jpg">
    79. 						<img src="img/temp/det05.jpg">
    80. 						<img src="img/temp/det06.jpg">
    81. 						<img src="img/temp/det07.jpg">
    82. 					div>
    83. 					<div class="eva">
    84. 						<div class="per clearfix">
    85. 							<img class="fl" src="img/temp/per01.jpg">
    86. 							<div class="perR fl">
    87. 								<p>馨***呀p>
    88. 								<p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分p>
    89. 								<div class="clearfix">
    90. 									<p><img src="img/temp/eva01.jpg">p>
    91. 									<p><img src="img/temp/eva02.jpg">p>
    92. 									<p><img src="img/temp/eva03.jpg">p>
    93. 									<p><img src="img/temp/eva04.jpg">p>
    94. 									<p><img src="img/temp/eva05.jpg">p>
    95. 								div>
    96. 								<p><span>2016年12月27日08:31span><span>颜色分类：大中小三件套（不含花）span>p>
    97. 							div>
    98. 						div>
    99. 						<div class="per clearfix">
    100. 							<img class="fl" src="img/temp/per02.jpg">
    101. 							<div class="perR fl">
    102. 								<p>么***周p>
    103. 								<p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！p>
    104. 								<p><span>2016年12月27日08:31span><span>颜色分类：大中小三件套（不含花）span>p>
    105. 							div>
    106. 						div>
    107. 						<div class="per clearfix">
    108. 							<img class="fl" src="img/temp/per01.jpg">
    109. 							<div class="perR fl">
    110. 								<p>馨***呀p>
    111. 								<p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分p>
    112. 								<div class="clearfix">
    113. 									<p><img src="img/temp/eva01.jpg">p>
    114. 									<p><img src="img/temp/eva02.jpg">p>
    115. 									<p><img src="img/temp/eva03.jpg">p>
    116. 									<p><img src="img/temp/eva04.jpg">p>
    117. 									<p><img src="img/temp/eva05.jpg">p>
    118. 								div>
    119. 								<p><span>2016年12月27日08:31span><span>颜色分类：大中小三件套（不含花）span>p>
    120. 							div>
    121. 						div>
    122. 						<div class="per clearfix">
    123. 							<img class="fl" src="img/temp/per02.jpg">
    124. 							<div class="perR fl">
    125. 								<p>么***周p>
    126. 								<p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！p>
    127. 								<p><span>2016年12月27日08:31span><span>颜色分类：大中小三件套（不含花）span>p>
    128. 							div>
    129. 						div>
    130. 						<div class="per clearfix">
    131. 							<img class="fl" src="img/temp/per01.jpg">
    132. 							<div class="perR fl">
    133. 								<p>馨***呀p>
    134. 								<p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分p>
    135. 								<div class="clearfix">
    136. 									<p><img src="img/temp/eva01.jpg">p>
    137. 									<p><img src="img/temp/eva02.jpg">p>
    138. 									<p><img src="img/temp/eva03.jpg">p>
    139. 									<p><img src="img/temp/eva04.jpg">p>
    140. 									<p><img src="img/temp/eva05.jpg">p>
    141. 								div>
    142. 								<p><span>2016年12月27日08:31span><span>颜色分类：大中小三件套（不含花）span>p>
    143. 							div>
    144. 						div>
    145. 						<div class="per clearfix">
    146. 							<img class="fl" src="img/temp/per02.jpg">
    147. 							<div class="perR fl">
    148. 								<p>么***周p>
    149. 								<p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！p>
    150. 								<p><span>2016年12月27日08:31span><span>颜色分类：大中小三件套（不含花）span>p>
    151. 							div>
    152. 						div>
    153. 						<div class="per clearfix">
    154. 							<img class="fl" src="img/temp/per01.jpg">
    155. 							<div class="perR fl">
    156. 								<p>馨***呀p>
    157. 								<p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分p>
    158. 								<div class="clearfix">
    159. 									<p><img src="img/temp/eva01.jpg">p>
    160. 									<p><img src="img/temp/eva02.jpg">p>
    161. 									<p><img src="img/temp/eva03.jpg">p>
    162. 									<p><img src="img/temp/eva04.jpg">p>
    163. 									<p><img src="img/temp/eva05.jpg">p>
    164. 								div>
    165. 								<p><span>2016年12月27日08:31span><span>颜色分类：大中小三件套（不含花）span>p>
    166. 							div>
    167. 						div>
    168. 						<div class="per clearfix">
    169. 							<img class="fl" src="img/temp/per02.jpg">
    170. 							<div class="perR fl">
    171. 								<p>么***周p>
    172. 								<p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！p>
    173. 								<p><span>2016年12月27日08:31span><span>颜色分类：大中小三件套（不含花）span>p>
    174. 							div>
    175. 						div>
    176. 						<div class="per clearfix">
    177. 							<img class="fl" src="img/temp/per01.jpg">
    178. 							<div class="perR fl">
    179. 								<p>馨***呀p>
    180. 								<p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分p>
    181. 								<div class="clearfix">
    182. 									<p><img src="img/temp/eva01.jpg">p>
    183. 									<p><img src="img/temp/eva02.jpg">p>
    184. 									<p><img src="img/temp/eva03.jpg">p>
    185. 									<p><img src="img/temp/eva04.jpg">p>
    186. 									<p><img src="img/temp/eva05.jpg">p>
    187. 								div>
    188. 								<p><span>2016年12月27日08:31span><span>颜色分类：大中小三件套（不含花）span>p>
    189. 							div>
    190. 						div>
    191. 						<div class="per clearfix">
    192. 							<img class="fl" src="img/temp/per02.jpg">
    193. 							<div class="perR fl">
    194. 								<p>么***周p>
    195. 								<p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！p>
    196. 								<p><span>2016年12月27日08:31span><span>颜色分类：大中小三件套（不含花）span>p>
    197. 							div>
    198. 						div>
    199. 					div>
    200. 				div>
    201. 			div>
    202. 			<div class="msgR fr">
    203. 				<h4>为你推荐h4>
    204. 				<div class="seeList">
    205. 					<a href="#">
    206. 						<dl>
    207. 							<dt><img src="img/temp/see01.jpg">dt>
    208. 							<dd>【最家】复古文艺风玻璃花瓶dd>
    209. 							<dd>￥193.20dd>
    210. 						dl>
    211. 					a>
    212. 					<a href="#">
    213. 						<dl>
    214. 							<dt><img src="img/temp/see02.jpg">dt>
    215. 							<dd>【最家】复古文艺风玻璃花瓶dd>
    216. 							<dd>￥193.20dd>
    217. 						dl>
    218. 					a>
    219. 					<a href="#">
    220. 						<dl>
    221. 							<dt><img src="img/temp/see03.jpg">dt>
    222. 							<dd>【最家】复古文艺风玻璃花瓶dd>
    223. 							<dd>￥193.20dd>
    224. 						dl>
    225. 					a>
    226. 					<a href="#">
    227. 						<dl>
    228. 							<dt><img src="img/temp/see04.jpg">dt>
    229. 							<dd>【最家】复古文艺风玻璃花瓶dd>
    230. 							<dd>￥193.20dd>
    231. 						dl>
    232. 					a>
    233. 				div>
    234. 				
    235. 			div>
    236. 		div>
    237. 		<div class="like">
    238. 			<h4>猜你喜欢h4>
    239. 			<div class="bottom">
    240. 				<div class="hd">
    241. 					<span class="prev"><img src="img/temp/prev.png">span>
    242. 					<span class="next"><img src="img/temp/next.png">span>
    243. 				div>
    244. 				<div class="imgCon bd">
    245. 					<div class="likeList clearfix">
    246. 						<div>
    247. 							<a href="${ctx}/page/proDetail.html">
    248. 								<dl>
    249. 									<dt><img src="img/temp/like01.jpg">dt>
    250. 									<dd>【最家】复古文艺风玻璃花瓶dd>
    251. 									<dd>￥193.20dd>
    252. 								dl>
    253. 							a>
    254. 							<a href="${ctx}/page/proDetail.html">
    255. 								<dl>
    256. 									<dt><img src="img/temp/like02.jpg">dt>
    257. 									<dd>【最家】复古文艺风玻璃花瓶dd>
    258. 									<dd>￥193.20dd>
    259. 								dl>
    260. 							a>
    261. 							<a href="${ctx}/page/proDetail.html">
    262. 								<dl>
    263. 									<dt><img src="img/temp/like03.jpg">dt>
    264. 									<dd>【最家】复古文艺风玻璃花瓶dd>
    265. 									<dd>￥193.20dd>
    266. 								dl>
    267. 							a>
    268. 							<a href="${ctx}/page/proDetail.html">
    269. 								<dl>
    270. 									<dt><img src="img/temp/like04.jpg">dt>
    271. 									<dd>【最家】复古文艺风玻璃花瓶dd>
    272. 									<dd>￥193.20dd>
    273. 								dl>
    274. 							a>
    275. 							<a href="${ctx}/page/proDetail.html" class="last">
    276. 								<dl>
    277. 									<dt><img src="img/temp/like05.jpg">dt>
    278. 									<dd>【最家】复古文艺风玻璃花瓶dd>
    279. 									<dd>￥193.20dd>
    280. 								dl>
    281. 							a>
    282. 						div>
    283. 						<div>
    284. 							<a href="${ctx}/page/proDetail.html">
    285. 								<dl>
    286. 									<dt><img src="img/temp/like01.jpg">dt>
    287. 									<dd>【最家】复古文艺风玻璃花瓶dd>
    288. 									<dd>￥193.20dd>
    289. 								dl>
    290. 							a>
    291. 							<a href="${ctx}/page/proDetail.html">
    292. 								<dl>
    293. 									<dt><img src="img/temp/like02.jpg">dt>
    294. 									<dd>【最家】复古文艺风玻璃花瓶dd>
    295. 									<dd>￥193.20dd>
    296. 								dl>
    297. 							a>
    298. 							<a href="${ctx}/page/proDetail.html">
    299. 								<dl>
    300. 									<dt><img src="img/temp/like03.jpg">dt>
    301. 									<dd>【最家】复古文艺风玻璃花瓶dd>
    302. 									<dd>￥193.20dd>
    303. 								dl>
    304. 							a>
    305. 							<a href="${ctx}/page/proDetail.html">
    306. 								<dl>
    307. 									<dt><img src="img/temp/like04.jpg">dt>
    308. 									<dd>【最家】复古文艺风玻璃花瓶dd>
    309. 									<dd>￥193.20dd>
    310. 								dl>
    311. 							a>
    312. 							<a href="${ctx}/page/proDetail.html" class="last">
    313. 								<dl>
    314. 									<dt><img src="img/temp/like05.jpg">dt>
    315. 									<dd>【最家】复古文艺风玻璃花瓶dd>
    316. 									<dd>￥193.20dd>
    317. 								dl>
    318. 							a>
    319. 						div>
    320. 					div>
    321. 				div>
    322. 			div>
    323. 		div>
    324. 		
    325. 		<#include "common/footer.html">
    326. 		<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8">script>
    327. 		<script src="js/public.js" type="text/javascript" charset="utf-8">script>
    328. 		<script src="js/nav.js" type="text/javascript" charset="utf-8">script>
    329. 		<script src="js/pro.js" type="text/javascript" charset="utf-8">script>
    330. 		<script src="js/cart.js" type="text/javascript" charset="utf-8">script>
    331. 		<script type="text/javascript">
    332. 			jQuery(".bottom").slide({titCell:".hd ul",mainCell:".bd .likeList",autoPage:true,autoPlay:false,effect:"leftLoop",autoPlay:true,vis:1});
    333. 			$(function () {
    334. 				$(".cart").click(function () {
    335. 					$.get('/shopCar/add',{gid:$("#gids").val()},function(rs){
    336. 						if(rs.code!=200){
    337. 							alert('请先登录后再购买商品！');
    338. 						}else
    339. 							location.href='/shopCar/queryShopCar';
    340. 					},'json');
    341. 				});
    342. 			})
    343. 		script>
    344. 	body>
    345. html>

    测试 加入购物车：

     如果再加一个商品：

     

    加入多个商品：

    那么加入购物车就成功啦~

    五、购物车删除功能和修改功能

    删除

    cart.js：

    1. $(function(){
    2. 	/**************数量加减***************/
    3. 	$(".num .sub").click(function(){
    4. 		var num = parseInt($(this).siblings("span").text());
    5. 		if(num<=1){
    6. 			$(this).attr("disabled","disabled");
    7. 		}else{
    8. 			num--;
    9. 			$(this).siblings("span").text(num);
    10. 			//获取除了货币符号以外的数字
    11. 			var price = $(this).parents(".number").prev().text().substring(1);
    12. 			//单价和数量相乘并保留两位小数
    13. 			$(this).parents(".th").find(".sAll").text('￥'+(num*price).toFixed(2));
    14. 			jisuan();
    15. 			zg();
    16. 		}
    17. 	});
    18. 	$(".num .add").click(function(){
    19. 		var num = parseInt($(this).siblings("span").text());
    20. 		if(num>=5){
    21. 			confirm("限购5件");
    22. 		}else{
    23. 			num++;
    24. 			$(this).siblings("span").text(num);
    25. 			var price = $(this).parents(".number").prev().text().substring(1);
    26. 			$(this).parents(".th").find(".sAll").text('￥'+(num*price).toFixed(2));
    27. 			jisuan();
    28. 			zg();
    29. 		}
    30. 	});
    31. 	//计算总价
    32. 	function jisuan(){
    33. 		var all=0;
    34. 		var len =$(".th input[type='checkbox']:checked").length;
    35. 		if(len==0){
    36. 			 $("#all").text('￥'+parseFloat(0).toFixed(2));
    37. 		}else{
    38. 			 $(".th input[type='checkbox']:checked").each(function(){
    39. 			 	//获取小计里的数值
    40. 	        	var sAll = $(this).parents(".pro").siblings('.sAll').text().substring(1);
    41. 	        	//累加
    42. 	        	all+=parseFloat(sAll);
    43. 	        	//赋值
    44. 	        	$("#all").text('￥'+all.toFixed(2));
    45. 	        })
    46. 		}
    47. 		
    48. 	}
    49. 	//计算总共几件商品
    50. 	function zg(){
    51. 		var zsl = 0;
    52. 		var index = $(".th input[type='checkbox']:checked").parents(".th").find(".num span");
    53. 		var len =index.length;
    54. 		if(len==0){
    55. 			$("#sl").text(0);
    56. 		}else{
    57. 			index.each(function(){
    58. 				zsl+=parseInt($(this).text());
    59. 				$("#sl").text(zsl);
    60. 			})
    61. 		}
    62. 		if($("#sl").text()>0){
    63. 			$(".count").css("background","#c10000");
    64. 		}else{
    65. 			$(".count").css("background","#8e8e8e");
    66. 		}
    67. 	}
    68. 	/*****************商品全选***********************/
    69. 	$("input[type='checkbox']").on('click',function(){
    70. 		var sf = $(this).is(":checked");
    71. 		var sc= $(this).hasClass("checkAll");
    72. 		if(sf){
    73. 			if(sc){
    74. 				 $("input[type='checkbox']").each(function(){  
    75. 	                this.checked=true;  
    76. 	           }); 
    77. 				zg();
    78. 	           	jisuan();
    79. 			}else{
    80. 				$(this).checked=true; 
    81. 	            var len = $("input[type='checkbox']:checked").length;
    82. 	            var len1 = $("input").length-1;
    83. 				if(len==len1){
    84. 					 $("input[type='checkbox']").each(function(){  
    85. 		                this.checked=true;  
    86. 		            }); 
    87. 				}
    88. 				zg();
    89. 				jisuan();
    90. 			}
    91. 		}else{
    92. 			if(sc){
    93. 				 $("input[type='checkbox']").each(function(){  
    94. 	                this.checked=false;  
    95. 	           }); 
    96. 				zg();
    97. 				jisuan();
    98. 			}else{
    99. 				$(this).checked=false;
    100. 				var len = $(".th input[type='checkbox']:checked").length;
    101. 	            var len1 = $("input").length-1;
    102. 				if(len
    103. 					$('.checkAll').attr("checked",false);
    104. 				}
    105. 				zg();
    106. 				jisuan();
    107. 			}
    108. 		}
    109. 		
    110. 	});
    111. 	/****************************proDetail 加入购物车*******************************/
    112. 	$(".btns .cart").click(function(){
    113. 		if($(".categ p").hasClass("on")){
    114. 			var num = parseInt($(".num span").text());
    115. 			var num1 = parseInt($(".goCart span").text());
    116. 			$(".goCart span").text(num+num1);
    117. 		}
    118. 	});
    119. 	
    120. 	//删除购物车商品
    121. 	$('.del').click(function(){
    122. 		//定义商品id
    123. 		let gids="";
    124. 		//单个删除
    125. 		if($(this).parent().parent().hasClass("th")){
    126. 			$(".mask").show();
    127. 			$(".tipDel").show();
    128. 			index = $(this).parents(".th").index()-1;
    129.  
    130. 			//TODO 获取当前的checkbox中设置的隐藏域（包含了商品ID）
    131. 			gids=$(".th").eq(index).find('div:eq(0) input[type=hidden]').val();
    132.  
    133. 			$('.cer').click(function(){
    134. 				$(".mask").hide();
    135. 				$(".tipDel").hide();
    136. 				$(".th").eq(index).remove();
    137. 				$('.cer').off('click');
    138. 				if($(".th").length==0){
    139. 					$(".table .goOn").show();
    140. 				}
    141. 				del(gids);
    142. 			})
    143. 		}else{
    144. 			//选中多个一起删除
    145. 			if($(".th input[type='checkbox']:checked").length==0){
    146. 				$(".mask").show();
    147. 				$(".pleaseC").show();
    148. 			}
    149. 			else{
    150. 				$(".mask").show();
    151. 				$(".tipDel").show();
    152.  
    153. 				let gidarr=new Array();
    154. 				$(".th input[type='checkbox']:checked").each(function(j){
    155. 					gidarr.push($(".th").eq(index).find('div:eq(0) input[type=hidden]').val());
    156. 				});
    157. 				gids=gidarr.join(",")
    158.  
    159. 				$('.cer').click(function(){
    160. 					$(".th input[type='checkbox']:checked").each(function(j){
    161. 						index = $(this).parents('.th').index()-1;
    162. 						$(".th").eq(index).remove();
    163. 						if($(".th").length==0){
    164. 							$(".table .goOn").show();
    165. 						}
    166. 					})
    167. 					$(".mask").hide();
    168. 					$(".tipDel").hide();
    169. 					zg();
    170. 					jisuan();
    171.  
    172. 					del(gids);
    173. 				})
    174. 			}
    175. 		}
    176. 	})
    177. 	$('.cancel').click(function(){
    178. 		$(".mask").hide();
    179. 		$(".tipDel").hide();
    180. 	})
    181.  
    182. 	//在页面初始化事件外添加删除方法
    183. //删除商品
    184. 	function del(gids){
    185. 		$.post('/shopCar/delete',{
    186. 			'gids':gids
    187. 		},function(rs){
    188. 			if(rs.code!=200)
    189. 				alert(rs.msg);
    190. 			else
    191. 				location.href='/shopCar/queryShopCar';
    192. 		},'json');
    193. 	}
    194. 	
    195. })

    测试单个删除：

    删除单个成功：

    测试全选删除：

     全选删除成功：

    修改

    cart.js进行整改：

    1. $(function(){
    2. 	/**************数量加减***************/
    3. 	$(".num .sub").click(function(){
    4. 		var num = parseInt($(this).siblings("span").text());
    5. 		if(num<=1){
    6. 			$(this).attr("disabled","disabled");
    7. 		}else{
    8. 			num--;
    9. 			$(this).siblings("span").text(num);
    10. 			//获取除了货币符号以外的数字
    11. 			var price = $(this).parents(".number").prev().text().substring(1);
    12. 			//单价和数量相乘并保留两位小数
    13. 			$(this).parents(".th").find(".sAll").text('￥'+(num*price).toFixed(2));
    14. 			jisuan();
    15. 			zg();
    16. 			//TODO 获取当前行的行索引
    17. 			let index = $(this).parents(".th").index()-1;
    18. 			//获取当前的checkbox中设置的隐藏域（包含了商品ID）
    19. 			let gid=$(".th").eq(index).find('div:eq(0) input[type=hidden]').val();
    20. 			update(num,gid);
    21. 		}
    22. 	});
    23. 	$(".num .add").click(function(){
    24. 		var num = parseInt($(this).siblings("span").text());
    25. 		if(num>=5){
    26. 			confirm("限购5件");
    27. 		}else{
    28. 			num++;
    29. 			$(this).siblings("span").text(num);
    30. 			var price = $(this).parents(".number").prev().text().substring(1);
    31. 			$(this).parents(".th").find(".sAll").text('￥'+(num*price).toFixed(2));
    32. 			jisuan();
    33. 			zg();
    34. 			//TODO 获取当前行的行索引
    35. 			let index = $(this).parents(".th").index()-1;
    36. 			//获取当前的checkbox中设置的隐藏域（包含了商品ID）
    37. 			let gid=$(".th").eq(index).find('div:eq(0) input[type=hidden]').val();
    38. 			update(num,gid);
    39.  
    40. 		}
    41. 	});
    42. 	//计算总价
    43. 	function jisuan(){
    44. 		var all=0;
    45. 		var len =$(".th input[type='checkbox']:checked").length;
    46. 		if(len==0){
    47. 			 $("#all").text('￥'+parseFloat(0).toFixed(2));
    48. 		}else{
    49. 			 $(".th input[type='checkbox']:checked").each(function(){
    50. 			 	//获取小计里的数值
    51. 	        	var sAll = $(this).parents(".pro").siblings('.sAll').text().substring(1);
    52. 	        	//累加
    53. 	        	all+=parseFloat(sAll);
    54. 	        	//赋值
    55. 	        	$("#all").text('￥'+all.toFixed(2));
    56. 	        })
    57. 		}
    58. 		
    59. 	}
    60. 	//计算总共几件商品
    61. 	function zg(){
    62. 		var zsl = 0;
    63. 		var index = $(".th input[type='checkbox']:checked").parents(".th").find(".num span");
    64. 		var len =index.length;
    65. 		if(len==0){
    66. 			$("#sl").text(0);
    67. 		}else{
    68. 			index.each(function(){
    69. 				zsl+=parseInt($(this).text());
    70. 				$("#sl").text(zsl);
    71. 			})
    72. 		}
    73. 		if($("#sl").text()>0){
    74. 			$(".count").css("background","#c10000");
    75. 		}else{
    76. 			$(".count").css("background","#8e8e8e");
    77. 		}
    78. 	}
    79. 	/*****************商品全选***********************/
    80. 	$("input[type='checkbox']").on('click',function(){
    81. 		var sf = $(this).is(":checked");
    82. 		var sc= $(this).hasClass("checkAll");
    83. 		if(sf){
    84. 			if(sc){
    85. 				 $("input[type='checkbox']").each(function(){  
    86. 	                this.checked=true;  
    87. 	           }); 
    88. 				zg();
    89. 	           	jisuan();
    90. 			}else{
    91. 				$(this).checked=true; 
    92. 	            var len = $("input[type='checkbox']:checked").length;
    93. 	            var len1 = $("input").length-1;
    94. 				if(len==len1){
    95. 					 $("input[type='checkbox']").each(function(){  
    96. 		                this.checked=true;  
    97. 		            }); 
    98. 				}
    99. 				zg();
    100. 				jisuan();
    101. 			}
    102. 		}else{
    103. 			if(sc){
    104. 				 $("input[type='checkbox']").each(function(){  
    105. 	                this.checked=false;  
    106. 	           }); 
    107. 				zg();
    108. 				jisuan();
    109. 			}else{
    110. 				$(this).checked=false;
    111. 				var len = $(".th input[type='checkbox']:checked").length;
    112. 	            var len1 = $("input").length-1;
    113. 				if(len
    114. 					$('.checkAll').attr("checked",false);
    115. 				}
    116. 				zg();
    117. 				jisuan();
    118. 			}
    119. 		}
    120. 		
    121. 	});
    122. 	/****************************proDetail 加入购物车*******************************/
    123. 	$(".btns .cart").click(function(){
    124. 		if($(".categ p").hasClass("on")){
    125. 			var num = parseInt($(".num span").text());
    126. 			var num1 = parseInt($(".goCart span").text());
    127. 			$(".goCart span").text(num+num1);
    128. 		}
    129. 	});
    130. 	
    131. 	//删除购物车商品
    132. 	$('.del').click(function(){
    133. 		//定义商品id
    134. 		let gids="";
    135. 		//单个删除
    136. 		if($(this).parent().parent().hasClass("th")){
    137. 			$(".mask").show();
    138. 			$(".tipDel").show();
    139. 			index = $(this).parents(".th").index()-1;
    140.  
    141. 			//TODO 获取当前的checkbox中设置的隐藏域（包含了商品ID）
    142. 			gids=$(".th").eq(index).find('div:eq(0) input[type=hidden]').val();
    143.  
    144. 			$('.cer').click(function(){
    145. 				$(".mask").hide();
    146. 				$(".tipDel").hide();
    147. 				$(".th").eq(index).remove();
    148. 				$('.cer').off('click');
    149. 				if($(".th").length==0){
    150. 					$(".table .goOn").show();
    151. 				}
    152. 				del(gids);
    153. 			})
    154. 		}else{
    155. 			//选中多个一起删除
    156. 			if($(".th input[type='checkbox']:checked").length==0){
    157. 				$(".mask").show();
    158. 				$(".pleaseC").show();
    159. 			}
    160. 			else{
    161. 				$(".mask").show();
    162. 				$(".tipDel").show();
    163.  
    164. 				let gidarr=new Array();
    165. 				$(".th input[type='checkbox']:checked").each(function(j){
    166. 					gidarr.push($(".th").eq(index).find('div:eq(0) input[type=hidden]').val());
    167. 				});
    168. 				gids=gidarr.join(",")
    169.  
    170. 				$('.cer').click(function(){
    171. 					$(".th input[type='checkbox']:checked").each(function(j){
    172. 						index = $(this).parents('.th').index()-1;
    173. 						$(".th").eq(index).remove();
    174. 						if($(".th").length==0){
    175. 							$(".table .goOn").show();
    176. 						}
    177. 					})
    178. 					$(".mask").hide();
    179. 					$(".tipDel").hide();
    180. 					zg();
    181. 					jisuan();
    182.  
    183. 					del(gids);
    184. 				})
    185. 			}
    186. 		}
    187. 	})
    188. 	$('.cancel').click(function(){
    189. 		$(".mask").hide();
    190. 		$(".tipDel").hide();
    191. 	})
    192.  
    193. 	//在页面初始化事件外添加删除方法
    194. //删除商品
    195. 	function del(gids){
    196. 		$.post('/shopCar/delete',{
    197. 			'gids':gids
    198. 		},function(rs){
    199. 			if(rs.code!=200)
    200. 				alert(rs.msg);
    201. 			else
    202. 				location.href='/shopCar/queryShopCar';
    203. 		},'json');
    204. 	}
    205.  
    206. 	//在页面初始化事件外添加修改方法
    207. //更新商品数量
    208. 	function update(num,gid){
    209. 		$.post('/shopCar/update',{
    210. 			'gid':gid,
    211. 			'quantity':num
    212. 		},function(rs){
    213. 			if(rs.code!=200)
    214. 				alert(rs.msg);
    215. 			else
    216. 				location.href='/shopCar/queryShopCar';
    217. 		},'json');
    218. 	}
    219.  
    220. })

    测试：

    今日内容就到这啦，下次再会！如果本文对您有帮助的话，点个赞支持一下叭~ 

  • 相关阅读:
    Docker 学习
    智慧公厕：打造智慧城市的环卫明珠
    C++ 条件变量的使用
    Day130.MySQL高级：Liunx安装、三大范式、InnoDB、数据结构、B+树
    Vue-table动态增加、删除表头不实时更新问题
    mmsegmentation 训练自制数据集
    java毕业设计养老院管理系统Mybatis+系统+数据库+调试部署
    插入排序与希尔排序
    深入理解传输层协议：TCP与UDP的比较与应用
    使用oss对象存储服务的两种方式
  • 原文地址：https://blog.csdn.net/weixin_65808248/article/details/127736372