1、項(xiàng)目十在線購物系統(tǒng)【項(xiàng)目任務(wù)】 Web開發(fā)技術(shù)的飛速發(fā)展促進(jìn)了電子商務(wù)的普及。目前，越來越多的商業(yè)活動開始轉(zhuǎn)移到Internet中來進(jìn)行，一種新的購物方式電子購物正在悄然興起，這種購物方式無疑給商家和消費(fèi)者帶來了極大的便利，使以前很多不可能的商業(yè)活動變得異?？旖?。本項(xiàng)目通過設(shè)計(jì)一個在線電子購物商城系統(tǒng)，實(shí)現(xiàn)用戶在線購物，管理員后臺進(jìn)行管理等常用操作。同時對于廣大ASP.NET初學(xué)者來說，學(xué)習(xí)本章知識可以對前面所學(xué)內(nèi)容進(jìn)行總結(jié)，也可以提高對各種應(yīng)用技術(shù)的整合能力。下一頁項(xiàng)目十在線購物系統(tǒng)【整體功能劃分】 根據(jù)系統(tǒng)功能要求，在線網(wǎng)絡(luò)購物系統(tǒng)整體功能分為兩個模塊：針對普通用戶實(shí)現(xiàn)在線購物功能模塊和管

2、理員后臺管理功能模塊。在線購物基本功能模塊包括以下一些操作。會員注冊：用戶可以自行注冊為會員，只有成為網(wǎng)絡(luò)會員才可以進(jìn)行網(wǎng)絡(luò)購物。在線購物：會員登錄后，可以對現(xiàn)存商品實(shí)現(xiàn)購物功能。在線充值：會員在進(jìn)行購物時，會員的賬戶中必須有足夠的金錢。查看余額：會員登錄系統(tǒng)后，可以隨時查看個人賬戶余額。修改密碼：會員登錄系統(tǒng)成功后，可以自行修改密碼?？蛻袅粞裕簳T在購物時如果有建議或意見可以直接在線留言。下一頁返回上一頁項(xiàng)目十在線購物系統(tǒng)后臺管理功能模塊包括以下一些操作。修改密碼：管理員可以自行修改個人密碼。商品類別管理：管理員可以對商品的類別進(jìn)行添加，修改和刪除操作。商品管理：管理員可以對商品的信息進(jìn)行添

3、加和修改操作。會員管理：管理員可以對會員信息進(jìn)行管理。留言管理：管理員可以對用戶的留言進(jìn)行管理。在線購物系統(tǒng)整個邏輯功能結(jié)構(gòu)示意圖如圖10-1所示。下一頁返回上一頁項(xiàng)目十在線購物系統(tǒng)【系統(tǒng)數(shù)據(jù)庫設(shè)計(jì)】（1）用戶信息表UserInfo，用來保存注冊會員的信息。具體結(jié)構(gòu)見表10-1。（2）商品分類表Category，用來保存商品分類的信息。具體結(jié)構(gòu)見表10-2。（3）商品表Product，主要用來保存管理員上傳的商品信息。具體結(jié)構(gòu)見表10-3。（4）用戶訂購商品表UserOrder，主要用來保存用戶購買商品的時間，會員的編號和唯一標(biāo)識。具體結(jié)構(gòu)見表10-4。（5）用戶訂購商品詳細(xì)表OrderDet

4、ail，主要用來保存用戶購買商品的明細(xì)。具體結(jié)構(gòu)見表10-5。下一頁返回上一頁項(xiàng)目十在線購物系統(tǒng)（6）用戶留言GuestBook表，用來保存用戶的在線留言信息。具體結(jié)構(gòu)見表10-6。 表的具體關(guān)系圖如圖10-2所示。（7）創(chuàng)建視圖PDetail，主要用于商品表和商品分類表進(jìn)行關(guān)聯(lián)，具體如圖10-3所示。（8）創(chuàng)建視圖cartlist，主要用于對會員每次購物的匯總，具體如圖10-4所示。下一頁返回上一頁項(xiàng)目十在線購物系統(tǒng)【數(shù)據(jù)庫訪問配置和實(shí)現(xiàn)】1.配置Web.Config文件 本系統(tǒng)采用AdO.NET方式訪問SQL Server 2000數(shù)據(jù)庫，首先在Web.Config文件中配置訪問數(shù)據(jù)庫的鏈

