建站之制作自己的電子商務(wù)網(wǎng)站

本節(jié)將模擬京東網(wǎng)建立一個(gè)電子商務(wù)網(wǎng)站——龍馬商城。網(wǎng)站分為前臺管理和后臺管理。前臺管理面向用戶，包括瀏覽商品、查詢商品、購物車、用戶維護(hù)等功能；后臺管理是提供給管理員的，其中包括商品管理、用戶管理、訂單管理等。

24.2.1 需求分析

1. 會員注冊：提供瀏覽者注冊功能，注冊之后可以在網(wǎng)站選購商品到購物車，否則只能瀏覽商品信息而無法下訂單。

2. 商品信息瀏覽：網(wǎng)站的首頁列出所有商品類別列表，同時(shí)顯示出部分特價(jià)商品和新上架商品。

3. 根據(jù)商品訂購信息展示熱賣商品：根據(jù)購買者下訂單的情況，展示出當(dāng)前網(wǎng)站中最暢銷的商品信息。

4. 購物車功能：已登錄的會員選中的商品都將暫時(shí)存放在購物車中，可通過查看購物車修改購買數(shù)量。

5. 首頁顯示公告和新聞：在購物網(wǎng)站的首頁按照時(shí)間錄入先后順序顯示最近的公告和新聞。

6. 訂單管理：自動生成訂單，用戶可以查看自己的訂單。

24.2.2 配置分析

系統(tǒng)安裝IIS服務(wù)器，系統(tǒng)提供了一個(gè)默認(rèn)網(wǎng)站，在這個(gè)默認(rèn)網(wǎng)站中系統(tǒng)已提供了一些基本的站點(diǎn)文件。

并將站點(diǎn)文件放到默認(rèn)網(wǎng)站的主目錄下。如果沒有改動，IIS默認(rèn)網(wǎng)站主目錄的位置是在Windows Server 2003 安裝盤根目錄下的“Intepub\wwwroot”下，而系統(tǒng)默認(rèn)的主頁文件名為“iisstart. htm”，當(dāng)然這些都是可以根據(jù)需要再做更改的。更改的方法是在“默認(rèn)網(wǎng)站”上單擊鼠標(biāo)右鍵，然后在出現(xiàn)的快捷菜單上選擇【屬性】命令，在這個(gè)對話框中就可以對其中的各項(xiàng)進(jìn)行詳細(xì)設(shè)置了。

24.2.3 網(wǎng)站制作步驟

1. 數(shù)據(jù)庫設(shè)計(jì)⑴ 管理員表。

⑵ 用戶表。

⑶ 商品信息表。

⑷ 商品大類信息表。

⑸ 新聞表。

⑹ 訂單表。

⑺ 訂單明細(xì)信息表。

⑻ 商品大類信息。

2. 功能模塊設(shè)計(jì)在電子商務(wù)網(wǎng)站的首頁中，最上方是導(dǎo)航區(qū)，包括會員管理、登錄、搜索；導(dǎo)航區(qū)下面是商品分類列表和網(wǎng)站公告、新聞、促銷活動、新品上市、熱賣商品、特價(jià)促銷、重點(diǎn)推薦等模塊。電子商務(wù)網(wǎng)站的首頁如下圖所示。

⑴ 購物車模塊的實(shí)現(xiàn)。獲取購買數(shù)量，將商品ID和購買數(shù)量傳遞給后臺進(jìn)行處理，依據(jù)后臺返回結(jié)果進(jìn)行處理；如果加入購物車成功，轉(zhuǎn)至購物車頁面；如果返回未登錄標(biāo)記，給出提示，轉(zhuǎn)至登錄頁面；其他錯(cuò)誤，給出提示。購物車頁面如下圖所示。

加入購物車的實(shí)現(xiàn)代碼如下：

01　　/* add cart */02　function addToCart（productId）{03　var buyCount = $（'#buyCount'）.val（）;//獲取購買數(shù)量

var url =　'addtocart.action?productId='+productId+'buyCount='+bu04yCount;//加入購物車后臺 url05　$.getJSON（url, {'random':Math.random（）},　

function（data）{06　　　　　if（data.done）　{

07　　　　　　　　　　　location.href="myCart.action";　//加入購物車成功，轉(zhuǎn)至購物車頁面

08　　　}09　　else　{10　　　　　　if（data.notLogin）{//未登錄，給出提示，轉(zhuǎn)至登錄頁面

11　　　alert（'請登錄 '）;
12　　window.location =　'login.action';
13　　　　　return;
14　　　　}15　　　alert（data.msg）;//其他錯(cuò)誤，給出提示

16　　　}17　　}）;
18　}

⑵ 提交訂單結(jié)算模塊。進(jìn)入購物車后單擊【去結(jié)算】按鈕進(jìn)行結(jié)算，結(jié)算時(shí)需要生成訂單，訂單內(nèi)容除包括商品信息外還需要有收貨人信息、配送方式、付款方式、發(fā)票信息等，如下圖所示。

