用户购物车功能的实现。

1.接口中定义方法

2.impl中实现方法

3.jsp展示数据

1.首先在header.jsp页面中，通过a标签跳转到MyCartServlet

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"+"views/";
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

    <link rel="stylesheet" type="text/css" href="css/header.css"/>
 <!--头部-->
<%--
        1.实现用户的登录 ？
        点节登录是需要一个  登录界面展示给用户  就是login.jsp
        通过header.jsp的超链接 跳转到  login.jsp  登录界面的jsp
        在login.jsp中  进行用户登录  通过超链接   跳转到 login servlet进行业务操作

--%>
 
        <div class="header_wrap">            
            <ul>
            <c:choose>
                <c:when test="${empty user}">
                    <li><a href="/shop/views/login.jsp">登录</a></li>
                    <li><a href="/shop/views/register.jsp">注册</a></li>
                </c:when>
                <c:otherwise>
                    <li>欢迎尊敬的VIP:<a href="/shop/views/presonal.jsp">${user.nickname}  个人主页</a></li>
                </c:otherwise>

            </c:choose>

                <li><a href="#">我的收藏</a></li>
                <%--实现购物车测车的功能  通过a标签  跳转到 myCart servlet 进行业务操作--%>
                <li><a href="/shop/myCart.do">我的购物车</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">商家后台</a></li>
                
            </ul>
        </div>

2.servlet业务操作

package com.aaa.servlet;

import com.aaa.dao.IUserDAO;
import com.aaa.dao.Impl.UserDAOImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
import java.util.Map;

/**
 * 购物车的实现？
 *
 *一、 判读用户是否已经登录？
 *        1.获取用户的id? 返回值类型是map   之前我们在方法中 定义的！ 注意强转到map
 *        2.通过getSession()获取Session对象
 *        3.getParameter()获取指定请求参数值 UID
 *        4.登录了就 获取用户的UID  根据id 获取用户的购物车信息
 *        user.get("uid");
 *
 *二、 根据用户的id查询购物车信息？      Integer uid = (Integer) user.get("uid");
 *     1.调用dao getMyCart方法
 *     2.得到一个list集合 里面是用户的购物车信息
 *     3.将数据存储到      req.setAttribute("myCart",list);
 *
 *三、通过请求转发将获得的数据转发到 goodscart.jsp 中 展示给用户？
 *
 *        getRequestDispatcher()获取转发器,参数路径以/打头,代表WebRoot(当前WEB项目根目录)
 *
 *         req.getRequestDispatcher("/views/goodscart.jsp").forward(req,resp);
 *
 * 四、思考？
 *      这里为什么是请求转发 而不是 重定向？
 *
 *      因为我们在这里  获取到用户的购物车信息  需要通过请求转发的方式  传递给用户。
 *      重定向则是  将页面重新跳转到新的页面  用户得不到想要的购物车信息。
 */
@WebServlet("/myCart.do")
public class MyCartServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Map user = (Map) req.getSession().getAttribute("user");

        Integer uid = (Integer) user.get("uid");

        IUserDAO dao=new UserDAOImpl();
        List<Map<String, Object>> myCart = dao.getMyCart(uid);

        req.setAttribute("myCart",myCart);
        req.getRequestDispatcher("/views/goodscart.jsp").forward(req,resp);
    }
}

3.讲数据请求转发到　　"/views/goodscart.jsp"

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"+"views/";
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>


<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <link rel="icon" href="img/icon.png" type="image/x-icon">
    <link rel="stylesheet" href="css/goodscart.css" />
    <script type="text/javascript" src="js/product.js"></script>

    <title>购物车 贵美·商城</title>

</head>
<body>
<!-- 头部导航 -->
<jsp:include page="/views/header.jsp"></jsp:include>

<!-- 購物車 -->
<div class="wrap">
    <div class="title">
        <ul>
            <li><input type="checkbox" name="" id="" value="" /> 全选</li>
            <li>商品</li>
            <li>商品信息</li>
            <li>单价（元）</li>
            <li>数量</li>
            <li>小计（元）</li>
            <li>操作</li>
        </ul>
    </div>
    <%--
        一、在goodscat.jsp中判断 empty是否为空？
                调用dao getMyCart方法 根据用户的id查询购物车信息
 *               得到一个list集合 里面是用户的购物车信息
            1.空 说明  用户的购物车还没添加商品 提示用户去购物

            2.非空 就获取 myCart 购物车数据  通过foreach  的的方式 获取商品。
    --%>
    <c:choose>
        <c:when test="${empty myCart}">
            <h1>你的购物车中还没有商品，请去<a href="/shop/home">购物</a></h1>
        </c:when>

        <c:otherwise>
            <c:forEach var="p" items="${myCart}">
                <div class="goods">
                    <ul>
                        <li><img src="${p.pimage}"/>${p.pname}</li>
                        <li>尺碼:均碼</li>
                        <li class="price">${p.shopPrice}</li>
                        <li>
                            <div class="count">
                                <span class="s">－</span>
                                <input type="text" value="${p.num}" name="num" class="num" />
                                <span class="s">＋</span>
                            </div>

                        </li>
                        <li class="subtotal">76</li>
                        <li>
                            <a href="/shop/deleteCart?pid=${p.pid}">刪除</a>
                        </li>
                    </ul>
                </div>
            </c:forEach>
            <div class="foot">
                <ul>
                    <li><a href="/shop/deleteAllCart">全部刪除</a></li>
                    <li>總價：￥<span style="color: red; font-size: 30px; font-weight: 600;" id="total">11111</span></li>
                    <li><a href="#">去付款</a></li>

                </ul>
            </div>
        </c:otherwise>

    </c:choose>
</div>
</body>
</html>

用户购物车功能的实现。

猜你喜欢