網(wǎng)絡(luò)購物網(wǎng)站——淘寶網(wǎng)

購物網(wǎng)站是為買賣雙方提供交易的互聯(lián)網(wǎng)平臺，商家在網(wǎng)站上展示出售商品信息，顧客從中選擇并購買所需的商品。購物網(wǎng)站主要包含的內(nèi)容有發(fā)布商品信息、提供商品分類檢索、用戶能方便訂購商品、有效的訂單管理。相對于傳統(tǒng)商業(yè)，購物網(wǎng)站降低了商家的成本，另一方面，顧客可以足不出戶購買到物美價廉的商品。本章以淘寶網(wǎng)為例，分析如何創(chuàng)建購物網(wǎng)站。

本章要點(diǎn)
□ 網(wǎng)站配置分析
□ 制作自己的購物網(wǎng)站

21.1 網(wǎng)站配置分析

對于淘寶網(wǎng)這樣的大型網(wǎng)站，欄目眾多，業(yè)務(wù)邏輯復(fù)雜，網(wǎng)站主要分為展現(xiàn)層、業(yè)務(wù)邏輯層和持久層。展現(xiàn)層就是前端的Web頁面，位于最外層，離用戶最近。業(yè)務(wù)邏輯層主要負(fù)責(zé)各種應(yīng)用業(yè)務(wù)，主要集中在業(yè)務(wù)規(guī)則的制定、業(yè)務(wù)流程的實(shí)現(xiàn)等與業(yè)務(wù)需求有關(guān)的系統(tǒng)設(shè)計。業(yè)務(wù)邏輯層的設(shè)計對于一個支持可擴(kuò)展的架構(gòu)尤為關(guān)鍵，因?yàn)闃I(yè)務(wù)邏輯層對于數(shù)據(jù)訪問而言，它是調(diào)用者；對于展現(xiàn)層而言，它卻是被調(diào)用者。持久層就是數(shù)據(jù)存儲層，主要是負(fù)責(zé)數(shù)據(jù)庫的訪問，可以訪問數(shù)據(jù)庫系統(tǒng)、二進(jìn)制文件、文本文檔或是XML文檔。本案例以淘寶網(wǎng)為例，分別從服務(wù)器配置、技術(shù)分析和頁面設(shè)計三個方面介紹購物網(wǎng)站的創(chuàng)建步驟。

21.1.1 服務(wù)器配置分析

服務(wù)器的配置包括Web服務(wù)器、圖片服務(wù)器、數(shù)據(jù)庫服務(wù)器、應(yīng)用服務(wù)器、日志服務(wù)器等。

前端處理服務(wù)器的架構(gòu)，淘寶網(wǎng)采用 session 框架，用 client cookie 實(shí)現(xiàn)，主要將狀態(tài)保存到了cookie里面，這樣就使得應(yīng)用節(jié)點(diǎn)本身不需要保存任何狀態(tài)信息，當(dāng)系統(tǒng)用戶變多的時候，就可以通過增加更多的應(yīng)用節(jié)點(diǎn)來達(dá)到水平擴(kuò)展的目的。但是采用客戶端cookie的方式來保存狀態(tài)也會遇到限制，比如每個cookie一般不能超過4KB的大小，同時很多瀏覽器都限制一個站點(diǎn)最多保存20個cookie。淘寶網(wǎng)cookie框 架采用的是“多值cookie”， 就是一個組合鍵對應(yīng)多個cookie的 值，這樣不僅可以防止cookie數(shù)量超過20， 同時還節(jié)省了cookie存儲有效信息的空間，因?yàn)槟J(rèn)每個cookie都會有大約50個字節(jié)的元信息來描述cookie。并且淘寶網(wǎng)采用集中式的session管理，就是多個無狀態(tài)的應(yīng)用節(jié)點(diǎn)連接一個session 服務(wù)器，session服務(wù)器將session保存到緩存中，session服務(wù)器后端再配有底層持久性數(shù)據(jù)源，比如數(shù)據(jù)庫、文件系統(tǒng)等。

