基于ASP.NET的小型B2C電子商務(wù)網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

盧桂榮++姜明

摘要：隨著電子商務(wù)技術(shù)的蓬勃發(fā)展，越來(lái)越多的企業(yè)通過(guò)B2C商務(wù)網(wǎng)站為消費(fèi)者提供產(chǎn)品和服務(wù)。文章詳細(xì)介紹了小型B2C商務(wù)網(wǎng)站的系統(tǒng)架構(gòu)、前臺(tái)和后臺(tái)功能，以及數(shù)據(jù)庫(kù)的設(shè)計(jì)和實(shí)現(xiàn)過(guò)程。重點(diǎn)講解了購(gòu)物車、后臺(tái)訂單管理功能的實(shí)現(xiàn)。網(wǎng)站開(kāi)發(fā)采用ASP.NET 技術(shù)和C# 語(yǔ)言，SQL Server 2005 作為后臺(tái)數(shù)據(jù)庫(kù)，Visual Studio 2005 作為開(kāi)發(fā)工具，實(shí)現(xiàn)小型B2C商務(wù)網(wǎng)站的一般功能。

關(guān)鍵詞：ASP.NET；商務(wù)網(wǎng)站；SQL Server2005；Visual Studio 2005；購(gòu)物車；B2C

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）11-0286-04

Abstract： With the development of E-Commerce，more and more companies supply products and services on B2C E-Commerce Website. This paper provides detailed system architecture， foreground function and background function， giving database designing as well as realization. It also explains how to realize the function of Shopping Cart and order management in detail. The website adopts ASP.NET technology and C# language， using SQL Server 2005 as the background database and Visual Studio 2005 as development tool， realizing the general function of a Small B2C E-Commerce Website.

Key words：ASP.NET； e-commerce website； SQL Server2005； Visual Studio 2005；shopping cart； B2C

1 背景

隨著計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)的迅猛發(fā)展，電子商務(wù)技術(shù)發(fā)展日新月異。 按照交易對(duì)象不同，電子商務(wù)分為ABC、B2B、B2C、C2C、B2M、M2C、B2A、C2A、O2O 等多種形式[1]。B2C簡(jiǎn)稱為“商對(duì)客”，也就是通常說(shuō)的直接面向消費(fèi)者銷售產(chǎn)品和服務(wù)的商業(yè)零售模式，企業(yè)通過(guò)互聯(lián)網(wǎng)為消費(fèi)者提供一個(gè)新型的購(gòu)物環(huán)境——網(wǎng)上商店，消費(fèi)者通過(guò)網(wǎng)絡(luò)在網(wǎng)上購(gòu)物、網(wǎng)上支付等 [2]?！熬W(wǎng)上商店”就是我們說(shuō)的商務(wù)網(wǎng)站。企業(yè)可以在商務(wù)網(wǎng)站上展示商品信息、企業(yè)信息、新聞簡(jiǎn)訊等，只要買家注冊(cè)、登錄，就可以下訂單，輕松實(shí)現(xiàn)在線支付，賣家通過(guò)物流配送系統(tǒng)對(duì)買家商品進(jìn)行發(fā)貨。這種虛擬的在線商務(wù)網(wǎng)站打破了傳統(tǒng)的線下交易過(guò)程，使買賣雙方變得更加輕松、便捷，深受年輕人的青睞。

2 系統(tǒng)分析

當(dāng)今流行的網(wǎng)上商城系統(tǒng)不僅僅是把商品展示的內(nèi)容擺放在網(wǎng)站上那么簡(jiǎn)單，更要包含更多漂亮的設(shè)計(jì)元素，給予瀏覽者更多的視覺(jué)享受[3]。本文討論的小型B/C商務(wù)網(wǎng)站主要考慮買家和商家兩個(gè)方面的需求：

買家：買家打開(kāi)商城首頁(yè)，可以瀏覽商品類別信息、商品信息，查看新聞動(dòng)態(tài)，銷售排行榜。買家注冊(cè)后成為會(huì)員，登錄后方可下訂單；同時(shí)買家還可以修改自身注冊(cè)信息，查看訂單信息。

商家：商家登錄后臺(tái)后可以管理買家信息、商品類別信息、商品信息、訂單信息，以實(shí)現(xiàn)發(fā)貨處理。

如下圖是小型B/C商務(wù)網(wǎng)站前臺(tái)和后臺(tái)功能框圖。

3 系統(tǒng)設(shè)計(jì)

3.1 系統(tǒng)結(jié)構(gòu)

