網上商城—前臺頁面的設計與實現(xiàn)

1、目 錄目 錄1摘 要2引 言3第一章 程序開發(fā)的技術基礎41.1 開發(fā)平臺與運行環(huán)境41.2 html簡介41.3 asp介紹41.4 dreamwaver簡介5第二章 網上購物系統(tǒng)的需求分析72.1 消費者的需求分析72.2 企業(yè)的需求分析8第三章 網上購物系統(tǒng)結構分析與設計103.1系統(tǒng)流程分析103.2系統(tǒng)功能分析113.3系統(tǒng)功能結構123.4 前臺模塊詳細功能描述13第四章 前臺基本功能模塊的具體實現(xiàn)144.1 前臺商品分類展示頁面實現(xiàn)144.1.1 首頁功能概述144.1.2 模板的設計實現(xiàn)154.1.3首頁欄目的設計實現(xiàn)164.1.4商品分類頁面的設計與實現(xiàn)174.2 商品展示模

2、塊194.3 會員管理模塊214.3.1 會員管理模塊概述214.3.2 會員注冊的實現(xiàn)過程214.3.3 會員登陸的實現(xiàn)過程224.3.4會員資料修改的實現(xiàn)過程224.4 購物車模塊234.4.1 購物車模塊概述234.4.2添加商品到購物車的實現(xiàn)過程234.4.3查看購物車的實現(xiàn)過程244.4.4 修改購物車中商品數量的實現(xiàn)過程244.4.5刪除購物車內商品的實現(xiàn)過程254.5 收銀結算模塊254.6 訂單查詢管理模塊274.7 留言板模塊28總結與展望29參考文獻30致 謝30網上商城前臺頁面的設計與實現(xiàn)摘要：近年來，國內電子商務發(fā)展態(tài)勢良好，為b2c網上購物系統(tǒng)提供了廣闊的發(fā)展空間。如

3、何設計與實現(xiàn)能夠充分滿足消費者跟企業(yè)需求的優(yōu)質網上購物系統(tǒng)，有著廣泛的市場前景和實際的應用價值。b2c網上購物系統(tǒng)由前臺系統(tǒng)與后臺系統(tǒng)構成。前臺系統(tǒng)是用戶實現(xiàn)購物流程的操作界面，為用戶提供：商品分類查詢、會員管理、購物車、收銀臺、訂單查詢管理等等功能。系統(tǒng)基于信息管理系統(tǒng)(mis)思想，以dreamwaver作為主要開發(fā)工具，采用asp技術實現(xiàn)動態(tài)交互。關鍵詞：電子商務；b2c網上購物系統(tǒng)；aspdesign and implementation of front-stage for b2c e-shopping system abstract: in recent years,domesti

4、c e-commerce has witnessed a flourishing trend, offering a broad developing room to b2c e-shopping system.how to design and implement a high-quality system,which can perfectly meet the needs of consumers and companies,has a broad market prospect and practical application value.b2c e-shopping system

5、consists of front-stage system and back-stage system.front-stage system is to provide the users with an interface to accomplish the shopping process.front-stage system includes: product categories,member management, shopping cart, checkout,query and management of orders,etc.the system is based on th

6、e thought of management information system (mis),dreamweaver is used as the main development tools,asp is used to implement the dynamic interaction.keywords：e-commerce ;b2c e-shopping system ; asp引 言網上購物系統(tǒng)是一種具有交互功能的商業(yè)信息系統(tǒng)，基于瀏覽器/服務器應用方式，實現(xiàn)消費者網上購物、商戶之間網上交易和在線電子支付的一種新型的商業(yè)運營模式。它向用戶提供靜態(tài)和動態(tài)兩類信息資源，其強大的交互功能

7、，使商家和用戶方便的傳遞信息，完成電子貿易或edi交易，實現(xiàn)文檔與資金的無紙化交換。近年來，國內整體電子商務發(fā)展呈現(xiàn)良好態(tài)勢，電子支付，電子認證，以及現(xiàn)代物流等等之前制約我國電子商務發(fā)展的一些條件得到了很好的改善與發(fā)展，更加促進了國內電子商務的發(fā)展，b2c模式的網上購物系統(tǒng)更是一派蓬勃景象。本文研究的網上購物系統(tǒng)所設計實現(xiàn)的正是屬于b2c的電子商務模式，為企業(yè)與消費者提供信息發(fā)布與商品訂購的電子商務平臺。在概念上屬于狹義的電子商務（ec）,即電子交易，為零售企業(yè)提供信息化管理，建立b2c的網絡銷售系統(tǒng)。全文以自己對于b2c模式電子商務的一些理解，利用自身掌握的理論知識與技術，對b2c網上商城基

8、于消費者與企業(yè)的不同需求進行分析，設計與需求所對應的功能并且實現(xiàn)。 曾經網絡上流行過這么一句話：“中國每天有成千上萬的網站建立，同時也有成千上萬的網站關閉。”這是沒有依據的，網上購物系統(tǒng)也只能算是其中的一個組成部分而已。但是我覺得，在某種意義上體現(xiàn)了國內電子商務領域的現(xiàn)狀。當前情況下，什么樣的網上購物系統(tǒng)才能更好的迎合消費者的需求，為消費者提供真正優(yōu)質的安全、快捷、舒適、滿足客戶不同需求的網絡購物環(huán)境；為企業(yè)提供真正優(yōu)質的穩(wěn)定、方便、高效率，高效益的網絡營銷平臺，并且能夠適應當前電子商務發(fā)展大環(huán)境。正是本文要討論與研究的方向和目的。第一章 程序開發(fā)的技術基礎1.1開發(fā)平臺與運行環(huán)境考慮到本系統(tǒng)

