鞋秀電子商務(wù)網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

□文/梁 瑩

一、網(wǎng)站概況

（一）鞋秀電子商務(wù)網(wǎng)站。鞋秀電子商務(wù)網(wǎng)站是一個(gè)以各式鞋子在線銷售為主要內(nèi)容的網(wǎng)上購物平臺(tái)，采用B2C電子商務(wù)模式。

（二）配置IIS服務(wù)器。本網(wǎng)站全部采用動(dòng)態(tài)網(wǎng)頁技術(shù)，使用了ASP技術(shù)，站內(nèi)的內(nèi)容全部都是從數(shù)據(jù)庫（Access2003）中讀取。要讓連接數(shù)據(jù)庫的網(wǎng)站能夠正常工作并發(fā)揮它的全部功能，在使用前必須先安裝服務(wù)器，本站點(diǎn)使用的是Window XP的IISServer，所以要先配置IIS。

1、選擇［開始］-［設(shè)置］-［控制面板］命令，打開“控制面板”窗口，雙擊［添加/刪除程序］圖標(biāo)，打開“添加或刪除程序”窗口，單擊［添加/刪除 Windows組件］按鈕，打開“Windows組件向?qū)А睂?duì)話框。

2、選中“組件”列表框中的“Internet信息服務(wù)（IIS）”復(fù)選框，并單擊［詳細(xì)信息］按鈕，打開“Internet信息服務(wù)（IIS）”對(duì)話框。

3、選中“文件傳輸協(xié)議（FTP）服務(wù)”復(fù)選框，單擊［確定］按鈕，回到“Windons組件向?qū)А睂?duì)話框，再單擊［下一步］按鈕，系統(tǒng)會(huì)自動(dòng)配置文件，稍等片刻，單擊出現(xiàn)的對(duì)話框中的［完成］按鈕，結(jié)束IIS的安裝配置。

（三）使用軟件簡介

1、該站點(diǎn)主要應(yīng)用了DreamweaverMX的行為、標(biāo)簽、數(shù)據(jù)庫、CSS樣式。當(dāng)然，站點(diǎn)中的動(dòng)畫和圖片處理也離不開Flash MX和FireworksMX，本范例實(shí)際上是綜合應(yīng)用了三個(gè)軟件。

2、ASP是服務(wù)器端的腳本執(zhí)行環(huán)境，當(dāng)用戶使用瀏覽器請(qǐng)求ASP主頁時(shí)，WEB服務(wù)器響應(yīng)，調(diào)用ASP引擎來執(zhí)行ASP文件，并解釋其中的腳本語言JavaScript，通過ODBC連接數(shù)據(jù)庫，由數(shù)據(jù)庫訪問組件ADO（ActiveXData Objects）完成數(shù)據(jù)庫操作，最后ASP生成包含有數(shù)據(jù)查詢結(jié)果的HTML主頁返回用戶端顯示。

二、網(wǎng)站結(jié)構(gòu)

“鞋秀網(wǎng)”分為四個(gè)主要欄目：女鞋、男鞋、童鞋、鞋用品；以及四個(gè)輔助欄目：購物車、站內(nèi)搜索、用戶注冊(cè)、相關(guān)信息。

主要欄目展示所有鞋類產(chǎn)品并提供相關(guān)的供求信息，給賣、買雙方構(gòu)建了一個(gè)發(fā)布和查詢商業(yè)機(jī)會(huì)的電子平臺(tái)。

輔助欄目為用戶提供各種大量的會(huì)員個(gè)體服務(wù)，并建立了站內(nèi)搜索引擎和售后服務(wù)，實(shí)現(xiàn)了產(chǎn)品的網(wǎng)上銷售。

三、網(wǎng)站內(nèi)容及功能

（一）鞋秀網(wǎng)主欄目

