電子商城網(wǎng)站設計與實現(xiàn)摘要：電子商務在90年代便用于商業(yè)，直到現(xiàn)在家家戶戶，從老人到小孩，網(wǎng)絡已經(jīng)成了人們?nèi)粘Ｉ畈豢苫蛉钡囊徊糠郑藗兛梢酝ㄟ^它方便的買到自己想要的物品。在網(wǎng)站中，商家可以交付很少的租金甚至無需任何費用，來開一家自己的網(wǎng)店，在任何場所都可以工作。電子商務不僅適合宅男、宅女們，而且還適合上班族晚上回家做兼職，豐富了人們的生活，因此設計一個電子商城網(wǎng)站系統(tǒng)在如今是很意義的。設計主要是在Windows7、myeclipse開發(fā)環(huán)境下，以mysql為數(shù)據(jù)庫開發(fā)平臺、tomcat作為應用服務器、采用jsp技術(shù)開發(fā)的網(wǎng)上購物系統(tǒng)。系統(tǒng)實現(xiàn)了電子商城網(wǎng)站的基本功能。關(guān)鍵詞：電子商務;網(wǎng)購;jsp;myeclipseAbstract:ElectronicCommercehasbeenusedforbusinessinthe1990s,untilnowineveryfamilyfromthechildtotheold,theInternethasbecometheessentialpartofthepeople’sdailylife.peoplecanuseitconvenienttobuyanythingwhatyouwant.Inwebsite,businessescanpayalitterrentorevenforfree,toopenhisownshop,whichcanworkinanyplace.Notonlyforthemenorwomenwholikestayathome,butalsoforofficeworkerstodoapart-timejobatnightitissuitableforeveryone,shoppingwebsiteenrichesthelivesofthepeople,sothedesignofanelectronicshoppingwebsitesystemisverysignificanttoday.Thedesignismainlydesignedinwindows7,basedonMyEclipsedevelopmentenvironment,andituseMySQLasdatabasedevelopmentplatform,Tomcatasapplicationserver,usingtheJSPtechnologytodeveloponlineshoppingsystem.Thesystemrealizesthebasicfunctionofthewebsite.Keywords：shoppingwebsite;shoppingonline;jsp;myeclipse目錄第1章緒論 第1章緒論1.1課題背景在這個科學技術(shù)每天都在不斷進步的21世紀，國家在大力推進信息化建設，網(wǎng)絡技術(shù)也在不斷革新，網(wǎng)絡已經(jīng)成了當代新興的辦公交流工具，人們已經(jīng)漸漸的習慣了使用電子設備來進行辦公生活,在這樣的時代背景下，電子商務必然會發(fā)展成一棵參天大樹。電子商務技術(shù)每天都在不斷更新，隨著技術(shù)的革新它的功能也變的越來越強大，人們足不出戶就可以在網(wǎng)上購買到自己想要的商品。我設計的也正是一個電子商務系統(tǒng)的畢業(yè)設計電子商城網(wǎng)站系統(tǒng)。其中包括，前臺功能：用戶的注冊；用戶資料的修改；用戶登錄；購買的商品；商品的搜索；商品的分類搜索；購物車中商品數(shù)量的修改、刪除以及付款；訂單提交及收貨人信息的修改。后臺功能：管理員登錄及密碼修改；商品的管理，包括增、刪、查、改商品；訂單的管理，包括發(fā)貨及刪除；管理員的添加及修改[2]。建立電子商城網(wǎng)站的意義主要有：1.可以樹立品牌形象，打響品牌知名度。利用網(wǎng)絡，使用戶隨時隨地都有機會接收到產(chǎn)品信息。2.可以提高營銷效率，擴大市場，并且大大的減少了中間環(huán)節(jié)的成本，加快資本累計速度。3.更加方便廠家與用戶之間的交流，大大加強商品的流通的速度，使用戶更容易用合適的價格買到自己想要的物品。1.2系統(tǒng)開發(fā)關(guān)鍵技術(shù)本文中使用的是三層構(gòu)架[3]，這種構(gòu)架方法在網(wǎng)站中使用的尤為廣泛，圖1.1就是三層架構(gòu)原理的結(jié)構(gòu)圖。圖1.1三層架構(gòu)原理圖1.2.1Java語言及MyEclipseJsp的全名叫作javaserverpage[7]是sun公司主導與其他公司一起建立的的一種技術(shù)標準。這種技術(shù)就是在網(wǎng)頁HTML文件中加入jsp標簽和java片段，同時可以對數(shù)據(jù)庫進行調(diào)用訪問、重新定向網(wǎng)頁，實現(xiàn)建立動態(tài)網(wǎng)站，這種方式大大降低了對瀏覽器的要求。歸其本源其實就是servlet的簡化版。Web在遇到訪問jsp的請求時，先執(zhí)行程序，再將結(jié)果和代碼返回給客戶[5]。其中的java段可以連接使用數(shù)據(jù)庫，實現(xiàn)建立動態(tài)網(wǎng)頁等功能。Java是一種編寫跨平臺應用軟件的程序設計設計語言，廣泛應用于pc端、移動電話和互聯(lián)網(wǎng)等平臺。其語言風格十分接近c、c++。繼承了C++面對對象技術(shù)的核心。Java由四方面組成:匯編語言、類文件格式、虛擬機jvm和應用程序接口api。平臺由虛擬機和api構(gòu)成。Java分為3個體系：j2se(平臺標準版)、j2ee（平臺企業(yè)版）、j2me(平臺微型版)。MYEclipse是一款被程序員廣泛使用的集成開發(fā)工具。但他還集成了多種工具，用戶這樣就可以通過使用插件來構(gòu)建自己的想要的開發(fā)環(huán)境。MyEclipse本身就包含一個插件來供用戶們使用。Myeclipse是對eclipseide的拓展，人們可以用它進行數(shù)據(jù)庫和j2ee的開發(fā)，包括完整的編碼、調(diào)試、測試和發(fā)布等功能，支持HTML、SQL、jsf、CSS、Struts、JavaScript、hibernate。[6]在結(jié)構(gòu)上，myeclipse的特征可以被分為7類：1.j2ee模型2.web開發(fā)工具3.ejb開發(fā)工具4.應用程服務器的連接器5.J2ee項目部署服務6.數(shù)據(jù)庫服務7.Myeclipse整合幫助1.2.2MySQLMySQL是一款關(guān)系型通用的數(shù)據(jù)庫管理系統(tǒng)。這款軟件具有速度快、使用免費，體積小、開放源碼和總體要求成本低諸多優(yōu)點[1]。它將數(shù)據(jù)保存在不同的表中，而不是放在一個總的倉庫中，這樣能做到數(shù)據(jù)的高速處理和調(diào)用，大大提高靈活性。MySQL的目標就是快速、健壯和易用。MySQL的系統(tǒng)特性：1.應用C、C++編寫，并通過了多種測試，其可移植性有保證；2.支持多種操作系統(tǒng)；3.為大多數(shù)主流編程語言提供API；4.使用多線程，CPU的資源得到了充分的利用；5.提供多種庫來供用戶連接；6.查詢速度提高了很多，因為它是經(jīng)過優(yōu)化的查詢算法。1.3本文研究內(nèi)容及主要貢獻以下就是該設計的設計流程，通過以下步驟設計出的電子商城網(wǎng)站系統(tǒng)：緒論：通過對課題背景，以及其發(fā)展狀況和發(fā)展趨勢，概括性的對這個系統(tǒng)做一個描述，并且介紹主要用到的工具。需求分析：對電子商城網(wǎng)站系統(tǒng)的進行需求分析，并通過可行性分析，包括經(jīng)濟可行性、操作可行性、技術(shù)可行性，系統(tǒng)分析、系統(tǒng)功能分析[8]，清晰明朗的介紹這個系統(tǒng)。系統(tǒng)概要設計：主要設計分為三部分，內(nèi)容包括：總體設計、詳細設計和數(shù)據(jù)庫設計。總體設計是對需求分析階段得出的系統(tǒng)需求進行設計，并且給出系統(tǒng)層次圖方便理解。詳細設計階段則是對總體設計階段劃分出的各大功能模塊進行的詳細分析設計，并通過流程圖說明系統(tǒng)流程情況[4]。數(shù)據(jù)庫階段則對數(shù)據(jù)庫進行物理及邏輯設計，并通過實體——聯(lián)系圖（E-R圖）和數(shù)據(jù)表加以解釋說明。設計編碼及其所對應的頁面截圖：該章節(jié)分為編碼、實現(xiàn)以及測試這三大塊內(nèi)容。給出各模塊的關(guān)鍵性代碼，實現(xiàn)部分則給出各模塊實際效果，測試部分則通過相應的覆蓋測試，對比預想情況與實際情況，從而給出相應的測試結(jié)果說明。總結(jié)與展望：主要是講該設計需要改進的地方，還有一些欠缺的地方，并為其將來的發(fā)展做個展望。第2章需求分析2.1市場現(xiàn)狀企業(yè)在運行過程中，會遇到一些條件的限制：商品的宣傳經(jīng)常達不到預期的效果，有些宣傳是盲目的，客戶不需要這件商品卻常常能看到這件商品的廣告，而有些被人們所需要的商品，卻因為缺少宣傳，而少被人知曉，受空間與時間的局限很大。產(chǎn)品周轉(zhuǎn)渠道太過繁瑣。從工廠到最后被客戶購買，期間的周轉(zhuǎn)渠道過于復雜，同時也帶來了一些經(jīng)濟損耗，往往導致商品的價格升高很多，顧客望而卻步，地區(qū)差價很大，企業(yè)與顧客之間并沒有建立起很全面的交流與運營的平臺。企業(yè)跟客戶之間無法做到良好的溝通，企業(yè)要通過市場變化，敏銳的觀察商品的銷售走勢，而客戶無法正確認識商品的價值，也無法及時向企業(yè)反饋商品的效果和建議[9]。2.2可行性研究可行性分析就是通過調(diào)查，對我們要開發(fā)的系統(tǒng)是否具備開發(fā)的可能性進行評估。可行性研究的目的就是用最短的時間花費最小的精力，決定最后問題是否可以得到解決[10]。我的設計是一個小型的電子商城系統(tǒng)，可以為每一位注冊的用戶提供便捷的購物環(huán)境，這種模式在現(xiàn)在在當前網(wǎng)絡大環(huán)境下是非常主流的。該系統(tǒng)的主要功能包括，前臺功能：用戶的注冊；用戶資料的修改；用戶登錄；購買的商品；商品的搜索；商品的分類搜索；購物車中商品數(shù)量的修改刪除和付款；訂單提交及收貨人信息的修改。后臺功能：管理員登錄及密碼修改；商品的管理，包括的增、刪、查、改商品；訂單的管理，包括發(fā)貨及刪除；管理員的添加。2.1.1技術(shù)可行性Jsp技術(shù)可以和各種java技術(shù)完好的結(jié)合，實現(xiàn)各種復雜的應用。因此是大家廣泛應用的一項技術(shù)。而且該技術(shù)應用簡單，可以讓人很快速的上手。利用JSP技術(shù)可以建立跨平臺動態(tài)網(wǎng)站，這是一項非常安全和新興的技術(shù)[11]。后臺應用mysql進行數(shù)據(jù)的管理，對于以上提到的技術(shù)，都是在我們掌握范圍之內(nèi)的，所以技術(shù)上是可行的。2.1.2經(jīng)濟作可行性成本與利益的對比是經(jīng)濟可行性中最為重要的分析的指標。高性能pc機作為企業(yè)網(wǎng)站理論上是沒有問題的。運營成本不會太高，況且，實現(xiàn)的一些功能都是開放的、免費的，更減少了成本預算的問題，但是卻能帶動經(jīng)濟的發(fā)展。如何做好這項分析，需要咨詢一些業(yè)內(nèi)人士和通過詳細的市場調(diào)研。2.1.3操作可行性在計算機與網(wǎng)絡已經(jīng)廣泛普及的現(xiàn)代。如何應用計算機已經(jīng)成為現(xiàn)在每個人必備的技能。網(wǎng)絡更是現(xiàn)在年輕一代必不可少的一部分。運營商對網(wǎng)站進行操作和管理也不是很難的事。用戶也漸漸熟悉。2.3需求分析商務系統(tǒng)在經(jīng)濟的高速發(fā)展下已經(jīng)發(fā)生了巨大的變化。一些中小型企業(yè)隨著經(jīng)濟的增長也迅速的成長起來，與此同時這一行業(yè)的競爭也越發(fā)激烈。[12]我們在制作一個網(wǎng)站的同時不僅是把想要表達的內(nèi)容放上去，與此同時還需要把企業(yè)的思想和理念，展現(xiàn)在客戶面前。通過設計多種多樣的元素，來吸引瀏覽者的眼球，要深度挖掘企業(yè)的核心競爭力。建立一個自身商品形象的電商網(wǎng)站營銷模式是一種非常有效的方法，不僅可以宣傳自身品牌形象，還可以傳達企業(yè)自己的營銷模式，完善企業(yè)服務環(huán)節(jié)，減少銷售成本。2.4系統(tǒng)功能目標（1）前臺管理：用戶注冊：這是購物的第一步，通過錄入用戶信息，才可登錄系統(tǒng)。用戶登錄：每個用戶根據(jù)自己注冊的ID，在首頁的登陸上填寫所注冊的名字和密碼，就可進入系統(tǒng)。商品瀏覽：用戶可以通過商品類別來查找和瀏覽來找到自己想要的商品。購物車模塊：當用戶瀏覽商品，找到自己想要購買的商品后，我們可以點擊“放入購物車”，然后在購物車模塊中選擇結(jié)賬，同時購物車模塊中的商品如果不想買了，也可點擊刪除。訂單模塊：用戶可以查看自己的訂單詳情，管理員則可以根據(jù)訂單決定是否發(fā)貨。（2）后臺管理：管理員登陸：點擊登陸后臺，進入后臺，管理員通過自己的賬號登陸。會員設置：管理員可以查看會員相關(guān)信息，添加和刪除會員。商品管理：通過這個管理，實現(xiàn)新商品的上架和促銷等，也可以將過期的商品信息在系統(tǒng)中刪除。訂單管理：通過訂單管理，用戶可以查看自己的訂單情況。同時管理員也可以管理用戶的訂單，決定是否出貨。2.5系統(tǒng)實現(xiàn)目標現(xiàn)在的電商網(wǎng)站不僅要能夠適應用戶的各種需求，還需要設計出精美的網(wǎng)頁，來達到吸引瀏覽者的眼球的目的。因此，我們要端正自己的態(tài)度，嚴謹?shù)囊?guī)劃，認真完成設計的每一步。前臺功能：用戶的注冊；用戶資料的修改；用戶登錄；購買的商品；商品的搜索；商品的分類搜索；購物車中商品數(shù)量的修改刪除和付款；訂單提交及收貨人信息的修改[13]。后臺功能：管理員登錄及密碼修改；商品管理，包括的增、刪、查、改商品；訂單的管理，包括發(fā)貨及刪除；管理員的添加和修改。第3章系統(tǒng)設計電商網(wǎng)站是分商品分類展示、管理員管理兩部分，由此可見它是一種非常典型的數(shù)據(jù)庫開發(fā)應用程序。在這章首先，我們要做一個總體的設計，從設計思想、體系結(jié)構(gòu)、軟件結(jié)構(gòu)各個方面進行說明，通過層次圖來劃分系統(tǒng)模塊[14]。接著在對系統(tǒng)進行詳細設計，將總體設計階段得到的各個功能模塊在進行單獨設計，并通過流程圖來說明運行流程。最后便是本系統(tǒng)的數(shù)據(jù)庫的分析設計，同時還有相應系統(tǒng)的E-R圖和數(shù)據(jù)表結(jié)構(gòu)設計。3.1總體設計總體設計階段的重要任務就是來設計軟件的結(jié)構(gòu)，從設計思想、體系結(jié)構(gòu)、軟件結(jié)構(gòu)各個方面[15]進行說明，通過層次圖來劃分系統(tǒng)模塊。3.1.1設計思想該系統(tǒng)用了很多程序都會用到的三層構(gòu)架。用戶層發(fā)送一個文件請求給業(yè)務層面，業(yè)務層接收到請求后，通過處理將請求轉(zhuǎn)換成數(shù)據(jù)后對數(shù)據(jù)庫進行操作，然后將處理好的數(shù)據(jù)封裝成類的形式從數(shù)據(jù)庫中返回給用戶界面層[16]。這樣用戶界面層客戶端接收到的僅僅只有結(jié)果，這種方式大大降低了對用戶端的硬件要求。3.1.2系統(tǒng)結(jié)構(gòu)根據(jù)系統(tǒng)結(jié)構(gòu)及架構(gòu)設計，我們把前臺用戶界面模塊設計成如圖3.1所示結(jié)構(gòu)：圖3.1前臺用戶功能模塊后臺的功能模塊設計如圖3.2所示，主要包括：圖3.2后臺管理功能模塊根據(jù)面對對象和三層結(jié)構(gòu)的設計思想可以畫出以下設計圖3.3：圖3.3三層結(jié)構(gòu)模塊圖3.2詳細設計1）商品信息查詢這個模塊的作用就是對商品的名稱、圖片、出產(chǎn)地等進行錄入，同時還會有特價商品，銷售排行等內(nèi)容便于用戶查詢了解商品。2）購物車管理在你進行購物時，首先你要登陸，登陸后，你就會有一個購物車，當你看到想要購買的商品時點擊“放入購物車”，購物車會記錄下每一件你想要買的物品。然后你只要點擊你的的購物車，可以實現(xiàn)所選商品修改、清空和付款等操作。3）用戶信息管理在主頁上會有用戶登錄界面，用戶注冊后，系統(tǒng)就會把用戶信息錄入數(shù)據(jù)庫，如果密碼忘了還可修改密碼，收集的信息包括用戶的聯(lián)系方式、通訊地址、職業(yè)等信息，為客戶提供更加詳細良好的服務，同時也可以幫助商家進行更加簡單的市場調(diào)研。4）訂單處理當點擊訂單按鈕時，用戶可以查閱自己的訂單，看看是否出貨。與此同時，管理員可以根據(jù)購物車中的信息，包括送貨方式和付款方式，和用戶對應的個人信息確定配送信息，并且決定是否發(fā)貨。用戶注冊活動圖。如下圖3.4：圖3.4用戶注冊活動圖用戶登錄活動圖，如下圖3.5：圖3.5用戶登錄活動圖3.3數(shù)據(jù)庫設計3.3.1數(shù)據(jù)庫需求分析訂單可以分成多種形式顯示。一個用戶可以購買多個商品。一個用戶對應一張訂單。一個列表對應多張訂單。針對本系統(tǒng)功能分析，總結(jié)出如下的需求信息[17]。用戶，包括數(shù)據(jù)項：用戶名、密碼、職業(yè)、年齡、密保問題及答案。商品，包括數(shù)據(jù)項：商品編號、商品名、廠家、價格、上架時間、圖片。訂單列表，包括數(shù)據(jù)項：訂單編號、商品編號、購買數(shù)量、下單時間、是否發(fā)貨。3.3.2數(shù)據(jù)庫概念結(jié)構(gòu)設計從本系統(tǒng)的實體包括：會員信息實體、管理員信息實體、商品實體、商品分類實體、訂單實體、購物車實體。實體之間關(guān)系的E-R圖如圖3.6所示：圖3.6實體之間E-R圖管理員實體的E-R圖，如圖3.7所示：圖3.7管理員實體E-R圖商品分類實體的E-R圖，如圖3.8所示：圖3.8商品分類實體E-R圖用戶信息實體的E-R圖，如圖3.9所示：商品實體的E-R圖，如圖3.10所示:圖3.10商品實體的E-R圖訂單實體的E-R圖，如圖3.11所示：圖3.11訂單實體E-R圖購物車實體的E-R圖，如圖3.12所示：圖3.12購物車實體E-R圖3.3.3數(shù)據(jù)庫邏輯結(jié)構(gòu)設計我的設計用的后臺數(shù)據(jù)庫軟件是mysql[18]，系統(tǒng)數(shù)據(jù)庫名稱是db_Shopping,其中包含了9張表。1、數(shù)據(jù)表概要說明表3.13數(shù)據(jù)庫總表2、商品大類表tb_affiche表3.14表3.14商品大類表3、商品列表tb_goods表3.15表3.15商品列表4、用戶及管理員信息表tb_manager與tb_member如表3.16和表3.17表3.16用戶tb_member表3.17管理員tb_manager5、訂單信息表tb_order如表3.18表3.18訂單信息表tb_order3.4本章小結(jié)本章節(jié)從總體設計以至詳細設計再到數(shù)據(jù)庫的設計進行了系統(tǒng)的設計，而且同時在各個階段給出了對應的層次圖，流程圖以及相應E-R圖等，并且進行了詳細的說明和解釋。第4章系統(tǒng)實現(xiàn)與測試4.1編碼實現(xiàn)首頁顯示是index.jsp頁面，在地址欄中輸入http://localhost:8080/Shopping即可登錄系統(tǒng)。4.1.1主頁login代碼如下：<tablewidth="766"border="0"align="center"cellpadding="0"cellspacing="0">//設計主頁界面各模塊<tr><tdwidth="207"valign="top"bgcolor="#F5F5F5"><!--左側(cè)01--><jsp:includepage="fg-left.jsp"flush="true"/></td><tdwidth="559"valign="top"bgcolor="#FFFFFF"><!--右側(cè)01--> <jsp:includepage="fg-goodSorts.jsp"flush="true"/> <divalign="center"><%if(session.getAttribute("form")!=null){%><br><imgsrc="image/fg_right02.jpg"></div><tablewidth="100%"border="0"align="center"cellpadding="0"cellspacing="0"bordercolor="#FFFFFF"bordercolorlight="#FFFFFF"bordercolordark="#819BBC"><tr> <%intfree=2;if(freeList.size()<2){free=freeList.size();}for(inti=0;i<free;i++){GoodsFormnewGoods=(GoodsForm)freeList.get(i);%><tdvalign="top"> <tablewidth="257"height="136"border="1"align="center"cellpadding="1"cellspacing="1"bordercolor="#FFFFFF"bgcolor="#999999"><tr><tdwidth="33%"height="80"rowspan="5"bgcolor="#FFFFFF"><inputname="pricture<%=i%>"type="image"src="<%=newGoods.getPriture()%>"width="140"height="126"></td><tdwidth="67%"height="20"bgcolor="#FFFFFF"><divalign="center"><%=newGoods.getName()%></div></td></tr><tr><tdheight="20"bgcolor="#FFFFFF"><divalign="center"style="text-decoration:line-through;color:#910402">原價：<%=newGoods.getNowPrice()%>元</div></td></tr><tr><tdheight="20"bgcolor="#FFFFFF"><divalign="center"><fontcolor="#F14D83">現(xiàn)價：<%=newGoods.getFreePrice()%>元</font></div></td></tr><tr><tdheight="20"bgcolor="#FFFFFF"><divalign="center"><%=newGoods.getIntroduce()%></div></td></tr><tr><tdheight="13"bgcolor="#FFFFFF"><divalign="center"class="linkBlack"><ahref="#"onClick="window.open('goodsAction.do?action=16&id=<%=newGoods.getId()%>','','width=500,height=200');">查看詳細內(nèi)容</a></div></td></tr></table></td><%}%></tr></table><divalign="center"><%}%><imgsrc="image/fg_right01.jpg"></div><tablewidth="100%"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdheight="215"valign="top"> <%intnow=5;if(nowList.size()<5){now=nowList.size();}if(session.getAttribute("form")!=null){ now=3;}for(inti=0;i<now;i++){GoodsFormnewGoods=(GoodsForm)nowList.get(i);%><tablewidth="100%"border="0"align="center"cellpadding="0"cellspacing="0"><tr><td> <tablewidth="99%"border="0"align="center"cellpadding="0"cellspacing="0"bordercolor="#CCCCCC"><tr><tdheight="150"bordercolor="#666666"><tablewidth="96%"border="1"align="center"cellpadding="1"cellspacing="1"bordercolor="#FFFFFF"bgcolor="#CCCCCC"><tr><tdwidth="36%"rowspan="4"bgcolor="#FFFFFF"><divalign="center"><inputname="pricture<%=i%>"type="image"src="<%=newGoods.getPriture()%>"width="110"height="100"></div></td><tdwidth="64%"bgcolor="#FFFFFF"><divalign="center"><%=newGoods.getName()%></div></td></tr><tr><tdbgcolor="#FFFFFF"><divalign="center"><fontcolor="#F14D83">單價：<%=newGoods.getNowPrice()%>元</font></div></td></tr><tr><tdbgcolor="#FFFFFF"><divalign="center"><%=newGoods.getIntroduce()%></div></td></tr><tr><tdbgcolor="#FFFFFF"class="linkBlack"align="center"><%if(session.getAttribute("form")!=null||session.getAttribute("id")!=null){%><ahref="#"onClick="window.open('goodsAction.do?action=16&id=<%=newGoods.getId()%>','','width=500,height=200');">查看詳細內(nèi)容</a>//用戶登陸界面設計<%}else{%>登錄后才能購買</td><%}%></tr></table></td></tr></table></td></tr></table><%}%> </td></tr></table></td></tr></table>下圖為login.jsp電子商城主頁面截圖如圖4.1所示：圖4.1商品主頁面截圖4.1.2商品大類添加functioncheckEmpty(form){//商品大類的添加for(i=0;i<form.length;i++){if(form.elements[i].value==""){alert("表單信息不能為空");returnfalse;}}}</script><html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>電子商城的后臺</title></head><linkhref="css/css.css"rel="stylesheet"type="text/css"><body><jsp:includepage="bg-up.jsp"flush="true"/><tablewidth="788"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdwidth="170"valign="top"><jsp:includepage="bg-left.jsp"flush="true"/></td><tdwidth="618"align="center"valign="top"bgcolor="#FFFFFF"><br> <tablewidth="610"height="25"border="0"cellpadding="0"cellspacing="0"background="image/bg_02.jpg"><tr><td><divalign="center"><strong>添加商品大類別信息</strong></div></td></tr></table><br> <formaction="bigTypeAction.do?action=2"method="post"name="form"onSubmit="returncheckEmpty(form)"><tablewidth="74%"height="60"border="1"cellpadding="1"cellspacing="1"bordercolor="#FFFFFF"bgcolor="#CCCCCC"><tr><tdwidth="25%"height="30"><divalign="center">大類別名稱</div></td><tdwidth="75%"bgcolor="#FFFFFF">    <inputname="name"type="text"size="50"></td></tr></table><br><inputtype="image"class="input1"src="image/save.jpg"width="51"height="20">  <ahref="#"onClick="javascript:form.reset()"><imgsrc="image/clear.gif"></a>  <ahref="#"onClick="javasrcipt:history.go(-1)"><imgsrc="image/back.gif"></a> </form></td></tr></table><jsp:includepage="bg-down.jsp"flush="true"/>商品類別截圖如圖4.2所示：商品類別截圖添加商品信息：<%ListbigList=big.selectBig();//設計商品信息模塊Stringid=(String)request.getAttribute("bigId");if(id==null||id.equals("")){ //當id值為空時，設置id值為-1id="-1"; //當id值為空時，沒有選擇任何一個商品大類別名稱，因此不會出現(xiàn)商品小類別名稱}IntegerbigId=Integer.valueOf(id);ListsmallList=small.selectOneBigId(bigId);%><scriptlanguage="javascript">functioncheckEmpty(form){for(i=0;i<form.length;i++){if(form.elements[i].value==""){alert("表單信息不能為空");returnfalse;}}if(isNaN(document.form.nowPirce.value)){window.alert("價格只能為數(shù)字");returnfalse;}}functionChangeItem(){varbig=form.big.value;window.location.href="goodsAction.do?action=2&bigId="+big;}</script><tablewidth="788"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdwidth="170"valign="top"><jsp:includepage="bg-left.jsp"flush="true"/></td><tdwidth="618"align="center"valign="top"bgcolor="#FFFFFF"><br> <tablewidth="610"height="25"border="0"cellpadding="0"cellspacing="0"background="image/bg_02.jpg"><tr><td><divalign="center"><strong>添加商品信息</strong></div></td></tr>//添加商品信息</table><br><formaction="goodsAction.do?action=3"method="post"enctype="multipart/form-data"name="form"onSubmit="returncheckEmpty(form)"><tablewidth="90%"border="1"cellpadding="1"cellspacing="1"bordercolor="#FFFFFF"bgcolor="#CCCCCC"><tr><tdwidth="20%"height="26">  所屬大類別</td><tdwidth="31%"bgcolor="#FFFFFF">  <selectname="big"onChange="ChangeItem()"><optionvalue="">請選擇</option><%for(inti=0;i<bigList.size();i++){BigTypeFormbigForm=(BigTypeForm)bigList.get(i);%><optionvalue="<%=bigForm.getId()%>"<%if(bigId.equals(bigForm.getId())){out.println("selected");}%>> <%=big.selectName(bigForm.getId())%> </option><%}%></select></td>//選擇商品類別<tdwidth="20%">  所屬于小類別</td><tdwidth="31%"bgcolor="#FFFFFF"> <selectname="small"><optionvalue="">請選擇</option><%for(inti=0;i<smallList.size();i++){SmallTypeFormsmallForm=(SmallTypeForm)smallList.get(i);%><optionvalue="<%=smallForm.getId()%>"><%=smallForm.getSmallName()%></option><%}%></select></td></tr><tr><tdheight="25">  商品名稱</td><tdbgcolor="#FFFFFF">  <inputname="name"type="text"size="20"></td><td>  生產(chǎn)廠商</td><tdbgcolor="#FFFFFF"> <inputname="from"type="text"size="20"></td></tr><tr><tdheight="27">  商品定價</td><tdbgcolor="#FFFFFF">  <inputname="nowPirce"type="text"size="20"></td><td>  初始化特價</td><tdbgcolor="#FFFFFF"> <inputname="freePirce"type="hidden"size="20"value="0">0元</td></tr> <tr><tdheight="28">  商品圖片</td><tdcolspan="3"bgcolor="#FFFFFF">  <inputname="formFile"type="file"id="formFile"></td></tr> <tr><tdheight="28">  簡介</td><tdcolspan="3"bgcolor="#FFFFFF">  <inputname="introduce"type="text"size="50"></td></tr></table><br><inputtype="image"class="input1"src="image/save.jpg"width="51"height="20">  <ahref="#"onClick="javascript:form.reset()"><imgsrc="image/clear.gif"></a>  <ahref="#"onClick="javasrcipt:history.go(-1)"><imgsrc="image/back.gif"></a> </form></td></tr></table>functioncheckEmpty(form){for(i=0;i<form.length;i++){if(form.elements[i].value==""){alert("表單信息不能為空");returnfalse;}}}</script><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>電子商城</title><styletype="text/css"><!--.style1{ color:#FF0000; font-weight:bold;}--></style>商品添加頁面截圖，如圖4.3所示：圖4.3商品添加頁面4.1.4收銀結(jié)賬頁面：<tablewidth="766"border="0"align="center"cellpadding="0"cellspacing="0">//收銀頁面設計<tr><tdwidth="207"bgcolor="#F5F5F5"><!--左側(cè)01--><jsp:includepage="fg-left.jsp"flush="true"/></td><tdwidth="559"valign="top"bgcolor="#FFFFFF"align="center"><!--右側(cè)01--> <jsp:includepage="fg-goodSorts.jsp"flush="true"/> <br><br> <strong>收銀結(jié)帳</strong><formname="form"method="post"action="cart_checkOutOrder.jsp"onSubmit="checkEmpty(form)"> <tablewidth="68%"border="0"cellspacing="0"cellpadding="0"><tr><tdheight="30"colspan="2"><divalign="center"class="style1">注意：請您不要惡意或非法提交訂單以免造成不必要的麻煩！</div></td></tr> <tr><tdheight="30"><divalign="center">訂單編號：</div></td><td> <inputtype="hidden"name="number"value="<%=date.getTime()%>"><%=date.getTime()%></td></tr><tr><tdwidth="24%"height="30"><divalign="center">會員名稱：</div></td><tdwidth="76%"> <inputtype="text"name="name"value="<%=form.getName()%>"></td></tr><tr><tdheight="30"><divalign="center">真實姓名：</div></td><td> <inputtype="text"name="reallyName"value="<%=form.getReallyName()%>"></td></tr><tr><tdheight="30"><divalign="center">聯(lián)系地址：</div></td><td> <inputtype="text"name="address"></td></tr><tr><tdheight="30"><divalign="center">聯(lián)系電話：</div></td><td> <inputtype="text"name="tel"></td></tr><tr><tdheight="30"><divalign="center">付款方式：</div></td><td>  <selectname="setMoney"class="textarea"> <optionvalue="">請選擇</option><optionvalue="銀行付款">銀行付款</option><optionvalue="郵政付款">郵政付款</option><optionvalue="現(xiàn)金支付">現(xiàn)金支付</option></select> </td></tr><tr><tdheight="30"><divalign="center">運送方式：</div></td><td> <selectname="post"class="textarea"> <optionvalue="">請選擇</option><optionvalue="普通郵寄">普通郵寄</option><optionvalue="特快專遞">特快專遞</option><optionvalue="EMS專遞方式">EMS專遞方式</option></select> </td></tr><tr><tdheight="60"><divalign="center">備注信息：</div></td><td> <textareaname="bz"></textarea></td></tr></table> <br><inputtype="submit"name="Submit2"value="提交"> <inputtype="reset"name="reset"value="清除"> <inputtype="button"name="back"value="返回"onClick="javasrcipt:history.go(-1)"></form></td></tr></table>填寫購物訂單截圖，如圖4.4所示：圖4.4填寫訂單截圖4.1.5訂單查看頁面<tablewidth="766"border="0"align="center"cellpadding="0"cellspacing="0">//查看訂單頁面設計<tr><tdwidth="207"bgcolor="#F5F5F5"><!--左側(cè)01--><jsp:includepage="fg-left.jsp"flush="true"/></td><tdwidth="559"valign="top"bgcolor="#FFFFFF"align="center"><!--右側(cè)01--> <jsp:includepage="fg-goodSorts.jsp"flush="true"/> <br><br> <strong>訂單查看</strong> <br> <br> <br><%if(orderList.size()==0){%>沒有訂貨信息<%}else{%> <tablewidth="95%"border="1"align="center"cellpadding="0"cellspacing="0"bordercolor="#FFFFFF"bordercolorlight="#FFFFFF"bordercolordark="#819BBC"><tralign="center"><tdwidth="15%"height="21">編號</td><tdwidth="15%">電話</td><tdwidth="21%">地址</td><tdwidth="19%">訂貨時間</td><tdwidth="18%">是否出貨</td><tdwidth="12%">操作</td></tr><%for(intorderNumber=0;orderNumber<orderList.size();orderNumber++){OrderFormorderForm=(OrderForm)orderList.get(orderNumber);%><tralign="center"><tdheight="24"><%=orderForm.getNumber()%></td><td><%=orderForm.getTel()%></td><td><%=orderForm.getAddress()%></td><td><%=orderForm.getCreaTime()%></td><td><%if(orderForm.getSign().equals("0")){%>否<%}else{%>是<%}%></td><td><ahref="cart_detail.jsp?number=<%=orderForm.getNumber()%>">查看明細</a></td></tr><%}%></table><divalign="center"> <br> <%if(request.getParameter("number")!=null){%> <br> 訂貨明細查詢 <br><br><tablewidth="89%"border="1"align="center"cellpadding="0"cellspacing="0"bordercolor="#FFFFFF"bordercolorlight="#FFFFFF"bordercolordark="#819BBC"><tralign="center"><tdwidth="25%"height="21">編號</td><tdwidth="24%">商品名稱</td><tdwidth="28%">商品價格</td><tdwidth="23%">商品數(shù)量</td></tr><%floatsum=0;ListorderDetailList=orderDetail.selectOrderDetailNumber(request.getParameter("number"));for(intorderDetailNumber=0;orderDetailNumber<orderDetailList.size();orderDetailNumber++){OrderDetailFormorderDetailForm=(OrderDetailForm)orderDetailList.get(orderDetailNumber);sum=sum+orderDetailForm.getPrice()*orderDetailForm.getNumber();%><tralign="center"><tdheight="21"><%=orderDetailForm.getOrderNumber()%></td><td><%=goodsDao.selectOneGoods(orderDetailForm.getGoodsId()).getName()%></td><td><%=orderDetailForm.getPrice()%>元</td><td><%=orderDetailForm.getNumber()%></td></tr><%}%></table> <tablewidth="89%"border="0"cellspacing="0"cellpadding="0"><tr><tdheight="24"><divalign="right">總金額：<%=sum%>元</div></td></tr></table><%}%></div><%}%> </td></tr></table>商品訂單詳情截圖，如圖4.5所示：圖4.5訂單詳細信息4.1.6購物車頁面<strong>我的購物車</strong> <divalign="center"><br>//設計購物車模塊<%if(session.getAttribute("cart")==null){%>您還沒有購物！！！<%}else{%></div><formmethod="post"action="cart_modify.jsp"name="form"> <tablewidth="92%"border="1"align="center"cellpadding="0"cellspacing="0"bordercolor="#FFFFFF"bordercolordark="#819BBC"bordercolorlight="#FFFFFF"><tr><tdwidth="16%"height="28"><divalign="center">序號</div></td><tdwidth="23%"><divalign="center">商品的名稱</div></td><tdwidth="22%"><divalign="center">商品價格</div></td><tdwidth="22%"><divalign="center">商品數(shù)量</div></td><tdwidth="17%"><divalign="center">總金額</div></td></tr>//購物車內(nèi)商品的各個屬性<%floatsum=0;Vectorcart=(Vector)session.getAttribute("cart");for(inti=0;i<cart.size();i++){SellGoodsFormform=(SellGoodsForm)cart.elementAt(i);sum=sum+form.number*form.price;System.out.print("sum="+sum);%><tr><tdheight="28"><divalign="center"><%=i+1%></div></td><td><divalign="center"><%=dao.selectOneGoods(newInteger(form.ID)).getName()%></div></td><td><divalign="center"><%=form.price%>元</div></td><td><divalign="center"><inputname="num<%=i%>"size="7"type="text"value="<%=form.number%>"onBlur="check(this.form)"></div></td><td><divalign="center"><%=form.number*form.price%>元</div></td></tr> <scriptlanguage="javascript"> <!-- functioncheck(myform){ if(isNaN(myform.num<%=i%>.value)||myform.num<%=i%>.value.indexOf('.',0)!=-1){ alert("請不要輸入非法字符");myform.num<%=i%>.focus();return;} if(myform.num<%=i%>.value==""){ alert("請輸入修改的數(shù)量");myform.num<%=i%>.focus();return;} myform.submit(); }//修改商品 --> </script><%}%></table></form><tablewidth="100%"height="52"border="0"align="center"cellpadding="0"cellspacing="0"><tralign="center"valign="middle"> <tdheight="10">  </td><tdwidth="24%"height="10"colspan="-3"align="left"> </td> </tr><tralign="center"valign="middle"><tdheight="21"class="tableBorder_B1"> </td><tdheight="21"colspan="-3"align="left">合計總金額：￥<%=sum%></td></tr><tralign="center"valign="middle"><tdheight="21"colspan="2"><ahref="index.jsp">繼續(xù)購物</a>|<ahref="cart_checkOut.jsp">去收銀臺結(jié)賬</a>|<ahref="cart_clear.jsp">清空購物車</a>|<ahref="#">修改數(shù)量</a></td></tr></table><%}%> </td></tr></table>>購物車頁面截圖，如圖4.6所示：圖4.6購物車截圖4.1.7會員注冊界面functioncheckEmpty(memberForm){//會員注冊界面for(i=0;i<memberForm.length;i++){if(memberForm.elements[i].value==""){alert("表單信息不能為空");returnfalse;}}if(document.memberForm.password.value!=document.memberForm.passwordOne.value){window.alert("您兩次輸入的密碼不一致，請重新輸入");returnfalse;}if(isNaN(document.memberForm.age.value)){window.alert("年齡只能為數(shù)字");returnfalse;}}<body><jsp:includepage="fg-top.jsp"flush="true"/><tablewidth="