JavaWeb之動態頁面技術jsp顯示商品列表
阿新 • • 發佈：2019-01-01
一、新建商品資料庫
CREATE TABLE `product` ( `pid` varchar(50) NOT NULL, `pname` varchar(50) DEFAULT NULL, `market_price` double DEFAULT NULL, `shop_price` double DEFAULT NULL, `pimage` varchar(200) DEFAULT NULL, `pdate` date DEFAULT NULL, `is_hot` int(11) DEFAULT NULL, `pdesc` varchar(255) DEFAULT NULL, `pflag` int(11) DEFAULT NULL, `cid` varchar(50) DEFAULT NULL, PRIMARY KEY (`pid`), KEY `sfk_0001` (`cid`) )
INSERT INTO `product` VALUES ('1','小米 4c 標準版',1399,1299,'products/1/c_0001.jpg','2015-11-02',1,'小米 4c 標準版 全網通 白色 移動聯通電信4G手機 雙卡雙待',0,'1'),('10','華為 Ascend Mate7',2699,2599,'products/1/c_0010.jpg','2015-11-02',1,'華為 Ascend Mate7 月光銀 移動4G手機 雙卡雙待雙通6英寸高清大屏，纖薄機身，智慧超八核，按壓式指紋識別！!選擇下方“移動老使用者4G飛享合約”，無需換號，還有話費每月返還！',0,'1'),('11','vivo X5Pro',2399,2298,'products/1/c_0014.jpg','2015-11-02',1,'移動聯通雙4G手機 3G運存版 極光白【購機送藍芽耳機+藍芽自拍杆】新升級3G執行記憶體·雙2.5D弧面玻璃·眼球識別技術',0,'1'),('12','努比亞（nubia）My 布拉格',1899,1799,'products/1/c_0013.jpg','2015-11-02',0,'努比亞（nubia）My 布拉格 銀白 移動聯通4G手機 雙卡雙待【嗨11，下單立減100】金屬機身，快速充電！布拉格相機全新體驗！',0,'1'),('13','華為 麥芒4',2599,2499,'products/1/c_0012.jpg','2015-11-02',1,'華為 麥芒4 晨曦金 全網通版4G手機 雙卡雙待金屬機身 2.5D弧面屏 指紋解鎖 光學防抖',0,'1'),('14','vivo X5M',1899,1799,'products/1/c_0011.jpg','2015-11-02',0,'vivo X5M 移動4G手機 雙卡雙待 香檳金【購機送藍芽耳機+藍芽自拍杆】5.0英寸大屏顯示·八核雙卡雙待·Hi-Fi移動KTV',0,'1'),('15','Apple iPhone 6 (A1586)',4399,4288,'products/1/c_0015.jpg','2015-11-02',1,'Apple iPhone 6 (A1586) 16GB 金色 移動聯通電信4G手機長期省才是真的省！點選購機送費版，月月送話費，月月享優惠，暢享4G網路，就在聯通4G！',0,'1'),('16','華為 HUAWEI Mate S 臻享版',4200,4087,'products/1/c_0016.jpg','2015-11-03',0,'華為 HUAWEI Mate S 臻享版 手機 極晝金 移動聯通雙4G(高配)滿星評價即返30元話費啦；買就送電源+清水套+創意手機支架；優雅弧屏，mate7升級版',0,'1'),('17','索尼(SONY) E6533 Z3+',4099,3999,'products/1/c_0017.jpg','2015-11-02',0,'索尼(SONY) E6533 Z3+ 雙卡雙4G手機 防水防塵 澗湖綠索尼z3專業防水 2070萬畫素 移動聯通雙4G',0,'1'),('18','HTC One M9+',3599,3499,'products/1/c_0018.jpg','2015-11-02',0,'HTC One M9+（M9pw） 金銀匯 移動聯通雙4G手機5.2英寸，8核CPU，指紋識別，UltraPixel超畫素前置相機+2000萬/200萬後置雙鏡頭相機！降價特賣，驚喜不斷！',0,'1'),('19','HTC Desire 826d 32G 臻珠白',1599,1469,'products/1/c_0020.jpg','2015-11-02',1,'後置1300萬+UltraPixel超畫素前置攝像頭+【雙】前置揚聲器+5.5英寸【1080p】大屏！',0,'1'),('2','中興 AXON',2899,2699,'products/1/c_0002.jpg','2015-11-05',1,'中興 AXON 天機 mini 壓力屏版 B2015 華爾金 移動聯通電信4G 雙卡雙待',0,'1'),('20','小米 紅米2A 增強版 白色',649,549,'products/1/c_0019.jpg','2015-11-02',0,'新增至2GB 記憶體+16GB容量！4G雙卡雙待，聯芯 4 核 1.5GHz 處理器！',0,'1'),('21','魅族 魅藍note2 16GB 白色',1099,999,'products/1/c_0021.jpg','2015-11-02',0,'現貨速搶，搶完即止！5.5英寸1080P解析度螢幕，64位八核1.3GHz處理器，1300萬畫素攝像頭，雙色溫雙閃光燈！',0,'1'),('22','三星 Galaxy S5 (G9008W) 閃耀白',2099,1999,'products/1/c_0022.jpg','2015-11-02',1,'5.1英寸全高清炫麗屏，2.5GHz四核處理器，1600萬畫素',0,'1'),('23','sonim XP7700 4G手機',1799,1699,'products/1/c_0023.jpg','2015-11-09',1,'三防智慧手機 移動/聯通雙4G 安全 黑黃色 雙4G美國軍工IP69 30天長待機 3米防水防摔 北斗',0,'1'),('24','努比亞（nubia）Z9精英版 金色',3988,3888,'products/1/c_0024.jpg','2015-11-02',1,'移動聯通電信4G手機 雙卡雙待真正的無邊框！金色尊貴版！4GB+64GB大記憶體！',0,'1'),('25','Apple iPhone 6 Plus (A1524) 16GB 金色',5188,4988,'products/1/c_0025.jpg','2015-11-02',0,'Apple iPhone 6 Plus (A1524) 16GB 金色 移動聯通電信4G手機 硬貨 硬實力',0,'1'),('26','Apple iPhone 6s (A1700) 64G 玫瑰金色',6388,6088,'products/1/c_0026.jpg','2015-11-02',0,'Apple iPhone 6 Plus (A1524) 16GB 金色 移動聯通電信4G手機 硬貨 硬實力',0,'1'),('27','三星 Galaxy Note5（N9200）32G版',5588,5388,'products/1/c_0027.jpg','2015-11-02',0,'旗艦機型！5.7英寸大屏，4+32G記憶體！不一樣的SPen更優化的浮窗指令！贈無線充電板！',0,'1'),('28','三星 Galaxy S6 Edge+（G9280）32G版 鉑光金',5999,5888,'products/1/c_0028.jpg','2015-11-02',0,'贈移動電源+自拍杆+三星OTG金屬U盤+無線充電器+透明保護殼',0,'1'),('29','LG G4（H818）陶瓷白 國際版',3018,2978,'products/1/c_0029.jpg','2015-11-02',0,'李敏鎬代言，F1.8大光圈1600萬後置攝像頭，5.5英寸2K屏，3G+32G記憶體，LG年度旗艦機！',0,'1'),('3','華為榮耀6',1599,1499,'products/1/c_0003.jpg','2015-11-02',0,'榮耀 6 (H60-L01) 3GB記憶體標準版 黑色 移動4G手機',0,'1'),('30','微軟(Microsoft) Lumia 640 LTE DS (RM-1113)',1099,999,'products/1/c_0030.jpg','2015-11-02',0,'微軟首款雙網雙卡雙4G手機，5.0英寸高清大屏，雙網雙卡雙4G！',0,'1'),('31','巨集碁（acer）ATC705-N50 臺式電腦',2399,2299,'products/1/c_0031.jpg','2015-11-02',0,'爆款直降，滿千減百，品質巨集碁，特惠來襲，何必苦等11.11，早買早便宜！',0,'2'),('32','Apple MacBook Air MJVE2CH/A 13.3英寸',6788,6688,'products/1/c_0032.jpg','2015-11-02',0,'寬屏膝上型電腦 128GB 快閃記憶體',0,'2'),('33','聯想（ThinkPad） 輕薄系列E450C(20EH0001CD)',4399,4199,'products/1/c_0033.jpg','2015-11-02',0,'聯想（ThinkPad） 輕薄系列E450C(20EH0001CD)14英寸膝上型電腦(i5-4210U 4G 500G 2G獨顯 Win8.1)',0,'2'),('34','聯想（Lenovo）小新V3000經典版',4599,4499,'products/1/c_0034.jpg','2015-11-02',0,'14英寸超薄膝上型電腦（i7-5500U 4G 500G+8G SSHD 2G獨顯 全高清屏）黑色滿1000減100，狂減！火力全開，橫掃3天！',0,'2'),('35','華碩（ASUS）經典系列R557LI',3799,3699,'products/1/c_0035.jpg','2015-11-02',0,'15.6英寸膝上型電腦（i5-5200U 4G 7200轉500G 2G獨顯 D刻 藍芽 Win8.1 黑色）',0,'2'),('36','華碩（ASUS）X450J',4599,4399,'products/1/c_0036.jpg','2015-11-02',0,'14英寸膝上型電腦 （i5-4200H 4G 1TB GT940M 2G獨顯 藍芽4.0 D刻 Win8.1 黑色）',0,'2'),('37','戴爾（DELL）靈越 飛匣3000系列',3399,3299,'products/1/c_0037.jpg','2015-11-03',0,' Ins14C-4528B 14英寸筆記本（i5-5200U 4G 500G GT820M 2G獨顯 Win8）黑',0,'2'),('38','惠普(HP)WASD 暗影精靈',5699,5499,'products/1/c_0038.jpg','2015-11-02',0,'15.6英寸遊戲膝上型電腦(i5-6300HQ 4G 1TB+128G SSD GTX950M 4G獨顯 Win10)',0,'2'),('39','Apple 配備 Retina 顯示屏的 MacBook',11299,10288,'products/1/c_0039.jpg','2015-11-02',0,'Pro MF840CH/A 13.3英寸寬屏膝上型電腦 256GB 快閃記憶體',0,'2'),('4','聯想 P1',2199,1999,'products/1/c_0004.jpg','2015-11-02',0,'聯想 P1 16G 伯爵金 移動聯通4G手機充電5分鐘，通話3小時！科技源於超越！品質源於沉澱！5000mAh大電池！高階商務佳配！',0,'1'),('40','機械革命（MECHREVO）MR X6S-M',6799,6599,'products/1/c_0040.jpg','2015-11-02',0,'15.6英寸遊戲本(I7-4710MQ 8G 64GSSD+1T GTX960M 2G獨顯 IPS屏 WIN7)黑色',0,'2'),('41','神舟（HASEE） 戰神K660D-i7D2',5699,5499,'products/1/c_0041.jpg','2015-11-02',0,'15.6英寸遊戲本(i7-4710MQ 8G 1TB GTX960M 2G獨顯 1080P)黑色',0,'2'),('42','微星（MSI）GE62 2QC-264XCN',6199,5999,'products/1/c_0042.jpg','2015-11-02',0,'15.6英寸遊戲膝上型電腦（i5-4210H 8G 1T GTX960MG DDR5 2G 背光鍵盤）黑色',0,'2'),('43','雷神（ThundeRobot）G150S',5699,5499,'products/1/c_0043.jpg','2015-11-02',0,'15.6英寸遊戲本 ( i7-4710MQ 4G 500G GTX950M 2G獨顯 包無亮點全高清屏) 金',0,'2'),('44','惠普（HP）輕薄系列 HP',3199,3099,'products/1/c_0044.jpg','2015-11-02',0,'15-r239TX 15.6英寸膝上型電腦（i5-5200U 4G 500G GT820M 2G獨顯 win8.1）金屬灰',0,'2'),('45','未來人類（Terrans Force）T5',10999,9899,'products/1/c_0045.jpg','2015-11-02',0,'15.6英寸遊戲本（i7-5700HQ 16G 120G固態+1TB GTX970M 3G GDDR5獨顯）黑',0,'2'),('46','戴爾（DELL）Vostro 3800-R6308 臺式電腦',3299,3199,'products/1/c_0046.jpg','2015-11-02',0,'（i3-4170 4G 500G DVD 三年上門服務 Win7）黑',0,'2'),('47','聯想（Lenovo）H3050 臺式電腦',5099,4899,'products/1/c_0047.jpg','2015-11-11',0,'（i5-4460 4G 500G GT720 1G獨顯 DVD 千兆網絡卡 Win10）23英寸',0,'2'),('48','Apple iPad mini 2 ME279CH/A',2088,1888,'products/1/c_0048.jpg','2015-11-02',0,'（配備 Retina 顯示屏 7.9英寸 16G WLAN 機型 銀色）',0,'2'),('49','小米（MI）7.9英寸平板',1399,1299,'products/1/c_0049.jpg','2015-11-02',0,'WIFI 64GB（NVIDIA Tegra K1 2.2GHz 2G 64G 2048*1536視網膜屏 800W）白色',0,'2'),('5','摩托羅拉 moto x（x+1）',1799,1699,'products/1/c_0005.jpg','2015-11-01',0,'摩托羅拉 moto x（x+1）(XT1085) 32GB 天然竹 全網通4G手機11月11天！MOTO X震撼特惠來襲！1699元！帶你玩轉黑科技！天然材質，原生流暢系統！',0,'1'),('50','Apple iPad Air 2 MGLW2CH/A',2399,2299,'products/1/c_0050.jpg','2015-11-12',0,'（9.7英寸 16G WLAN 機型 銀色）',0,'2'),('6','魅族 MX5 16GB 銀黑色',1899,1799,'products/1/c_0006.jpg','2015-11-02',0,'魅族 MX5 16GB 銀黑色 移動聯通雙4G手機 雙卡雙待送原廠鋼化膜+保護殼+耳機！5.5英寸大螢幕，3G執行記憶體，2070萬+500萬畫素攝像頭！長期省才是真的省！',0,'1'),('7','三星 Galaxy On7',1499,1398,'products/1/c_0007.jpg','2015-11-14',0,'三星 Galaxy On7（G6000）昂小七 金色 全網通4G手機 雙卡雙待新品火爆搶購中！京東尊享千元良機！5.5英寸高清大屏！1300+500W畫素！評價贏30元話費券！',0,'1'),('8','NUU NU5',1288,1190,'products/1/c_0008.jpg','2015-11-02',0,'NUU NU5 16GB 移動聯通雙4G智慧手機 雙卡雙待 晒單有禮 晨光金香港品牌 2.5D弧度前後鋼化玻璃 隨機附贈手機套+鋼化貼膜 晒單送移動電源+藍芽耳機',0,'1'),('9','樂視（Letv）樂1pro（X800）',2399,2299,'products/1/c_0009.jpg','2015-11-02',0,'樂視（Letv）樂1pro（X800）64GB 金色 移動聯通4G手機 雙卡雙待樂視生態UI+5.5英寸2K屏+高通8核處理器+4GB執行記憶體+64GB儲存+1300萬攝像頭！',0,'1');
二、匯入jar包
三、匯入DataSourceUtils包
四、新建JavaBean Product
五、獲取商品列表
public class ProductListServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //準備所有商品的資料List<Product> QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource()); String sql = "select * from product"; List<Product> productList = null; try { productList = runner.query(sql,new BeanListHandler<Product>(Product.class)); } catch (SQLException e) { e.printStackTrace(); } //商品集合準備好 //將資料儲存到request域轉發給product_list.js進行顯示 request.setAttribute("productList", productList); request.getRequestDispatcher("/product_list.jsp").forward(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
六、前端jsp處理
<div class="row" style="width: 1210px; margin: 0 auto;">
<div class="col-md-12">
<ol class="breadcrumb">
<li><a href="#">首頁</a></li>
</ol>
</div>
<%
//獲得集合List<Product>
List<Product> productList = (List<Product>)request.getAttribute("productList");
if(productList!=null){
for(Product product : productList){
out.write("<div class='col-md-2' style='height:250px'>");
out.write("<a href='product_info.htm'>");
out.write("<img src='"+product.getPimage()+"' width='170' height='170' style='display: inline-block;'>");
out.write("</a>");
out.write("<p><a href='product_info.html' style='color: green'>"+product.getPname()+"</a></p>");
out.write("<p><font color='#FF0000'>商城價：¥"+product.getShop_price()+"</font></p>");
out.write("</div>");
}
}
%>
</div>第二種處理方式：
<div class="row" style="width: 1210px; margin: 0 auto;">
<div class="col-md-12">
<ol class="breadcrumb">
<li><a href="#">首頁</a></li>
</ol>
</div>
<c:forEach items="${productList }" var="product">
<div class="col-md-2" style="height:250px">
<a href="product_info.htm"> <img src="${pageContext.request.contextPath }/${product.pimage }"
width="170" height="170" style="display: inline-block;">
</a>
<p>
<a href="product_info.html" style='color: green'>${product.pname }</a>
</p>
<p>
<font color="#FF0000">商城價：¥${product.shop_price}</font>
</p>
</div>
</c:forEach>
</div>七、實現效果
