重庆公司网站制作公司/电商网站设计方案
前言：上次与大家分享了项目的类型显示以及图片，这次将与大家分享购物车功能。
一、思维导图：
二、实现购物车的三种方式：
三、加入购物车：
首先看书籍界面：findbook.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<html>
<head><meta charset="utf-8"><title>网上书城首页</title><link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"><link href="${pageContext.request.contextPath}/static/css/fg.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script><script src="${pageContext.request.contextPath}/static/js/index.js"></script>
</head>
<body class="text-center">
<div class="container"><div class="row head"><div class="col-md-12"><i>您好，欢迎来到飞凡网上书店！</i><b><a type="button" class="text-primary" href="${pageContext.request.contextPath}/login.jsp">登录</a> |<a type="button" class="text-primary" href="${pageContext.request.contextPath}/register.jsp">注册</a> |<a type="button" class="text-primary" href="${pageContext.request.contextPath}/shopping.action?methodName=list">我的购物车</a> |<a type="button" class="text-primary" href="${pageContext.request.contextPath}/">网站首页</a></b></div></div><!-- 横幅搜索栏 start --><div class="row banner"><div class="img1"></div><div class="col-md-12"><form class="form" action="${pageContext.request.contextPath}/book.action?methodName=findByName" method="post"><%--<input type="hidden" name="methodName" value="findByName">--%><input type="text" name="name" value="" id="input" class="search"><input type="submit" class="btn btn-primary" value="查询"></form></div></div><!-- 横幅搜索栏 end --><!-- 页面主体内容 start --><div class="row content"><div class="col-md-3 float-left c-left"><ul class="list-group"><li class="list-group-item">书籍分类</li></ul></div><%--${books}--%><div class="col-md-9 float-right c-right"><c:forEach var="b" items="${books}"><div class="media"><img style="width: 100px;height: 140px;" src="http://localhost:8080/${b.image}" class="align-self-center mr-3" alt="..."><div class="media-body text-left"><p>${b.name}</p><p>作者：${b.author}</p><p>价格：${b.price}</p><p>出版社：${b.publishing}</p><p>书籍简介：${b.description}</p><span><a type="button" class="btn btn-danger" href="${pageContext.request.contextPath}/shopping.action?methodName=add&name=${b.name}&price=${b.price}&num=1&total=${b.price}">加入购物车</a><a type="button" class="btn btn-danger" href="${pageContext.request.contextPath}/shopping.action?methodName=pay">去结算</a></span></div></div><hr></c:forEach><%--<div class="media">--%><%--<img src="imgs/2.png" class="align-self-center mr-3" alt="...">--%><%--<div class="media-body text-left">--%><%--<p>第一商会</p>--%><%--<p>作者：寒川子</p>--%><%--<p>价格：￥24.80</p>--%><%--<p>出版社：北京联合出版公司</p>--%><%--<p>书籍简介：超级畅销书作家寒川子创作历时三年全新力作！讲述财富与权力“离不开，靠不住”的明暗法则</p>--%><%--<span>--%><%--<button type="button" class="btn btn-danger">加入购物车</button>--%><%--<button type="button" class="btn btn-danger">去结算</button>--%><%--</span>--%><%--</div>--%><%--</div>--%><%--<hr>--%><xl:page pageBean="${pageBean}"></xl:page></div></div><!-- 页面主体内容 end --><!-- 网站版权 start --><div class="row footer"><div class="col-md-12">Copyright ©2014 飞凡教育，版权所有</div></div><!-- 网站版权 end -->
</div>
<script type="text/javascript">function searchByType(cid){location.href='${pageContext.request.contextPath}/book.action?methodName=findByType&cid='+cid;};
</script></body>
</html>
shoppingAction:
public String add(HttpServletRequest req, HttpServletResponse resp) {HttpSession session=req.getSession();User cuser = (User)session.getAttribute("cuser");ObjectMapper om=new ObjectMapper();try {if(cuser!=null) {long uid = cuser.getId();List<ShoppingVo> shopGoodsVos=null;//从session取出当前用户对应的购物车信息String shoppingInfo = (String) session.getAttribute("shopping_"+uid);if(StringUtils.isNotBlank(shoppingInfo)) {//第2~n次shopGoodsVos=om.readValue(shoppingInfo, List.class);}else {//第1次shopGoodsVos=new ArrayList<ShoppingVo>();}//vo指的是前台点击购物车具体商品内容shopGoodsVos.add(vo);session.setAttribute("shopping_"+uid, om.writeValueAsString(shopGoodsVos));req.setAttribute("shopGoodsVos", shopGoodsVos);}} catch (Exception e) {e.printStackTrace();}return "shoppingCar";}mvc.xml:
<action path="/shopping" type="com.zking.web.ShoppingAction"><forward name="shoppingCar" path="/fg/shoppingCar.jsp" redirect="false" /></action>效果展示：
点击加入购物车后的效果：
四：清空购物车：
shoppingAction:
public String clear(HttpServletRequest req, HttpServletResponse resp) {HttpSession session=req.getSession();User cuser = (User)session.getAttribute("cuser");ObjectMapper om=new ObjectMapper();String shoppingInfo = (String) session.getAttribute("shopping_"+cuser.getId());try {List<ShoppingVo> shopGoodsVos=om.readValue(shoppingInfo, List.class);req.setAttribute("shopGoodsVos", shopGoodsVos);} catch (Exception e) {e.printStackTrace();}return "shoppingCar";}
ShoppingCar.jsp：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<html>
<head><meta charset="utf-8"><title>购物车</title><link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"><link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath}/static/js/easyui/themes/default/easyui.css"><link href="${pageContext.request.contextPath}/static/css/fg.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script><script type="text/javascript"src="${pageContext.request.contextPath}/static/js/easyui/jquery.easyui.min.js"></script><script src="${pageContext.request.contextPath}/static/js/index.js"></script>
</head>
<body class="text-center">
<div class="container"><!-- 购物车新增模态框 --><div class="shop-modal modal" tabindex="-1" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">订单信息</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"><form class="shop-form" method="post"><div class="row"><!-- <div class="col-md-3">收货人：</div> --><div class="col-md-12"><input type="text" name="consignee" id="consignee" placeholder="收货人"value=""/></div></div><div class="row"><!-- <div class="col-md-3">手机号：</div> --><div class="col-md-12"><input type="text" name="phone" placeholder="收货人手机号" id="phone"value=""/></div></div><div class="row"><!-- <div class="col-md-3">收货人邮编：</div> --><div class="col-md-12"><input type="text" name="postalcode" placeholder="收货人邮编"id="postalcode" value=""/></div></div><div class="row"><!-- <div class="col-md-3">收货地址：</div> --><div class="col-md-12"><input type="text" name="address" placeholder="收货地址" id="address"value=""/></div></div><div class="row"><!-- <div class="col-md-3">发货方式</div> --><div class="col-md-12"><select class="form-control" name="sendType" id="sendType"><option value="1">平邮</option><option value="2">快递</option></select></div></div></form></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button><button type="button" class="btn btn-primary order_Create">确定</button></div></div></div></div><div class="row head"><div class="col-md-12"><i>您好，欢迎来到飞凡网上书店！</i><b><a type="button" class="text-primary" href="${pageContext.request.contextPath}/login.jsp">登录</a> |<a type="button" class="text-primary" href="${pageContext.request.contextPath}/register.jsp">注册</a> |<a type="button" class="text-primary" href="${pageContext.request.contextPath}/shopping.action?methodName=list">我的购物车</a> |<a type="button" class="text-primary" href="${pageContext.request.contextPath}/">网站首页</a></b></div></div><!-- 横幅搜索栏 start --><div class="row banner"><div class="img1"></div><div class="col-md-12"><form class="form" action="${pageContext.request.contextPath}/book.action?methodName=findByName" method="post"><%--<input type="hidden" name="methodName" value="findByName">--%><input type="text" name="name" value="" id="input" class="search"><input type="submit" class="btn btn-primary" value="查询"></form></div></div><!-- 横幅搜索栏 end --><!-- 页面主体内容 start --><div class="row content"><div class="col-md-3 float-left c-left"><ul class="list-group"><li class="list-group-item">书籍分类</li></ul></div><%--${books}--%><div class="col-md-9 float-right c-right"><table class="table table-striped"><thead class="list-group-item-hover"><tr><%--<th>编号</th>--%><th>书名</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr></thead><tbody><c:forEach var="s" items="${shopGoodsVos}" varStatus="index"><tr><%--<th>${index.index}</th>--%><th>${s.name}</th><td>${s.price}</td><td><input type="text" class="text-center item_num" name="num" value="${s.num}"/></td><td>${s.total}</td><td><%--<a href="#" class="text-primary" onclick="shopingDel(${s.name},${s.price},${s.num},${s.total})">删除</a>--%><a href="${pageContext.request.contextPath}/shopping.action?methodName=del&pageStr=${index.index}"class="text-primary">删除</a><a href="#" class="text-primary" onclick="sshopUpdate(this);">更新</a></td></tr></c:forEach><tr class="bg-white"><td colspan="5" class="text-center"><button type="button" onclick="clearCar();" class="btn bg-orange2">清空购物车</button><button type="button" class="btn bg-orange2 continue-buy">继续购买</button><button type="button" class="btn btn-danger car_pay">去结算</button></td></tr></tbody></table><%--<xl:page pageBean="${pageBean}"></xl:page>--%></div></div><!-- 页面主体内容 end --><!-- 网站版权 start --><div class="row footer"><div class="col-md-12">Copyright ©2014 飞凡教育，版权所有</div></div><!-- 网站版权 end -->
</div>
<script type="text/javascript"><%--跟新购物车--%>function sshopUpdate(ele) {// console.log($(ele).parent().parent());var $parent = $(ele).parent().parent();var $price_td = $parent.children().eq(1);var $num_td = $parent.children().eq(2);var $total_td = $parent.children().eq(3);var price = $price_td.html();var num = $num_td.find(":input").val();var total = parseInt(num) * parseFloat(price);$total_td.html(parseFloat(total).toFixed(1));}<%--书籍搜索功能--%>function searchByType(cid) {location.href = '${pageContext.request.contextPath}/book.action?methodName=findByType&cid=' + cid;};//清除购物车function clearCar() {$.messager.confirm('确认', '您确认想要清空购物车吗？', function (r) {if (r) {$.ajax({url: '${pageContext.request.contextPath}/shopping.action?methodName=clear',success: function (data) {location.href = '${pageContext.request.contextPath}/shopping.action?methodName=list';}});}})}$(function () {// 给模态框添加关闭事件$('.close span,.modal-footer .btn-secondary').click(function () {$('.shop-modal').addClass('modal');})// 购物车结算$(".car_pay").click(function () {$('.shop-modal').removeClass('modal');})$(".order_Create").click(function () {var consignee = $("#consignee").val();var phone = $("#phone").val();var postalcode = $("#postalcode").val();var address = $("#address").val();var sendType = $("#sendType").val();var single_tr = "";$(".table tr:gt(0)").not(":last").each(function (index, node) {console.log(index);single_tr = single_tr + "," + $(this).find("th").eq(0).html() + "-" + $(this).find("td").eq(0).html() + "-"+ $(this).find("td").eq(1).find("input").val() + "-" + $(this).find("td").eq(2).html();})console.log(single_tr.substring(1));var param = "consignee=" + consignee + "&phone=" + phone + "&postalcode=" + postalcode + "&address=" + address + "&sendType=" + sendType + "&pageStr=" + single_tr;$.ajax({url: '${pageContext.request.contextPath}/shopping.action?methodName=createOrder',type: "POST",data: param,success: function (data) {var consignee = $("#consignee").val("");var phone = $("#phone").val("");var postalcode = $("#postalcode").val("");var address = $("#address").val("");var sendType = $("#sendType").val("");$('.shop-modal').addClass('modal');$(".table tr:gt(0)").not(":last").remove();$.ajax({url: '${pageContext.request.contextPath}/shopping.action?methodName=clear',success: function (data) {<%--location.href = '${pageContext.request.contextPath}/shopping.action?methodName=list';--%>}});}});});})
</script></body>
</html>
效果展示：
点击清空购物车之后的效果展示图：