對于淘寶網(wǎng)這類購物網(wǎng)站，商品圖片的訪問流量非常大，對于大規(guī)模小文件的存儲和讀取，淘寶采用自主研發(fā)的 TFS 集群系統(tǒng)來解決這個問題。淘寶集群文件系統(tǒng) TFS（Taobao File System，淘寶文件系統(tǒng)），它的邏輯架構(gòu)是集群由一對Name Server和多臺Data Server構(gòu)成，Name Server的兩臺服務(wù)器互為雙機(jī)，就是集群文件系統(tǒng)中管理節(jié)點(diǎn)的概念。每個Data Server運(yùn)行在一臺普通的Linux主機(jī)上； 以 block 文件的形式存放數(shù)據(jù)文件（一般 64MB 一個 block）；block 存多份保證數(shù)據(jù)安全；利用 EXT3文件系統(tǒng)存放數(shù)據(jù)文件；文件名內(nèi)置元數(shù)據(jù)信息，用戶自己保存TFS文件名；完全扁平化的數(shù)據(jù)組織結(jié)構(gòu)，拋棄了傳統(tǒng)文件系統(tǒng)的目錄結(jié)構(gòu)。在塊設(shè)備基礎(chǔ)上建立自有的文件系統(tǒng)，減少EXT3等文件系統(tǒng)數(shù)據(jù)碎片帶來的性能損耗。 單進(jìn)程管理單塊磁盤的方式，摒除RAID5機(jī)制。帶有HA機(jī)制的中央控制節(jié)點(diǎn)，在安全穩(wěn)定和性能復(fù)雜度之間取得平衡。

對于數(shù)據(jù)庫服務(wù)器，淘寶網(wǎng)根據(jù)自己的業(yè)務(wù)特點(diǎn)，采用自主開發(fā)的TDDL框架，此框架主要解決了分庫分表對應(yīng)用的透明化以及異構(gòu)

數(shù)據(jù)庫之間的數(shù)據(jù)復(fù)制問題，對 Oracle 和 MySQL 數(shù)據(jù)庫進(jìn)行垂直水平分割的管理。

21.1.2 淘寶網(wǎng)主要功能模塊及技術(shù)分析

對于淘寶網(wǎng)的商家，在淘寶網(wǎng)開店的流程：首先在淘寶網(wǎng)注冊登錄，申請支付寶確認(rèn)，將銷售的商品登記在網(wǎng)站上，當(dāng)收到訂單就發(fā)貨，最后評價和提取現(xiàn)金。

對于淘寶網(wǎng)的顧客，在淘寶網(wǎng)購物的流程：首先在淘寶網(wǎng)注冊登錄，在網(wǎng)站上搜索瀏覽所需商品的信息，通過購物車購物下訂單，可以通過第三方支付模式付款，等待商家發(fā)貨，通過網(wǎng)站的物流運(yùn)送機(jī)制收到購買商品，確認(rèn)支付，在網(wǎng)站對商家進(jìn)行評價。

淘寶網(wǎng)主要的功能如下。

⑴ 商品信息的發(fā)布、管理：按照商品的類別展示商品的相關(guān)信息，供顧客瀏覽查看，并且對商品進(jìn)行分類管理。

⑵ 會員信息的管理：包括會員注冊、登錄，建立完整的會員資料庫，會員積分與會員等級設(shè)置，會員的訂單查看、訂單修改、以往訂單記錄等功能。

⑶ 商品多級分類檢索：淘寶網(wǎng)提供商品、淘寶商城店鋪的分類搜索，并且在搜索框下方顯示熱門搜索詞，可以幫用戶自動完成輸入。

在高級搜索中，淘寶網(wǎng)提供了十分詳細(xì)的搜索輔助選項(xiàng)，包括常規(guī)的關(guān)鍵字、商品所屬市場、賣家會員名等，還提供了價格范圍、賣家信用、購物保障、商品優(yōu)惠、物流及支付方式等多種豐富的選項(xiàng)，用戶根據(jù)自己的需要進(jìn)行組合搜索，找到滿足用戶不同購物需求的商品。

⑷ 方便快捷的購物車：實(shí)現(xiàn)商品加入購物車或清除出購物車、查看購物車、清空購物車等功能。

