您现在的位置: 365建站网 > 365学习 > 建站之制作自己的电子商务网站的实例教程

建站之制作自己的电子商务网站的实例教程

文章来源:365jz.com     点击数:150    更新时间:2018-01-30 10:57   参与评论

建站之制作自己的电子商务网站

本节将模拟京东网建立一个电子商务网站——龙马商城。网站分为前台管理和后台管理。前台管理面向用户,包括浏览商品、查询商品、购物车、用户维护等功能;后台管理是提供给管理员的,其中包括商品管理、用户管理、订单管理等。

24.2.1 需求分析

1. 会员注册:提供浏览者注册功能,注册之后可以在网站选购商品到购物车,否则只能浏览商品信息而无法下订单。

2. 商品信息浏览:网站的首页列出所有商品类别列表,同时显示出部分特价商品和新上架商品。

3. 根据商品订购信息展示热卖商品:根据购买者下订单的情况,展示出当前网站中最畅销的商品信息。

4. 购物车功能:已登录的会员选中的商品都将暂时存放在购物车中,可通过查看购物车修改购买数量。

5. 首页显示公告和新闻:在购物网站的首页按照时间录入先后顺序显示最近的公告和新闻。

6. 订单管理:自动生成订单,用户可以查看自己的订单。

24.2.2 配置分析

系统安装IIS服务器,系统提供了一个默认网站,在这个默认网站中系统已提供了一些基本的站点文件。

并将站点文件放到默认网站的主目录下。如果没有改动,IIS默认网站主目录的位置是在Windows Server 2003 安装盘根目录下的“Intepub\wwwroot”下,而系统默认的主页文件名为“iisstart. htm”,当然这些都是可以根据需要再做更改的。更改的方法是在“默认网站”上单击鼠标右键,然后在出现的快捷菜单上选择【属性】命令,在这个对话框中就可以对其中的各项进行详细设置了。

24.2.3 网站制作步骤

1. 数据库设计⑴ 管理员表。

⑵ 用户表。

⑶ 商品信息表。

⑷ 商品大类信息表。

⑸ 新闻表。

⑹ 订单表。

⑺ 订单明细信息表。

⑻ 商品大类信息。

2. 功能模块设计在电子商务网站的首页中,最上方是导航区,包括会员管理、登录、搜索;导航区下面是商品分类列表和网站公告、新闻、促销活动、新品上市、热卖商品、特价促销、重点推荐等模块。电子商务网站的首页如下图所示。

⑴ 购物车模块的实现。获取购买数量,将商品ID和购买数量传递给后台进行处理,依据后台返回结果进行处理;如果加入购物车成功,转至购物车页面;如果返回未登录标记,给出提示,转至登录页面;其他错误,给出提示。购物车页面如下图所示。


加入购物车的实现代码如下:

01  /* add cart */02 function addToCart(productId){03 var buyCount = $('#buyCount').val();//获取购买数量

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"; //加入购物车成功,转至购物车页面

08   }09  else {10      if(data.notLogin){//未登录,给出提示,转至登录页面

11   alert('请登录 ');
12  window.location = 'login.action';
13     return;
14    }15   alert(data.msg);//其他错误,给出提示

16   }17  });
18 }

⑵ 提交订单结算模块。进入购物车后单击【去结算】按钮进行结算,结算时需要生成订单,订单内容除包括商品信息外还需要有收货人信息、配送方式、付款方式、发票信息等,如下图所示。


提交订单结算模块的代码如下。

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('请输入计算结果(阿拉伯数字如 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("商品数量不足,无法订购! ");
51   $('#suc').html('商品数量不足,无法订购! ');
52   $("#btnDiv").show();
53     return false;
54    }55      if(data.needPay){56   $('#suc').html('订单提交成功,正转向支付页面。');
57   window.location.href=basePath+'pay.action?
id='+data.msg;
58     return;
59    }60   else{61   $('#suc').html('订单提交成功,将转至我的订单页面。');

62   w indow. locat ion.href=basePath+ 'manage/
myOrderCrm.action';
63     return;
64    }65     /*66   $('#suc').html('订单提交成功,将转至我的订单页面。');
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 }

 

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (150人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------