javaEE練習（商城練習）
今天寫一個商城的練習，綜合以前學習過的servlet和el表達式，來一個綜合的練習；javascript
須要用到的數據庫有：css
/* 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 ('1', '首頁'), ('2', '上衣'), ('3', '裙子'), ('4', '褲子'), ('5', '女鞋'), ('6', '包包'), ('7', '配飾'), ('8', '美妝'), ('9', '男朋友'); 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 ('1', '2017春季新款時尚百搭顯高單排扣破洞高腰彈力小腳褲', '151', '77', 'products/1.jpg', '1', '2017春季新款時尚百搭顯高單排扣破洞高腰彈力小腳褲', '0', '1', '156'), ('2', '2017春季新款時尚百搭韓版顯瘦純色玫瑰花T恤', '109', '56', 'products/2.jpg', '0', '2017春季新款時尚百搭韓版顯瘦純色玫瑰花T恤', '0', '1', '457'), ('3', '春季新款韓版大露背蝴蝶結繫帶收腰顯瘦明線開叉喇叭線連衣裙', '176', '90', 'products/3.jpg', '0', '春季新款韓版大露背蝴蝶結繫帶收腰顯瘦明線開叉喇叭線連衣裙', '0', '1', '12'), ('4', '2017春夏新款韓版休閒百搭寬鬆簡約字母繡花短袖圓領套頭T恤', '105', '81', 'products/4.jpg', '0', '2017春夏新款韓版休閒百搭寬鬆簡約字母繡花短袖圓領套頭T恤', '0', '1', '127'), ('5', '2017 春裝新款韓版百搭針織打底短袖T恤女圓領純色上衣', '72', '36', 'products/5.jpg', '0', '2017 春裝新款韓版百搭針織打底短袖T恤女圓領純色上衣', '0', '1', '1234'), ('6', '2017春季新品玫瑰字母印花蕾絲拼接長袖T恤', '115', '58', 'products/6.jpg', '0', '2017春季新品玫瑰字母印花蕾絲拼接長袖T恤', '0', '1', '453'), ('7', '修身顯瘦撞色邊針織T恤 學院風中袖針織上衣', '191', '97', 'products/7.jpg', '0', '修身顯瘦撞色邊針織T恤 學院風中袖針織上衣', '0', '1', '435'), ('8', '2017春夏新款織帶針織小開衫短款', '215', '110', 'products/8.jpg', '0', '2017春夏新款織帶針織小開衫短款', '0', '1', '432'), ('9', '2017夏季新款女裝破洞高腰牛仔短褲包邊設計作舊牛仔褲', '1348', '687', 'products/9.jpg', '0', '2017夏季新款女裝破洞高腰牛仔短褲包邊設計作舊牛仔褲', '0', '1', '45'), ('10', '2017新款雙線裝飾半身裙 甜美學院風百搭百褶裙子', '1446', '737', 'products/10.jpg', '1', '2017新款雙線裝飾半身裙 甜美學院風百搭百褶裙子', '0', '1', '456'), ('11', '2017新款雙線裝飾半身裙 甜美學院風百搭百褶裙子', '156', '80', 'products/11.jpg', '1', '2017新款雙線裝飾半身裙 甜美學院風百搭百褶裙子', '0', '1', '786'), ('12', '2017春夏裝新款圓領中長款黑色寬鬆亮絲短袖t恤女打底衫上衣', '93', '47', 'products/12.jpg', '0', '2017春夏裝新款圓領中長款黑色寬鬆亮絲短袖t恤女打底衫上衣', '0', '1', '45'), ('13', '2017春夏新款韓版拼接網紗休閒百搭優雅短袖套頭針織衫', '110', '56', 'products/13.jpg', '1', '2017春夏新款韓版拼接網紗休閒百搭優雅短袖套頭針織衫', '0', '1', '456'), ('14', '2017夏裝新款韓版無袖民族風吊帶連衣裙公主裙背心裙子女裝', '151', '77', 'products/14.jpg', '0', '2017夏裝新款韓版無袖民族風吊帶連衣裙公主裙背心裙子女裝', '0', '1', '231'), ('15', '新款韓版寬鬆顯瘦小清新可愛卡通印花七分袖poloT恤連衣裙子', '134', '68', 'products/15.jpg', '1', '新款韓版寬鬆顯瘦小清新可愛卡通印花七分袖poloT恤連衣裙子', '0', '1', '735'), ('16', '2017 時尚百搭藍色高腰繫帶闊腿七分牛仔褲', '107', '55', 'products/16.jpg', '0', '2017 時尚百搭藍色高腰繫帶闊腿七分牛仔褲', '0', '1', '643'), ('17', '2017春季新款寬鬆顯瘦帶帽口袋中長款牛仔外套女上衣', '183', '93', 'products/17.jpg', '0', '2017春季新款寬鬆顯瘦帶帽口袋中長款牛仔外套女上衣', '0', '1', '97'), ('18', '2017春夏新品韓版寬鬆短袖T恤', '120', '61', 'products/18.jpg', '0', '2017春夏新品韓版寬鬆短袖T恤', '0', '1', '4532'), ('19', '設計感流蘇拉鍊破邊蝙蝠袖衛衣外套', '242', '123', 'products/19.jpg', '1', '設計感流蘇拉鍊破邊蝙蝠袖衛衣外套', '0', '1', '21'), ('20', '2017新款韓版翻邊一刀切破洞高腰彈力修身牛仔長褲', '130', '70', 'products/20.jpg', '0', '2017新款韓版翻邊一刀切破洞高腰彈力修身牛仔長褲！', '0', '1', '234'), ('21', '新款氣質韓版小清新毛毛露肩顯瘦純色仙款氣質連衣裙子', '183', '93', 'products/21.jpg', '0', '新款氣質韓版小清新毛毛露肩顯瘦純色仙款氣質連衣裙子', '0', '1', '57'), ('22', '2017春季新品韓版百搭休閒拼色夾克棒球服棒球衫', '191', '97', 'products/22.jpg', '1', '2017春季新品韓版百搭休閒拼色夾克棒球服棒球衫', '0', '1', '2433'), ('23', '2017新款破洞撕邊百搭牛仔褲個性韓版九分牛仔乞丐褲', '159', '81', 'products/23.jpg', '1', '2017新款破洞撕邊百搭牛仔褲個性韓版九分牛仔乞丐褲', '0', '1', '789'), ('24', '春季新款韓版小櫻桃小清新百搭蕾絲拼接喇叭袖復古雪紡衫襯衫上衣', '147', '75', 'products/24.jpg', '1', '春季新款韓版小櫻桃小清新百搭蕾絲拼接喇叭袖復古雪紡衫襯衫上衣', '0', '1', '256'), ('25', '2017春夏新款韓版休閒百搭寬鬆純色口袋基礎套頭短袖T恤上衣', '105', '53', 'products/25.jpg', '0', '2017春夏新款韓版休閒百搭寬鬆純色口袋基礎套頭短袖T恤上衣', '0', '1', '92'), ('26', '1313 純色刺繡T恤 休閒寬鬆百搭圓領短袖上衣', '174', '89', 'products/26.jpg', '0', '1313 純色刺繡T恤 休閒寬鬆百搭圓領短袖上衣', '0', '1', '435'), ('27', '2017 春季新款側鈕釦深藍西裝馬夾背心', '164', '83', 'products/27.jpg', '0', '2017 春季新款側鈕釦深藍西裝馬夾背心', '0', '1', '786'), ('28', '新款韓版小清新小性感碎花印花蕾絲拼接寬鬆顯瘦連衣裙兩件套', '159', '81', 'products/28.jpg', '0', '新款韓版小清新小性感碎花印花蕾絲拼接寬鬆顯瘦連衣裙兩件套', '0', '1', '543'), ('29', '復古大花朵碎花V領繫帶印花雪紡連衣裙短裙', '166', '85', 'products/29.jpg', '0', '復古大花朵碎花V領繫帶印花雪紡連衣裙短裙', '0', '1', '84'), ('30', '2017新款原宿風寬鬆露肩鏤空短袖T恤', '98', '50', 'products/30.jpg', '0', '2017新款原宿風寬鬆露肩鏤空短袖T恤', '0', '1', '7978'), ('31', '【張予曦】星星雪紡襯衫連衣長裙收腰兩件套女裙春A字碎花連衣裙', '200', '102', 'products/31.jpg', '0', '【張予曦】星星雪紡襯衫連衣長裙收腰兩件套女裙春A字碎花連衣裙', '0', '2', '456'), ('32', '2017早春新款 溫馨幹練腰帶裝飾西裝褲休閒褲', '144', '73', 'products/32.jpg', '0', '2017早春新款 溫馨幹練腰帶裝飾西裝褲休閒褲', '0', '2', '12'), ('33', '2017夏季新款韓版高腰破洞毛邊牛仔短褲', '102', '52', 'products/33.jpg', '0', '2017夏季新款韓版高腰破洞毛邊牛仔短褲', '0', '2', '7687'), ('34', '2017春季新款牛仔褲女長褲子破洞潮顯瘦小腳褲鉛筆褲', '159', '81', 'products/34.jpg', '0', '2017春季新款牛仔褲女長褲子破洞潮顯瘦小腳褲鉛筆褲', '0', '2', '7654'), ('35', '2017新款春夏韓國淑女氣質顯瘦蝴蝶結襯衣', '159', '81', 'products/35.jpg', '0', '2017新款春夏韓國淑女氣質顯瘦蝴蝶結襯衣', '0', '2', '21'), ('36', 'bf風個性拼接寬鬆毛邊牛仔褲女韓國顯瘦不規則直筒闊腿九分褲', '156', '80', 'products/36.jpg', '0', 'bf風個性拼接寬鬆毛邊牛仔褲女韓國顯瘦不規則直筒闊腿九分褲', '0', '2', '67'), ('37', '【錢夫人同款】春季韓版t恤女短袖圓領學生寬鬆時尚打底衫上衣', '96', '49', 'products/37.jpg', '0', '【錢夫人同款】春季韓版t恤女短袖圓領學生寬鬆時尚打底衫上衣', '0', '2', '453'), ('38', '2017春季新款運動褲女九分學生韓版寬鬆百搭顯瘦原宿bf哈倫', '134', '68', 'products/38.jpg', '0', '2017春季新款運動褲女九分學生韓版寬鬆百搭顯瘦原宿bf哈倫', '0', '2', '12364'), ('39', '2017春夏新款韓版優雅刺繡氣質高腰顯瘦半身裙包臀裙短裙裙子', '125', '63', 'products/39.jpg', '0', '2017春夏新款韓版優雅刺繡氣質高腰顯瘦半身裙包臀裙短裙裙子', '0', '2', '45'), ('40', '韓版春季新款花朵刺繡學院風時尚百搭條紋七分袖襯衣', '129', '66', 'products/40.jpg', '0', '韓版春季新款花朵刺繡學院風時尚百搭條紋七分袖襯衣', '0', '2', '37'), ('41', '2017春季新款時尚百搭韓版顯瘦金屬圓環鏤空字母圓領長T恤', '201', '103', 'products/41.jpg', '0', '2017春季新款時尚百搭韓版顯瘦金屬圓環鏤空字母圓領長T恤', '0', '2', '122'), ('42', '短袖t恤女寬鬆上衣春裝2017新款 韓版百搭半袖t恤', '89', '45', 'products/42.jpg', '0', '短袖t恤女寬鬆上衣春裝2017新款 韓版百搭半袖t恤', '0', '2', '87'), ('43', '兔先生亮片字母圓領作舊T恤', '120', '61', 'products/43.jpg', '0', '兔先生亮片字母圓領作舊T恤', '0', '2', '786'), ('44', '2017夏季新款水溶鉤花短袖網衫罩衫', '98', '50', 'products/44.jpg', '0', '2017夏季新款水溶鉤花短袖網衫罩衫', '0', '2', '465'), ('45', '春季新款韓版街頭立領收腰抽褶顯瘦帥氣夾克風衣外套', '183', '93', 'products/45.jpg', '0', '春季新款韓版街頭立領收腰抽褶顯瘦帥氣夾克風衣外套', '0', '2', '547'), ('46', '2017春夏新款韓版拼接網紗休閒百搭優雅短袖套頭針織衫', '110', '56', 'products/46.jpg', '0', '2017春夏新款韓版拼接網紗休閒百搭優雅短袖套頭針織衫', '0', '2', '678'), ('47', '2017新款春夏寬鬆休閒G字母印花T恤', '93', '47', 'products/47.jpg', '0', '2017新款春夏寬鬆休閒G字母印花T恤', '0', '2', '6597'), ('48', '小番茄定製 溫柔靜謐後背鈕釦喇叭袖壓皺雪紡襯衫 真絲皺兩件套', '142', '72', 'products/48.jpg', '0', '小番茄定製 溫柔靜謐後背鈕釦喇叭袖壓皺雪紡襯衫 真絲皺兩件套', '0', '2', '213'), ('49', '2017早春歐美性感網紗透視花邊半高領燈籠袖純色長袖雪紡衫', '117', '60', 'products/49.jpg', '0', '2017早春歐美性感網紗透視花邊半高領燈籠袖純色長袖雪紡衫', '0', '2', '4567'), ('50', '2017 春夏新款露背百褶連衣裙', '338', '172', 'products/50.jpg', '0', '2017 春夏新款露背百褶連衣裙', '0', '2', '78'); 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;
須要用到的jar包有jstl，standard，mysql-connetor-java-5.1.45-bin，servlet-api四個jar包。html
前端用到的前端頁面及圖片： https://files.cnblogs.com/files/Zs-book1/views.rar前端
src文件夾下，建5個包：dao，entity，util，servlet，filter；java
util包中，咱們寫入jdbc工具類：mysql
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層的內容；首先咱們寫Servletweb
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>
上面的圖片有了， 咱們就想，咱們須要點擊哪兒個圖片就跳轉到某一個頁面的詳情，打開一個新的頁面，所以咱們須要給Servlet傳遞選中的圖片pid，所以咱們再index頁面中，給圖片的a標籤添加了路徑，href="/shoplx/product?pid=${p.pid}" 這樣就給Servlet傳遞了一個圖片的id，根據這個id來查詢數據庫：sql
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); } }
<%@ 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>
這時咱們發現，當咱們在地址欄中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"); } } }
<%@ 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>
而後咱們接下來就繼續往下寫加入購物車的代碼；
/**
* 在寫代碼以前咱們首先要想,咱們要想加入購物車,首先咱們須要知道,用戶是否已經登陸,若是已經登陸,那麼就獲取這個用戶的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 + '\'' + '}'; } }
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); } }
<%@ 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>
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"); } } }
<%@ 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>
而後咱們讓你發現，咱們登陸成功之後，註冊和登陸按鈕應該沒有的，所以須要修改header.sjp:api
<%@ 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>
接下來咱們寫加入購物車的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"); } } }
<%@ 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); } }
須要用到的dao層：
相關文章
- 1. JavaEE——筆記練習
- 2. Day24-26 項目練習（圖書商城）
- 3. 簡易商城 [ html + css ] 練習
- 4. JavaEE練習（二）——Spring MVC
- 5. JavaEE練習（一）——Spring概念
- 6. JavaEE練習（三）——ssm框架
- 7. 練習練習在練習
- 8. JAVA0508練習（練習）
- 9. Scrapy練習——爬取京東商城商品信息
- 10. 網上商城-java基礎練習項目-仿照雷蛇商城
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