⑸ 在線訂單生成和管理：自動將用戶信息、購買商品、總金額、支付方式、配送方式生成清單，并發(fā)送到店鋪管理后臺，供店鋪實(shí)時進(jìn)行處理。

⑹ 網(wǎng)站公告、促銷活動、論壇：公告發(fā)布淘寶網(wǎng)的最新資訊；促銷活動可以快速提高網(wǎng)上商店的人氣、回訪率及銷售額；論壇發(fā)布淘寶網(wǎng)的各方面信息。

⑺ 在線服務(wù)：淘寶網(wǎng)提供了在線服務(wù)工具 “阿里旺旺”，通過“和我聯(lián)系”或“給我留言”和商家聯(lián)系，還可以查看交易歷史、了解對方信用情況及個人信息和頭像等。

⑻ 信用評價體系：網(wǎng)站通過設(shè)置評價來表示賣家的信用，在一次交易中顧客給賣家和商品評價，好評為正、中評為0、差評為負(fù)。

對于非經(jīng)過網(wǎng)站支付平臺的交易不計分；根據(jù)分?jǐn)?shù)對賣家進(jìn)行星、鉆的等級劃分；評價的同時可以附上評價的具體內(nèi)容，以便給其他顧客更多參考。

⑼ 安全功能：網(wǎng)站提供安全登錄控件、密碼保護(hù)、交易過程中的安全提醒、第三方支付工具、數(shù)字證書來保障購物的安全。

淘寶網(wǎng)在開始之初采用的前端開發(fā)語言是PHP，PHP語言是開放源代碼語言，由PHP開發(fā)小組及全世界的PHP愛好者時刻進(jìn)行著維護(hù)和更新，不斷增強(qiáng)其功能。在語法格式上，PHP借鑒了廣泛流行的C、Java和Perl等編程語言的特點(diǎn)，非常類似于C語言，但比C語言更簡單、易學(xué)和易用。在功能上，它提供了豐富的函數(shù)庫，支持復(fù)雜字符串處理、正規(guī)表達(dá)式和圖形處理，可根據(jù)用戶請求將服務(wù)器的數(shù)據(jù)輕松地產(chǎn)生動態(tài)網(wǎng)頁，支持目前幾乎所有流行的數(shù)據(jù)庫系統(tǒng)，如Oracle、SQL Server、MySQL、mSQL、Informix、SyBase、ODBC、PostgreSQL及dBase等。在可移植性上，PHP程序可在Windows下快速開發(fā)，代碼甚至不加修改即可運(yùn)行在UNIX、Linux上。因此，很多網(wǎng)站選用PHP作為網(wǎng)站的開發(fā)語言。淘寶網(wǎng)的Web層開發(fā)部分采用的就是PHP語言。

淘寶網(wǎng)的業(yè)務(wù)層主要采用Java語言，Java的優(yōu)勢在于：首先，Java程序一次編寫，到處運(yùn)行。在這一點(diǎn)上 Java 比 PHP 更出色，除了系統(tǒng)之外，代碼不用做任何更改。 其次，系統(tǒng)的多平臺支持。

Java語言基本上可以在所有平臺上的任意環(huán)境中開發(fā)，在任意環(huán)境中進(jìn)行系統(tǒng)部署，在任意環(huán)境中擴(kuò)展，相比ASP/PHP的局限性是顯而易見的。 再次，強(qiáng)大的可伸縮性。包括多臺Application進(jìn)行事務(wù)處理、消息處理。

21.1.3 頁面設(shè)計分析

淘寶網(wǎng)頁面非常簡潔，用戶可以通過在IE瀏覽器輸入http://www.taobao.com來訪問淘寶網(wǎng)。淘寶網(wǎng)站采用具有很強(qiáng)親和力的桔黃色為主色調(diào)，使整個網(wǎng)站顯得朝氣蓬勃、富有渲染力。淘寶網(wǎng)的首頁如下圖所示。