1、女鞋。該欄目主要是指對(duì)所有女式鞋產(chǎn)品的一個(gè)展示和網(wǎng)上交易的頁面。其中，用戶可以通過兩種方式來查找想要的東西。一是通過站內(nèi)的搜索引擎。此種方式下，有三個(gè)搜索條件，用戶可以來選擇：顏色、尺碼和質(zhì)地。二是通過三個(gè)分類來查找：（1）按鞋類型來預(yù)選擇（包括女單鞋、女靴子、女休閑、女涼鞋）；（2）按鞋頭來預(yù)選擇（包括尖頭、圓頭、方頭、其他頭型）；（3）按鞋跟來預(yù)選擇（包括平跟、低跟、中跟、高跟）。

2、男鞋。該欄目主要是指對(duì)所有男式鞋產(chǎn)品的一個(gè)展示和網(wǎng)上交易的頁面。其中，用戶可以通過兩種方式來查找想要的東西。一是通過站內(nèi)的搜索引擎。此種方式下，有三個(gè)搜索條件，用戶可以來選擇：顏色、尺碼和質(zhì)地。二是通過三個(gè)分類來查找：（1）按鞋類型來預(yù)選擇（包括男單鞋、男靴子、男休閑、男涼鞋）；（2）按鞋頭來預(yù)選擇（包括尖頭、圓頭、方頭、其他頭型）；（3）按鞋跟來預(yù)選擇（包括平跟、低跟、中跟、高跟）。

3、童鞋。該欄目主要是指對(duì)所有童式鞋產(chǎn)品的一個(gè)展示和網(wǎng)上交易的頁面。其中，用戶可以通過兩種方式來查找想要的東西。一是通過站內(nèi)的搜索引擎。此種方式下，有三個(gè)搜索條件，用戶可以來選擇：顏色、尺碼和質(zhì)地。二是通過三個(gè)分類來查找：（1）按鞋類型來預(yù)選擇（包括童單鞋、童靴子、童休閑、童涼鞋）；（2）按鞋頭來預(yù)選擇（包括尖頭、圓頭、方頭、其他頭型）；（3）按鞋跟來預(yù)選擇（包括平跟、低跟、中跟、高跟）。

4、鞋用品。該欄目主要是指對(duì)所有鞋用品的一個(gè)展示和網(wǎng)上交易的頁面。其中，用戶可以通過產(chǎn)品分類的方式來查找自己想要的東西：按鞋配件（包括鞋底、鞋跟、鞋鏈、鞋標(biāo)）和鞋相關(guān)（鞋花、鞋扣、鞋襯、鞋線、鞋拔、鞋墊、鞋刷、鞋油）。

（二）購物車。該頁面的主要功能是為用戶提供其所選購產(chǎn)品名稱和數(shù)量的，等用戶確認(rèn)了選購產(chǎn)品后網(wǎng)站就可以為用戶準(zhǔn)備產(chǎn)品，及時(shí)給用戶郵寄過去，從而完成網(wǎng)上購物，如圖1所示。（圖1）

四、網(wǎng)站可視化設(shè)計(jì)

鞋秀電子商務(wù)網(wǎng)站主頁設(shè)計(jì)清晰、簡捷，突出了電子商務(wù)為主題的應(yīng)用平臺(tái)。主頁中以T字型的網(wǎng)頁布局形式顯示了主要欄目和輔助欄目。此外，網(wǎng)站的其他相關(guān)信息放在了網(wǎng)頁的底部。

進(jìn)入鞋秀電子商務(wù)網(wǎng)站，首先看到的是作為該網(wǎng)的網(wǎng)站圖標(biāo)，它放在網(wǎng)站的頂部。下面是該網(wǎng)站的主要導(dǎo)航欄目：女鞋、男鞋、童鞋、鞋用品、購物車；左面是用戶注冊(cè)欄目和站內(nèi)搜索引擎以及精彩活動(dòng)、購物指南、貨源信息；在頁面的顯著地方是相關(guān)分類產(chǎn)品的展示。

五、網(wǎng)站安全性設(shè)計(jì)

