网上商城项目（加入购物车）
2024-04-21 05:39:48
目录
一、自定义的参数解析器
二、购物车后台
三、商品详情页实现
四、 购物车查询以及新增的前台
1.加入并展示购物车
五、购物车删除功能
六、购物车修改，新增功能
一、自定义的参数解析器
使用前 footer.html
function check() {
$.get('/shopCar/check',{},function(rs){
if(rs.code!=200){
alert('请先登录后再购买商品！');
}else
location.href='/shopCar/queryShopCar';
},'json');
}
在controller里创建一个类叫ShopCarController.java
package com.jwj.spbootpro.controller;import com.jwj.spbootpro.exception.BusinessException;
import com.jwj.spbootpro.model.User;
import com.jwj.spbootpro.service.IredisService;
import com.jwj.spbootpro.utils.JsonResponseBody;
import com.jwj.spbootpro.utils.JsonResponseStatus;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CookieValue;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;/*** @author 敢敢* @site www.javajwj.com* @company xxx公司* @create 2022-11-09 9:34*/
@RestController
@RequestMapping("/shopCar")
public class ShopCarController {@Autowiredprivate IredisService redisService;/*** 用于判断用户在加入购物车时，是否已登录** 使用参数解析器之前的做法弊端：* 在每一个需要登录之后才能操作的功能，都需要做用户登录验证，即以下代码都需要写一遍* @param token* @return*/@RequestMapping("/check")public JsonResponseBody check(@CookieValue("token") String token){if(token == null)throw new BusinessException(JsonResponseStatus.TOKEN_EEROR);User user = redisService.getUserByToken(token);if(user == null)throw new BusinessException(JsonResponseStatus.TOKEN_EEROR);return new JsonResponseBody();}
}
在启动的过程中，因为我是用的自己的虚拟机，所以我们要启动虚拟机，确保能够链接上端口号
如下图所示：
我们要登录才可以加入购物车，token里面都有我们登录的数据
在我们运行时点击加入购物车会出现一个错误，关于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"])
出现上述错误，原因是使用了localLoginDate,改成java.util.Date
将redis数据以及cookie中的数据清空，为了避免干扰<再次登录测试。
就解决了，如下图所示：目前我们是还没有开始写这个界面的方法
使用后 ShopCarController.java
package com.jwj.spbootpro.controller;import com.jwj.spbootpro.exception.BusinessException;
import com.jwj.spbootpro.model.User;
import com.jwj.spbootpro.service.IredisService;
import com.jwj.spbootpro.utils.JsonResponseBody;
import com.jwj.spbootpro.utils.JsonResponseStatus;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CookieValue;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;/*** @author 敢敢* @site www.javajwj.com* @company xxx公司* @create 2022-11-09 9:34*/
@RestController
@RequestMapping("/shopCar")
public class ShopCarController {@Autowiredprivate IredisService redisService;/**** 使用前* 用于判断用户在加入购物车时，是否已登录** 使用参数解析器之前的做法弊端：* 在每一个需要登录之后才能操作的功能，都需要做用户登录验证，即以下代码都需要写一遍* @param token* @return*/
// @RequestMapping("/check")
// public JsonResponseBody check(@CookieValue("token") String token){
// if(token == null)
// throw new BusinessException(JsonResponseStatus.TOKEN_EEROR);
// User user = redisService.getUserByToken(token);
// if(user == null)
// throw new BusinessException(JsonResponseStatus.TOKEN_EEROR);
// return new JsonResponseBody();
// }/*** 使用后* 只要这个对象带了User它就会自动进入到参数解析器* @param user* @return*/@RequestMapping("/check")public JsonResponseBody check(User user){return new JsonResponseBody();}
}
UserArgumentResovler .java
package com.jwj.spbootpro.config;import com.jwj.spbootpro.exception.BusinessException;
import com.jwj.spbootpro.model.User;
import com.jwj.spbootpro.service.IredisService;
import com.jwj.spbootpro.utils.CookieUtils;
import com.jwj.spbootpro.utils.JsonResponseBody;
import com.jwj.spbootpro.utils.JsonResponseStatus;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.MethodParameter;
import org.springframework.stereotype.Component;
import org.springframework.web.bind.support.WebDataBinderFactory;
import org.springframework.web.context.request.NativeWebRequest;
import org.springframework.web.method.support.HandlerMethodArgumentResolver;
import org.springframework.web.method.support.ModelAndViewContainer;import javax.servlet.http.HttpServletRequest;/*** @author 敢敢* @site www.javajwj.com* @company xxx公司* @create 2022-11-09 11:24** 凡是实现HandlerMethodArgumentResolver接口的类都是参数解析器类** 放到我们的容器里面*/
@Component
public class UserArgumentResovler implements HandlerMethodArgumentResolver {@Autowiredprivate IredisService redisService;/*** supportsParameter 的方法的返回值* true：则会调用下面resolveArgument* false：则不调用** @param methodParameter* @return*/@Overridepublic boolean supportsParameter(MethodParameter methodParameter) {return methodParameter.getParameterType() == User.class;}/*** resolveArgument 具体的业务代码处理* @param methodParameter* @param modelAndViewContainer* @param nativeWebRequest* @param webDataBinderFactory* @return* @throws Exception*/@Overridepublic Object resolveArgument(MethodParameter methodParameter, ModelAndViewContainer modelAndViewContainer, NativeWebRequest nativeWebRequest, WebDataBinderFactory webDataBinderFactory) throws Exception {//获取HttpServletRequest对象HttpServletRequest request = (HttpServletRequest)nativeWebRequest.getNativeRequest();//通过request对象获取前端传入的cookie值（token）String token = CookieUtils.getCookieValue(request, "token");//判断token是否为空if(token == null)throw new BusinessException(JsonResponseStatus.TOKEN_EEROR);User user = redisService.getUserByToken(token);//根据token获取redis中存储的用户对象if(user == null)throw new BusinessException(JsonResponseStatus.TOKEN_EEROR);return user;}
}
WebConfig.java
package com.jwj.spbootpro.config;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.method.support.HandlerMethodArgumentResolver;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;import java.util.List;/*** @author 敢敢* @site www.javajwj.com* @company xxx公司* @create 2022-11-09 11:39** WebMvcConfigurer添加之后，会覆盖application.yml中静态资源映射* mvc:* static-path-pattern: /static/**** 添加我们的配置类@Configuration，一般改了配置建议重新启动*/
@Configuration
public class WebConfig implements WebMvcConfigurer {@Autowiredprivate UserArgumentResovler userArgumentResovler;/*** 配置静态资源访问映射，使用了WebMvcConfigurer会覆盖原有的application.yml文件中的静态资源配置* @param registry*/@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");}/*** 添加自定义的参数解析器* @param resolvers*/@Overridepublic void addArgumentResolvers(List<HandlerMethodArgumentResolver> resolvers) {resolvers.add(userArgumentResovler);}
}
经过测试，我们会发现，凡是controller中的方法中包含参数User，都会进参数解析器UserArgumentResovler中的resolveArgument方法；这样一定程度下可以减少用户信息登录检验；
当然，我们也可以通过拦截器、过滤器、aop等方式，来解决这一类问题;
我们在测试一下：
对比我们之前在redis中的桌面控制器，如下图所示：
二、购物车后台
1.定义购物车对象ShopCar
1.1购物车中商品集合
定义购物车商品详情对象ShopCarItem
商品ID/商品名称/商品单价/商品图片/商品数量/小计计算方法
1.2加入购物车
1.3删除购物车中指定商品
1.4更新购物车中商品数量
1.5清空购物车
1.6总价计算
在我们点击购物车的时候，要跳转到一个页面方法，先在ShopCarControllerl里跳转方法写好。
在找到我们的购物车页面。我们先写后台，在model下面建一个vo包，vo：数据层现，创建一个购物车的类，ShopCar.java，购物车里面会有一个购物车明细，ShopCarItem.java
package com.jwj.spbootpro.model.vo;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.List;/*** @author 敢敢* @site www.javajwj.com* @company xxx公司* @create 2022-11-09 14:59** 购物车明细** 扫描了get，set方法以及ToString* 有参无参构造器*/
@Data
@NoArgsConstructor
@AllArgsConstructor
public class ShopCarItem {
// 商品id、商品名称、商品单价、商品数量、商品图片private Long gid;private String goodsName;private BigDecimal goodsPrice;private Integer quantity;private String goodsImg;/*** 这是个虚拟方法，用于计算商品的小计* 公式：商品的单价*数量=小计* @return*/public BigDecimal smalltotal(){BigDecimal num=new BigDecimal(quantity);return goodsPrice.multiply(num);}
}
ShopCar.java
package com.jwj.spbootpro.model.vo;import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Iterator;
import java.util.List;/*** @author 敢敢* @site www.javajwj.com* @company xxx公司* @create 2022-11-09 14:58** view object* 购物车对象*/
public class ShopCar {//查询就是这里面的itemsprivate List<ShopCarItem> items = new ArrayList<>();public void setItems(List<ShopCarItem> items) {this.items = items;}public List<ShopCarItem> getItems() {return items;}// 增加public void add(ShopCarItem shopCarItem){
// 1.当购物车存在该商品时//循环遍历购物车集合for (ShopCarItem item : items) {//判断加入购物车中的商品ID与购物车中的商品ID是否一致if(shopCarItem.getGid().equals(item.getGid())){//获取购物车中原有商品的数量，再进行+1item.setQuantity(item.getQuantity()+1);return;}}
// 2.当购物车不存在该商品时，加入购物车items.add(shopCarItem);}// 删除public void delete(String gids){//将gids分割后转换成List集合List<String> gidList = Arrays.asList(gids.split(","));//获取商品集合迭代器对象Iterator<ShopCarItem> it = items.iterator();//循环遍历迭代器while (it.hasNext()){//获取迭代器元素并移动下班ShopCarItem next = it.next();//判断购物车中的商品ID是否在被删除商品的ID集合汇总if(gidList.contains(next.getGid()+"")){//删除商品it.remove();}}}// 修改public void update(ShopCarItem shopCarItem) {//循环遍历购物车集合for (ShopCarItem item : items) {//判断加入购物车中的商品ID与购物车中的商品ID是否一致if(shopCarItem.getGid().equals(item.getGid())){//将修改的商品数量覆盖购物车中对应商品的数量item.setQuantity(shopCarItem.getQuantity());break;}}}// 清空购物车public void clear(){items.clear();}// 总价计算public BigDecimal total() {BigDecimal total = new BigDecimal(0);for (ShopCarItem item : items) {total = total.add(item.smalltotal());}return total;}}
web层定义ShopCarController.java
1) 从session中获取购物车对象ShopCar
注：根据当前登陆用户ID绑定购物车，确保一人一车
2) 加入购物车方法
3) 查询购物车商品方法
4) 删除购物车指定商品方法
5) 更新购物车商品数量方法
package com.jwj.spbootpro.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jwj.spbootpro.exception.BusinessException;
import com.jwj.spbootpro.model.Goods;
import com.jwj.spbootpro.model.User;
import com.jwj.spbootpro.model.vo.ShopCar;
import com.jwj.spbootpro.model.vo.ShopCarItem;
import com.jwj.spbootpro.service.IGoodsService;
import com.jwj.spbootpro.service.IredisService;
import com.jwj.spbootpro.utils.JsonResponseBody;
import com.jwj.spbootpro.utils.JsonResponseStatus;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CookieValue;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;/*** @author 敢敢* @site www.javajwj.com* @company xxx公司* @create 2022-11-09 9:34*/
@Controller
@RequestMapping("/shopCar")
public class ShopCarController {@Autowiredprivate IredisService redisService;/**** 使用前* 用于判断用户在加入购物车时，是否已登录** 使用参数解析器之前的做法弊端：* 在每一个需要登录之后才能操作的功能，都需要做用户登录验证，即以下代码都需要写一遍* @param token* @return*/
// @RequestMapping("/check")
// public JsonResponseBody check(@CookieValue("token") String token){
// if(token == null)
// throw new BusinessException(JsonResponseStatus.TOKEN_EEROR);
// User user = redisService.getUserByToken(token);
// if(user == null)
// throw new BusinessException(JsonResponseStatus.TOKEN_EEROR);
// return new JsonResponseBody();
// }/*** 使用后* 只要这个对象带了User它就会自动进入到参数解析器* @param user* @return*/@ResponseBody@RequestMapping("/check")public JsonResponseBody check(User user){return new JsonResponseBody();}// 从session中获取购物车对象private ShopCar getShopCar(User user,HttpServletRequest request){//获取sessionHttpSession session = request.getSession();//从session中获取购物车对象ShopCar shopCar = (ShopCar)session.getAttribute(user.getId() + "_shopCar");//判断shopCar是否为空if(shopCar == null){//初始化购物车对象shopCar = new ShopCar();//将初始化完成的购物车对象根据用户id报错到session中session.setAttribute(user.getId()+"_shopCar",shopCar);}return shopCar;}
// 查询 根据用户id获取指定用户的购物车并返回前端页面展示商品信息@RequestMapping("/queryShopCar")public ModelAndView check(User user,HttpServletRequest request,HttpServletResponse response){ModelAndView mv = new ModelAndView();//从session中获取购物车对象ShopCar shopCar = getShopCar(user, request);//将购物车中的商品寄回保存到model中mv.addObject("shopCar",shopCar);//设置跳转页面，逻辑视图名mv.setViewName("cart.html");return mv;}@Autowiredprivate IGoodsService goodsService;
// 增加@ResponseBody@RequestMapping("/add")public JsonResponseBody add(User user,long gid,HttpServletRequest request){//从session中获取购物车对象ShopCar shopCar = getShopCar(user, request);//根据商品ID获取商品对象信息Goods goods = goodsService.getOne(new QueryWrapper<Goods>().eq("gid", gid));//初始化商品详情ShopCarItemShopCarItem item = new ShopCarItem();item.setQuantity(1);item.setGid(goods.getGid());item.setGoodsName(goods.getGoodsName());item.setGoodsImg(goods.getGoodsImg());item.setGoodsPrice(goods.getGoodsPrice());//加入购物车shopCar.add(item);return new JsonResponseBody<>();}// 修改@ResponseBody@RequestMapping("/update")public JsonResponseBody update(User user,ShopCarItem shopCarItem,HttpServletRequest request){//从session中获取购物车对象ShopCar shopCar = getShopCar(user, request);//修改商品数量shopCar.update(shopCarItem);return new JsonResponseBody<>();}// 删除@ResponseBody@RequestMapping("/delte")public JsonResponseBody delete(User user,String gids,HttpServletRequest request){//从session中获取购物车对象ShopCar shopCar = getShopCar(user, request);//删除商品数量shopCar.delete(gids);return new JsonResponseBody<>();}}
我们的购物车页面就能展示了目前里面的数据还没有变活。
三、商品详情页实现
修改index.html
商品详情页的模板跳转地址如下：
${ctx}/page/proDetail.html
目前我们访问出结果如下图所示：
把数据变活，接下来我们需要跳转后台controller加载数据
index.html
<!DOCTYPE html>
<html><head lang="en"><#include "common/head.html"><link rel="stylesheet" type="text/css" href="css/public.css"/><link rel="stylesheet" type="text/css" href="css/index.css" /></head><body><!------------------------------head------------------------------><#include "common/top.html"><!-------------------------banner---------------------------><div class="block_home_slider"><div id="home_slider" class="flexslider"><ul class="slides"><li><div class="slide"><img src="img/banner2.jpg"/></div></li><li><div class="slide"><img src="img/banner1.jpg"/></div></li></ul></div></div><!------------------------------thImg------------------------------><div class="thImg"><div class="clearfix"><a href="${ctx}/page/vase_proList.html"><img src="img/i1.jpg"/></a><a href="${ctx}/page/proList.html"><img src="img/i2.jpg"/></a><a href="#2"><img src="img/i3.jpg"/></a></div></div><!------------------------------news------------------------------><div class="news"><div class="wrapper"><h2><img src="img/ih1.jpg"/></h2><div class="top clearfix"><a href="${ctx}/page/proDetail.html"><img src="img/n1.jpg"/><p></p></a><a href="${ctx}/page/proDetail.html"><img src="img/n2.jpg"/><p></p></a><a href="${ctx}/page/proDetail.html"><img src="img/n3.jpg"/><p></p></a></div><div class="bott clearfix"><a href="${ctx}/page/proDetail.html"><img src="img/n4.jpg"/><p></p></a><a href="${ctx}/page/proDetail.html"><img src="img/n5.jpg"/><p></p></a><a href="${ctx}/page/proDetail.html"><img src="img/n6.jpg"/><p></p></a></div><h2><img src="img/ih2.jpg"/></h2><#if gt01?? && gt01?size gt 0>
<#-- 遍历gt01中所有的key，是为了该key中的对象--><#list gt01?keys as key><div class="flower clearfix tran"><#list gt01[key] as g><a href="${ctx}/goods/detail/${g.gid}" class="clearfix"><dl><dt><span class="abl"></span><img src="${g.goodsImg}"/><span class="abr"></span></dt><dd>${g.goodsName}</dd><dd><span>¥ ${g.goodsPrice}</span></dd></dl></a></#list></div></#list></#if></div></div><!------------------------------ad------------------------------><a href="#" class="ad"><img src="img/ib1.jpg"/></a><!------------------------------people------------------------------><div class="people"><div class="wrapper"><h2><img src="img/ih3.jpg"/></h2><#if gt07?? && gt07?size gt 0><#list gt07?keys as key><div class="pList clearfix tran"><#list gt07[key] as g><a href="${ctx}/goods/detail/${g.gid}"><dl><dt><span class="abl"></span><img src="${g.goodsImg}"/><span class="abr"></span></dt><dd>${g.goodsName}</dd><dd><span>￥${g.goodsPrice}</span></dd></dl></a></#list></div></#list></#if></div></div><#include "common/footer.html"/><script src="js/public.js" type="text/javascript" charset="utf-8"></script><script src="js/nav.js" type="text/javascript" charset="utf-8"></script><script src="js/jquery.flexslider-min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {a$('#home_slider').flexslider({animation: 'slide',controlNav: true,directionNav: true,animationLoop: true,slideshow: true,slideshowSpeed:2000,useCSS: false});});</script></body>
</html>
GoodsController.java
package com.jwj.spbootpro.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jwj.spbootpro.model.Goods;
import com.jwj.spbootpro.service.IGoodsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;/*** <p>* 商品信息表 前端控制器* </p>** @author jwj* @since 2022-11-07*/
@Controller
@RequestMapping("/goods")
public class GoodsController {@Autowiredprivate IGoodsService goodsService;@RequestMapping("/detail/{gid}")public ModelAndView datail(@PathVariable("gid") long gid){//根据商品ID查询单个商品信息Goods goods = goodsService.getOne(new QueryWrapper<Goods>().eq("gid", gid));ModelAndView mv = new ModelAndView();//将商品存入model带入前端展示mv.addObject("goods",goods);//设置跳转页面，商品详情页mv.setViewName("proDetail.html");return mv;}}
proDetail.html修改如下：
<div class="proCon clearfix"><div class="proImg fl">
<#-- 360--><img class="det" src="${goods.goodsImg}" /></div><div class="fr intro"><div class="title"><h4>${goods.goodsName}</h4><p>${goods.goodsDetail}</p><span>￥59.90</span></div><div class="proIntro"><p>颜色分类</p><div class="smallImg clearfix categ"><p class="fl"><img src="img/temp/prosmall01.jpg" alt="白瓷花瓶+20支快乐花" data-src="img/temp/proBig01.jpg"></p><p class="fl"><img src="img/temp/prosmall02.jpg" alt="白瓷花瓶+20支兔尾巴草" data-src="img/temp/proBig02.jpg"></p><p class="fl"><img src="img/temp/prosmall03.jpg" alt="20支快乐花" data-src="img/temp/proBig03.jpg"></p><p class="fl"><img src="img/temp/prosmall04.jpg" alt="20支兔尾巴草" data-src="img/temp/proBig04.jpg"></p></div><p>数量 库存<span>${goods.goodsStock}</span>件</p><div class="num clearfix"><img class="fl sub" src="img/temp/sub.jpg"><span class="fl" contentEditable="true">1</span><img class="fl add" src="img/temp/add.jpg"><p class="please fl">请选择商品属性!</p></div></div><div class="btns clearfix"><a href="#2"><p class="buy fl">立即购买</p></a><a href="javascript:void(0);"><p class="cart fr">加入购物车</p></a></div></div></div>效果如下图所示：
这里的项目有很多还没有完成的，要慢慢进一步修改
四、 购物车查询以及新增的前台
1.加入并展示购物车
给加入购物车添加点击事件，加入并展示购物车
proDetail.html
<!DOCTYPE html>
<html><head><#include "common/head.html"><link rel="stylesheet" type="text/css" href="css/public.css"/><link rel="stylesheet" type="text/css" href="css/proList.css"/></head><body><!------------------------------head------------------------------><#include "common/top.html"><!-----------------address-------------------------------><div class="address"><div class="wrapper clearfix"><a href="${ctx}/">首页</a><span>/</span><a href="${ctx}/page/flowerDer.html">装饰摆件</a><span>/</span><a href="${ctx}/page/proList.html">干花花艺</a><span>/</span><#--注意：1）${goods.goodsTitle!}：只能判断goodsTitle属性是否为空，不能判断goods对象是否为空2）${(goods.goodsTitle)!}：既可以判断goods对象是否为空，也可以判断goodsTitle属性是否为空--><a href="#" class="on">【最家】非洲菊仿真花干花</a></div></div><!-----------------------Detail------------------------------><div class="detCon"><div class="proDet wrapper"><div class="proCon clearfix"><div class="proImg fl">
<#-- 360--><img class="det" src="${goods.goodsImg}" /><#--<div class="smallImg clearfix">]<img src="img/temp/proDet01.jpg" data-src="img/temp/proDet01_big.jpg"><img src="img/temp/proDet02.jpg" data-src="img/temp/proDet02_big.jpg"><img src="img/temp/proDet03.jpg" data-src="img/temp/proDet03_big.jpg"><img src="img/temp/proDet04.jpg" data-src="img/temp/proDet04_big.jpg"></div>--></div><div class="fr intro"><div class="title">
<#-- 这里我就放在一起了--><input type="hidden" id="gids" value="${goods.gid}"><h4>${goods.goodsName}</h4><p>${goods.goodsDetail}</p><span>￥59.90</span></div><div class="proIntro"><p>颜色分类</p><div class="smallImg clearfix categ"><p class="fl"><img src="img/temp/prosmall01.jpg" alt="白瓷花瓶+20支快乐花" data-src="img/temp/proBig01.jpg"></p><p class="fl"><img src="img/temp/prosmall02.jpg" alt="白瓷花瓶+20支兔尾巴草" data-src="img/temp/proBig02.jpg"></p><p class="fl"><img src="img/temp/prosmall03.jpg" alt="20支快乐花" data-src="img/temp/proBig03.jpg"></p><p class="fl"><img src="img/temp/prosmall04.jpg" alt="20支兔尾巴草" data-src="img/temp/proBig04.jpg"></p></div><p>数量 库存<span>${goods.goodsStock}</span>件</p><div class="num clearfix"><img class="fl sub" src="img/temp/sub.jpg"><span class="fl" contentEditable="true">1</span><img class="fl add" src="img/temp/add.jpg"><p class="please fl">请选择商品属性!</p></div></div><div class="btns clearfix"><a href="#2"><p class="buy fl">立即购买</p></a><a href="javascript:void(0);"><p class="cart fr">加入购物车</p></a></div></div></div></div></div><div class="introMsg wrapper clearfix"><div class="msgL fl"><div class="msgTit clearfix"><a class="on">商品详情</a><a>所有评价</a></div><div class="msgAll"><div class="msgImgs"><img src="img/temp/det01.jpg"><img src="img/temp/det02.jpg"><img src="img/temp/det03.jpg"><img src="img/temp/det04.jpg"><img src="img/temp/det05.jpg"><img src="img/temp/det06.jpg"><img src="img/temp/det07.jpg"></div><div class="eva"><div class="per clearfix"><img class="fl" src="img/temp/per01.jpg"><div class="perR fl"><p>馨***呀</p><p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分</p><div class="clearfix"><p><img src="img/temp/eva01.jpg"></p><p><img src="img/temp/eva02.jpg"></p><p><img src="img/temp/eva03.jpg"></p><p><img src="img/temp/eva04.jpg"></p><p><img src="img/temp/eva05.jpg"></p></div><p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p></div></div><div class="per clearfix"><img class="fl" src="img/temp/per02.jpg"><div class="perR fl"><p>么***周</p><p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！</p><p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p></div></div><div class="per clearfix"><img class="fl" src="img/temp/per01.jpg"><div class="perR fl"><p>馨***呀</p><p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分</p><div class="clearfix"><p><img src="img/temp/eva01.jpg"></p><p><img src="img/temp/eva02.jpg"></p><p><img src="img/temp/eva03.jpg"></p><p><img src="img/temp/eva04.jpg"></p><p><img src="img/temp/eva05.jpg"></p></div><p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p></div></div><div class="per clearfix"><img class="fl" src="img/temp/per02.jpg"><div class="perR fl"><p>么***周</p><p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！</p><p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p></div></div><div class="per clearfix"><img class="fl" src="img/temp/per01.jpg"><div class="perR fl"><p>馨***呀</p><p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分</p><div class="clearfix"><p><img src="img/temp/eva01.jpg"></p><p><img src="img/temp/eva02.jpg"></p><p><img src="img/temp/eva03.jpg"></p><p><img src="img/temp/eva04.jpg"></p><p><img src="img/temp/eva05.jpg"></p></div><p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p></div></div><div class="per clearfix"><img class="fl" src="img/temp/per02.jpg"><div class="perR fl"><p>么***周</p><p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！</p><p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p></div></div><div class="per clearfix"><img class="fl" src="img/temp/per01.jpg"><div class="perR fl"><p>馨***呀</p><p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分</p><div class="clearfix"><p><img src="img/temp/eva01.jpg"></p><p><img src="img/temp/eva02.jpg"></p><p><img src="img/temp/eva03.jpg"></p><p><img src="img/temp/eva04.jpg"></p><p><img src="img/temp/eva05.jpg"></p></div><p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p></div></div><div class="per clearfix"><img class="fl" src="img/temp/per02.jpg"><div class="perR fl"><p>么***周</p><p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！</p><p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p></div></div><div class="per clearfix"><img class="fl" src="img/temp/per01.jpg"><div class="perR fl"><p>馨***呀</p><p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装好，全5分</p><div class="clearfix"><p><img src="img/temp/eva01.jpg"></p><p><img src="img/temp/eva02.jpg"></p><p><img src="img/temp/eva03.jpg"></p><p><img src="img/temp/eva04.jpg"></p><p><img src="img/temp/eva05.jpg"></p></div><p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p></div></div><div class="per clearfix"><img class="fl" src="img/temp/per02.jpg"><div class="perR fl"><p>么***周</p><p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！</p><p><span>2016年12月27日08:31</span><span>颜色分类：大中小三件套（不含花）</span></p></div></div></div></div></div><div class="msgR fr"><h4>为你推荐</h4><div class="seeList"><a href="#"><dl><dt><img src="img/temp/see01.jpg"></dt><dd>【最家】复古文艺风玻璃花瓶</dd><dd>￥193.20</dd></dl></a><a href="#"><dl><dt><img src="img/temp/see02.jpg"></dt><dd>【最家】复古文艺风玻璃花瓶</dd><dd>￥193.20</dd></dl></a><a href="#"><dl><dt><img src="img/temp/see03.jpg"></dt><dd>【最家】复古文艺风玻璃花瓶</dd><dd>￥193.20</dd></dl></a><a href="#"><dl><dt><img src="img/temp/see04.jpg"></dt><dd>【最家】复古文艺风玻璃花瓶</dd><dd>￥193.20</dd></dl></a></div></div></div><div class="like"><h4>猜你喜欢</h4><div class="bottom"><div class="hd"><span class="prev"><img src="img/temp/prev.png"></span><span class="next"><img src="img/temp/next.png"></span></div><div class="imgCon bd"><div class="likeList clearfix"><div><a href="${ctx}/page/proDetail.html"><dl><dt><img src="img/temp/like01.jpg"></dt><dd>【最家】复古文艺风玻璃花瓶</dd><dd>￥193.20</dd></dl></a><a href="${ctx}/page/proDetail.html"><dl><dt><img src="img/temp/like02.jpg"></dt><dd>【最家】复古文艺风玻璃花瓶</dd><dd>￥193.20</dd></dl></a><a href="${ctx}/page/proDetail.html"><dl><dt><img src="img/temp/like03.jpg"></dt><dd>【最家】复古文艺风玻璃花瓶</dd><dd>￥193.20</dd></dl></a><a href="${ctx}/page/proDetail.html"><dl><dt><img src="img/temp/like04.jpg"></dt><dd>【最家】复古文艺风玻璃花瓶</dd><dd>￥193.20</dd></dl></a><a href="${ctx}/page/proDetail.html" class="last"><dl><dt><img src="img/temp/like05.jpg"></dt><dd>【最家】复古文艺风玻璃花瓶</dd><dd>￥193.20</dd></dl></a></div><div><a href="${ctx}/page/proDetail.html"><dl><dt><img src="img/temp/like01.jpg"></dt><dd>【最家】复古文艺风玻璃花瓶</dd><dd>￥193.20</dd></dl></a><a href="${ctx}/page/proDetail.html"><dl><dt><img src="img/temp/like02.jpg"></dt><dd>【最家】复古文艺风玻璃花瓶</dd><dd>￥193.20</dd></dl></a><a href="${ctx}/page/proDetail.html"><dl><dt><img src="img/temp/like03.jpg"></dt><dd>【最家】复古文艺风玻璃花瓶</dd><dd>￥193.20</dd></dl></a><a href="${ctx}/page/proDetail.html"><dl><dt><img src="img/temp/like04.jpg"></dt><dd>【最家】复古文艺风玻璃花瓶</dd><dd>￥193.20</dd></dl></a><a href="${ctx}/page/proDetail.html" class="last"><dl><dt><img src="img/temp/like05.jpg"></dt><dd>【最家】复古文艺风玻璃花瓶</dd><dd>￥193.20</dd></dl></a></div></div></div></div></div><!--返回顶部--><#include "common/footer.html"><script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8"></script><script src="js/public.js" type="text/javascript" charset="utf-8"></script><script src="js/nav.js" type="text/javascript" charset="utf-8"></script><script src="js/pro.js" type="text/javascript" charset="utf-8"></script><script src="js/cart.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">jQuery(".bottom").slide({titCell:".hd ul",mainCell:".bd .likeList",autoPage:true,autoPlay:false,effect:"leftLoop",autoPlay:true,vis:1});$(function(){$('.cart').click(function(){$.get('/shopCar/add',{gid:$("#gids").val()},function(rs){if(rs.code!=200){alert('请先登录后再购买商品！');}elselocation.href='/shopCar/queryShopCar';},'json');});});</script></body>
</html>
当我们点击加入购物车就没有问题了，只不过还要把购物车里的数据变活
cart.html 修改 一共是6个th，把数据删掉，变活。
<#if shopCar??><#list shopCar.items as g><div class="th"><div class="pro clearfix"><label class="fl"><input type="hidden" value="${g.gid!}"/><input type="checkbox"/><span></span></label><a class="fl" href="#"><dl class="clearfix"><dt class="fl"><img style="width: 120px;height: 120px;" src="${g.goodsImg}"></dt><dd class="fl"><p>${g.goodsName}</p><p>颜色分类:</p><p>白色瓷瓶+白色串枚</p></dd></dl></a></div><div class="price">￥${g.goodsPrice}</div><div class="number"><p class="num clearfix"><img class="fl sub" src="img/temp/sub.jpg"><span class="fl">${g.quantity}</span><img class="fl add" src="img/temp/add.jpg"></p></div><div class="price sAll">￥${g.smalltotal()}</div><div class="price"><a class="del" href="javascript:void(0)">删除</a></div></div></#list>
</#if>
<!DOCTYPE html>
<html><head lang="en"><#include "common/head.html"><link rel="stylesheet" type="text/css" href="css/public.css"/><link rel="stylesheet" type="text/css" href="css/proList.css" /></head><body><!--------------------------------------cart---------------------><div class="head ding"><div class="wrapper clearfix"><div class="clearfix" id="top"><h1 class="fl"><a href="${ctx}/"><img src="img/logo.png"/></a></h1><div class="fr clearfix" id="top1"><form action="#" method="get" class="fl"><input type="text" placeholder="搜索" /><input type="button" /></form></div></div></div></div><div class="cart mt"><!-----------------logo-------------------><!--<div class="logo"><h1 class="wrapper clearfix"><a href="${ctx}/"><img class="fl" src="img/temp/logo.png"></a><img class="top" src="img/temp/cartTop01.png"></h1></div>--><!-----------------site-------------------><div class="site"><p class=" wrapper clearfix"><span class="fl">购物车</span><img class="top" src="img/temp/cartTop01.png"><a href="${ctx}/" class="fr">继续购物></a></p></div><!-----------------table-------------------><div class="table wrapper"><div class="tr"><div>商品</div><div>单价</div><div>数量</div><div>小计</div><div>操作</div></div><#if shopCar??><#list shopCar.items as g><div class="th"><div class="pro clearfix"><label class="fl"><input type="hidden" value="${g.gid!}"/><input type="checkbox"/><span></span></label><a class="fl" href="#"><dl class="clearfix"><dt class="fl"><img style="width: 120px;height: 120px;" src="${g.goodsImg}"></dt><dd class="fl"><p>${g.goodsName}</p><p>颜色分类:</p><p>白色瓷瓶+白色串枚</p></dd></dl></a></div><div class="price">￥${g.goodsPrice}</div><div class="number"><p class="num clearfix"><img class="fl sub" src="img/temp/sub.jpg"><span class="fl">${g.quantity}</span><img class="fl add" src="img/temp/add.jpg"></p></div><div class="price sAll">￥${g.smalltotal()}</div><div class="price"><a class="del" href="javascript:void(0)">删除</a></div></div></#list></#if><div class="goOn">空空如也~<a href="${ctx}/">去逛逛</a></div><div class="tr clearfix"><label class="fl"><input class="checkAll" type="checkbox"/><span></span></label><p class="fl"><a href="javascript:void(0);">全选</a><a href="javascript:void(0);" class="del">删除</a></p><p class="fr"><span>共<small id="sl">0</small>件商品</span><span>合计: <small id="all">￥0.00</small></span><a class="count">结算</a></p></div></div></div><div class="mask"></div><div class="tipDel"><p>确定要删除该商品吗？</p><p class="clearfix"><a class="fl cer" href="javascript:void(0);">确定</a><a class="fr cancel" href="javascript:void(0);">取消</a></p></div><!--返回顶部--><#include "common/footer.html"><!----------------mask-------------------><div class="mask"></div><!-------------------mask内容-------------------><div class="proDets"><img class="off" src="img/temp/off.jpg" /><div class="proCon clearfix"><div class="proImg fr"><img class="list" src="img/temp/proDet.jpg" /><div class="smallImg clearfix"><img src="img/temp/proDet01.jpg" data-src="img/temp/proDet01_big.jpg"><img src="img/temp/proDet02.jpg" data-src="img/temp/proDet02_big.jpg"><img src="img/temp/proDet03.jpg" data-src="img/temp/proDet03_big.jpg"><img src="img/temp/proDet04.jpg" data-src="img/temp/proDet04_big.jpg"></div></div><div class="fl"><div class="proIntro change"><p>颜色分类</p><div class="smallImg clearfix"><p class="fl on"><img src="img/temp/prosmall01.jpg" alt="白瓷花瓶+20支快乐花" data-src="img/temp/proBig01.jpg"></p><p class="fl"><img src="img/temp/prosmall02.jpg" alt="白瓷花瓶+20支兔尾巴草" data-src="img/temp/proBig02.jpg"></p><p class="fl"><img src="img/temp/prosmall03.jpg" alt="20支快乐花" data-src="img/temp/proBig03.jpg"></p><p class="fl"><img src="img/temp/prosmall04.jpg" alt="20支兔尾巴草" data-src="img/temp/proBig04.jpg"></p></div></div><div class="changeBtn clearfix"><a href="#2" class="fl"><p class="buy">确认</p></a><a href="#2" class="fr"><p class="cart">取消</p></a></div></div></div></div><div class="pleaseC"><p>请选择宝贝</p><img class="off" src="img/temp/off.jpg" /></div><script src="js/public.js" type="text/javascript" charset="utf-8"></script><script src="js/pro.js" type="text/javascript" charset="utf-8"></script><script src="js/cart.js" type="text/javascript" charset="utf-8"></script></body>
</html>
ShopCarController.java 增加方法里 把 购物车对象存储都session中
@Autowiredprivate IGoodsService goodsService;
// 增加@ResponseBody@RequestMapping("/add")public JsonResponseBody add(User user,long gid,HttpServletRequest request){//从session中获取购物车对象ShopCar shopCar = getShopCar(user, request);//根据商品ID获取商品对象信息Goods goods = goodsService.getOne(new QueryWrapper<Goods>().eq("gid", gid));//初始化商品详情ShopCarItemShopCarItem item = new ShopCarItem();item.setQuantity(1);item.setGid(goods.getGid());item.setGoodsName(goods.getGoodsName());item.setGoodsImg(goods.getGoodsImg());item.setGoodsPrice(goods.getGoodsPrice());//加入购物车shopCar.add(item);//将购物车对象保存到session中request.setAttribute("shopCar",shopCar);return new JsonResponseBody<>();}效果如下图所示：
五、购物车删除功能
删除购物车中指定商品
1.点击删除按钮删除单个商品
2.全选商品删除部分或者全部商品
在cart.html里面是引入了cart.js
cart.js进行整改 ，删除购物车商品
//删除购物车商品$('.del').click(function(){//定义商品id 比如：1,2,3,4,5let gids = "";//单个删除if($(this).parent().parent().hasClass("th")){$(".mask").show();$(".tipDel").show();index = $(this).parents(".th").index()-1;//TODO 获取当前的checkbox中设置的隐藏域（包含了商品ID）gids=$(".th").eq(index).find('div:eq(0) input[type=hidden]').val();console.log(gids);$('.cer').click(function(){$(".mask").hide();$(".tipDel").hide();$(".th").eq(index).remove();$('.cer').off('click');if($(".th").length==0){$(".table .goOn").show();}del(gids);})}else{//选中多个一起删除if($(".th input[type='checkbox']:checked").length==0){$(".mask").show();$(".pleaseC").show();}else{$(".mask").show();$(".tipDel").show();//TODO 先获取所有即将被删除的商品IDlet gidarr = new Array();$(".th input[type='checkbox']:checked").each(function(j){gidarr.push($(".th").eq(index).find('div:eq(0) input[type=hidden]').val());// gids += $(".th").eq(index).find('div:eq(0) input[type=hidden]').val(); 很容易报数据下标越界异常});gids = gidarr.join(",");$('.cer').click(function(){$(".th input[type='checkbox']:checked").each(function(j){index = $(this).parents('.th').index()-1;$(".th").eq(index).remove();if($(".th").length==0){$(".table .goOn").show();}})$(".mask").hide();$(".tipDel").hide();zg();jisuan();del(gids);})}}})$('.cancel').click(function(){$(".mask").hide();$(".tipDel").hide();})//删除商品
function del(gids) {$.post('/shopCar/delete',{'gids':gids},function(rs){if(rs.code!=200)alert(rs.msg);elselocation.href='/shopCar/queryShopCar';},'json');
}测试效果如下图所示：
目前我加入的购物车有两个，如下图所示：
进行删除第一个，如下图所示：
六、购物车修改，新增功能
cart.js 进行调整
$(function(){/**************数量加减***************/$(".num .sub").click(function(){var num = parseInt($(this).siblings("span").text());if(num<=1){$(this).attr("disabled","disabled");}else{num--;$(this).siblings("span").text(num);//获取除了货币符号以外的数字var price = $(this).parents(".number").prev().text().substring(1);//单价和数量相乘并保留两位小数$(this).parents(".th").find(".sAll").text('￥'+(num*price).toFixed(2));jisuan();zg();//TODO 获取当前行的行索引let index = $(this).parents(".th").index()-1;//获取当前的checkbox中设置的隐藏域（包含了商品ID）let gid=$(".th").eq(index).find('div:eq(0) input[type=hidden]').val();update(num,gid);}});$(".num .add").click(function(){var num = parseInt($(this).siblings("span").text());if(num>=5){confirm("限购5件");}else{num++;$(this).siblings("span").text(num);var price = $(this).parents(".number").prev().text().substring(1);$(this).parents(".th").find(".sAll").text('￥'+(num*price).toFixed(2));jisuan();zg();//TODO 获取当前行的行索引let index = $(this).parents(".th").index()-1;//获取当前的checkbox中设置的隐藏域（包含了商品ID）let gid=$(".th").eq(index).find('div:eq(0) input[type=hidden]').val();update(num,gid);}});//计算总价function jisuan(){var all=0;var len =$(".th input[type='checkbox']:checked").length;if(len==0){$("#all").text('￥'+parseFloat(0).toFixed(2));}else{$(".th input[type='checkbox']:checked").each(function(){//获取小计里的数值var sAll = $(this).parents(".pro").siblings('.sAll').text().substring(1);//累加all+=parseFloat(sAll);//赋值$("#all").text('￥'+all.toFixed(2));})}}//计算总共几件商品function zg(){var zsl = 0;var index = $(".th input[type='checkbox']:checked").parents(".th").find(".num span");var len =index.length;if(len==0){$("#sl").text(0);}else{index.each(function(){zsl+=parseInt($(this).text());$("#sl").text(zsl);})}if($("#sl").text()>0){$(".count").css("background","#c10000");}else{$(".count").css("background","#8e8e8e");}}/*****************商品全选***********************/$("input[type='checkbox']").on('click',function(){var sf = $(this).is(":checked");var sc= $(this).hasClass("checkAll");if(sf){if(sc){$("input[type='checkbox']").each(function(){ this.checked=true; }); zg();jisuan();}else{$(this).checked=true; var len = $("input[type='checkbox']:checked").length;var len1 = $("input").length-1;if(len==len1){$("input[type='checkbox']").each(function(){ this.checked=true; }); }zg();jisuan();}}else{if(sc){$("input[type='checkbox']").each(function(){ this.checked=false; }); zg();jisuan();}else{$(this).checked=false;var len = $(".th input[type='checkbox']:checked").length;var len1 = $("input").length-1;if(len<len1){$('.checkAll').attr("checked",false);}zg();jisuan();}}});/****************************proDetail 加入购物车*******************************/$(".btns .cart").click(function(){if($(".categ p").hasClass("on")){var num = parseInt($(".num span").text());var num1 = parseInt($(".goCart span").text());$(".goCart span").text(num+num1);}});//删除购物车商品$('.del').click(function(){//定义商品id 比如：1,2,3,4,5let gids = "";//单个删除if($(this).parent().parent().hasClass("th")){$(".mask").show();$(".tipDel").show();index = $(this).parents(".th").index()-1;//TODO 获取当前的checkbox中设置的隐藏域（包含了商品ID）gids=$(".th").eq(index).find('div:eq(0) input[type=hidden]').val();console.log(gids);$('.cer').click(function(){$(".mask").hide();$(".tipDel").hide();$(".th").eq(index).remove();$('.cer').off('click');if($(".th").length==0){$(".table .goOn").show();}del(gids);})}else{//选中多个一起删除if($(".th input[type='checkbox']:checked").length==0){$(".mask").show();$(".pleaseC").show();}else{$(".mask").show();$(".tipDel").show();//TODO 先获取所有即将被删除的商品IDlet gidarr = new Array();$(".th input[type='checkbox']:checked").each(function(j){gidarr.push($(".th").eq(index).find('div:eq(0) input[type=hidden]').val());// gids += $(".th").eq(index).find('div:eq(0) input[type=hidden]').val(); 很容易报数据下标越界异常});gids = gidarr.join(",");$('.cer').click(function(){$(".th input[type='checkbox']:checked").each(function(j){index = $(this).parents('.th').index()-1;$(".th").eq(index).remove();if($(".th").length==0){$(".table .goOn").show();}})$(".mask").hide();$(".tipDel").hide();zg();jisuan();del(gids);})}}})$('.cancel').click(function(){$(".mask").hide();$(".tipDel").hide();})//改变商品规格
// $(".pro dd").hover(function(){
// var html='';
// html='<span class="edit">修改</span>';
// $(this).addClass("on").append(html).parents(".th").siblings(".th").find(".pro dd").removeClass("on").find('.edit').remove();
// $(".edit").each(function(i){
// $(this).attr("id",'edit'+i);
// $("#edit"+i).click(function(){
// $(".proDets").show();
// $(".mask").show();
// $(".changeBtn .buy").attr("data-id",i);
// })
// })
// },function(){
// $(this).removeClass("on");
// })
// $(".changeBtn .buy").click(function(){
// var index = $(this).attr("data-id");
// var result = $(".smallImg .on").find("img").attr("alt");
// $("#edit"+index).prev().text(result);
// $(".proDets").hide();
// $(".mask").hide();
// $("#edit"+index).parent("dd").removeClass("on").find(".edit").remove();
// });
// $(".changeBtn .cart").click(function(){
// $(".proDets").hide();
// $(".mask").hide();
// })
})
//删除商品
function del(gids) {$.post('/shopCar/delete',{'gids':gids},function(rs){if(rs.code!=200)alert(rs.msg);elselocation.href='/shopCar/queryShopCar';},'json');
}//修改商品数量
function update(num,gid){$.post('/shopCar/update',{'gid':gid,'quantity':num},function(rs){if(rs.code!=200)alert(rs.msg);elselocation.href='/shopCar/queryShopCar';},'json');
}
测试效果如下图所示：
网上商城项目（加入购物车）相关推荐
- 网上商城项目（购物车下单、支付）
目录 一.购物车结算前端功能实现 1.购物车页面实现结算功能,主要是拿到传入后台的gids 二.购物车结算后端功能实现 1.跳转订单页后台,主要是拿到订单页展示数据 2.订单页前台展示 三.生成订单 ...
- Django框架学习之网上商城项目一（后端设计）
目录 一.项目需求分析 1.项目介绍 1.技术难点 2.系统功能 3.项目环境 4.后台管理页面 二.数据库模型设计 一.准备工作 二.用户认证数据库模型设计 1. app/users/models. ...
- 十七、网上商城项目（1）
本章概要 脚手架项目搭建 安装与配置 axios 首页 页面头部组件 头部搜索框组件 头部购物车组件 头部组件 本章结合前面所学知识,开发一个网上商城项目. 成品如下 17.1 脚手架项目搭建 选择好 ...
- 【SSH网上商城项目实战16】Hibernate的二级缓存处理首页的热门显示
转自:https://blog.csdn.net/eson_15/article/details/51405911 网上商城首页都有热门商品,那么这些商品的点击率是很高的,当用户点击某个热门商品后需要 ...
- java web网上商城项目实战与源码
java web网上商城项目实战与源码 点击这里,轻松完成毕设https://x-x.fun/i/AAbf595445aBT
- 【SSH网上商城项目实战21】从Demo中看易宝支付的流程
这一节我们先写一个简单点的Demo来测试易宝支付的流程,熟悉这个流程后,再做实际的开发,因为是一个Demo,所以我没有考虑一些设计模式的东西,就是直接实现支付功能.实现支付功能需要易宝给我们提供的AP ...
- 商城项目中信息的集合怎么存储_网上商城项目_数据库设计说明书.doc
秘密 第 PAGE 2 页 共 NUMPAGES 10 页 信用卡网上商城项目 数据库设计说明书 文件修订历史 修订时间 修订说明 作者 审核 2010.08.05 编写数据字典 谭星佑 曾玉贞 20 ...
- 【SSH网上商城项目实战】之环境搭建填坑
此篇主要是记录我在从零开始走一遍倪升武大神的[SSH网上商城项目实战]过程中遇到的一些坑并记录解决方法.关于这个项目,大家可以去倪升武的博客学习了解,SSH网上商城项目实战请戳倪升武的项目实战专题. ...
- 【SSH网上商城项目实战20】在线支付平台的介绍
之前已经完成了首页的显示,用户添加购物车,确认订单等功能,下面就是支付功能的开发了.用户确认了订单后会直接跳转到支付页面进行在线支付,在线支付需要第三方的接口,这一节主要介绍一些关于第三方支付的内容, ...
- 【SSH网上商城项目实战01】整合Struts2、Hibernate4.3和Spring4.2
转自:https://blog.csdn.net/eson_15/article/details/51277324 今天开始做一个网上商城的项目,首先从搭建环境开始,一步步整合S2SH.这篇博文主要总 ...
最新文章
- 华为某研究生程序员哀叹：年薪五十多万，存款一百万，却不知道未来怎么走！...
- 如何理解李飞飞价值十亿美金的“人文AI”计划 ？
- Kali Linux安装OpenVAS
- Linux打过cat没有编码,linux系统 终端下 cat中文乱码/vim不乱码 或者 cat不乱码/vim中文乱码...
- C++构造函数初始化列表
- 我学的技术，过时？被淘汰？
- 微信小程序的不同函数调用的几种方法
- js中string字符串转换为JSON对象 - 方法大全（4种）
- 中年程序员对核心竞争力“不可替代”的重新认识
- python爬取知乎页面的LaTeX公式
- php弹出是否,Javascript警报弹出窗口是否会扩展PHP会话？
- CSS如何水平垂直居中？
- 大数据分析平台有哪些功能
- JDBC数据源(DataSource)的简单实现
- 与你一起学习Microsoft Visio——基础篇
- 小白的一周学习汇总！
- 强网杯2021CTF 强网先锋shellcode侧信道攻击复现
- 进销存mysql数据库_进销存管理系统数据库设计
- 语音助手——未来趋势
- 告别枯燥，ppt背景音乐怎么设置？