頁面采用CSS+DIV布局設(shè)計，首先在整體上進(jìn)行<div>標(biāo)記分塊，然后對各個塊進(jìn)行CSS定位，最后在各個塊中添加相應(yīng)內(nèi)容。對淘寶網(wǎng)首頁的架構(gòu)進(jìn)行分析，淘寶網(wǎng)首頁的排版框架采用回字形如下圖所示。淘寶首頁主要包括的塊有位于主頁面左上角的導(dǎo)航區(qū)；位于主題上方的分類列表和商家的廣告圖片瀏覽塊；位于主體的淘寶所有類目的分類列表；主體下方的本地生活和推薦頻道塊；位于主體右側(cè)的應(yīng)用服務(wù)塊；位于主頁底部的常見問答、友情鏈接、網(wǎng)站版權(quán)、備案等信息塊。

接下來將詳細(xì)介紹淘寶網(wǎng)首頁各個模塊的功能以及相關(guān)塊中所包含的子<div>塊。其中導(dǎo)航區(qū)包括網(wǎng)站導(dǎo)航、淘寶網(wǎng)的logo、搜索引擎、快速導(dǎo)航等內(nèi)容，導(dǎo)航區(qū)的架構(gòu)如下圖所示。

位于主體上半部分淘寶服務(wù)列表和商家的廣告圖片瀏覽區(qū)域架構(gòu)，主要包括淘寶服務(wù)的分類列表、廣告圖片和廣告文字的滾動播放、熱點(diǎn)品牌的logo展示。其中#J_ProductList塊以表格形式顯示服務(wù)的分類信息，桔黃色的外框、粉紅色的背景在整個網(wǎng)頁中十分醒目。廣告瀏覽區(qū)以不同的方式展示廣告， #J_MainPromo塊主要實(shí)現(xiàn)廣告圖片的滾動播放，#J_TMall塊是以旋轉(zhuǎn)木馬的樣式展示廣告文字和廣告圖片，.hot-banner塊顯示熱點(diǎn)品牌的logo圖標(biāo)。大家都知道品牌效應(yīng)是商業(yè)社會中企業(yè)價值的延續(xù)，在當(dāng)前品牌先導(dǎo)的商業(yè)模式中，品牌意味著商品定位、經(jīng)營模式、消費(fèi)族群和利潤回報。品牌效應(yīng)可以帶動商機(jī)，顯示出消費(fèi)者自身身價的同時，也無形中提高了商家的品位，好讓更多的高層次消費(fèi)者光臨店面。淘寶通過知名品牌的商品廣告圖片來吸引消費(fèi)者的眼球，從而誘使消費(fèi)者點(diǎn)擊相應(yīng)的鏈接，延長消費(fèi)者在淘寶網(wǎng)站的瀏覽時間，激起消費(fèi)者的購買欲。這個部分在整個頁面的主體位置，因此在細(xì)節(jié)處理上要注意。淘寶服務(wù)列表和廣告瀏覽區(qū)域的框架代碼如下：

01　<DIV style="zoom: 1;" class="col-main">02　<DIV　id="J_ProductList" class="product-list"></DIV>

03　<DL class="product-body-services">04　<DT>購物</DT>05　<DT>生活</DT>06　</DL>07　<DIV　id="J_MainPromo" class="mainpromo"></DIV>08　<DIV　id="J_TMall" class="tmall"></DIV>09　<DIV class="hot-banner"></DIV>10　</DIV>

主體的中間部分顯示淘寶所有類目的分類列表，包括充話費(fèi)、服裝、鞋包服飾、運(yùn)動戶外、珠寶手表、數(shù)碼等多個類別的信息。這個列表能夠很清晰地看到各個分類中更為詳細(xì)的信息，針對性很強(qiáng)，不會浪費(fèi)消費(fèi)者太多的時間，消費(fèi)者就能找到自己需要的東西。這個部分的框架代碼如下：

01　<DIV　id="J_CategoryHover" class="category-main" data-
abtestType="">02　<DIV class="category-all cat-all"></DIV>03　<DIV class="category-item cat-clothes"></DIV>04　<DIV class="category-item cat-baldric"></DIV>