系統(tǒng)采用B/S架構(gòu)，主要解決各種資源和信息在Web上的錄入、發(fā)布、查詢和遠(yuǎn)程調(diào)用。B/S 是由客戶端瀏覽器、Web 服務(wù)器和數(shù)據(jù)庫(kù)服務(wù)器組成的三層結(jié)構(gòu)[4]，如圖3所示。

3.2 開(kāi)發(fā)技術(shù)

系統(tǒng)采用ASP.NET動(dòng)態(tài)網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)，前臺(tái)開(kāi)發(fā)工具為Adobe Dreamweaver CS6、Visual Studio2005，后臺(tái)數(shù)據(jù)庫(kù)采用SQL server2005。。

3.3 數(shù)據(jù)庫(kù)設(shè)計(jì)

數(shù)據(jù)庫(kù)設(shè)計(jì)是軟件開(kāi)發(fā)中非常重要的一個(gè)環(huán)節(jié)，數(shù)據(jù)庫(kù)設(shè)計(jì)的好壞直接影響軟件的性能和質(zhì)量。我們嚴(yán)格遵循數(shù)據(jù)庫(kù)設(shè)計(jì)的步驟，根據(jù)需求分析界定的軟件功能和數(shù)據(jù)流程，首先設(shè)計(jì)出數(shù)據(jù)庫(kù)的概念模型，概念模型用全局ER圖表示，如圖4所示。

在全局ER圖中，我們抽象出商品類別、商品、訂單、會(huì)員、新聞、管理員共計(jì)六個(gè)實(shí)體，實(shí)體之間的聯(lián)系、實(shí)體和聯(lián)系的屬性已經(jīng)在上圖中標(biāo)出。接下來(lái)將ER圖轉(zhuǎn)化成某個(gè)DBMS支持的數(shù)據(jù)模型，并對(duì)其優(yōu)化。最終ER圖轉(zhuǎn)化的關(guān)系模式如下所示：

管理員表（管理員編號(hào)，管理員名稱，密碼）

商品類別表（類別編號(hào)，類別名稱）

商品表（商品編號(hào)，商品名稱，商品單價(jià)，商品圖片，類別編號(hào)，上架日期，商品描述）

新聞表（新聞編號(hào)，新聞標(biāo)題，內(nèi)容，圖片，發(fā)布日期）

會(huì)員表（會(huì)員編號(hào)，會(huì)員昵稱，密碼，性別，真實(shí)姓名，聯(lián)系電話，email，地址，郵編，郵編，注冊(cè)日期）

訂單表（訂單編號(hào)，會(huì)員編號(hào)，訂單總金額，訂單日期，訂單狀態(tài)，支付方式，是否付款，收貨人真實(shí)姓名，聯(lián)系電話，地址，郵編，email）

訂單明細(xì)（訂單編號(hào)，商品編號(hào)，購(gòu)買商品數(shù)量，商品總價(jià)格）

購(gòu)物車表（購(gòu)買編號(hào)，會(huì)員編號(hào)，商品編號(hào)，商品數(shù)量，總價(jià)格，購(gòu)買日期）

為了編程方便，我們將中文表名稱、中文字段全部用英文名稱表示，并在SQL Server2005中完成了建表。其中的表結(jié)構(gòu)如下圖所示：

這里重點(diǎn)說(shuō)明一下購(gòu)物車表Tb_BuyInfo的作用。這張表在編程實(shí)現(xiàn)的時(shí)候作用很大，它用來(lái)臨時(shí)存儲(chǔ)會(huì)員的購(gòu)物信息。會(huì)員登錄后，選擇需要的商品添加到購(gòu)物車中，購(gòu)物車中的商品信息記入此表，訂單提交后購(gòu)物記錄從該表中刪除，因此它相當(dāng)于一個(gè)臨時(shí)的存儲(chǔ)空間。此表詳細(xì)用法在后面購(gòu)物車實(shí)現(xiàn)的時(shí)候有詳細(xì)介紹。

SQL Server2005中生成表之間的關(guān)系圖，如下圖13所示：

4 系統(tǒng)實(shí)現(xiàn)

4.1 界面設(shè)計(jì)

除了滿足既定的功能需求外，我們還要兼顧界面美觀、好的用戶體驗(yàn)等多個(gè)方面。界面美觀可以給買家更多的視覺(jué)上的享受，延長(zhǎng)買家在網(wǎng)頁(yè)的停留時(shí)間，提高轉(zhuǎn)化率。

