javaEE练习（商城练习）

今天写一个商城的练习，综合之前学习过的servlet和el表达式，来一个综合的练习；

需要用到的数据库有：

/*
 Navicat MySQL Data Transfer

 Source Server         : localhost
 Source Server Type    : MySQL
 Source Server Version : 50718
 Source Host           : localhost
 Source Database       : shop

 Target Server Type    : MySQL
 Target Server Version : 50718
 File Encoding         : utf-8

 Date: 04/18/2019 22:49:36 PM
*/

SET NAMES utf8;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
--  Table structure for `car`
-- ----------------------------
DROP TABLE IF EXISTS `car`;
CREATE TABLE `car` (
                     `oid` int(20) NOT NULL AUTO_INCREMENT,
                     `uid` varchar(200) NOT NULL,
                     `pid` varchar(200) NOT NULL,
                     `pname` varchar(200) CHARACTER SET utf8 NOT NULL,
                     `pimage` varchar(200) NOT NULL,
                     `price` varchar(200) NOT NULL,
                     `num` varchar(200) NOT NULL,
                     PRIMARY KEY (`oid`)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=latin1;

-- ----------------------------
--  Table structure for `category`
-- ----------------------------
DROP TABLE IF EXISTS `category`;
CREATE TABLE `category` (
                          `cid` varchar(32) NOT NULL,
                          `cname` varchar(20) DEFAULT NULL,
                          PRIMARY KEY (`cid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- ----------------------------
--  Records of `category`
-- ----------------------------
BEGIN;
INSERT INTO `category` VALUES ('', '首页'), ('', '上衣'), ('', '裙子'), ('', '裤子'), ('', '女鞋'), ('', '包包'), ('', '配饰'), ('', '美妆'), ('', '男友');
COMMIT;

-- ----------------------------
--  Table structure for `orderitem`
-- ----------------------------
DROP TABLE IF EXISTS `orderitem`;
CREATE TABLE `orderitem` (
                           `itemid` varchar(32) NOT NULL,
                           `count` int(11) DEFAULT NULL,
                           `subtotal` double DEFAULT NULL,
                           `pid` varchar(32) DEFAULT NULL,
                           `oid` varchar(32) DEFAULT NULL,
                           PRIMARY KEY (`itemid`),
                           KEY `fk_0001` (`pid`),
                           KEY `fk_0002` (`oid`),
                           CONSTRAINT `fk_0002` FOREIGN KEY (`oid`) REFERENCES `orders` (`oid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- ----------------------------
--  Table structure for `orders`
-- ----------------------------
DROP TABLE IF EXISTS `orders`;
CREATE TABLE `orders` (
                        `oid` varchar(32) NOT NULL,
                        `ordertime` datetime DEFAULT NULL,
                        `total` double DEFAULT NULL,
                        `state` int(11) DEFAULT NULL,
                        `address` varchar(30) DEFAULT NULL,
                        `name` varchar(20) DEFAULT NULL,
                        `telephone` varchar(20) DEFAULT NULL,
                        `uid` varchar(32) DEFAULT NULL,
                        PRIMARY KEY (`oid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- ----------------------------
--  Table structure for `product`
-- ----------------------------
DROP TABLE IF EXISTS `product`;
CREATE TABLE `product` (
                         `pid` int(32) NOT NULL AUTO_INCREMENT,
                         `pname` varchar(50) DEFAULT NULL,
                         `marketPrice` double DEFAULT NULL,
                         `shopPrice` double DEFAULT NULL,
                         `pimage` varchar(200) DEFAULT NULL,
                         `isHot` int(11) DEFAULT NULL,
                         `pdesc` varchar(255) DEFAULT NULL,
                         `pflag` int(11) DEFAULT NULL,
                         `cid` varchar(32) DEFAULT NULL,
                         `collect` int(11) DEFAULT NULL,
                         PRIMARY KEY (`pid`),
                         KEY `sfk_0001` (`cid`)
) ENGINE=InnoDB AUTO_INCREMENT=51 DEFAULT CHARSET=utf8;

-- ----------------------------
--  Records of `product`
-- ----------------------------
BEGIN;
INSERT INTO `product` VALUES ('', '2017春季新款时尚百搭显高单排扣破洞高腰弹力小脚裤', '', '', 'products/1.jpg', '', '2017春季新款时尚百搭显高单排扣破洞高腰弹力小脚裤', '', '', ''), ('', '2017春季新款时尚百搭韩版显瘦纯色玫瑰花T恤', '', '', 'products/2.jpg', '', '2017春季新款时尚百搭韩版显瘦纯色玫瑰花T恤', '', '', ''), ('', '春季新款韩版大露背蝴蝶结系带收腰显瘦明线开叉喇叭线连衣裙', '', '', 'products/3.jpg', '', '春季新款韩版大露背蝴蝶结系带收腰显瘦明线开叉喇叭线连衣裙', '', '', ''), ('', '2017春夏新款韩版休闲百搭宽松简约字母绣花短袖圆领套头T恤', '', '', 'products/4.jpg', '', '2017春夏新款韩版休闲百搭宽松简约字母绣花短袖圆领套头T恤', '', '', ''), ('', '2017 春装新款韩版百搭针织打底短袖T恤女圆领纯色上衣', '', '', 'products/5.jpg', '', '2017 春装新款韩版百搭针织打底短袖T恤女圆领纯色上衣', '', '', ''), ('', '2017春季新品玫瑰字母印花蕾丝拼接长袖T恤', '', '', 'products/6.jpg', '', '2017春季新品玫瑰字母印花蕾丝拼接长袖T恤', '', '', ''), ('', '修身显瘦撞色边针织T恤 学院风中袖针织上衣', '', '', 'products/7.jpg', '', '修身显瘦撞色边针织T恤 学院风中袖针织上衣', '', '', ''), ('', '2017春夏新款织带针织小开衫短款', '', '', 'products/8.jpg', '', '2017春夏新款织带针织小开衫短款', '', '', ''), ('', '2017夏季新款女装破洞高腰牛仔短裤包边设计做旧牛仔裤', '', '', 'products/9.jpg', '', '2017夏季新款女装破洞高腰牛仔短裤包边设计做旧牛仔裤', '', '', ''), ('', '2017新款双线装饰半身裙 甜美学院风百搭百褶裙子', '', '', 'products/10.jpg', '', '2017新款双线装饰半身裙 甜美学院风百搭百褶裙子', '', '', ''), ('', '2017新款双线装饰半身裙 甜美学院风百搭百褶裙子', '', '', 'products/11.jpg', '', '2017新款双线装饰半身裙 甜美学院风百搭百褶裙子', '', '', ''), ('', '2017春夏装新款圆领中长款黑色宽松亮丝短袖t恤女打底衫上衣', '', '', 'products/12.jpg', '', '2017春夏装新款圆领中长款黑色宽松亮丝短袖t恤女打底衫上衣', '', '', ''), ('', '2017春夏新款韩版拼接网纱休闲百搭优雅短袖套头针织衫', '', '', 'products/13.jpg', '', '2017春夏新款韩版拼接网纱休闲百搭优雅短袖套头针织衫', '', '', ''), ('', '2017夏装新款韩版无袖民族风吊带连衣裙公主裙背心裙子女装', '', '', 'products/14.jpg', '', '2017夏装新款韩版无袖民族风吊带连衣裙公主裙背心裙子女装', '', '', ''), ('', '新款韩版宽松显瘦小清新可爱卡通印花七分袖poloT恤连衣裙子', '', '', 'products/15.jpg', '', '新款韩版宽松显瘦小清新可爱卡通印花七分袖poloT恤连衣裙子', '', '', ''), ('', '2017 时尚百搭蓝色高腰系带阔腿七分牛仔裤', '', '', 'products/16.jpg', '', '2017 时尚百搭蓝色高腰系带阔腿七分牛仔裤', '', '', ''), ('', '2017春季新款宽松显瘦带帽口袋中长款牛仔外套女上衣', '', '', 'products/17.jpg', '', '2017春季新款宽松显瘦带帽口袋中长款牛仔外套女上衣', '', '', ''), ('', '2017春夏新品韩版宽松短袖T恤', '', '', 'products/18.jpg', '', '2017春夏新品韩版宽松短袖T恤', '', '', ''), ('', '设计感流苏拉链破边蝙蝠袖卫衣外套', '', '', 'products/19.jpg', '', '设计感流苏拉链破边蝙蝠袖卫衣外套', '', '', ''), ('', '2017新款韩版翻边一刀切破洞高腰弹力修身牛仔长裤', '', '', 'products/20.jpg', '', '2017新款韩版翻边一刀切破洞高腰弹力修身牛仔长裤！', '', '', ''), ('', '新款气质韩版小清新毛毛露肩显瘦纯色仙款气质连衣裙子', '', '', 'products/21.jpg', '', '新款气质韩版小清新毛毛露肩显瘦纯色仙款气质连衣裙子', '', '', ''), ('', '2017春季新品韩版百搭休闲拼色夹克棒球服棒球衫', '', '', 'products/22.jpg', '', '2017春季新品韩版百搭休闲拼色夹克棒球服棒球衫', '', '', ''), ('', '2017新款破洞撕边百搭牛仔裤个性韩版九分牛仔乞丐裤', '', '', 'products/23.jpg', '', '2017新款破洞撕边百搭牛仔裤个性韩版九分牛仔乞丐裤', '', '', ''), ('', '春季新款韩版小樱桃小清新百搭蕾丝拼接喇叭袖复古雪纺衫衬衫上衣', '', '', 'products/24.jpg', '', '春季新款韩版小樱桃小清新百搭蕾丝拼接喇叭袖复古雪纺衫衬衫上衣', '', '', ''), ('', '2017春夏新款韩版休闲百搭宽松纯色口袋基础套头短袖T恤上衣', '', '', 'products/25.jpg', '', '2017春夏新款韩版休闲百搭宽松纯色口袋基础套头短袖T恤上衣', '', '', ''), ('', '1313 纯色刺绣T恤 休闲宽松百搭圆领短袖上衣', '', '', 'products/26.jpg', '', '1313 纯色刺绣T恤 休闲宽松百搭圆领短袖上衣', '', '', ''), ('', '2017 春季新款侧纽扣深蓝西装马夹背心', '', '', 'products/27.jpg', '', '2017 春季新款侧纽扣深蓝西装马夹背心', '', '', ''), ('', '新款韩版小清新小性感碎花印花蕾丝拼接宽松显瘦连衣裙两件套', '', '', 'products/28.jpg', '', '新款韩版小清新小性感碎花印花蕾丝拼接宽松显瘦连衣裙两件套', '', '', ''), ('', '复古大花朵碎花V领系带印花雪纺连衣裙短裙', '', '', 'products/29.jpg', '', '复古大花朵碎花V领系带印花雪纺连衣裙短裙', '', '', ''), ('', '2017新款原宿风宽松露肩镂空短袖T恤', '', '', 'products/30.jpg', '', '2017新款原宿风宽松露肩镂空短袖T恤', '', '', ''), ('', '【张予曦】星星雪纺衬衫连衣长裙收腰两件套女裙春A字碎花连衣裙', '', '', 'products/31.jpg', '', '【张予曦】星星雪纺衬衫连衣长裙收腰两件套女裙春A字碎花连衣裙', '', '', ''), ('', '2017早春新款 舒适干练腰带装饰西装裤休闲裤', '', '', 'products/32.jpg', '', '2017早春新款 舒适干练腰带装饰西装裤休闲裤', '', '', ''), ('', '2017夏季新款韩版高腰破洞毛边牛仔短裤', '', '', 'products/33.jpg', '', '2017夏季新款韩版高腰破洞毛边牛仔短裤', '', '', ''), ('', '2017春季新款牛仔裤女长裤子破洞潮显瘦小脚裤铅笔裤', '', '', 'products/34.jpg', '', '2017春季新款牛仔裤女长裤子破洞潮显瘦小脚裤铅笔裤', '', '', ''), ('', '2017新款春夏韩国淑女气质显瘦蝴蝶结衬衣', '', '', 'products/35.jpg', '', '2017新款春夏韩国淑女气质显瘦蝴蝶结衬衣', '', '', ''), ('', 'bf风个性拼接宽松毛边牛仔裤女韩国显瘦不规则直筒阔腿九分裤', '', '', 'products/36.jpg', '', 'bf风个性拼接宽松毛边牛仔裤女韩国显瘦不规则直筒阔腿九分裤', '', '', ''), ('', '【钱夫人同款】春季韩版t恤女短袖圆领学生宽松时尚打底衫上衣', '', '', 'products/37.jpg', '', '【钱夫人同款】春季韩版t恤女短袖圆领学生宽松时尚打底衫上衣', '', '', ''), ('', '2017春季新款运动裤女九分学生韩版宽松百搭显瘦原宿bf哈伦', '', '', 'products/38.jpg', '', '2017春季新款运动裤女九分学生韩版宽松百搭显瘦原宿bf哈伦', '', '', ''), ('', '2017春夏新款韩版优雅刺绣气质高腰显瘦半身裙包臀裙短裙裙子', '', '', 'products/39.jpg', '', '2017春夏新款韩版优雅刺绣气质高腰显瘦半身裙包臀裙短裙裙子', '', '', ''), ('', '韩版春季新款花朵刺绣学院风时尚百搭条纹七分袖衬衣', '', '', 'products/40.jpg', '', '韩版春季新款花朵刺绣学院风时尚百搭条纹七分袖衬衣', '', '', ''), ('', '2017春季新款时尚百搭韩版显瘦金属圆环镂空字母圆领长T恤', '', '', 'products/41.jpg', '', '2017春季新款时尚百搭韩版显瘦金属圆环镂空字母圆领长T恤', '', '', ''), ('', '短袖t恤女宽松上衣春装2017新款 韩版百搭半袖t恤', '', '', 'products/42.jpg', '', '短袖t恤女宽松上衣春装2017新款 韩版百搭半袖t恤', '', '', ''), ('', '兔先生亮片字母圆领做旧T恤', '', '', 'products/43.jpg', '', '兔先生亮片字母圆领做旧T恤', '', '', ''), ('', '2017夏季新款水溶钩花短袖网衫罩衫', '', '', 'products/44.jpg', '', '2017夏季新款水溶钩花短袖网衫罩衫', '', '', ''), ('', '春季新款韩版街头立领收腰抽褶显瘦帅气夹克风衣外套', '', '', 'products/45.jpg', '', '春季新款韩版街头立领收腰抽褶显瘦帅气夹克风衣外套', '', '', ''), ('', '2017春夏新款韩版拼接网纱休闲百搭优雅短袖套头针织衫', '', '', 'products/46.jpg', '', '2017春夏新款韩版拼接网纱休闲百搭优雅短袖套头针织衫', '', '', ''), ('', '2017新款春夏宽松休闲G字母印花T恤', '', '', 'products/47.jpg', '', '2017新款春夏宽松休闲G字母印花T恤', '', '', ''), ('', '小番茄定制 温柔静谧后背纽扣喇叭袖压皱雪纺衬衫 真丝皱两件套', '', '', 'products/48.jpg', '', '小番茄定制 温柔静谧后背纽扣喇叭袖压皱雪纺衬衫 真丝皱两件套', '', '', ''), ('', '2017早春欧美性感网纱透视花边半高领灯笼袖纯色长袖雪纺衫', '', '', 'products/49.jpg', '', '2017早春欧美性感网纱透视花边半高领灯笼袖纯色长袖雪纺衫', '', '', ''), ('', '2017 春夏新款露背百褶连衣裙', '', '', 'products/50.jpg', '', '2017 春夏新款露背百褶连衣裙', '', '', '');
COMMIT;

-- ----------------------------
--  Table structure for `user`
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
                      `uid` int(100) NOT NULL AUTO_INCREMENT,
                      `username` varchar(20) DEFAULT NULL,
                      `password` varchar(20) DEFAULT NULL,
                      `email` varchar(30) DEFAULT NULL,
                      `telephone` varchar(20) DEFAULT NULL,
                      `nickname` varchar(20) DEFAULT NULL,
                      PRIMARY KEY (`uid`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;

SET FOREIGN_KEY_CHECKS = 1;

shop数据库

需要用到的jar包有jstl，standard，mysql-connetor-java-5.1.45-bin，servlet-api四个jar包。

前端用到的前端页面及图片：　　https://files.cnblogs.com/files/Zs-book1/views.rar

src文件夹下，建5个包：dao，entity，util，servlet，filter；

util包中，我们写入jdbc工具类：

package com.zs.util;

import java.sql.*;
import java.util.ArrayList;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;

public class DBUtils {
    static{
        try {
            Class.forName("com.mysql.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }
    public static Connection getConnection() throws SQLException {
        return DriverManager.getConnection("jdbc:mysql://localhost:3306/shop", "root", "123456");
    }
    public static boolean executeUpdate(String sql, Object... obj) {
        Connection conn = null;
        PreparedStatement ps = null;
        try {
            conn = getConnection();
            ps = conn.prepareStatement(sql);
            for (int i = 0; i < obj.length; i++) {
                ps.setObject(i+1,obj[i]);
            }
            int i = ps.executeUpdate();
            return i>0;
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            close(conn, ps);
        }
        return false;
    }

    private static void close(Connection conn, PreparedStatement ps) {
        if (ps != null) {
            try {
                ps.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }finally {
                close(conn);
            }
        }
    }

    private static void close(Connection conn) {
        if (conn != null) {
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }

    public static List<Map<String, Object>> executeQuery(String sql,Object... args) {
        List<Map<String, Object>> list = new ArrayList<>();
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        try {
            conn = getConnection();
            ps = conn.prepareStatement(sql);
            for (int i = 0; i < args.length; i++) {
                ps.setObject(i+1,args[i]);
            }
            rs = ps.executeQuery();
            while (rs.next()) {
                Map<String, Object> map = new LinkedHashMap<>();
                for (int i = 0; i < rs.getMetaData().getColumnCount(); i++) {
                    String name = rs.getMetaData().getColumnLabel(i + 1);
                    map.put(name, rs.getObject(name));
                }
                list.add(map);
            }
            return list;
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            close(conn,ps,rs);
        }
        return null;
    }

    private static void close(Connection conn, PreparedStatement ps, ResultSet rs) {
        if (rs!= null) {
            try {
                rs.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }finally {
                close(conn,ps);
            }
        }
    }
}

我们将views文件夹复制进项目的web文件夹下，下面开始项目写项目的具体实现，首先我们打开前端页面，我们可以看出，下面的商品代码都是一样的，这些商品我们都是从数据库读出来，然后再显示再jsp页面，用jstl中的<c:foreach>来实现，因为我们也不知道业务实现都有什么，所以我们根据Servlet中业务需求来写dao层的内容；首先我们写Servlet

package com.zs.servlet;

import com.zs.dao.IProductDAO;
import com.zs.dao.impl.ProductDAOImpl;

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;

@WebServlet("/home")
public class ListProductsServet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 首先确认是否有数据传输过来;这里没有请求数据
        // 调用dao层,获得所有的商品信息,这里我们进dao层写获得所有商品信息的放法;
        ProductDAOImpl productDAO = new ProductDAOImpl();
        List<Map<String, Object>> allProduct = productDAO.listProducts();

        // 设置共享数据list
        req.setAttribute("allProduct",allProduct);
        // 请求返回
        req.getRequestDispatcher("/views/index.jsp").forward(req, resp);
    }
}

首页后台

<%@ 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" type="text/css" href="css/base-aa24246264.css"/>
        <link rel="stylesheet" type="text/css" href="css/welcome-fc9359d842.css"/>
        <link rel="stylesheet" type="text/css" href="css/sidebar.css"/>
        <link rel="stylesheet" type="text/css" href="css/content.css"/>
        <title>贵美·商城</title>

  </head>

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

        <!--搜索框-->
        <div class="logo"></div>
        <div id="com-search">
             <div class="search">    

            <div class="search-tab">
                <span class="active">宝贝</span><span class="">店铺</span>            </div>
                <div class="search-box">
                        <input class="search-txt" placeholder="" type="text">
                        <span class="search-btn"></span>
                        <div class="suggest-box" style="display: none;"></div>
                </div>
                <div class="hotword">
                    <a target="_blank" href="#" style="color:#FF3366">连衣裙</a>
                    <a target="_blank" href="#" style="color:#666666">运动鞋</a>
                    <a target="_blank" href="#" style="color:#FF3366">雪纺衫</a>
                    <a target="_blank" href="#" style="color:#FF3366">衬衫</a>
                    <a target="_blank" href="#" style="color:#666666">薄外套</a>
                    <a target="_blank" href="#" style="color:#666666">T恤</a>
                    <a target="_blank" href="#" style="color:#666666">套装</a>
                    <a target="_blank" href="#" style="color:#666666">牛仔裤</a>
                    <a target="_blank" href="#" style="color:#FF3366">小白鞋</a>
                    <a target="_blank" href="#" style="color:#666666">风衣</a>
                    <a target="_blank" href="#" style="color:#FF3366">绑带凉鞋</a>
                    <a target="_blank" href="#" style="color:#666666">粗跟单鞋</a>
                </div>
        </div>
        </div>

        <!--导航 -->
        <div id="nav">
            <ul>
                <li>
                    <a href="#" class="selected">首页</a>
                </li>
                <li>
                    <a href="#">上衣</a>
                </li>
                <li>
                    <a href="#">裙子</a>
                </li>
                <li>
                    <a href="#">裤子</a>
                </li>
                <li>
                    <a href="#">女鞋</a>
                </li>
                <li>
                    <a href="#">包包</a>
                </li>
                <li>
                    <a href="#">配饰</a>
                </li>
                <li>
                    <a href="#">美妆</a>
                </li>
            </ul>
        </div>
        <hr />

        <!--广告轮播图-->
        <div class="ad">
            <div class="inner">
                <img src="img/ad1.jpg"/>
                <img src="img/ad2.jpg"/>
                <img src="img/ad1.jpg"/>
            </div>
        </div>

        <!--商品展示-->
        <h2>贵美优选</h2>

        <%--这里我们发现下面的商品不居中对齐,我们加个样式--%>
        <div id="wrap" style="margin: 0 auto">
            <c:forEach var="p" items="${allProduct}">
                <!-- 商品信息  -->

                <div class="products">
                    <%--将下面的商品信息修改为读取到的信息--%>
                    <!--商品图片-->
                    <a   href="/shop/product?pid=${p.pid}" class="pimg" style="background-image: url(${p.pimage});"></a>
                    <div class="info">
                        <div class="part">
                            <!--商品价格-->
                            <div class="price">￥${p.shopPrice}</div>
                            <div class="collect">
                                <!--商品收藏-->
                                <i class="icon-star"></i>${p.collect}
                            </div>
                        </div>
                        <i class="icon-select">
                            <!--商品简介-->
                        </i>${p.pname}
                    </div>
                </div>
            </c:forEach>

        </div>

        <!-- 底部导航 -->
        <jsp:include page="/views/footer.jsp"></jsp:include>

    </body>
  </body>
</html>

修改后的index界面

上面的图片有了， 我们就想，我们需要点击哪儿个图片就跳转到某一个页面的详情，打开一个新的页面，因此我们需要给Servlet传递选中的图片pid，因此我们再index页面中，给图片的a标签添加了路径，href="/shoplx/product?pid=${p.pid}" 　　这样就给Servlet传递了一个图片的id，根据这个id来查询数据库：

package com.zs.servlet;

import com.zs.dao.IProductDAO;
import com.zs.dao.impl.ProductDAOImpl;

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.Map;

@WebServlet("/product")
public class ProductServelt extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 确认是否传递数据,如果有,获得数据
        String pid = req.getParameter("pid");

        // 根据id调用dao层查询该商品,这是业务需求,我们需要到dao曾写该方法;
        IProductDAO productDAO = new ProductDAOImpl();
        Map<String, Object> product = productDAO.getProductById(Integer.parseInt(pid));

        // 判断该商品是否存在,如果不存在,则返回错误信息
        if (product == null) {
            req.setAttribute("error", "对不起,商品不存在");
        } else {
            req.setAttribute("product",product);
        }

        // 请求转发
        req.getRequestDispatcher("/views/product.jsp").forward(req, resp);
    }
}

单个商品servelt

<%@ 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%>">

    <meta charset="UTF-8">
        <title>商品详情</title>
        <link rel="stylesheet" type="text/css" href="css/product.css"/>
        <script type="text/javascript" src="js/product.js">

        </script>

  </head>

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

            <div class="wrap">
            <img src="${product.pimage}" />
            <div class="description">

                <form action="/shoplx/mycar" method="post">
                    <h2>${product.pname}</h2>
                    <div class="old_price">
                        原价：
                        <span>
                        ￥${product.marketPrice}
                    </span>
                    </div>
                    <div class="price">
                        折扣价：
                        <span>
                        ￥${product.shopPrice}
                    </span>
                    </div>

                    <div>
                        尺码：均码
                    </div>

                    <div class="count">
                        数量：
                        <span class="s">－</span>
                        <input type="text" value="1" name="num" class="num" />
                        <span class="s">＋</span>
                    </div>

                    <div>
                        <input type="submit" value="加入购物车" class="goods_cart" />
                    </div>

                    <div>
                        <input type="submit" value="立即购买" class="buy"/>
                    </div>
                </form>
            </div>

        </div>
    </body>

</html>

修改后的product.jsp

这时我们发现，当我们在地址栏中id=后面数字修改时，就会变成相应的图片，那么当我们输入一个数据库中没有的id时，如100，那么就会报错，如果输入asdg时，服务器就会报错，出现错误代码，这不是用户希望看见的，因此上面的代码都需要修改，

package com.zs.servlet;

import com.zs.dao.IProductDAO;
import com.zs.dao.impl.ProductDAOImpl;

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.Map;

@WebServlet("/product")
public class ProductServelt extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        try {
            // 确认是否传递数据,如果有,获得数据
            String pid = req.getParameter("pid");

            // 根据id调用dao层查询该商品,这是业务需求,我们需要到dao曾写该方法;
            IProductDAO productDAO = new ProductDAOImpl();
            Map<String, Object> product = productDAO.getProductById(Integer.parseInt(pid));

            // 判断该商品是否存在,如果不存在,则返回错误信息
            if (product == null) {
                req.setAttribute("error", "对不起,商品不存在");
            } else {
                req.setAttribute("product", product);
            }

            // 请求转发
            req.getRequestDispatcher("/views/product.jsp").forward(req, resp);
        } catch (Exception e) {
            System.out.println("程序出错");
            // 程序出错时,就返回主界面
            resp.sendRedirect("/shoplx/home");
        }

    }
}

修改后的ProductServlet

<%@ 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%>">

    <meta charset="UTF-8">
        <title>商品详情</title>
        <link rel="stylesheet" type="text/css" href="css/product.css"/>
        <script type="text/javascript" src="js/product.js"></script>
      <script>
          if (${empty success}) {
              if (confirm("添加成功,是否前往购物车")) {
                  window.location.href = "/shoplx/mycar";
              }
          }

      </script>
  </head>

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

       <div class="wrap">
            <c:choose>
                <c:when test="${empty product}">
                    对不起,该商品不存在!!!
                </c:when>
                <c:otherwise>
                    <img src="${product.pimage}" />
                    <div class="description">

                        <form action="/shoplx/addcar" method="post">
                            <input type="hidden" name="pid" value="${product.pid}">
                            <input type="hidden" name="pid" value="${product.pid}">
                            <h2>${product.pname}</h2>
                            <div class="old_price">
                                原价：
                                <span>
                        ￥${product.marketPrice}
                    </span>
                            </div>
                            <div class="price">
                                折扣价：
                                <span>
                        ￥${product.shopPrice}
                    </span>
                            </div>

                            <div>
                                尺码：均码
                            </div>

                            <div class="count">
                                数量：
                                <span class="s">－</span>
                                <input type="text" value="1" name="num" class="num" />
                                <span class="s">＋</span>
                            </div>

                            <div>
                                <input type="submit" value="加入购物车" class="goods_cart" />
                            </div>

                            <div>
                                <input type="submit" value="立即购买" class="buy"/>
                            </div>
                        </form>
                    </div>
                </c:otherwise>
            </c:choose>

       </div>
    </body>

</html

<%@ 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%>">

    <meta charset="UTF-8">
        <title>商品详情</title>
        <link rel="stylesheet" type="text/css" href="css/product.css"/>
        <script type="text/javascript" src="js/product.js"></script>
      <script>
          if (${not empty success}) {
              if (confirm("添加成功,是否前往购物车")) {
                  window.location.href = "/shoplx/mycar";
              }
          }

      </script>
  </head>

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

       <div class="wrap">
            <c:choose>
                <c:when test="${not empty error}">
                    对不起,该商品不存在!!!
                </c:when>
                <c:otherwise>
                    <img src="${product.pimage}" />
                    <div class="description">

                        <form action="/shoplx/addcar" method="post">
                            <input type="hidden" name="pid" value="${product.pid}">
                            <input type="hidden" name="pid" value="${product.pid}">
                            <h2>${product.pname}</h2>
                            <div class="old_price">
                                原价：
                                <span>
                        ￥${product.marketPrice}
                    </span>
                            </div>
                            <div class="price">
                                折扣价：
                                <span>
                        ￥${product.shopPrice}
                    </span>
                            </div>

                            <div>
                                尺码：均码
                            </div>

                            <div class="count">
                                数量：
                                <span class="s">－</span>
                                <input type="text" value="1" name="num" class="num" />
                                <span class="s">＋</span>
                            </div>

                            <div>
                                <input type="submit" value="加入购物车" class="goods_cart" />
                            </div>

                            <div>
                                <input type="submit" value="立即购买" class="buy"/>
                            </div>
                        </form>
                    </div>
                </c:otherwise>
            </c:choose>

       </div>
    </body>

</html>

product.jsp

然后我们接下来就继续往下写加入购物车的代码；

/**
 * 在写代码之前我们首先要想,我们要想加入购物车,首先我们需要知道,用户是否已经登录,如果已经登录,那么就获取这个用户的uid
* 然后将商品的信息添加进改用户的购物车中,如果该用户没有登陆,那么我们要把商品信息添加到哪儿呢,很明显,没有登陆是不能添加的,因此我们
 * 需要 在添加商品之前,判断用户是否登录,如果没有登陆,那么就跳转到登陆页面.
 * 这时就会遇到下一个问题,就是我们登陆肯定是要获得登陆信息,然后将用户信息传递到后台进行判断,是否登陆成功,然后将用户的信息,
 * 设置为共享数据,之前我们用的req.setAttribute()方法,设置的共享数据,只对当前请求有效,我们再之后的购物车中,需要频繁用到用户的信息,
 * 所以我们就用到了回话,session
 * session设置的共享数据只要浏览器不关闭,就一直可以使用*/
从上面我们可以知道，我们需要先写登陆的后台，这样才能获得登陆的用户信息，才能继续写登陆成功后加入购物车的代码；而要写登陆的代码，就要先写注册的后台，注册后才能登陆

package com.zs.entity;

public class User {
    private int uid;
    private String username;
    private String password;
    private String telephone;
    private String email;
    private String nickname;

    public User() { }

    public User(int uid, String username, String password, String telephone, String email, String nickname) {
        this.uid = uid;
        this.username = username;
        this.password = password;
        this.telephone = telephone;
        this.email = email;
        this.nickname = nickname;
    }

    public int getUid() {
        return uid;
    }

    public void setUid(int uid) {
        this.uid = uid;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getTelephone() {
        return telephone;
    }

    public void setTelephone(String telephone) {
        this.telephone = telephone;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getNickname() {
        return nickname;
    }

    public void setNickname(String nickname) {
        this.nickname = nickname;
    }

    @Override
    public String toString() {
        return "User{" +
                "uid=" + uid +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", telephone='" + telephone + '\'' +
                ", email='" + email + '\'' +
                ", nickname='" + nickname + '\'' +
                '}';
    }
}

User实体类

package com.zs.servlet;

import com.zs.dao.IUserDAO;
import com.zs.dao.impl.UserDAOImpl;
import com.zs.entity.User;

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;

@WebServlet("/register")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        // 获取请求数据
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String telephone = req.getParameter("telephone");
        String email = req.getParameter("email");
        String nickname = req.getParameter("nickname");

        //我们首先要与数据库比较,看username是否已经呗占用,如果被占用,则返回错误信息,否则,添加用户
        //调用dao层,查询用户名是否存在,到dao层添加搜索用户名方法
        IUserDAO userDAO = new UserDAOImpl();

        if (userDAO.getUserByName(username)) {
            req.setAttribute("error", "对不起,用户名已经存在");
        } else {
            // 创建user实例化对象
            User user = new User(1, username, password, telephone, email, nickname);

            // 然后调用dao层,数据库添加用户,到dao层写添加用户的方法
            userDAO.insertUser(user);

            req.setAttribute("success", "注册成功");
        }
        req.getRequestDispatcher("/views/register.jsp").forward(req, resp);
    }
}

RegisterServlet

<%@ 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/";
%>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>注册 - 贵美·商城</title>
        <base href="<%=basePath%>">
         <link rel="icon" href="img/icon.png" type="image/x-icon">
        <link rel="stylesheet" type="text/css" href="css/register.css"/>
        <script>
            if (${not empty success}) {
                if (confirm("注册成功,是否前往登录界面")) {
                    window.location.href="/shoplx/views/login.jsp";
                }
            }
        </script>
    </head>
    <body>

        <div class="wrap">
            <div class="guimeilogo"></div>
            <div class="register">

                <div class="top">
                    <h1>新用户注册</h1>
                    <a href="/shop/views/login.jsp">已有账号</a>
                </div>

                ${error}
                <div class="mid">
                    <form action="/shoplx/register" method="post">

                    <input type="text" name="telephone" id="telephone" placeholder="手机号" required="required"/>

                    <div class="sec">

                        <input type="text" name="code" id="code" placeholder="验证码" required="required" />

                        <a  class="send" onclick="send()"> 发送验证码 </a>

                        <script>
                            function send(){

                                 return false;
                            }
                        </script>
                    </div> 

                    <input type="password" name="password" id="password" placeholder="密码" required="required" />

                    <input type="password" name="reppw" id="reppw" placeholder="重复密码" required="required" />

                    <input type="text" name="username" id="username" placeholder="请输入用户名" required="required" />

                    <input type="text" name="email" id="email" placeholder="亲，您的邮箱" required="required" />

                    <input type="text" name="nickname" id="nickname" placeholder="亲，您的昵称" required="required" />

                    <input type="submit" id="submit" value="注册"/>

                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

修改后register.jsp

package com.zs.servlet;

import com.zs.dao.IUserDAO;
import com.zs.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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.Map;

@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        // 获得请求数据
        String username = req.getParameter("username");
        String password = req.getParameter("password");

        // 调用dao层验证用户名,密码
        IUserDAO userDAO = new UserDAOImpl();
        Map<String, Object> user = userDAO.login(username, password);

        if (user == null) {
            req.setAttribute("error", "用户名或密码错误");
            req.getRequestDispatcher("/views/login.jsp").forward(req, resp);
        } else {
            //因为我们再后面的业务中会经常用到user因此我们需要将user的信息共享到会话中,而且我们登陆成功,需要重定向到home页面
            //地址栏发生变化,重定向不能传数据,因此用session
            req.getSession().setAttribute("user", user);
//            登陆成功,重定向到home页面
            resp.sendRedirect("/shoplx/home");
        }
    }
}

LoginServlet

<%@ 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%>">

        <title>登录 - 贵美·商城</title>
        <link rel="stylesheet" type="text/css" href="css/login.css"/>
    </head>
    <body>

        <div class="wrap">
            <div class="guimeilogo"></div>

            <div class="login">

                <div class="top">
                    <h1>贵美商城</h1>
                    <a href="/shoplx/views/register.jsp">新用户注册</a>
                </div>

                <div class="mid">
                    <form action="/shoplx/login" method="post">
                    <input type="text" name="username" id="username" placeholder="用户名" required="required" />
                        ${error}
                    <input type="password" name="password" id="password" placeholder="密码" required="required" />
                    <input type="submit" id="submit" value="立即登录"/>
                    </form>
                </div>

            </div>

        </div>
    </body>
</html>

修改后的login.jsp

然后我们让你发现，我们登录成功以后，注册和登录按钮应该没有的，因此需要修改header.sjp:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ 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/";
%>

    <link rel="stylesheet" type="text/css" href="css/header.css"/>
 <!--头部-->

        <div class="header_wrap">
            <ul>
                <c:choose>
                    <c:when test="${empty user}">
                        <li><a href="/shoplx/views/login.jsp">登录</a></li>
                        <li><a href="/shoplx/views/register.jsp">注册</a></li>
                    </c:when>
                    <c:otherwise>
                        欢迎 <a href="">${user.nickname}</a>
                    </c:otherwise>
                </c:choose>

                <li><a href="#">我的收藏</a></li>
                <li><a href="/shoplx/mycar">我的购物车</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">商家后台</a></li>

            </ul>
        </div>
        

header.jsp

接下来我们写加入购物车的Servlet；

package com.zs.servlet;

import com.zs.dao.ICarDAO;
import com.zs.dao.impl.CarDAOImpl;
import com.zs.entity.User;

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.Map;

@WebServlet("/addcar")
public class AddCartServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //首先获得登录信息,判断是否登录
        Map user = (Map) req.getSession().getAttribute("user");
        if (user != null) {
             //获得用户id
            Integer uid = (Integer) user.get("uid");
            // 获得商品编号
            Integer pid = Integer.parseInt(req.getParameter("pid"));
            int num = Integer.parseInt(req.getParameter("num"));
            // 将商品添加进购物车表中,首先我们要判断购物车是否有该商品,如果有,则将商品的数量加1,否则添加该商品
            ICarDAO carDAO = new CarDAOImpl();
            boolean b = carDAO.getProductById(uid, pid);
            if (b) {
                carDAO.update(uid, pid, num);
            } else {
                carDAO.insertProduct(uid, pid, num);
            }
            req.setAttribute("success","成功");
            req.getRequestDispatcher("/product").forward(req, resp);

        } else {
            resp.sendRedirect("/shoplx/views/login.jsp");
        }

    }
}

AddCarServlet

<%@ 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>
            <c:forEach var="p" items="${Carts}">
                <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="#">刪除</a>
                        </li>
                    </ul>
                </div>
            </c:forEach>

            <div class="foot">
                <ul>
                    <li><a href="#">全部刪除</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>

        </div>

    </body>
</html>

购物车

package com.zs.servlet;

import com.zs.dao.ICarDAO;
import com.zs.dao.impl.CarDAOImpl;

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;

@WebServlet("/mycar")
public class MyCarServlet 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");
        ICarDAO carDAO = new CarDAOImpl();
        List<Map<String, Object>> list = carDAO.listProducts(uid);
        req.setAttribute("Carts",list);
        req.getRequestDispatcher("/views/goodscart.jsp").forward(req, resp);
    }
}

购物车Servlet

需要用到的dao层：