提供安全的網(wǎng)上服務(wù)是鞋秀電子商務(wù)網(wǎng)站最先考慮的事項(xiàng)之一。在數(shù)據(jù)傳輸方面，鞋秀電子商務(wù)網(wǎng)站的安全措施有：

（一）正確無誤的身份確認(rèn)。該網(wǎng)站在網(wǎng)絡(luò)身份確認(rèn)權(quán)威機(jī)構(gòu)注冊(cè)，客戶的瀏覽器可以在傳輸數(shù)據(jù)前確認(rèn)該網(wǎng)店的身份。

（二）數(shù)據(jù)加密。該網(wǎng)店使用業(yè)界標(biāo)準(zhǔn)SSL技術(shù)加密潛在敏感信息和重要敏感信息。

（三）安全支付。本站采用的是貨到付款，這是最原始的現(xiàn)金付款方式，一手交貨一手交錢。如果一次購物金額較多，例如超過了1，000元，商家就免費(fèi)送貨。

六、網(wǎng)站后臺(tái)處理功能設(shè)計(jì)

（一）概況。在Web服務(wù)器方面，鞋秀電子商務(wù)網(wǎng)站采用分布式方案，各服務(wù)器的內(nèi)容彼此鏡像，當(dāng)訪問量有巨大上升時(shí)，可以很容易增加硬件容量。這個(gè)方案可減少客戶訪問網(wǎng)站的等候時(shí)間。至于后臺(tái)數(shù)據(jù)庫，鞋秀電子商務(wù)網(wǎng)站采用的是MicrosoftOffice Access2003。

（二）建立數(shù)據(jù)庫

1、執(zhí)行［開始］-［程序］-［MicrosoftOffice Access2003］命令，打開Microsoft Office Access2003，顯示MicrosoftOffice Access2003對(duì)話框，選擇“新建數(shù)據(jù)庫”選擇組下的［空Access數(shù)據(jù)庫］選項(xiàng)，然后單擊［確定］按鈕，在打開的“文件新建數(shù)據(jù)庫”對(duì)話框中為新創(chuàng)建的數(shù)據(jù)庫命名。設(shè)置完畢后單擊［創(chuàng)建］按鈕，創(chuàng)建一個(gè)數(shù)據(jù)庫user。

2、打開“user數(shù)據(jù)庫”對(duì)話框，選擇左側(cè)“對(duì)象”列表框中的［表］對(duì)象，然后雙擊右側(cè)列表框中的［使用設(shè)計(jì)器創(chuàng)建表］選項(xiàng)，然后打開“user表：表”窗口，在“字段名稱”列表輸入表單所有的字段名稱：“id”設(shè)置字段大小5，且為必填字段；按同樣方法，設(shè)置“username”字段為10，且為必填字段；“password”字段為 10，且為必填字段。

3、設(shè)置完表格的字段名稱和數(shù)據(jù)類型后，單擊［保存］按鈕，在打開的“另存為”對(duì)話框中輸入user，設(shè)置完畢后單擊［確定］按鈕，打開一個(gè)提示對(duì)話框，單擊該對(duì)話框中的［是］按鈕。雙擊新增的user表，在打開的表內(nèi)輸入所需的內(nèi)容，該內(nèi)容是為了方便以后的數(shù)據(jù)庫操作而創(chuàng)建的，一般情況下設(shè)計(jì)者無需在該表中輸入任何內(nèi)容，該表中的內(nèi)容都是由用戶在表單內(nèi)輸入，經(jīng)過單擊［提交］按鈕來獲得的。同樣方法可創(chuàng)建以下產(chǎn)品分類表。

（三）鞋秀電子商務(wù)網(wǎng)站數(shù)據(jù)庫介紹。如上所述，本站一共創(chuàng)建以下9個(gè)數(shù)據(jù)庫，包括4個(gè)站內(nèi)產(chǎn)品信息數(shù)據(jù)表、4個(gè)所有產(chǎn)品分類數(shù)據(jù)表和1個(gè)用戶信息數(shù)據(jù)表。