5、接字符串，在配置文件中添加代碼。下一頁返回上一頁項(xiàng)目十在線購物系統(tǒng)2.訪問數(shù)據(jù)庫操作 訪問數(shù)據(jù)庫操作，主要包括建立數(shù)據(jù)庫連接、對數(shù)據(jù)庫表查詢返回DataSet類型數(shù)據(jù)、對數(shù)據(jù)庫表更新操作和斷開數(shù)據(jù)庫連接操作?！驹诰€購物基本功能頁面分析】1.用戶控件 用戶控件是ASP.NET控件封裝最簡單的形式，它可以大大提高代碼的重用。由于在系統(tǒng)中每個頁面都要判斷用戶的登錄功能和商品的分類功能，所以創(chuàng)建了兩個用戶控件：用戶登錄控件和顯示商品分類的控件。（1）用戶登錄控件。右擊【項(xiàng)目】，在彈出的快捷菜單中選擇【添加新項(xiàng)】命令，在彈出的對話框中選擇【W(wǎng)eb用戶控件】選項(xiàng)，如圖10-5所示。下一頁返回上一頁項(xiàng)目十在

6、線購物系統(tǒng) 在生成的用戶控件的前臺代碼中添加判斷會員在登錄成功和沒有登錄情景下對應(yīng)的代碼。 在登錄控件的前臺代碼中，主要通過對會員的Session進(jìn)行判斷，如果會員已經(jīng)登錄，則顯示會員的常用操作菜單，否則直接顯示登錄對話框。當(dāng)會員單擊【登錄】按鈕時，添加【登錄】按鈕的后臺處理代碼。 對于新用戶注冊為會員時，對【注冊】按鈕添加后臺處理代碼，主要實(shí)現(xiàn)頁面的轉(zhuǎn)向。下一頁返回上一頁項(xiàng)目十在線購物系統(tǒng)（2）商品分類控件。右擊【項(xiàng)目】，在彈出的快捷菜單中選擇【添加新項(xiàng)】命令，在彈出的對話框中選擇【W(wǎng)eb用戶控件】選項(xiàng)，輸入控件名稱“CategoryList.ascx”，在分類控件的前臺頁面中添加一個Dat

7、aList控件“dlstCategory”，如圖10-6所示，并修改其相應(yīng)的屬性。修改控件“dlstCategory”的數(shù)據(jù)項(xiàng)模板，將表格的開始標(biāo)記放在數(shù)據(jù)項(xiàng)的頭部模板中，結(jié)束標(biāo)記放在底部模板中，中間所有的數(shù)據(jù)項(xiàng)放在單元格中。 添加控件在頁面調(diào)入時的后臺代碼，主要實(shí)現(xiàn)對控件“dlstCategory”的數(shù)據(jù)綁定。（3）文件上傳控件。文件上傳控件主要實(shí)現(xiàn)對商品圖片的上傳，返回圖片的文件名稱，并驗(yàn)證圖片的格式。具體前臺布局如圖10-7所示。下一頁返回上一頁項(xiàng)目十在線購物系統(tǒng)2.頁面模板 由于系統(tǒng)多個頁面要使用相同的布局方式，對于所有的在線購物功能頁面中使用統(tǒng)一模板，并且在模板中使用用戶控件，可以大

