建站之制作自己的電子商務(wù)網(wǎng)站
本節(jié)將模擬京東網(wǎng)建立一個電子商務(wù)網(wǎng)站——龍馬商城。網(wǎng)站分為前臺管理和后臺管理。前臺管理面向用戶,包括瀏覽商品、查詢商品、購物車、用戶維護等功能;后臺管理是提供給管理員的,其中包括商品管理、用戶管理、訂單管理等。
24.2.1 需求分析
1. 會員注冊:提供瀏覽者注冊功能,注冊之后可以在網(wǎng)站選購商品到購物車,否則只能瀏覽商品信息而無法下訂單。
2. 商品信息瀏覽:網(wǎng)站的首頁列出所有商品類別列表,同時顯示出部分特價商品和新上架商品。
3. 根據(jù)商品訂購信息展示熱賣商品:根據(jù)購買者下訂單的情況,展示出當前網(wǎng)站中最暢銷的商品信息。
4. 購物車功能:已登錄的會員選中的商品都將暫時存放在購物車中,可通過查看購物車修改購買數(shù)量。
5. 首頁顯示公告和新聞:在購物網(wǎng)站的首頁按照時間錄入先后順序顯示最近的公告和新聞。
6. 訂單管理:自動生成訂單,用戶可以查看自己的訂單。
24.2.2 配置分析
系統(tǒng)安裝IIS服務(wù)器,系統(tǒng)提供了一個默認網(wǎng)站,在這個默認網(wǎng)站中系統(tǒng)已提供了一些基本的站點文件。
并將站點文件放到默認網(wǎng)站的主目錄下。如果沒有改動,IIS默認網(wǎng)站主目錄的位置是在Windows Server 2003 安裝盤根目錄下的“Intepub\wwwroot”下,而系統(tǒng)默認的主頁文件名為“iisstart. htm”,當然這些都是可以根據(jù)需要再做更改的。更改的方法是在“默認網(wǎng)站”上單擊鼠標右鍵,然后在出現(xiàn)的快捷菜單上選擇【屬性】命令,在這個對話框中就可以對其中的各項進行詳細設(shè)置了。
24.2.3 網(wǎng)站制作步驟
1. 數(shù)據(jù)庫設(shè)計⑴ 管理員表。
⑵ 用戶表。
⑶ 商品信息表。
⑷ 商品大類信息表。
⑸ 新聞表。
⑹ 訂單表。
⑺ 訂單明細信息表。
⑻ 商品大類信息。
2. 功能模塊設(shè)計在電子商務(wù)網(wǎng)站的首頁中,最上方是導航區(qū),包括會員管理、登錄、搜索;導航區(qū)下面是商品分類列表和網(wǎng)站公告、新聞、促銷活動、新品上市、熱賣商品、特價促銷、重點推薦等模塊。電子商務(wù)網(wǎng)站的首頁如下圖所示。
⑴ 購物車模塊的實現(xiàn)。獲取購買數(shù)量,將商品ID和購買數(shù)量傳遞給后臺進行處理,依據(jù)后臺返回結(jié)果進行處理;如果加入購物車成功,轉(zhuǎn)至購物車頁面;如果返回未登錄標記,給出提示,轉(zhuǎn)至登錄頁面;其他錯誤,給出提示。購物車頁面如下圖所示。
加入購物車的實現(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);//其他錯誤,給出提示
16 }17 });
18 }
⑵ 提交訂單結(jié)算模塊。進入購物車后單擊【去結(jié)算】按鈕進行結(jié)算,結(jié)算時需要生成訂單,訂單內(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('請先確認收貨地址 ');
16 return false;
17 }
18 else if(payType==''){19 alert('請選擇支付方式 ');
20 return false;
21 }22 else if($.trim(fuyan).length>100){23 alert('訂單附言不能超過 100個字 ');
24 $('#fuyan').focus();
25 return false;
26 }27 var scode = "";
28 scode = $('#scode').val();
29 if($.trim(scode)=="" || isNaN(scode)){30 alert('請輸入計算結(jié)果(阿拉伯數(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 = '登錄超時,請重新登錄 ';
75 }76 else if(data.msg=='-4'){
77 alert('您好,該商品限制同一賬號、同一個手機號碼只能提交一個訂單!您可以邀請好友一起秒殺! ');
78 errorMsg = '您好,該商品限制同一賬號、同一個手機號碼只能提交一個訂單!您可以邀請好友一起秒殺! ';
79 }80 else if(data.msg=='-5'){81 alert('您好,請輸入驗證碼! ');
82 errorMsg = '您好,請輸入驗證碼! ';
83 }84 else if(data.msg=='-6'){85 alert('您好,您輸入的驗證碼不正確! ');
86 errorMsg = '您好,您輸入的驗證碼不正確! ';
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>訂單提交出錯 !'+errorMsg+'</font>');
96 $("#btnDiv").show();
97 }98 });
99 }
如對本文有疑問,請?zhí)峤坏浇涣髡搲?,廣大熱心網(wǎng)友會為你解答!! 點擊進入論壇