在欄目布局上主要考慮買家在購(gòu)物時(shí)希望能夠在最短的時(shí)間內(nèi)鎖定目標(biāo)范圍，提高購(gòu)物的便捷性。除了基本欄目（logo、導(dǎo)航、登錄、新聞、銷售排行、商品類別）外，針對(duì)無(wú)目的性的買家，大的折扣、優(yōu)惠信息、新產(chǎn)品等是抓住用戶心理的主要方法，因此，在首頁(yè)明顯位置展示非常有必要[5]。在配色上主要考慮使用明亮的顏色容易引起人類的注意，爭(zhēng)取在7秒鐘內(nèi)讓買家加深對(duì)商品的印象，提高購(gòu)物興趣。

4.2 前臺(tái)相關(guān)功能實(shí)現(xiàn)

系統(tǒng)開(kāi)發(fā)過(guò)程中用到了ASP.NET 中的ADO.NET數(shù)據(jù)庫(kù)訪問(wèn)技術(shù)。ADO.NET 是ASP.NET 應(yīng)用程序與數(shù)據(jù)庫(kù)進(jìn)行交互的一種技術(shù)，應(yīng)用程序可以通過(guò)ADO.NET 連接到各種數(shù)據(jù)源，并檢索、操作和更新數(shù)據(jù)。ADO.NE T中有幾個(gè)非常重要的操作SQL Server2005數(shù)據(jù)庫(kù)的對(duì)象，它們是SqlConnection、DataSet、SqlCommand、SqlDataAdapter。

考慮到程序的可維護(hù)性、擴(kuò)展性，所有開(kāi)發(fā)過(guò)程嚴(yán)格按照企業(yè)級(jí)開(kāi)發(fā)規(guī)范進(jìn)行，如程序書(shū)寫(xiě)中的變量命名、程序注釋、公共類編寫(xiě)等都必須嚴(yán)格把關(guān)。

商務(wù)網(wǎng)站前臺(tái)功能中非常重要的有會(huì)員注冊(cè)登錄模塊、商品展示模塊、商城新聞模塊、銷售排行榜模塊、購(gòu)物車模塊。其中購(gòu)物車模塊式前臺(tái)功能的核心，下面進(jìn)行詳細(xì)介紹。當(dāng)會(huì)員登錄后選擇自己喜歡的商品，加入購(gòu)物車后，點(diǎn)擊首頁(yè)中的“購(gòu)物車”按鈕，即可出現(xiàn)下圖。

在購(gòu)物車頁(yè)面中，買家可以修改購(gòu)物數(shù)量、刪除不喜歡的商品，可以單擊“繼續(xù)購(gòu)物”按鈕進(jìn)入首頁(yè)繼續(xù)購(gòu)物，還可以“清空購(gòu)物車”、“結(jié)賬”付款。購(gòu)物車中的商品展示使用GridView控件實(shí)現(xiàn)，在頁(yè)面的Page_Load（）事件中給控件初始化以綁定內(nèi)容，加載當(dāng)前登錄買家選購(gòu)的商品信息，該商品信息在買家單擊“購(gòu)買”按鈕時(shí)候已經(jīng)保存在購(gòu)物車表tb_BuyInfo中；同時(shí)，增加GridView控件的RowDeleting（）、RowEditing（）、RowUpdating（）三個(gè)事件，用來(lái)實(shí)現(xiàn)購(gòu)物車中商品的刪除、修改、更新功能。

購(gòu)物車實(shí)現(xiàn)是開(kāi)發(fā)過(guò)程中的難點(diǎn)，為此在編程的時(shí)候增加了訪問(wèn)數(shù)據(jù)庫(kù)的公共類DBHelper、購(gòu)物車公共類BuyCar。在DBHelper類中主要有如下方法：

1） GetConnStr（）：獲得數(shù)據(jù)庫(kù)連接字符串。

2） GetDataSet（string sql） ：由sql變量（select語(yǔ)句）得到DataSet類型查詢記錄集合。

3） ExecSql（string sql） ：執(zhí)行sql語(yǔ)句，主要是insert、update、delete語(yǔ)句。

4） GetReader（string sql） ：由select語(yǔ)句（sql）查詢得到SQLDataReader類型記錄集。

5） BindDDL（DropDownList ddlName， string sql） ：給dropdownlist控件綁定數(shù)據(jù)庫(kù)源。

6） FindValue（string TabName， string FieldName， string strVal） ：查找某值在某個(gè)表的某字段中是否出現(xiàn)過(guò)。

BuyCar類中主要有如下方法：