8、大方便代碼的重用。右擊【項(xiàng)目】，在彈出的快捷菜單中選擇【添加新項(xiàng)】命令，在彈出的對話框中選擇【母版頁】選項(xiàng)，輸入母版頁名稱“MasterPage.master”，然后對母版頁面進(jìn)行布局，具體布局效果如圖10-8所示。下一頁返回上一頁項(xiàng)目十在線購物系統(tǒng)【具體功能頁面實(shí)現(xiàn)】1.系統(tǒng)默認(rèn)頁面“Default.aspx” 在默認(rèn)頁面中，首先使用上面創(chuàng)建的母版頁，在內(nèi)容區(qū)域中添加三個欄目：最新上架，精品推薦和特價商品。在每個欄目中添加一個DataList控件，用來顯示對應(yīng)的商品，并設(shè)置相應(yīng)的屬性，如圖10-9所示。 設(shè)置完成后，單擊DataList控件的任務(wù)快捷菜單，選擇【編輯模板】選項(xiàng)，如圖10-10

9、所示。 在模板編輯窗口中，對ItemTemplate進(jìn)行編輯，具體效果如圖10-11所示。下一頁返回上一頁項(xiàng)目十在線購物系統(tǒng) 編輯ItemTemplate完成后，返回到默認(rèn)頁面，此時頁面效果如圖10-12所示。 以同樣的方式完成其他兩個欄目的DataList設(shè)置。完成頁面的前臺設(shè)計(jì)部分后，首先添加頁面載入代碼，實(shí)現(xiàn)DataList的數(shù)據(jù)綁定。 其次，添加DataList數(shù)據(jù)項(xiàng)模板中的【添加到購物車】按鈕的事件綁定。 對于顯示商品詳細(xì)信息按鈕，通過在模板中定義鏈接的方式來定義。 最終默認(rèn)頁面運(yùn)行效果如圖10-13所示。下一頁返回上一頁項(xiàng)目十在線購物系統(tǒng)2.會員注冊“Register.aspx”

10、會員注冊頁面也使用了母版頁，主要實(shí)現(xiàn)用戶在線注冊為會員，運(yùn)行效果如圖10-14所示。 在新會員注冊過程中，首先對用戶輸入的內(nèi)容進(jìn)行驗(yàn)證，是否符合指定格式。3.購買商品“Buy.aspx” 會員如果實(shí)現(xiàn)在線購買商品，必須登錄成功后方可進(jìn)行購物。具體的購物流程圖如圖10-15所示。下一頁返回上一頁項(xiàng)目十在線購物系統(tǒng) 當(dāng)會員單擊【購買商品】按鈕，此時將顯示商品的詳細(xì)信息，并接受會員輸入購買商品的數(shù)量，如圖10-16所示。 對于購物車的實(shí)現(xiàn)，將會員購買的商品首先放入一個DataTable中，在將這個DataTable放入Session中，會員不斷更改購物車中的商品信息，此時將更新DataTable中的

11、商品信息，并將DataTable與GridView控件進(jìn)行綁定。 會員輸入完產(chǎn)品數(shù)量后，單擊【加入購物車】按鈕，此時將先判斷用戶輸入的數(shù)量和此商品的所有數(shù)量進(jìn)行比較，如果輸入商品的數(shù)量大于商品的所有數(shù)量，此時將提示會員，否則將商品放入購物車。 會員在沒有結(jié)賬之前，可以對選擇的商品進(jìn)行刪除，此時只是從DataTable中刪除商品信息，刪除后重新綁定GridView。下一頁返回上一頁項(xiàng)目十在線購物系統(tǒng) 如果需要清空購物車，只需要將Session會話中的購物車對象設(shè)置為null，然后重新綁定GridView即可。 最后當(dāng)會員結(jié)賬時，單擊【結(jié)賬】按鈕，系統(tǒng)首先驗(yàn)證會員的賬戶余額，如果余額不足，則購物失

12、敗，然后驗(yàn)證用戶選擇的商品數(shù)量和現(xiàn)有的商品數(shù)量進(jìn)行比較，如果現(xiàn)有的數(shù)量小于會員購買的數(shù)量，將會員購買的數(shù)量修改為商品現(xiàn)有的數(shù)量。下一頁返回上一頁項(xiàng)目十在線購物系統(tǒng)4.查看購物清單“MyCartList.aspx” 會員只要登錄系統(tǒng)，就可以查詢到會員的歷次購物清單及明細(xì)，點(diǎn)擊【查看購物清單】鏈接，則顯示該會員的所有購物清單，如果需要查看對應(yīng)的明細(xì)，直接點(diǎn)擊【詳細(xì)】鏈接即可，如圖10-17所示。 購物清單MyCartList.aspx的頁面使用了MasterPage.master母版頁，在母版頁的內(nèi)容區(qū)域添加一個GridView控件，用來顯示會員的購物清單。下一頁返回上一頁項(xiàng)目十在線購物系統(tǒng)5.在

