• springboot项目：加入购物车

    目录

    一、参数解析器以及购物车后台

    参数解析器

    User 

    为什么要使用参数解析器？

    UserArgumentResovler 

    WebConfig 

     ShopCarController 

    User 

     购物车后台

    ShopCar 

     ShopCarItem 

     ShopCarController 

    二、商品详情页

    index.html

    GoodsController 

     proDetail.html

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

     proDetail.html

    cart.html

    四、购物车删除和修改的功能

    cart.js

     cart.html

    一、参数解析器以及购物车后台

    参数解析器

    修改实体类的时间数据类型为date 

    User 

    1. package com.cdl.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 cdl
    17.  * @since 2022-11-05
    18.  */
    19. @Data
    20. @EqualsAndHashCode(callSuper = false)
    21. @TableName("t_user")
    22. public class User implements Serializable {
    23.  
    24.  
    25.     /**
    26.      * 昵称
    27.      */
    28.     private String nickname;
    29.  
    30.     /**
    31.      * MD5(MD5(pass明文+固定salt)+salt)
    32.      */
    33.     private String password;
    34.  
    35.     /**
    36.      * 随机salt
    37.      */
    38.     private String salt;
    39.  
    40.     /**
    41.      * 注册时间
    42.      */
    43.     private Date registerDate;
    44.  
    45.     /**
    46.      * 最后一次登录时间
    47.      */
    48.     private Date lastLoginDate;
    49.  
    50.     /**
    51.      * 登录次数
    52.      */
    53.     private Integer loginCount;
    54.  
    55.  
    56. }

    为什么要使用参数解析器？

    ShopCarController 

    1. package com.cdl.spbootpro.controller;
    2.  
    3. import com.cdl.spbootpro.exception.BusinessException;
    4. import com.cdl.spbootpro.model.User;
    5. import com.cdl.spbootpro.service.IRedisService;
    6. import com.cdl.spbootpro.utils.JsonResponseBody;
    7. import com.cdl.spbootpro.utils.JsonResponseStatus;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.stereotype.Controller;
    10. import org.springframework.web.bind.annotation.CookieValue;
    11. import org.springframework.web.bind.annotation.RequestMapping;
    12. import org.springframework.web.bind.annotation.ResponseBody;
    13.  
    14. /**
    15.  * @author cdl
    16.  * @site www.cdl.com
    17.  * @create 2022-11-07 16:54
    18.  */
    19. @Controller
    20. @RequestMapping("/shopCar")
    21. public class ShopCarController {
    22.  
    23.     @Autowired
    24.     private IRedisService iRedisService;
    25.  
    26.     /***
    27.      * 使用参数解析器之前的做法弊端：
    28.      * 在每个需要登录之后才能操作的功能，都需要做用户登录验证，即以下代码都需要写一遍
    29.      * @param token
    30.      * @return
    31.      */
    32.     @RequestMapping("/")
    33.     public JsonResponseBody check(@CookieValue("token")String token){//取Cookie中的信息 判断是否登录
    34.             if(token == null)
    35.                 throw new BusinessException(JsonResponseStatus.TOKEN_EEROR);//令牌失效
    36.                 User user = iRedisService.getUserToRedis(token);//通过token令牌查询
    37.         if(user == null)
    38.             throw new BusinessException(JsonResponseStatus.TOKEN_EEROR);
    39.           return new  JsonResponseBody();
    40.    }
    41.  
    42.  
    43.  
    44.  
    45.  
    46. }

    新建一个参数解析器类

    UserArgumentResovler 

    1. package com.cdl.spbootpro.config;
    2.  
    3. import com.cdl.spbootpro.exception.BusinessException;
    4. import com.cdl.spbootpro.model.User;
    5. import com.cdl.spbootpro.service.IRedisService;
    6. import com.cdl.spbootpro.utils.CookieUtils;
    7. import com.cdl.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 cdl
    20.  * @site www.cdl.com
    21.  * @create 2022-11-07 17:21
    22.  *
    23.  * 凡是实现HandlerMethodArgumentResolver的类 都是参数解析器类
    24.  */
    25. @Component
    26. public class UserArgumentResovler implements HandlerMethodArgumentResolver {
    27.  
    28.     @Autowired
    29.     private IRedisService iRedisService;
    30.  
    31.     /**
    32.      * supportsParameter的方法的返回值，
    33.      * true：则会调用下面resolveArgument
    34.      * false：则不调用
    35.      * @param methodParameter
    36.      * @return
    37.      */
    38.     @Override
    39.     public boolean supportsParameter(MethodParameter methodParameter) {
    40.         return methodParameter.getParameterType() == User.class;
    41.     }
    42.  
    43.     /**
    44.      *  resolveArgument  具体的业务代码处理
    45.      *
    46.      * @param methodParameter
    47.      * @param modelAndViewContainer
    48.      * @param nativeWebRequest
    49.      * @param webDataBinderFactory
    50.      * @return
    51.      * @throws Exception
    52.      */
    53.     @Override
    54.     public Object resolveArgument(MethodParameter methodParameter,
    55.                                   ModelAndViewContainer modelAndViewContainer,
    56.                                   NativeWebRequest nativeWebRequest,
    57.                                   WebDataBinderFactory webDataBinderFactory) throws Exception {
    58.         HttpServletRequest request = (HttpServletRequest)nativeWebRequest.getNativeRequest();
    59.         String token = CookieUtils.getCookieValue(request,"token");
    60.         if (token == null)
    61.             throw new BusinessException(JsonResponseStatus.TOKEN_EEROR);
    62.         User user = iRedisService.getUserToRedis(token);
    63.         if (user == null)
    64.             throw new BusinessException(JsonResponseStatus.TOKEN_EEROR);
    65.         return user;
    66.     }
    67. }

    一个配置类

    WebConfig 

    1. package com.cdl.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 cdl
    13.  * @site www.cdl.com
    14.  * @create 2022-11-07 18:06
    15.  *
    16.  * WebMvcConfigurer添加之后，会覆盖application.yml中静态资源映射
    17.  * mvc:
    18.  *   static-path-pattern: /static/**
    19.  *
    20.  *   @Configuration改类是一个配置类
    21.  */
    22. @Configuration
    23. public class WebConfig implements WebMvcConfigurer {
    24.  
    25.     @Autowired
    26.     private UserArgumentResovler userArgumentResovler;
    27.  
    28.     /**
    29.      * 配置静态资源访问映射，使用了WebMvcConfigurer会覆盖原有的application.yml文件中的静态资源配置
    30.      * @param registry
    31.      */
    32.     @Override
    33.     public void addResourceHandlers(ResourceHandlerRegistry registry) {
    34.         registry.addResourceHandler("/static/**")
    35.                 .addResourceLocations("classpath:/static/");
    36.     }
    37.  
    38.     /**
    39.      * 将对应的参数解析器 添加到配置中
    40.      * 添加自定义的参数解析器
    41.      * @param resolvers
    42.      */
    43.     @Override
    44.     public void addArgumentResolvers(List resolvers) {
    45.         resolvers.add(userArgumentResovler);
    46.     }
    47.  
    48. }

     ShopCarController 

    1. package com.cdl.spbootpro.controller;
    2.  
    3. import com.cdl.spbootpro.exception.BusinessException;
    4. import com.cdl.spbootpro.model.User;
    5. import com.cdl.spbootpro.service.IRedisService;
    6. import com.cdl.spbootpro.utils.JsonResponseBody;
    7. import com.cdl.spbootpro.utils.JsonResponseStatus;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.stereotype.Controller;
    10. import org.springframework.web.bind.annotation.CookieValue;
    11. import org.springframework.web.bind.annotation.RequestMapping;
    12. import org.springframework.web.bind.annotation.ResponseBody;
    13.  
    14. /**
    15.  * @author cdl
    16.  * @site www.cdl.com
    17.  * @create 2022-11-07 16:54
    18.  */
    19. @Controller
    20. @RequestMapping("/shopCar")
    21. public class ShopCarController {
    22.  
    23.     @Autowired
    24.     private IRedisService iRedisService;
    25.  
    26. //    /***
    27. //     * 使用参数解析器之前的做法弊端：
    28. //     * 在每个需要登录之后才能操作的功能，都需要做用户登录验证，即以下代码都需要写一遍
    29. //     * @param token
    30. //     * @return
    31. //     */
    32. //    @RequestMapping("/")
    33. //    public JsonResponseBody check(@CookieValue("token")String token){//取Cookie中的信息 判断是否登录
    34. //            if(token == null)
    35. //                throw new BusinessException(JsonResponseStatus.TOKEN_EEROR);//令牌失效
    36. //                User user = iRedisService.getUserToRedis(token);//通过token令牌查询
    37. //        if(user == null)
    38. //            throw new BusinessException(JsonResponseStatus.TOKEN_EEROR);
    39. //          return new  JsonResponseBody();
    40. //    }
    41.     @ResponseBody
    42.     @RequestMapping("/check")
    43.     public JsonResponseBody check(User user){
    44.         return new JsonResponseBody();
    45.     }
    46.  
    47.  
    48.  
    49.  
    50. }

    此时运行项目 若是未登录的状态则提示要先登录

     

    登录一下 redis中也有值

    由于后面要用到id 所以给实体类添加一个id

    User 

    1. package com.cdl.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 cdl
    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. }

     购物车后台

    建一个vo的包  用于数据呈现

    ShopCar 

    1. package com.cdl.spbootpro.model.vo;
    2.  
    3. import java.util.ArrayList;
    4. import java.util.Arrays;
    5. import java.util.Iterator;
    6. import java.util.List;
    7.  
    8. /**
    9.  * @author cdl
    10.  * @site www.cdl.com
    11.  * @create 2022-11-07 19:02
    12.  *
    13.  *view object
    14.  * 购物车对象
    15.  */
    16. public class ShopCar {
    17.  
    18.     private List items = new ArrayList<>();
    19.  
    20.     public List getItems() {
    21.         return items;
    22.     }
    23.  
    24.     public void setItems(List items) {
    25.         this.items = items;
    26.     }
    27.  
    28.     //    增加
    29.     public void add(ShopCarItem shopCarItem) {
    30. //        1.当购物车存在该商品时
    31.         for (ShopCarItem item : items) {
    32.             if (shopCarItem.getGid().equals(item.getGid())) {
    33.                 item.setQuantity(item.getQuantity() + 1);
    34.                 return;
    35.             }
    36.         }
    37. //        2.当购物车不存在该商品时
    38.         items.add(shopCarItem);
    39.     }
    40.  
    41.     //    删除    1,2,3
    42.     public void delete(String gids) {
    43.         List gidList = Arrays.asList(gids.split(","));
    44.         Iterator it = items.iterator();
    45.         while (it.hasNext()) {
    46.             ShopCarItem next = it.next();
    47.             if (gidList.contains(next.getGid()+"")) {
    48.                 it.remove();
    49.             }
    50.         }
    51.     }
    52.  
    53.     //    修改
    54.     public void update(ShopCarItem shopCarItem) {
    55.         for (ShopCarItem item : items) {
    56.             if (shopCarItem.getGid().equals(item.getGid())) {
    57.                 item.setQuantity(shopCarItem.getQuantity());
    58.             }
    59.         }
    60.     }
    61.  
    62.  
    63. //    查询
    64.  
    65.  
    66.  
    67. //    小计
    68.  
    69. }

     ShopCarItem 

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

     ShopCarController 

    1. package com.cdl.spbootpro.controller;
    2.  
    3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    4. import com.cdl.spbootpro.exception.BusinessException;
    5. import com.cdl.spbootpro.model.Goods;
    6. import com.cdl.spbootpro.model.User;
    7. import com.cdl.spbootpro.model.vo.ShopCar;
    8. import com.cdl.spbootpro.model.vo.ShopCarItem;
    9. import com.cdl.spbootpro.service.IGoodsService;
    10. import com.cdl.spbootpro.service.IRedisService;
    11. import com.cdl.spbootpro.utils.JsonResponseBody;
    12. import com.cdl.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.servlet.ModelAndView;
    19.  
    20. import javax.servlet.http.HttpServletRequest;
    21. import javax.servlet.http.HttpServletResponse;
    22. import javax.servlet.http.HttpSession;
    23.  
    24. /**
    25.  * @author cdl
    26.  * @site www.cdl.com
    27.  * @create 2022-11-07 16:54
    28.  */
    29. @Controller
    30. @RequestMapping("/shopCar")
    31. public class ShopCarController {
    32.  
    33.     @Autowired
    34.     private IRedisService iRedisService;
    35.  
    36. //    /***
    37. //     * 使用参数解析器之前的做法弊端：
    38. //     * 在每个需要登录之后才能操作的功能，都需要做用户登录验证，即以下代码都需要写一遍
    39. //     * @param token
    40. //     * @return
    41. //     */
    42. //    @RequestMapping("/")
    43. //    public JsonResponseBody check(@CookieValue("token")String token){//取Cookie中的信息 判断是否登录
    44. //            if(token == null)
    45. //                throw new BusinessException(JsonResponseStatus.TOKEN_EEROR);//令牌失效
    46. //                User user = iRedisService.getUserToRedis(token);//通过token令牌查询
    47. //        if(user == null)
    48. //            throw new BusinessException(JsonResponseStatus.TOKEN_EEROR);
    49. //          return new  JsonResponseBody();
    50. //    }
    51.     @ResponseBody
    52.     @RequestMapping("/check")
    53.     public JsonResponseBody check(User user){
    54.         return new JsonResponseBody();
    55.     }
    56.  
    57.  
    58.     //    从session中获取购物车对象
    59.     private ShopCar getShopCar(User user, HttpServletRequest request) {
    60.         HttpSession session = request.getSession();
    61.         ShopCar shopCar = (ShopCar) session.getAttribute(user.getId() + "_shopCar");
    62.         if (shopCar == null) {
    63.             shopCar = new ShopCar();
    64.             session.setAttribute(user.getId() + "_shopCar", shopCar);
    65.         }
    66.         return shopCar;
    67.     }
    68.  
    69.     //    查询
    70.     @RequestMapping("/queryShopCar")
    71.     public ModelAndView queryShopCar(User user,
    72.                                      HttpServletRequest request,
    73.                                      HttpServletResponse resp) {
    74.         ModelAndView mv = new ModelAndView();
    75.         ShopCar shopCar = getShopCar(user, request);
    76.         mv.addObject("shopCar", shopCar);
    77.         mv.setViewName("cart.html");
    78.         return mv;
    79.     }
    80.  
    81.     @Autowired
    82.     private IGoodsService goodsService;
    83.  
    84.     //    增加
    85.     @ResponseBody
    86.     @RequestMapping("/add")
    87.     public JsonResponseBody add(User user,
    88.                                 HttpServletRequest request,
    89.                                 HttpServletResponse resp,
    90.                                 long gid) {
    91.         ModelAndView mv = new ModelAndView();
    92.         ShopCar shopCar = getShopCar(user, request);
    93.         Goods goods =
    94.                 goodsService.getOne(new QueryWrapper().eq("gid", gid));
    95.         //初始化商品详情ShopCarItem
    96.         ShopCarItem item = new ShopCarItem();
    97.         item.setQuantity(1);
    98.         item.setGid(goods.getGid());
    99.         item.setGoodsImg(goods.getGoodsImg());
    100.         item.setGoodsName(goods.getGoodsName());
    101.         item.setGoodsPrice(goods.getGoodsPrice());
    102.         shopCar.add(item);
    103.         return new JsonResponseBody();
    104.     }
    105.  
    106.     //    修改
    107.     @ResponseBody
    108.     @RequestMapping("/update")
    109.     public JsonResponseBody update(User user,
    110.                                    HttpServletRequest request,
    111.                                    HttpServletResponse resp,
    112.                                    ShopCarItem shopCarItem) {
    113.         ModelAndView mv = new ModelAndView();
    114.         ShopCar shopCar = getShopCar(user, request);
    115.         shopCar.update(shopCarItem);
    116.         return new JsonResponseBody();
    117.     }
    118.  
    119.  
    120.     //    删除
    121.     @ResponseBody
    122.     @RequestMapping("/delete")
    123.     public JsonResponseBody delete(User user,
    124.                                    HttpServletRequest request,
    125.                                    HttpServletResponse resp,
    126.                                    String gids) {
    127.         ModelAndView mv = new ModelAndView();
    128.         ShopCar shopCar = getShopCar(user, request);
    129.         shopCar.delete(gids);
    130.         return new JsonResponseBody();
    131.     }
    132.  
    133.  
    134.  
    135. }

    二、商品详情页

    使用写的后台代码

    点击首页index.html跳转至商品详情proDetail.html

    index.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/index.css" />
    7. 	head>
    8. 	<body>
    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. 				<#list gt01?keys as key>
    56. 				<div class="flower clearfix tran">
    57. 					
    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. 			< 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>
    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. 	body>
    129. html>

    写一个方法写查询商品信息

    GoodsController 

    1. package com.cdl.spbootpro.controller;
    2.  
    3.  
    4. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    5. import com.cdl.spbootpro.model.Goods;
    6. import com.cdl.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 cdl
    20.  * @since 2022-11-05
    21.  */
    22. @RestController
    23. @RequestMapping("/goods")
    24. public class GoodsController {
    25.     @Autowired
    26.     private IGoodsService goodsService;
    27.     @RequestMapping("/detail/{gid}")
    28.     public ModelAndView detail(@PathVariable("gid") long gid){
    29.         Goods goods = goodsService.getOne(new QueryWrapper().eq("gid", gid));
    30.         ModelAndView mv = new ModelAndView();
    31.         mv.addObject("goods",goods);
    32.         mv.setViewName("proDetail.html");
    33.         return mv;
    34.  
    35.     }
    36. }

     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. 						<#--						360 -->
    34. 						<img class="det" src="${goods.goodsImg}" />
    35. 					div>
    36. 					<div class="fr intro">
    37. 						<div class="title">
    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. 		script>
    334. 	body>
    335. 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. 						<#--						360 -->
    34. 						<img class="det" src="${goods.goodsImg}" />
    35. 					div>
    36. 					<div class="fr intro">
    37. 						<div class="title">
    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.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>
    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. 	
    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>
    104. <#include "common/footer.html">
    106. <div class="mask">div>
    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>

     从商品详情页面选择商品加入购物车

    四、购物车删除和修改的功能

    修改cart.js中的代码

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

     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>
    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. 	
    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>
    104. <#include "common/footer.html">
    106. <div class="mask">div>
    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>

    加入两件商品

     可以看见修改数量的时候小计会发生改变

     

     点击删除

     确认之后 就删除成功

     

     

  • 相关阅读:
    支付宝支付接口的调用
    服务器、云服务器、高防服务器都有什么优势呢？
    使用React 18和WebSocket构建实时通信功能
    Flink窗口理论到实践
    十、性能测试之数据库测试
    [JQ][属性]【css】
    Qt+WebAssembly学习笔记（六）win10+Qt6.4.0rc1开发环境搭建
    css3 都有哪些新属性
    【数据链路层】封装成帧和透明传输和差错控制
    如何远程控制别人电脑进行技术支持？
  • 原文地址：https://blog.csdn.net/weixin_62735525/article/details/127734472