9、的性能要求和現(xiàn)有的條件，選擇了windows xp中文版作為開發(fā)、測試和運行的平臺。因為windows操作系統(tǒng)是目前應用最廣的操作系統(tǒng)。它以全新的圖形界面，簡單快捷的操作方式，支持多媒體功能等特點而成為軟件發(fā)展的流行趨勢。運行環(huán)境選擇asp與iis和access2003數據庫，在實現(xiàn)過程中使用到了photoshop,dreamweaver,fireworks，flash等工具。1.2 html簡介html(hypertext markup language,超文本標記語言)，是創(chuàng)建網頁的計算機語言。所謂網頁實際上就是一個html文檔。文檔內容有文本與html標記組成。瀏覽器負責解釋html文檔

10、中的標記，將其顯示成網頁。html文檔是一個普通的文本文件，不包含任何與平臺，程序有關的信息。因此html文檔可以利用任何文本編輯器來方便的生成。運行html文檔可在任何瀏覽器下進行并可在瀏覽器上查看網頁的源代碼。1.3 asp介紹1.3.1 asp概述asp是active server page的縮寫，意為“動態(tài)服務器頁面”。asp是微軟公司開發(fā)的代替cgi腳本程序的一種應用,它可以與數據庫和其它程序進行交互，是一種簡單、方便的編程工具。asp的網頁文件的格式是.asp，現(xiàn)在常用于各種動態(tài)網站中。 asp是一種服務器端腳本編寫環(huán)境，可以用來創(chuàng)建和運行動態(tài)網頁或web應用程序。asp網頁可以包

11、含html標記、普通文本、腳本命令以及com組件等。利用asp可以向網頁中添加交互式內容（如在線表單），也可以創(chuàng)建使用html網頁作為用戶界面的web應用程序。asp類似于html、script與cgi的結合體，但是其運行效率比cgi更高、程序編制也比html更方便且更有靈活性，程序安全及保密性比script好。asp不但可以包含html標簽，也可以直接存取數據庫及使用無限擴充的activex控件，因此在程序編制上要比html方便而且更富有靈活性。asp以html為基礎，主體還是html代碼，只是在需要asp動態(tài)產生的地方加入asp代碼。asp的最終顯示結果也是html代碼，可準確控制asp的

12、輸出結果。 1.3.2 asp的特點（1）asp可以和html或其它腳本語言(vbscript,javascript)相互嵌套。 （2）asp是一種在web服務器端運行的腳本語言，程序代碼安全保密。 （3）asp以對象為基礎，因此可以使用activex控件繼續(xù)擴充其功能。 （4）asp內置ado組件，因此可以輕松的存取各種數據庫。 （5）asp可以將運行結果以html的格式傳送至客戶端瀏覽器，因而可以適用與各種瀏覽器。1.3.3 asp的工作原理當瀏覽器向web服務器請求調用asp文件時，就啟動了asp。瀏覽器將這個asp的請求（http請求）發(fā)送到iis，web服務器接受這個請求并調入正確的

13、asp文件，web服務器將這個文件發(fā)送到一個稱為asp.dll的文件中。該文件負責獲得一個asp文件并對該文件內所有服務器端的代碼進行解析，他會在該文件中查找所有的腳本代碼，將這些腳本代碼發(fā)送到合適的腳本引擎（即腳本解釋器），然后使用如vbscript等腳本語言進行解釋。腳本代碼的運行結果重新結合該asp文件中原有的其他文件如文本內容及html代碼，web服務器將最終生成的頁面發(fā)送到客戶端的瀏覽器中進行顯示。如果沒有查找到任何腳本代碼，則會通知iis直接將這些文件發(fā)送到客戶端。若腳本指令中含有訪問數據庫的請求，就通過odbc與后臺數據庫連接，由數據庫訪問組件ado執(zhí)行訪問數據庫操作，如下圖所示

14、：瀏覽器web服務器（iis/pws）腳本引擎 ado對象各類odbc驅動程序數據庫http請求 文件下載 圖1.1 asp工作原理figure 1.1 working principle of asp1.4 dreamweaver簡介dreamweaver是由在多媒體方面頗有建樹的macromedia公司推出的可視化網頁制作工具，它與flash、fireworks被合稱為網頁制作三劍客。dreamweaver主要用來制作網頁文件，制作出來的網頁兼容性比較好，制作效率也很高。1.4.1 dreamwaver的優(yōu)點（1）最佳的制作效率dreamweaver可以用最快速的方式將fireworks，

15、freehand，或photoshop等檔案移至網頁上。使用檢色吸管工具選擇熒幕上的顏色可設定最接近的網頁安全色。對于選單，快捷鍵與格式控制，都只要一個簡單步驟便可完成。dremweaver能與您喜愛的設計工具，如playback flash，shockwave和外掛模組等搭配，不需離開dremweaver便可完成，整體運用流程自然順暢。除此之外，只要單擊便可使dreamweaver自動開啟firework或photoshop來進行編輯與設定圖檔的最佳化。 （2）網站管理 使用網站地圖可以快速制作網站雛形、設計、更新和重組網頁。改變網頁位置或檔案名稱，dreamweaver 會自動更新所有連結