提交訂單結(jié)算模塊的代碼如下。

01　/* 生成訂單 */02 MyCart.createOrder =　function（）{

03　　　if（totalMoney==0）{04　　　　//alert（'購物車中暫無商品 '）;
05　　　　//return;
06　　}07　var addressId = $（"#addressId"）.val（）;
08　var　fapiaoTaitou = $（"#fapiaoTaitou"）.val（）;
09　var　fuyan = $（'#fuyan'）.val（）;
10　var payType= $（'input:radio[name="payType"]:checked'）.
val（）;
11　　　if（addressId==""）{12　　　　　if（ !checkForm（））{13　　　　return false;
14　　　}15　　alert（'請先確認(rèn)收貨地址 '）;
16　　　return false;
17　　}

18　else if（payType==''）{19　　alert（'請選擇支付方式 '）;
20　　　return false;
21　　}22　else if（$.trim（fuyan）.length>100）{23　　alert（'訂單附言不能超過 100個(gè)字 '）;
24　　$（'#fuyan'）.focus（）;
25　　　return false;
26　　}27　var scode =　"";
28　scode = $（'#scode'）.val（）;
29　　　if（$.trim（scode）==""　||　isNaN（scode））{30　　alert（'請輸入計(jì)算結(jié)果（阿拉伯?dāng)?shù)字如 123）'）;
31　　$（'#scode'）.val（''）;
32　　$（'#scode'）.focus（）;
33　　　return false;

34　　}35　var url =　'createCrmOrder.action';
36　　　if（$（'#productType'）.val（）=='2'）{37　　url =　'createCrmOrder.action';
38　　}39　$（"#btnDiv"）.hide（）;
40　$（'#suc'）.html（'<img src="images/load.gif"/>正在提交訂單，請稍等 ...'）;
41　var　fapiao = 0;
42　　　if（document.getElementById（'fapiao1'）.checked）{43　　　　fapiao = 1;
44　　}45　$.getJSON（url,{'fuyan':fuyan,'payType':payType,'addressId':
addressId,46　　　'fapiao':fapiao,'fapiaoTaitou':fapiaoTaitou,47　　　'scode':scode,'random':Math.
random（）},function（data）{

48　　　　　if（data.done）{49　　　　　　if（data.msg=="-2"）{50　　　alert（"商品數(shù)量不足，無法訂購！ "）;
51　　　$（'#suc'）.html（'商品數(shù)量不足，無法訂購！ '）;
52　　　$（"#btnDiv"）.show（）;
53　　　　　return false;
54　　　　}55　　　　　　if（data.needPay）{56　　　$（'#suc'）.html（'訂單提交成功，正轉(zhuǎn)向支付頁面。'）;
57　　　window.location.href=basePath+'pay.action?
id='+data.msg;
58　　　　　return;
59　　　　}60　　　else{61　　　$（'#suc'）.html（'訂單提交成功，將轉(zhuǎn)至我的訂單頁面。'）;

62　　　w indow. locat ion.href=basePath+ 'manage/
myOrderCrm.action';
63　　　　　return;
64　　　　}65　　　　　/*66　　　$（'#suc'）.html（'訂單提交成功，將轉(zhuǎn)至我的訂單頁面。'）;
67　　window.location.href='manage/myOrder.action';
68　　　　*/69　　　　return;
70　　　}71　　else{72　　　var errorMsg =　'';
73　　　　　　if（data.msg=='-1'）{74　　　errorMsg =　'登錄超時(shí)，請重新登錄 ';
75　　　　}76　　　else if（data.msg=='-4'）{

77　　　alert（'您好，該商品限制同一賬號、同一個(gè)手機(jī)號碼只能提交一個(gè)訂單！您可以邀請好友一起秒殺！ '）;
78　　　　errorMsg =　'您好，該商品限制同一賬號、同一個(gè)手機(jī)號碼只能提交一個(gè)訂單！您可以邀請好友一起秒殺！ ';
79　　　　}80　　　else if（data.msg=='-5'）{81　　　alert（'您好，請輸入驗(yàn)證碼！ '）;
82　　　errorMsg =　'您好，請輸入驗(yàn)證碼！ ';
83　　　　}84　　　else if（data.msg=='-6'）{85　　　alert（'您好，您輸入的驗(yàn)證碼不正確！ '）;
86　　　errorMsg =　'您好，您輸入的驗(yàn)證碼不正確！ ';
87　　　$（'#scode'）.val（''）;
88　　　genBuyCode（）;
89　　　$（'#scode'）.focus（）;
90　　　　}91　　　else{

92　　　alert（data.msg）;
93　　　errorMsg = data.msg;
94　　　　}95　　　$（'#suc'）.html（'<font color=red>訂單提交出錯(cuò) !'+errorMsg+'</font>'）;
96　　　$（"#btnDiv"）.show（）;
97　　　}98　　}）;
99　}

• 建站
• 電子商務(wù)