1） GetPriceByGoodsID（int GoodsID）：由商品編號(hào)得到商品單價(jià)。

2） AddShopCart（int GoodsID， float Price， int MemberID， int Num） ：向購(gòu)物車表tb_BuyInfo表中添加購(gòu)物信息。

3） TotalMoneyNum（int MemberID）：獲得當(dāng)前購(gòu)物用戶的所有購(gòu)物金額和購(gòu)買商品總數(shù)量，放在記錄集變量中返回。

4） DelShopCarByMemberID（int MemberID， int BuyID）：在tb_BuyInfo表中刪除指定會(huì)員、指定購(gòu)物編號(hào)的購(gòu)物記錄。

5） UpdateShopCarGoodsNum（int MemberId， int BuyID， int Num）：更新購(gòu)物車中對(duì)應(yīng)商品的數(shù)量，同時(shí)修改對(duì)應(yīng)商品的SumPrice，以及所有商品的總數(shù)量和總價(jià)格。

4.3 后臺(tái)管理功能實(shí)現(xiàn)

后臺(tái)管理功能包括會(huì)員管理、商品類別管理、商品管理、新聞管理、訂單管理等方面。其中訂單管理是重點(diǎn)也是難點(diǎn)，下面進(jìn)行詳細(xì)介紹。

訂單管理主要涉及訂單查詢、編輯、打印等幾個(gè)方面，如下圖15所示。管理員可以根據(jù)訂單編號(hào)、是否付款、是否發(fā)貨來(lái)查詢訂單信息，之后對(duì)訂單進(jìn)行編輯和查看；如果訂單沒(méi)有付款可以進(jìn)行編輯，單擊“編輯”按鈕進(jìn)入圖16所示的訂單修改頁(yè)面，在此頁(yè)面中可以修改訂單狀態(tài)，也可以打印訂單信息。

訂單管理頁(yè)面中的訂單信息展示使用的是GridView控件，在頁(yè)面的Page_Load（）事件中給控件初始化以綁定內(nèi)容。搜索按鈕的單擊事件，主要是拼接查詢字符串并根據(jù)查詢結(jié)果重新給GridView控件綁定新內(nèi)容。同時(shí)，給GridView控件增加RowEditing（）、RowDeleting（）方法，以實(shí)現(xiàn)訂單信息的編輯和刪除功能。

訂單修改頁(yè)面中，商品信息展示使用GridView控件，在頁(yè)面的Page_Load（）事件中給控件初始化以綁定內(nèi)容。另外，訂單信息、購(gòu)貨人信息、收貨人信息是使用表格布局實(shí)現(xiàn)的，根據(jù)當(dāng)前訂單編號(hào)的值查詢出相關(guān)信息并顯示出來(lái)?！按蛴∥臋n”功能使用客戶端JavaScript實(shí)現(xiàn)?！靶薷摹卑粹o的單擊事件中保存當(dāng)前訂單信息，主要是通過(guò)修改數(shù)據(jù)庫(kù)中訂單表實(shí)現(xiàn)，訂單明細(xì)表不受到影響 。

5 結(jié)束語(yǔ)

本文介紹了小型B/C電子商務(wù)網(wǎng)站的功能分析、數(shù)據(jù)庫(kù)設(shè)計(jì)、部分功能的編程實(shí)現(xiàn)。ASP.NET動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)技術(shù)使用簡(jiǎn)單，功能強(qiáng)大，開(kāi)發(fā)和執(zhí)行效率高，利用它可以很方便地開(kāi)發(fā)動(dòng)態(tài)的交互的、高性能的電子商務(wù)網(wǎng)站。

參考文獻(xiàn)：

[1] 電子商務(wù)[EB/OL]. http：//baike.baidu.com/view/757.htm.

[2] B2C[EB/OL].http：//baike.baidu.com/view/16398.htm.

[3] 董慧， 王海洋， 謝靜. B2C 電子商務(wù)網(wǎng)站設(shè)計(jì)[J]. 計(jì)算機(jī)與現(xiàn)代化， 2014（11）： 15.

[4] 李鵬海， 張鵬. 基于Internet 的高?？蒲泄芾硐到y(tǒng)的研究與開(kāi)發(fā)[J]. 天津理工大學(xué)學(xué)報(bào)， 2007， 23（5）： 37.

[5] 楊亞萍. 基于服務(wù)設(shè)計(jì)理念的B2C 電子商務(wù)網(wǎng)站設(shè)計(jì)[J]. 學(xué)術(shù)探討， 2014（9）： 44.