16、。使用支援文字、html碼、html屬性標簽和一般語法的搜尋及置換功能使得復雜的網站更新變得迅速又簡單。 （3）無可比擬的控制能力 dreamweaver是唯一提供roundtrip html、視覺化編輯與原始碼編輯同步的設計工具。它包含homesite和bbedit等主流文字編輯器。幀(frames)和表格的制作速度快的令您無法想像。進階表格編輯功能使您簡單的選擇單格、行、欄或作未連續(xù)之選取。甚至可以排序或格式化表格群組，dreamweaver 支援精準定位，利用可輕易轉換成表格的圖層以拖拉置放的方式進行版面配置。1.4.2 使用dreamwaver模板的好處dreamweaver模板是一種

17、特殊類型的文檔，用于設計“固定的”頁面布局；然后您便可以基于模板創(chuàng)建文檔，創(chuàng)建的文檔會繼承模板的頁面布局。設計模板時，可以指定在基于模板的文檔中哪些內容是用戶“可編輯的”。使用模板，模板創(chuàng)作者控制哪些頁面元素可以由模板用戶（如作家、圖形藝術家或其它 web 開發(fā)人員）進行編輯。使用模板可以控制大的設計區(qū)域，以及重復使用完整的布局。如果要重復使用個別設計元素，如站點的版權信息或徽標，可以創(chuàng)建庫項目。 使用模板可以一次更新多個頁面。從模板創(chuàng)建的文檔與該模板保持連接狀態(tài)（除非您以后分離該文檔）?？梢孕薷哪０宀⒘⒓锤禄谠撃０宓乃形臋n中的設計。第二章 網上購物系統(tǒng)的需求分析前面的內容簡單論述了網上

18、購物系統(tǒng)研究的意義與目的（為什么做），以及用哪些工具與技術來設計實現(xiàn)（用什么做）的問題。下面就從消費者跟企業(yè)兩個方面對網上購物系統(tǒng)進行功能需求的分析。探討一下消費者跟企業(yè)對于一個優(yōu)質的網上購物系統(tǒng)有著怎樣的需求，網上購物系統(tǒng)應該滿足消費者跟企業(yè)的哪些方面需要，也就是要做些什么的問題。2.1 消費者的需求分析作為消費者，在網上購物系統(tǒng)中的最主要需求，無疑是安全快捷方便的完成購物流程。優(yōu)質的購物系統(tǒng)應該能夠滿足消費者以下幾點的需求：在最短的時間內找到自己需要購買的商品；用安全、簡便、快捷的方式完成電子交易并可以實時關注自己的訂單狀態(tài)；可以根據自身情況選擇最適合自己的物流配送方式；在以消費者為中心的

19、購物系統(tǒng)中完成舒適的購物過程等等。（1）商品分類目錄與商品搜素功能為滿足消費者能夠方便快捷的找到自己需要或感興趣內容的要求，網上購物系統(tǒng)必須有一個健全的符合大部分消費者思維習慣的商品等級分類，為消費者提供一個完善的商品分類目錄。這個分類目錄指導了整個網站商品展示結構的建立，根據企業(yè)的商品特點設計好商品分類目錄在整個網絡購物系統(tǒng)的設計中有著非常重要的意義。此需求范圍內另外一個重點功能是商品搜索功能，為消費者提供個性化搜索，滿足在多種情況下的需要。（2）電子交易方式需求 目前國內在電子交易與電子認證領域的發(fā)展已經可以在很大程度上滿足消費者對于安全，簡便，快捷電子交易方式的需要。但在眾多電子交易方式

20、中，不同的消費者會根據自身情況有所側重，使用自己習慣的或者更加信賴的方式進行電子交易。這一點就構成了網上購物系統(tǒng)在電子交易方式上的需求。盡可能滿足大多數消費者對于交易方式的需要，是網上購物系統(tǒng)在交易支付方面需要重點考慮的問題。（3）訂單狀態(tài)實時追蹤 網上購物系統(tǒng)中，訂單是重要的交易憑證之一，交易支付與物流配送都需要以訂單作為依據。對于消費者跟企業(yè)雙方都是尤為重要的。在整個消費過程中，消費者需要查詢，管理自己的訂單，最好還可以實時追蹤自己的訂單狀態(tài)，訂單信息是否正確，支付是否成功，配送是否開始，以此來了解自己本次網上購物的各項進程。另外一個人性化的訂單查詢、管理系統(tǒng)也會在很大程度上讓消費者獲得舒

21、適的購物體驗。（4）物流配送方式需求 近年來，國內電子商務業(yè)務范圍內的物流發(fā)展，相當迅速，與電子交易方式的情況類似，為消費者提供多種選擇，但不同消費者也會根據自身情況，以及物流公司本身的信譽情況，資費標準進行不同的選擇。盡可能滿足大部分消費者在物流配送方式上的不同需求。因此從消費者的利益出發(fā)，使消費者可以選擇自己最信賴或者最適合自身情況的物流配送方式，盡量為消費者節(jié)約運費成本，也是網上購物系統(tǒng)要著重考慮的一個方面。2.2 企業(yè)的需求分析作為企業(yè)，在網上購物系統(tǒng)中最主要的需求，以如何提高工作效率與經濟效益為前提條件，同時處處體現(xiàn)企業(yè)優(yōu)秀的客戶服務理念。優(yōu)質的購物系統(tǒng)應該要滿足消費者一下幾點的需求