05　<DIV class="category-item cat-sports"></DIV>06　<DIV class="category-item cat-jewelry"></DIV>07　<DIV class="category-item cat-digital"></DIV>08　<DIV class="category-item cat-appliances"></DIV>09　<DIV class="category-item cat-beauty"></DIV>10　<DIV class="category-item cat-baby"></DIV>11　<DIV class="category-item cat-living"></DIV>12　<DIV class="category-item cat-foods"></DIV>13　<DIV class="category-item cat-dailyuse"></DIV>14　<DIV class="category-item cat-car"></DIV>15　<DIV class="category-item cat-entertain"></DIV>16　<DIV class="category-item cat-special"></DIV>17　</DIV>

位于主體右側(cè)的應(yīng)用服務(wù)架構(gòu)如下圖所示，是一些公告、便民服務(wù)，例如可以在線給手機(jī)充值或機(jī)票預(yù)訂等。#J_Notice塊以Tab頁的形式，展示公告、規(guī)則、論壇、安全中心、公益等信息，當(dāng)鼠標(biāo)滑動到某個選擇頁上時，下面會出現(xiàn)相關(guān)的文字內(nèi)容。#J_Status塊對應(yīng)

的是用戶注冊、登錄、開店的快速鏈接。#J_Convenience塊對應(yīng)的是便民服務(wù)的Tab頁，包括充話費(fèi)選擇頁可以在線充話費(fèi)；游戲選擇頁可以在線購買點(diǎn)卡、Q幣、網(wǎng)游物品等；旅行選擇頁可以查詢航班、酒店、門票等信息。#J_Act塊展示的是促銷活動的圖片信息，圖片信息是以旋轉(zhuǎn)木馬方式顯示的。#J_Recom塊對應(yīng)的是精彩活動、最熱賣、創(chuàng)意生活、生活團(tuán)購的Tab頁。各個選擇頁以列表的方式顯示板塊的內(nèi)容。

本地生活是#J_Local塊，它的架構(gòu)如下圖所示。

推薦頻道的架構(gòu)如下圖所示，采用圖片來充當(dāng)各類商品的快捷鏈接，通過使用鮮艷的圖片來吸引消費(fèi)者的眼球，同時也使網(wǎng)頁更加豐富、充實(shí)。

首頁最下方的腳注部分如下圖所示，包括幫助信息、版權(quán)信息和聯(lián)系方式。.layout helper 塊用來放消費(fèi)者保障、新手上路、付款方式、

淘寶特色的內(nèi)容。#footer塊主要用來放一些版權(quán)信息和聯(lián)系方式，貴在簡單明了。對于#footer塊最主要的是切合頁面其他部分的風(fēng)格。

下面將給大家介紹淘寶網(wǎng)的頁面設(shè)計，取其精華，借鑒其成功之處。

1.導(dǎo)航區(qū)首先介紹淘寶網(wǎng)首頁導(dǎo)航區(qū)，前面已經(jīng)說過它十分簡潔，右上角的用戶信息、網(wǎng)站導(dǎo)航、基于多類別的搜索，能夠使用戶快速找到自己需要的信息。接下來將給出淘寶網(wǎng)頭部的CSS樣式的代碼，供讀者借鑒。下圖為導(dǎo)航區(qū)的效果圖。

#site-nav塊包括我要買、我的淘寶、買家中心等信息項(xiàng)，當(dāng)鼠標(biāo)滑動到某一項(xiàng)時，會出現(xiàn)它的下拉菜單，部分相關(guān)的CSS樣式的代碼如下。

STYLE>#site-nav　.quick-menu　li.sale1212 {02　margin-top: 3px;
03　　*margin-top: 1px;
04　background: none;
05　position:absolute;
06　　　left:-70px;}07　</STYLE>08　<STYLE>#site-nav　.seller-center　.menu-hd{ width:48px;}09　#site-nav　.seller-center　.menu-bd{ width: 94px;　line-
height:1.7;}10　#site-nav　.seller-center　.menu-bd-panel{padding: 8px

10px;}11　</STYLE>12 搜索相關(guān)的 html代碼

13　<FORM　id="J_TSearchForm" name="search" act
ion="http://s.taobao.com/search"
14　target="_top">15　<DIV class="search-panel-fields">16　< INPUT access Key = " s "　id = " q "　name = " q "　x-
webkit-grammar="builtin:translate"
17　x-webk it-speech="" autocomp lete="off"
autofocus="true"><S></S></DIV>18　<BUTTON　type="submit">搜 索</BUTTON>19　</FORM>2.主體部分主體部分包括淘寶服務(wù)列表和廣告瀏覽、商品的所有類目、應(yīng)用服務(wù)、本地生活、推薦頻道等板塊。