13、線充值“Account.aspx” 在線充值主要實(shí)現(xiàn)增加會員的賬戶金額，當(dāng)然在實(shí)際的運(yùn)作過程中應(yīng)該使用其他的方式來代替此功能，例如網(wǎng)上銀行轉(zhuǎn)賬。此頁面使用了MasterPage.master母版頁，在母版頁的內(nèi)容區(qū)域添加輸入金額的輸入框，充值按鈕和其他的文字信息。具體效果如圖10-18所示。6.在線留言“GuestBook.aspx” 如果用戶在購物過程中有一些建議，可以直接在線留言，具體效果如圖10-19所示。7.商品詳細(xì)信息“Show.aspx” 在需要瀏覽商品詳細(xì)信息時，直接單擊【Show】按鈕，具體效果如圖10-20所示。下一頁返回上一頁項(xiàng)目十在線購物系統(tǒng)8.后臺商品分類管理“Clas

14、s.aspx” 后臺商品分類管理主要對分類的增加，刪除和修改操作，前臺頁面布局如圖10-21所示。9.后臺商品管理“Manager.aspx” 后臺商品管理主要是對目前在線商品信息進(jìn)行修改，通過GridView綁定SqlDataSource數(shù)據(jù)源進(jìn)行數(shù)據(jù)顯示和分頁，具體的前臺頁面布局如圖10-22所示。10.后臺商品添加“GoodsAdd.aspx” 后臺商品添加主要是添加新的上線商品，包括了商品的基本信息和圖片信息，前臺布局如圖10-23所示。 管理員在添加新商品時，首先對商品的一些信息進(jìn)行驗(yàn)證，像產(chǎn)品名稱，市場價格等。下一頁返回上一頁項(xiàng)目十在線購物系統(tǒng)11.后臺會員信息管理“Custome

15、r.aspx” 管理員可以瀏覽會員信息，并具有刪除會員信息的權(quán)限，通過GridView綁定SqlDataSource數(shù)據(jù)源進(jìn)行數(shù)據(jù)顯示和分頁，具體的前臺頁面布局如圖10-24所示。12.留言信息管理“GuestBook.aspx” 管理員可以瀏覽所有的留言信息，并具有刪除留言的權(quán)限，通過GridView綁定SqlDataSource數(shù)據(jù)源進(jìn)行數(shù)據(jù)顯示和分頁，具體的前臺頁面布局如圖10-25所示。下一頁返回上一頁項(xiàng)目十在線購物系統(tǒng)【系統(tǒng)的主題樣式】1.外觀文件 系統(tǒng)的外觀文件中，只是對Web服務(wù)器Button控件進(jìn)行了定義，具體代碼如下所示。2.樣式文件，具體代碼見課本程序清單10-27樣式文件返回上一頁表10-1 UserInfo表結(jié)構(gòu)返回表10-2 Category表結(jié)構(gòu)返回表10-3 Product表結(jié)構(gòu)返回表10-4 UserOrder表結(jié)構(gòu)返回表10-5 OrderDetail表結(jié)構(gòu)返回表10-6 GuestBook表結(jié)構(gòu)返回圖10-1系統(tǒng)邏輯功能結(jié)構(gòu)圖返回圖10-2表關(guān)系圖返回圖10-3創(chuàng)建視圖返回圖10-4會員購物匯總視圖返回圖10-5創(chuàng)建Web用戶控件返回圖10-6配置DataList屬性返回圖10-7文件上傳組件返回圖10-8模板頁面布局返回圖10