22、：企業(yè)整體vi的需求，一致的頁面風格，使優(yōu)秀商品在網絡上獲得最好的展示效果，刺激消費者的消費欲望，建立公司整體形象；方便快捷的發(fā)布各種促銷信息，吸引消費者對企業(yè)優(yōu)質商品，推薦商品，相關商品的關注；多種安全可靠的電子交易方式以及物流配送方式，可以最大程度上滿足不同消費者的需要；人性化的訂單管理與查詢系統(tǒng)，方便消費者對于交易狀態(tài)的跟蹤查詢；完善的消費者信息統(tǒng)計管理系統(tǒng)，收集消費者反饋信息，結合在線客戶服務，與消費者完成良好互動，體現(xiàn)企業(yè)的優(yōu)質客戶服務理念。（1）企業(yè)的整體vi需求，良好頁面展示效果 在網上購物系統(tǒng)中，企業(yè)需要依靠系統(tǒng)的整體vi來建立和提升企業(yè)形象，獲得消費者的初步好感，才能進而刺激

23、消費者的消費欲望，獲得經濟效益。一個整體的vi形象，在網上購物系統(tǒng)中需要良好的頁面展示效果來實現(xiàn)，所以在保持工作效率的前提下，網上購物系統(tǒng)應盡最大可能保證良好的頁面效果。（2）商品分類目錄與促銷信息發(fā)布企業(yè)在為消費者提供方便快捷的購物環(huán)境的同時，也需要利用商品分類目錄與商品搜索功能為消費者展示更多類似的優(yōu)質產品，所以商品分類目錄和搜索功能需要在消費者進行商品選擇時，展示更多企業(yè)所提供的類似的或者相關的商品。一個優(yōu)秀的網上購物系統(tǒng)不光要有優(yōu)質的商品，也應該有一個像消費者推薦和展示這些商品的方法與策略，解決企業(yè)的這個需求問題，就需要根據自身產品特點建立起良好的商品分類目錄，以及推薦商品分類和大量促

24、銷信息的發(fā)布的體系。（3）電子交易方式與物流配送方式需求隨著電子交易與現(xiàn)代物流的發(fā)展，越來越多的電子交易方式和物流配送方式可以供網上購物系統(tǒng)選擇，滿足各種情況的需要，但是一個購物系統(tǒng)所具備的電子交易方式與物流配送方式也并不是越多越好的，因為從企業(yè)效益上來講，過于多樣化的交易方式與物流配送方式是不可行的。正確的選擇應該是根據自身實際情況，行業(yè)特點以及對主要消費者需求情況進行分析后，選擇幾種能滿足大多數消費者要求的交易方式與物流配送方式即可。而且在交易方式與物流配送方式的選擇上要從消費者的角度出發(fā)，盡可能為消費者節(jié)約不必要的附加消費。（4）訂單管理與查詢在網上購物系統(tǒng)中，訂單管理對于消費者和企業(yè)的

25、重要性已經在上文做了較詳細的說明，企業(yè)需要依據消費者的訂單來掌握消費者的購物情況，消費者選購的商品信息、數量，以及支付方式的選擇，是否完成支付。支付完成之后，需要根據訂單內的聯(lián)系方式，收貨地址以及選擇的配送方式為消費者展開物流配送。訂單管理是網上購物系統(tǒng)中較為繁瑣，容易出錯的一個環(huán)節(jié)，所以優(yōu)質的購物系統(tǒng)應該為企業(yè)提供完善，方便的訂單管理功能，按照交易支付的進程，物流配送的進程為訂單的不同狀態(tài)，方便企業(yè)以及消費者對于訂單的查詢與管理，以此來掌控購物過程的進行。（5）用戶信息管理與客戶服務企業(yè)需要對消費者信息進行管理，分析，統(tǒng)計。這對于維護原有市場和開拓潛在市場都是有著重要意義的。網上購物系統(tǒng)要為

26、企業(yè)提供方便的用戶信息管理系統(tǒng)，準確完善的為企業(yè)提供用戶信息，利于系統(tǒng)為不同消費者提供個性化服務以及企業(yè)與用戶之間相互的溝通交流。網上購物系統(tǒng)的客戶服務體現(xiàn)在多個方面：方便快捷的購物流程，基于消費者留言與投訴的互動，以及在線客戶服務為客戶提供實時咨詢。這些方面都是客戶服務理念在網上購物系統(tǒng)中的體現(xiàn)。第三章 網上購物系統(tǒng)結構分析與設計通過前面對于網上購物系統(tǒng)的需求分析，下面就利用管理信息系統(tǒng)（management information system, mis）的開發(fā)方法來實現(xiàn)系統(tǒng)結構的分析與設計，系統(tǒng)分為前臺和后臺管理。前臺用于會員注冊，登陸，修改個人資料，查詢商品，訂購商品，生成訂單，進行結

