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

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

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　}

• 建站
• 电子商务