⑴ 淘寶服務(wù)列表和廣告瀏覽如下圖所示。淘寶服務(wù)列表的架構(gòu)和排版前面已經(jīng)介紹過了，不再贅述。廣告瀏覽模塊用來展示圖片廣

告的循環(huán)滾動播放。圖片循環(huán)滾動播放的絢麗效果可以給顧客留下非常深刻的印象，即使沒有購物欲望的顧客也會忍不住點(diǎn)擊該頁面。同時像淘寶這類購物網(wǎng)站中圖片多如牛毛，因此導(dǎo)致網(wǎng)頁加載的速度過慢。利用圖片循環(huán)滾動播放可以緩解HTTP請求，首先頁面只加載窗口顯示區(qū)的圖片，只有等到頁面滾動，且滾動到相應(yīng)位置的時候才再去加載相應(yīng)圖片，這樣在同一時刻就減少了請求，使頁面加載速度提升，這一點(diǎn)特別值得廣大讀者學(xué)習(xí)。

⑵ 商品的所有類目如下圖所示，這個區(qū)域的架構(gòu)和排版已經(jīng)在前面介紹過了，用戶可以快速找到自己感興趣的商品。

相關(guān)的CSS代碼如下。

01　.category-main {02　border: 1px solid rgb（216, 216, 216）; position: relative;
03　}04　.category-main-hover {05　_margin-bottom: 0;
06　}07　.category-item {08　margin:　-1px 9px 0px 5px; padding: 0px 1px; width: 672px;
height:91px; overflow: hidden; border-top-color:　rgb（242, 242, 242）; border-bottom-color:　rgb（242, 242, 242）; border-top-width:

1px; border-bottom-width: 1px;border-top-style: solid; border-bottom-
style: solid; position: relative;
09　}10　.category-item:hover {11　margin: -1px -1px -2px; padding: 0px 10px 1px 6px; border: 1px solidrgb（169, 222, 237）; background-co lor:　rgb（243, 250, 252）; _marg in-bottom:-2px;
12　}13

⑶ 應(yīng)用服務(wù)在主體部分的右側(cè)，如下圖所示。像公告、規(guī)則、論壇安全中心、公益以 Tab 頁形式展現(xiàn)。便民服務(wù)中當(dāng)選擇某個Tab

頁時，顯示的是相對應(yīng)的表單。

便民服務(wù)模塊包括在線充話費(fèi)、購買游戲幣、查找機(jī)票、門票信息、保險產(chǎn)品的查詢，這些功能是基于KISSY實(shí)現(xiàn)的。KISSY是由淘寶前端工程師們發(fā)起創(chuàng)建的一個開源JavaScript類庫。KISSY的核心功能包括種子、核心和組件。種子（Seed）是使用KISSY的入口，通過種子文件，可以自由靈活地加載所需要的組件。seed-min.js 就是KISSY 的種子文件，gzip 后大小不到 5KB。 頁面中僅需引入它，就可以自由加載 KISSY 的任何組件。核心（Core）包括 dom、event、ajax、 anim、node、data等一系列常用功能，這些功能絕大部分是各大前端類庫的標(biāo)配。KISSY借鑒了jQuery簡明易用的API設(shè)計風(fēng)格，同時采納了YUI3的顆粒化代碼組織方式。種子和核心是構(gòu)建各種組件的基石。組件（Components）包括工具類組件（Utilities）和可視化組件（Widgets），是KISSY最重要的組成部分。組件的公共接口和配置，都盡量保持了內(nèi)在的一致性。具體實(shí)現(xiàn)不再細(xì)述，讀者可以到githtub平臺查找學(xué)習(xí)相關(guān)資料，網(wǎng)址是http://github.com。

⑷ 本地生活板塊主要包括便民服務(wù)、票務(wù)、美食等信息，如下圖所示。

下面主要介紹本地生活板塊頭部，城市的選擇。當(dāng)鼠標(biāo)移動到城市對應(yīng)的<DIV>時，會出現(xiàn)城市列表以供選擇，部分代碼如下。