27、算，查詢與管理訂單，進行用戶留言咨詢等，后臺管理包括商品管理，會員管理，管理員管理，訂單管理，公告管理，促銷信息發(fā)布，獨立頁面管理，網站基本設置管理，留言評價管理。3.1 系統(tǒng)流程分析 以用戶的購物流程建立的系統(tǒng)流程圖：進入網站登陸商品分類目錄商品展示頁面注冊購買會員放入購物車顯示購物信息去收銀臺，選擇支付、配送方式，完善收貨人信息注冊ny生成訂單，確認訂單信息，支付金額進行支付，進行配送用戶收貨，交易完成圖2.1 系統(tǒng)流程圖figure 2.1 the main flow diagram系統(tǒng)流程文字說明：用戶登陸網站，已注冊的會員可直接登陸網站進行購物。未注冊用戶按照系統(tǒng)提示進行注冊登陸。用

28、戶根據自己的需要，通過系統(tǒng)的商品分類目錄、商品搜索功能或各類促銷活動，選擇自己需要的商品，進入商品細節(jié)展示頁面。選定商品，點擊放入購物車。若用戶尚未登陸，提示用戶進行注冊登陸后再將商品放入購物車。在購物車中查看詳細購物信息，確定后去收銀臺，在收銀臺完善收貨信息，選擇支付與配送方式，生成訂單。在訂單頁面確認訂單信息后，進行支付，成功后。為用戶發(fā)貨，用戶完成收貨，交易成功。3.2 系統(tǒng)功能分析根據系統(tǒng)的實現(xiàn)流程，對系統(tǒng)功能進行分析：（1）商品分類目錄功能： 按照商品特點進行分類，為用戶提供結構清晰的商品分類結構，用戶可根據商品分類目錄找到自己需要或感興趣的商品。（2）商品搜索功能： 用戶可以進行關

29、鍵字進行模糊搜索，或者通過已經了解的特定商品的名稱或者貨號等信息來進行較精確的搜索，找到商品。（3）商品展示功能： 商品詳細信息的展示，商品名稱，貨號，庫存數量，價格，規(guī)格，尺碼顏色等屬性的詳細說明。商品細節(jié)圖片展示與詳細文字說明。（4）購物車功能： 用戶決定購物后，將商品暫存于購物車內，在此顯示用戶所選購商品的名稱，數量，尺碼，顏色，價格等等的購物信息。（5）收銀臺結算功能：用戶確認購物信息無誤之后，進入收銀臺，在此選擇支付方式，配送方式，完善收貨信息，生成訂單，確認訂單信息后進行結算與支付。（6）訂單查詢管理功能: 實現(xiàn)用戶對訂單的查詢與管理，用戶在此根據：全部訂單，未付款的訂單，已付款等

30、待發(fā)貨的訂單，已發(fā)貨的訂單，成功交易的訂單，已取消的訂單幾種不同狀態(tài)，進行查詢管理操作。（7）用戶留言與商品咨詢功能：用戶在留言板內進行留言或投訴，在商品展示頁面內的進行商品咨詢。管理員通過后臺回復解答后，在前臺頁面進行顯示。（8）會員管理功能：會員注冊，會員登陸，修改個人信息，以及會員丟失密碼之后找回密碼的功能。（9）后臺管理功能：商品管理，會員管理，管理員管理，訂單管理，公告管理，推薦管理，促銷信息發(fā)布，獨立頁面管理，網站基本設置管理，留言評價管理等功能。3.3 系統(tǒng)功能結構根據系統(tǒng)的流程實現(xiàn)以及功能分析，網上購物系統(tǒng)的前臺功能結構如圖所示：網 上 購 物 系 統(tǒng) 前 臺 功 能 結 構會

31、員管理功能商品分類與展示會員中心客服中心公共頁面會員注冊會員登錄會員找回密碼商品分類目錄商品搜索查詢最新上架商品會員特惠商品明星推薦商品商品展示頁面購物車收銀臺物品分類展示品牌分類展示個人資料修改訂單查詢管理客戶留言商品資詢在線客服常見問題聯(lián)系我們服務聲明查看購物車清空購物車圖3.1系統(tǒng)前臺功能模塊結構圖figure 3.1 front-stage functional modules structure of the system3.4 前臺模塊詳細功能描述 用戶通過前臺功能完成整個購物過程。系統(tǒng)前臺主要包括：商品分類，商品展示，會員管理，購物車，收銀結算，訂單查詢管理，留言板等幾大功能模塊

32、。（1）商品分類模塊：商品分類模塊實現(xiàn)了根據物品分類進行的商品劃分和展示，以及根據品牌進行的商品劃分。用戶可以根據女裝，男裝，休閑裝這樣的一級分類進行查詢，也可以繼續(xù)查詢女裝下的外套，襯衫這樣的二級子分類。同時商品也按照商品品牌分類，用戶也可以選擇某個品牌的商品進行查詢。另外還為客戶提供最新上架商品，會員特惠商品，明星推薦商品這樣的促銷類型的分類展示。（2）商品展示模塊：商品展示模塊實現(xiàn)對于該商品的商品名稱，貨號，庫存數量，價格，規(guī)格，尺碼顏色等屬性的詳細說明，以及細節(jié)圖片和詳細的文字說明內容。用戶決定訂購此商品，對于已登錄的用戶，直接調用購物車模塊，將商品信息放入購物車內。如果用戶尚未登陸，