1、站內(nèi)產(chǎn)品信息數(shù)據(jù)表。（1）女鞋信息表chanpin；（2）男鞋信息表 chanpinnan；（3）童鞋信息表 chanpingtong；（4）鞋用品信息表 changpingyong。

2、所有產(chǎn)品分類數(shù)據(jù)表。（1）女鞋二級(jí)分類表：nv；（2）男鞋二級(jí)分類表：nan；（3）童鞋二級(jí)分類表：tong；（4） 鞋用品二級(jí)分類表：xieyongpin。

3、用戶信息數(shù)據(jù)表：user。用戶數(shù)據(jù)可以讓本站管理員通過后臺(tái)數(shù)據(jù)庫添加、刪除、修改；也可以實(shí)現(xiàn)用戶在瀏覽器端自行添加，自行注冊(cè)。

本站預(yù)先設(shè)置了些用戶數(shù)據(jù)，如ly用戶。當(dāng) ly登錄時(shí)，若使用“會(huì)員名 ly，密碼：ly”，則系統(tǒng)經(jīng)數(shù)據(jù)讀取，就會(huì)提示道：ly歡迎你來到本站，返回主頁；否則，提示：您還不是我們的注冊(cè)用戶或者您的用戶名和密碼有誤，要求用戶注冊(cè)。

（四）ASP訪問數(shù)據(jù)庫步驟。鞋秀電子商務(wù)網(wǎng)站使用的是ASP動(dòng)態(tài)網(wǎng)頁技術(shù)，所以也是使用ADO組件訪問后臺(tái)數(shù)據(jù)庫，具體步驟如下：

1、定義數(shù)據(jù)源。在WEB服務(wù)器上打開［控制面板］，選中［ODBC］，在［系統(tǒng)DSN］下選［添加］，選定你希望的數(shù)據(jù)庫種類、名稱、位置等。本文定義［SQL SERVER］，數(shù)據(jù)源為［shoeshop］，數(shù)據(jù)庫名稱為［shoeshop］，腳本語言采用Javascript。

2、使用ADO組件查詢WEB數(shù)據(jù)庫

（1）調(diào)用 Server.CreateObject方法取得“ADODB.Connection”的實(shí)例，再使用Open方法打開數(shù)據(jù)庫：

（2）指定要執(zhí)行的SQL命令。連接數(shù)據(jù)庫后，可對(duì)數(shù)據(jù)庫操作，如查詢、修改、刪除等，這些都是通過SQL指令來完成的，如要在數(shù)據(jù)表signaltab中查詢代碼中含有“X”的記錄。

（3）使用RecordSet屬性和方法，并顯示結(jié)果。為了更精確地跟蹤數(shù)據(jù)，要用RecordSet組件創(chuàng)建包含數(shù)據(jù)的游標(biāo)，游標(biāo)就是儲(chǔ)存在內(nèi)存中的數(shù)據(jù)。

（4）關(guān)閉數(shù)據(jù)庫。

七、結(jié)論

通過鞋秀電子商務(wù)網(wǎng)站的建立，我們可以在線實(shí)現(xiàn)客戶注冊(cè)、站內(nèi)搜索、網(wǎng)上支付、實(shí)時(shí)交易等功能。同時(shí)，也為中小企業(yè)宣傳產(chǎn)品、樹立形象、降低成本、提高效率起了促進(jìn)作用。由此可見，中小企業(yè)建立電子商務(wù)網(wǎng)站是刻不容緩的。

[1]楊雅輝.電子商務(wù)網(wǎng)站設(shè)計(jì)原理.北京：中國財(cái)政經(jīng)濟(jì)出版社，2001.

[2]寧健民.網(wǎng)站建設(shè)必讀—怎樣建設(shè)一個(gè)成功的網(wǎng)站.北京：大恒電子出版社，2000.

[3]李長云，張?jiān)平?網(wǎng)頁設(shè)計(jì)經(jīng)典范例.北京：清華大學(xué)出版社，2003.