01　<DIV class="local-head">02　<H3><A href="http://life.taobao.com/"　target="_blank">我的本地生活 </A></H3><S class="local-head-line"></S><A03　class="more" href="javascript:void（0）"　target="_self">04　.local-head {05　padding : 14px 10px 5px ;　font-size: 14px ; border-bottom-
color :rgb（213, 213, 213）; border-bottom-width: 2px; border-bottom-
style: solid;position: relative; zoom: 1;
06　}07　.local-head　.more {08　　　left: 106px; bottom: 7px; padding-left: 10px;　font-size: 12px; position:absolute;
09　}10　.local-head-line {11　background: rgb（211, 211, 211）;　left: 106px; width: 1px;
height: 12px;bottom: 8px; overflow: hidden; position: absolute;

3.腳注部分包括聯(lián)系方式、版權(quán)信息等內(nèi)容，如下圖所示，在淘寶網(wǎng)的頁面中保持一致。

21.2 制作自己的購物網(wǎng)站

本節(jié)介紹設(shè)計一個購物網(wǎng)站的流程，采用 JSP+SQL Server 數(shù)據(jù)庫。系統(tǒng)包括前臺管理和后臺管理兩部分。前臺管理面向用戶，提供商品瀏覽、商品查詢、購物車、用戶管理、網(wǎng)站公告等功能模塊；后臺管理面向管理員，提供商品管理、用戶管理、訂單管理、公告管理等模塊。

21.2.1 功能設(shè)計

⑴ 商品信息發(fā)布和查詢：分類展示商品，顯示商品的相關(guān)信息，提供購買鏈接，對商品進(jìn)行分類查詢、模糊查詢。

⑵ 用戶信息管理：包括用戶注冊、登錄，建立完整的用戶信息庫。

⑶ 購物車管理：實(shí)現(xiàn)商品加入購物車或清除出購物車、查看購物車、清空購物車等功能。

⑷ 訂單管理：登錄的用戶可以下訂單，用戶可以查看自己的訂單。管理員可以修改訂單狀態(tài)。

⑸ 商品信息管理：管理員增加或刪除商品分類，增加、刪除或修改商品基本信息。

⑹ 網(wǎng)站公告：公告發(fā)布購物網(wǎng)站的最新資訊，如促銷活動。

21.2.2 后臺服務(wù)器配置

用JSP技術(shù)開發(fā)一個網(wǎng)站，需要安裝Web服務(wù)器，使用的是

Tomcat服務(wù)器。Tomcat是一款開源的Web服務(wù)器，其安裝過程非常簡單。首先下載Tomcat的免安裝版，apache-tomcat-6.0.37. zip，下載免安裝版的好處是可以使用多個Tomcat，然后將apache-tomcat-6.0.37.zip直接解壓到D盤，如下圖所示。

最后配置 Tomcat 的環(huán)境變量：在“我的電腦”上單擊右鍵，選擇【屬性】?【高級】?【 環(huán)境變量（N）】命令。新建系統(tǒng)變量為系統(tǒng)變量；在系統(tǒng)變量CLASSPATH的值的后面加入%CATALINA_HOME%\common\lib;在系統(tǒng)變量Path的值中"%JAVA_HOME%\bin;"的后面加入%CATALINA_HOME%\bin。這樣，Tomcat就安裝完畢了。

21.2.3 網(wǎng)站制作步驟

1.數(shù)據(jù)庫設(shè)計采用SQL Server 2005創(chuàng)建一個數(shù)據(jù)庫sales，主要設(shè)計的表包括以下幾個。

⑴ 商品類別表goodstype，如下圖所示。

⑵ 商品信息表goods，如下圖所示。

⑶ 訂單信息表order，如下圖所示。

⑷ 會員信息表member，如下圖所示。

⑸ 后臺管理員表manager，如下圖所示。

2.功能模塊實(shí)現(xiàn)在購物商城的首頁中，用戶可以在第一時間內(nèi)掌握商城推出的最新商品、最新公告等，還可以查看銷售排行、搜索指定商品、商品分類查詢等。購物商城前臺首頁的運(yùn)行結(jié)果如下圖所示。

創(chuàng)建數(shù)據(jù)庫操作JavaBean公共類——connDB類，在構(gòu)造方法

connDB 中定義該類所需的變量。構(gòu)造方法connDB 的關(guān)鍵代碼如下：

01　package com.DataBase;
02　import　java.sql.*;
03　public class connDB04　{05　private Statement stmt = null;
06　ResultSet rs = null;
07　private Connection ct = null;
08　private String dsn;
09　　//構(gòu)造函數(shù)

10　public connDB（）{ }11　　//根據(jù) dsn參數(shù)，加載驅(qū)動程序，建立連接

12　public void getConn（String dbname, String uid, String
pwd）　throwsException13　　{

14　　　　try15　　　{16　　　　dsn="　jdbc　: microsoft: sqlserver　:　/　/
localhost:1433;DatabaseName=" +dbname;
17　　　class . forName（"com .microsoft .
jdbc .sqlserver .SQLServerDriver"）.newInstance（）;
18　　　ct = DriverManager.getConnection（dsn, uid, pwd）;
19　　　}20　　catch（Exception ex）

21　　　{22　　System.err.println（"aq.executeQuery:　" +
ex.getMessage（））;
23　　　}24　　}25　　//執(zhí)行查詢類的 SQL語句，有返回集

26　public ResultSet executeQuery1（String sql）

27　　{

28　　　rs = null;
29　　　　try30　　　{31　　　stmt = ct.crea teStatement（ResultSet .
TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY）;
32　　　　rs = stmt.executeQuery（sql）;
33　　　}34　　catch（SQLException ex）

35　　　{36　　System.err.println（"aq.executeQuery:"+ex.
getMessage（））;
37　　　}38　　　return rs;
39　　}40　　//執(zhí)行更新類的 SQL語句，無返回集

41　public void executeUpdate2（String sql）

42　　{

43　　stmt = null;
44　　　rs=null;
45　　　　try46　　　{47　　　stmt=ct.createStatement（ResultSet.
TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY）;
48　　　stmt.executeQuery（sql）;
49　　　stmt.close（）;
50　　　ct.close（）;
51　　　}52　　catch（SQLException ex）

53　　　{54　　System.err.println（"aq.executeQuery:　" +
ex.getMessage（））;
55　　　}56　　}57　　//關(guān)閉對象

58　public void closeStmt（）

59　　{60　　　　try{　stmt.close（）;　}61　　catch（SQLException ex）

62　　　{63　　System.err.println（"aq.executeQuery:　" +
ex.getMessage（））;
64　　　}65　　}66　public void closeConn（）

67　　{68　　　　try{　ct.close（）;　}69　　catch（SQLException ex）

70　　　{71　　System.err.println（"aq.executeQuery:　" +
ex.getMessage（））;
72　　　}

73　　}74　}3.新品推薦模塊設(shè)計新品推薦模塊主要包括商品圖片、名稱等信息，同時設(shè)置了購買按鈕和詳細(xì)信息按鈕，用于將商品信息添加至購物車和查看商品詳細(xì)信息。其中查看詳細(xì)信息的代碼如下：

01　<%@ page import="com.DataBase.connDB" %>02 <%03　connDB conn=new connDB（）;
04　ResultSetrs_ new =conn.executeQuery（"
selecttopid,goodsname, intro, image,price　from goods where
newgoods=1 order byintime desc"）;
4.銷售排行模塊設(shè)計查詢數(shù)據(jù)表中的銷量最高的10種商品，部分代碼如下：

01　<%@ page import="com.DataBase.connDB" %>02　<%03　connDB conn=new connDB（）;

04　ResultSet　rs=conn.executeQuery（"select top 10 goodsID,
goodsName,sum（number）as sumNum　from V_order_detail group
by　id order by sumNumdesc"）;
05 %>

實(shí)現(xiàn)頁面顯示商品名稱的方法。通過使用while循環(huán)在頁面中循環(huán)顯示10種商品名稱，部代碼如下：

01　<% while（rs.next（））{02　id=rs.getString（"id"）;
03　goodsname=rs.getString（"goodsname"）;
04 %>