33、則調用會員管理頁面請用戶先進行登陸或者注冊，然后再調用購物車模塊完成購物流程。另外本模塊還提供商品咨詢的功能，為滿足所有用戶的需求，本模塊內的咨詢功能支持匿名咨詢，無需注冊登陸。（3）會員管理模塊：會員管理模塊實現(xiàn)用戶注冊成為會員，以及會員登陸。用戶注冊成為會員時輸入用戶名，登陸密碼，以及真實姓名，聯(lián)系方式等信息，這些信息用于會員管理，在會員不慎遺失密碼時，可以通過個人信息找回登陸密碼。（4）購物車模塊：購物車模塊實現(xiàn)了暫存購物信息的功能，用戶可以隨時查看自己的購物車內的物品信息或者清空購物車。用戶選購某件商品時，將商品放入購物車，在購物車內確認商品信息無誤后，到收銀臺去收生成訂單，完成支付。

34、（5）收銀結算模塊：收銀結算模塊實現(xiàn)生成訂單與結算支付的功能，用戶確認購物車內的商品信息無誤，點擊去收銀臺，即調用收銀臺模塊，讓顧客完善收貨人收貨信息，支付與配送方式等等的必要信息后，生成訂單，確認后，進行支付。（6）訂單查詢管理模塊:訂單查詢管理模塊實現(xiàn)了用戶對于訂單的查詢和管理，并且根據訂單的不同狀態(tài)將其進行劃分:全部訂單，未付款的訂單，已付款未發(fā)貨的訂單，已發(fā)貨的訂單，交易成功的訂單，已取消的訂單。通過后臺對于訂單狀態(tài)的管理，用戶的訂單隨著購物流程中轉換成為相應的狀態(tài)。（7）留言板模塊:留言板實現(xiàn)用戶對于網站的留言或者投訴，用戶可以通過留言板模塊發(fā)表留言，通過后臺對留言內容的回復與操作，

35、在前臺留言板頁面進行顯示。第四章 前臺基本功能模塊的具體實現(xiàn)4.1 前臺商品分類展示頁面實現(xiàn)4.1.1 首頁功能概述首頁的主要功能包括，為用戶提供清晰明確的整個系統(tǒng)結構，通過建立導航條與首頁分類欄目進行實現(xiàn)。下面為對首頁的主要欄目劃分進行簡單介紹：（1）頂部導航條：首頁，登陸，注冊，購物車，我的賬戶，客服中心。（2）商品分類導航條：女裝、男裝、休閑裝分類頁面，會員特惠、最新上架、品牌展示、明星推薦分類頁面。（3）促銷海報展示，網站購物咨訊發(fā)布。（4）首頁會員登陸欄目，商品搜索欄目。（5）最新上架商品，明星推薦商品，會員特惠商品首頁推薦展示欄目，品牌專區(qū)欄目。（6）認證信息顯示與企業(yè)信息顯示欄目

36、。界面設計：圖4.1 首頁頁面效果圖figure. 4.1 view page of index4.1.2 模板的設計實現(xiàn) 根據網站結構與框架，以及企業(yè)整體的vi需求，用photoshop工具繪制網站主要頁面的顯示效果圖，修改完善后，利用photoshop切片工具進行切片，之后利用表格，結合一些div+css的方法，完成對網頁的布局設計。 網站頂部導航條、商品分類導航條、底部的認證鏈接和企業(yè)信息顯示部分，使用創(chuàng)建dwt模板方法來實現(xiàn)。網站的其他頁面都調用此模板(模板.dwt.asp)作為頁面框架，不同頁面僅需要對模板中間部分的可編輯區(qū)進行內容完善。 頂部導航條以及商品分類導航條部分使用圖片鏈接

37、的方式鏈接到相應的頁面。 底部的認證信息欄目內顯示認證圖標，企業(yè)信息欄目內顯示企業(yè)信息目錄。這兩個欄目的內容分別使用數據表link與menu，在頁面內動態(tài)生成。功能實現(xiàn)中用到的對象及屬性：l recordset（記錄集對象）：用于瀏覽及操作數據庫內的數據，管理返回的記錄集，這里不先創(chuàng)建connection對象，直接利用recordset對象的功能來創(chuàng)建recordset對象，此時ado將自動創(chuàng)建所需的connection對象，但需要在隨后的recordset對象的open方法中給出連接源。l recordcount(記錄集對象屬性)：記錄集中的記錄總數。l response對象的write方法

38、：將信息輸出到客戶端進行顯示。實現(xiàn)過程：對數據表中的相應記錄進行查詢之后，進行所有記錄的循環(huán)輸出顯示。為實現(xiàn)網頁中圖片顯示時可以等比例縮放的功能，在模板中使用javascript腳本定義了resizepic方法。算法描述如下：當圖片高寬比大與顯示高寬比時，若圖片寬度大于顯示寬度，目標圖片寬度等于顯示寬度，高度根據顯示高寬比得出。若圖片高度大于顯示高度，目標圖片高度等于顯示高度，寬度根據顯示高寬比得出。在顯示圖片的地方調用此方法為參數賦值，實現(xiàn)圖片的等比例縮放。模板中使用#include指令調用數據庫連接文件（conn.asp）以及網站配置文件（config.asp）等。在#include語句中

39、使用file關鍵字指定文件的相對路徑。4.1.3 首頁欄目的設計實現(xiàn)上文對網頁模板的內容進行了介紹，下面在模板文件基礎上來設計實現(xiàn)前臺首頁。（1）促銷海報展示使用js特效，海報圖片進行動態(tài)的輪換效果顯示，并對切換樣式進行定義。在指定時間間隔后，以指定樣式更換海報圖片，實現(xiàn)海報的動態(tài)切換。用到的方法及變量：l getelementbyid：根據指定的 id 屬性值得到對象。返回第一個對象的引用。假如對應的為一組對象，則返回該組對象中的第一個。l settimeout：用于在指定的毫秒數后調用函數或計算表達式。實現(xiàn)方法的關鍵代碼，定義切換樣式：圖片輪轉切換的實現(xiàn)方法：function rotate

40、hanger_sn4() document.getelementbyid(divhanger_sn4).filters0.apply();document.all.divhanger_sn4.innerhtml=ahtmls_sn4nhangno_sn4;document.getelementbyid(divhanger_sn4).filters0.play(); (nhangno_sn4=(ahtmls_sn4.length-1)?nhangno_sn4=0:nhangno_sn4+;settimeout(rotatehanger_sn4(),nhanginterval_sn4); （2）個

41、人用戶登陸欄目此欄目體現(xiàn)用戶登陸狀態(tài)，判斷用戶是否登陸，未登錄時提供注冊、登陸、找回密碼功能，登陸后顯示會員個人信息，為會員提供購物車、我的賬戶、訂單查詢功能。功能實現(xiàn)中用到的對象及屬性：l session對象：存儲用戶個人會話所需的信息，當用戶在不同頁面切換時，存儲在 session對象中變量不會被清除。實現(xiàn)用戶信息在多頁面內的共享。l recordset對象bof屬性：表示記錄集的開頭，位于第一條記錄之前。l recordset對象eof屬性：表示記錄集的結尾，位于最后一條記錄之后。（3）商品搜索欄目在表單內輸入關鍵字，提交至search.asp頁面進行處理，對名稱或者備注里包含此關鍵字的

42、商品記錄進行模糊查找，并進行輸出顯示。用到的對象及屬性：l request對象：用于獲取客戶的請求數據，可以訪問基于http請求傳遞的所有信息。l form數據集合：用于獲得post方法所提交的表單數據。l action屬性：用于設定表單數據程序的url地址，即設置將表單數據提交給誰處理。l method屬性：指定表單的資料傳到服務器的方式，取值為post或get方法。（4）品牌專區(qū)欄目在此欄目內對網站所有品牌的logo圖標進行排列顯示。點擊圖標跳轉至該品牌的商品展示頁面。這里用到一個算法來實現(xiàn)圖標的分行排列，關鍵代碼如下：if(rsbrandshow.recordcount mod 2)=0

43、 then y=0 else y=2for i=1 to (rsbrandshow.recordcount2)*2+yif （i mod 2）=1 then writestr=writestr&/當i模2等于1時，則換行顯示。if （i mod 2）=0 then writestr=writestr&/當i模2等于0時，換行結束。（5）分類別推薦商品的首頁展示欄目新品推薦：顯示所有推薦商品中最后上架的三件商品。明星推薦：顯示明星推薦分類中最后上架的三件商品。會員特惠：顯示會員特惠分類中最后上架的四件商品。4.1.3 商品分類頁面的設計與實現(xiàn)商品分類展示頁面包括：女裝、男裝、休閑物品分類；會員特

44、惠、新品上架、熱賣商品、明星推薦等推薦商品分類；以及按品牌分類。界面設計：圖4.2 商品分類展示頁面效果圖figure. 4.2 view page of product category show（1）頁面頂部的海報在進入分類頁面后，進行判斷選擇，對該分類的海報進行輸出顯示。關鍵代碼：if request(action)=lu then 女士頁面sql=select * from yc_other where id =17elseif request(action)=lan then 男士頁面sql=select * from yc_other where id =18elseif requ

45、est(action)=xouxiang then 休閑頁面 sql=select * from yc_other where id =19elseif request(action)=price then 活動專區(qū)sql=select * from yc_other where id =26elseif request(action)=newadd then 新品上架sql=select * from yc_other where id =20elseif request(action)=hot then 熱銷產品sql=select * from yc_other where id =21

46、elseif request(action)=elite then 明星推薦sql=select * from yc_other where id =22else 模糊搜索sql=select * from yc_other where id =28end if（2）商品分類目錄商品分類結構示意圖：商品分類物品分類推薦分類品牌分類女裝分類休閑分類活動專區(qū)新品上架明星推薦熱賣商品單個品牌二級分類二級分類二級分類男裝分類圖4.3 商品分類結構示意圖figure. 4.3 structure of product category 商品的分類目錄為兩級，一級為女裝、男裝、休閑分類。在一級分類下面又分

47、為外套，襯衫等的二級分類。女裝、男裝、休閑頁面內，僅顯示該分類下的一級菜單及其二級分類目錄。但在會員特惠，新品上架等頁面內顯示全部分類目錄。（3）商品分類展示 當用戶按照模糊搜索，分類目錄，品牌分類對商品進行搜索時，將搜索結果在此進行輸出顯示。l 輸入關鍵字進行模糊搜索，關鍵代碼：if request(title) thensqlshop=sqlshop & and ( title like % & request(title)&%sqlshop=sqlshop & or memo like &request(title)&%)end ifl 按分類進行搜索，關鍵代碼：if request(c

48、lass) then sqlshop=sqlshop & and class= & cint(request(class)& sql=select * from yc_type where type=產品 and class=& cint(request(class)& order by id set rst=server.createobject(adodb.recordset)rst.open sql,conn,1,1for q=1 to rst.recordcountsqlshop=sqlshop & or class= & rst(id)rst.movenextnextend ifl

49、按品牌進行搜索，關鍵代碼：if request(brandid) then sqlshop=sqlshop & and brandid = & request(brandid)&4.2 商品展示模塊實現(xiàn)功能：商品縮略圖的展示，商品規(guī)格，價格等屬性的描述，用戶在此頁面選擇將商品放入購物車，商品的詳細圖片文字說明，發(fā)表商品咨詢，及相關產品的推薦展示。（1）商品屬性說明在相應位置顯示商品名稱，規(guī)格，價格，編號，品牌，備注等商品屬性信息。商品價格的輸出應轉換為貨幣值，并且對商品點擊次數進行統(tǒng)計與顯示。并且對商品縮略圖的地址進行判斷，如果來自網絡，即輸出圖片地址為絕對地址，來自服務器，則輸出為相對地址。

50、實現(xiàn)功能所用到的方法與函數：l connection對象的execute方法：將命令發(fā)布到數據源。l recordset對象的update方法：將緩沖區(qū)內的數據分批更新到數據庫，實現(xiàn)點擊次數的統(tǒng)計。l formatcurrency函數：將價格數值轉化為貨幣值。（2）商品咨詢留言 發(fā)布留言時，在咨詢留言表單內填寫個人信息，若會員尚未登錄，可輸入個人信息進行留言。首先判斷會員是否登陸，如果用戶已經登陸，在表單中，顯示會員個人信息。若用戶尚未登錄，也可以發(fā)表留言，但需完善個人信息，發(fā)表留言時，若個人信息不完善，提示用戶進行完善。實現(xiàn)流程如下圖：是否登陸顯示會員個人信息留言咨詢填寫個人信息發(fā)表留言咨詢

51、信息是否完整留言成功發(fā)表留言咨詢是否是否彈出提示信息圖4.4 留言咨詢發(fā)表流程圖figure. 4.4 the flow diagram of commodity advisory（3）相關產品展示在此欄目內推薦展示與查看商品相關的商品，最多顯示四件。查詢與查看商品物品分類名稱相同，價格與該商品價格接近的商品，進行輸出。這里使用到連接數據表的方法來實現(xiàn)相關商品的查詢，關鍵代碼：sql=select top 4 product.*, yc_type.classname from product left join yc_type on product.class = yc_type.id whe

52、re yc_type.classname=& rs(classname) & and product.sprice =& rs(sprice)-25 & and product.passed=true order by product.id;4.3 會員管理模塊4.3.1 會員管理模塊概述會員管理模塊為會員提供服務，主要包括會員注冊，會員登陸，會員資料修改，找回密碼等功能，這些功能都在user.asp頁面內，通過調用不同的過程來實現(xiàn)?？蚣軋D：注冊是否通過驗證登陸成功資料修改密碼修改訂單查詢在線購物否是登陸圖4.5會員管理模塊框架圖figure 4.5 frame of member manag

53、ement functional modules 4.3.2 會員注冊的實現(xiàn)過程 用戶注冊過程，主要實現(xiàn)兩個功能:一個是收集用戶輸入的注冊信息，另一個是將這些信息保存到指定的數據表中。會員注冊信息表單設計：表4.1 會員注冊表單table 4.1 form of member registration名稱類型對應字段名備注用戶名textuser_name必填，不能小于四個字符。密碼passworduser_pass必填，區(qū)分大小寫。確認密碼passworduser_pass兩次輸入密碼，必須一致。密碼提示問題textuser_question找回密碼的提示問題。問題答案textuser_ an

54、swer找回密碼的提示問題答案。真實姓名textuser_ture_name必填，真實姓名，方便與會員聯(lián)系。性別radiouser_sex選擇性別。聯(lián)系電話textuser_tel格式件號碼textuser_passport確認用戶真實個人信息。e-mailtextuser_mail填入有效郵件地址。qq號碼textuser_qq填入常用qq，方便與會員聯(lián)系。詳細地址textuser_address填入詳細收貨地址。完善注冊信息后提交表單，使用數據表yc_user,判斷會員登錄名稱是否已存在，保持用戶名的唯一；判斷兩次密碼輸入是否一致；判斷必填信息是否填寫完整；否則不能保存，彈出提示信息。注冊信息符合條件，則通過addnew方法保存記錄。實現(xiàn)流程圖：提交用戶名唯一填寫注冊信息兩次密碼一致信息完整注冊成功是是是否否否圖4.5 會員注冊流程圖figure. 4.5 the flow diagram of member registration4.3.3 會員登陸的實現(xiàn)過程 會員在個人用戶登陸欄目或登陸頁面login.asp輸入用戶名與密碼，進行登