网上商城—前台页面的设计与实现

1、目 录目 录1摘 要2引 言3第一章 程序开发的技术基础41.1 开发平台与运行环境41.2 html简介41.3 asp介绍41.4 dreamwaver简介5第二章 网上购物系统的需求分析72.1 消费者的需求分析72.2 企业的需求分析8第三章 网上购物系统结构分析与设计103.1系统流程分析103.2系统功能分析113.3系统功能结构123.4 前台模块详细功能描述13第四章 前台基本功能模块的具体实现144.1 前台商品分类展示页面实现144.1.1 首页功能概述144.1.2 模板的设计实现154.1.3首页栏目的设计实现164.1.4商品分类页面的设计与实现174.2 商品展示模

2、块194.3 会员管理模块214.3.1 会员管理模块概述214.3.2 会员注册的实现过程214.3.3 会员登陆的实现过程224.3.4会员资料修改的实现过程224.4 购物车模块234.4.1 购物车模块概述234.4.2添加商品到购物车的实现过程234.4.3查看购物车的实现过程244.4.4 修改购物车中商品数量的实现过程244.4.5删除购物车内商品的实现过程254.5 收银结算模块254.6 订单查询管理模块274.7 留言板模块28总结与展望29参考文献30致 谢30网上商城前台页面的设计与实现摘要：近年来，国内电子商务发展态势良好，为b2c网上购物系统提供了广阔的发展空间。如

3、何设计与实现能够充分满足消费者跟企业需求的优质网上购物系统，有着广泛的市场前景和实际的应用价值。b2c网上购物系统由前台系统与后台系统构成。前台系统是用户实现购物流程的操作界面，为用户提供：商品分类查询、会员管理、购物车、收银台、订单查询管理等等功能。系统基于信息管理系统(mis)思想，以dreamwaver作为主要开发工具，采用asp技术实现动态交互。关键词：电子商务；b2c网上购物系统；aspdesign and implementation of front-stage for b2c e-shopping system abstract: in recent years,domesti

4、c e-commerce has witnessed a flourishing trend, offering a broad developing room to b2c e-shopping system.how to design and implement a high-quality system,which can perfectly meet the needs of consumers and companies,has a broad market prospect and practical application value.b2c e-shopping system

5、consists of front-stage system and back-stage system.front-stage system is to provide the users with an interface to accomplish the shopping process.front-stage system includes: product categories,member management, shopping cart, checkout,query and management of orders,etc.the system is based on th

6、e thought of management information system (mis),dreamweaver is used as the main development tools,asp is used to implement the dynamic interaction.keywords：e-commerce ;b2c e-shopping system ; asp引 言网上购物系统是一种具有交互功能的商业信息系统，基于浏览器/服务器应用方式，实现消费者网上购物、商户之间网上交易和在线电子支付的一种新型的商业运营模式。它向用户提供静态和动态两类信息资源，其强大的交互功能

7、，使商家和用户方便的传递信息，完成电子贸易或edi交易，实现文档与资金的无纸化交换。近年来，国内整体电子商务发展呈现良好态势，电子支付，电子认证，以及现代物流等等之前制约我国电子商务发展的一些条件得到了很好的改善与发展，更加促进了国内电子商务的发展，b2c模式的网上购物系统更是一派蓬勃景象。本文研究的网上购物系统所设计实现的正是属于b2c的电子商务模式，为企业与消费者提供信息发布与商品订购的电子商务平台。在概念上属于狭义的电子商务（ec）,即电子交易，为零售企业提供信息化管理，建立b2c的网络销售系统。全文以自己对于b2c模式电子商务的一些理解，利用自身掌握的理论知识与技术，对b2c网上商城基

8、于消费者与企业的不同需求进行分析，设计与需求所对应的功能并且实现。 曾经网络上流行过这么一句话：“中国每天有成千上万的网站建立，同时也有成千上万的网站关闭。”这是没有依据的，网上购物系统也只能算是其中的一个组成部分而已。但是我觉得，在某种意义上体现了国内电子商务领域的现状。当前情况下，什么样的网上购物系统才能更好的迎合消费者的需求，为消费者提供真正优质的安全、快捷、舒适、满足客户不同需求的网络购物环境；为企业提供真正优质的稳定、方便、高效率，高效益的网络营销平台，并且能够适应当前电子商务发展大环境。正是本文要讨论与研究的方向和目的。第一章 程序开发的技术基础1.1开发平台与运行环境考虑到本系统

9、的性能要求和现有的条件，选择了windows xp中文版作为开发、测试和运行的平台。因为windows操作系统是目前应用最广的操作系统。它以全新的图形界面，简单快捷的操作方式，支持多媒体功能等特点而成为软件发展的流行趋势。运行环境选择asp与iis和access2003数据库，在实现过程中使用到了photoshop,dreamweaver,fireworks，flash等工具。1.2 html简介html(hypertext markup language,超文本标记语言)，是创建网页的计算机语言。所谓网页实际上就是一个html文档。文档内容有文本与html标记组成。浏览器负责解释html文档

10、中的标记，将其显示成网页。html文档是一个普通的文本文件，不包含任何与平台，程序有关的信息。因此html文档可以利用任何文本编辑器来方便的生成。运行html文档可在任何浏览器下进行并可在浏览器上查看网页的源代码。1.3 asp介绍1.3.1 asp概述asp是active server page的缩写，意为“动态服务器页面”。asp是微软公司开发的代替cgi脚本程序的一种应用,它可以与数据库和其它程序进行交互，是一种简单、方便的编程工具。asp的网页文件的格式是.asp，现在常用于各种动态网站中。 asp是一种服务器端脚本编写环境，可以用来创建和运行动态网页或web应用程序。asp网页可以包

11、含html标记、普通文本、脚本命令以及com组件等。利用asp可以向网页中添加交互式内容（如在线表单），也可以创建使用html网页作为用户界面的web应用程序。asp类似于html、script与cgi的结合体，但是其运行效率比cgi更高、程序编制也比html更方便且更有灵活性，程序安全及保密性比script好。asp不但可以包含html标签，也可以直接存取数据库及使用无限扩充的activex控件，因此在程序编制上要比html方便而且更富有灵活性。asp以html为基础，主体还是html代码，只是在需要asp动态产生的地方加入asp代码。asp的最终显示结果也是html代码，可准确控制asp的

12、输出结果。 1.3.2 asp的特点（1）asp可以和html或其它脚本语言(vbscript,javascript)相互嵌套。 （2）asp是一种在web服务器端运行的脚本语言，程序代码安全保密。 （3）asp以对象为基础，因此可以使用activex控件继续扩充其功能。 （4）asp内置ado组件，因此可以轻松的存取各种数据库。 （5）asp可以将运行结果以html的格式传送至客户端浏览器，因而可以适用与各种浏览器。1.3.3 asp的工作原理当浏览器向web服务器请求调用asp文件时，就启动了asp。浏览器将这个asp的请求（http请求）发送到iis，web服务器接受这个请求并调入正确的

13、asp文件，web服务器将这个文件发送到一个称为asp.dll的文件中。该文件负责获得一个asp文件并对该文件内所有服务器端的代码进行解析，他会在该文件中查找所有的脚本代码，将这些脚本代码发送到合适的脚本引擎（即脚本解释器），然后使用如vbscript等脚本语言进行解释。脚本代码的运行结果重新结合该asp文件中原有的其他文件如文本内容及html代码，web服务器将最终生成的页面发送到客户端的浏览器中进行显示。如果没有查找到任何脚本代码，则会通知iis直接将这些文件发送到客户端。若脚本指令中含有访问数据库的请求，就通过odbc与后台数据库连接，由数据库访问组件ado执行访问数据库操作，如下图所示

14、：浏览器web服务器（iis/pws）脚本引擎 ado对象各类odbc驱动程序数据库http请求 文件下载 图1.1 asp工作原理figure 1.1 working principle of asp1.4 dreamweaver简介dreamweaver是由在多媒体方面颇有建树的macromedia公司推出的可视化网页制作工具，它与flash、fireworks被合称为网页制作三剑客。dreamweaver主要用来制作网页文件，制作出来的网页兼容性比较好，制作效率也很高。1.4.1 dreamwaver的优点（1）最佳的制作效率dreamweaver可以用最快速的方式将fireworks，

15、freehand，或photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。dremweaver能与您喜爱的设计工具，如playback flash，shockwave和外挂模组等搭配，不需离开dremweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使dreamweaver自动开启firework或photoshop来进行编辑与设定图档的最佳化。 （2）网站管理 使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，dreamweaver 会自动更新所有连结

16、。使用支援文字、html码、html属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。 （3）无可比拟的控制能力 dreamweaver是唯一提供roundtrip html、视觉化编辑与原始码编辑同步的设计工具。它包含homesite和bbedit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。1.4.2 使用dreamwaver模板的好处dreamweaver模板是一种

17、特殊类型的文档，用于设计“固定的”页面布局；然后您便可以基于模板创建文档，创建的文档会继承模板的页面布局。设计模板时，可以指定在基于模板的文档中哪些内容是用户“可编辑的”。使用模板，模板创作者控制哪些页面元素可以由模板用户（如作家、图形艺术家或其它 web 开发人员）进行编辑。使用模板可以控制大的设计区域，以及重复使用完整的布局。如果要重复使用个别设计元素，如站点的版权信息或徽标，可以创建库项目。 使用模板可以一次更新多个页面。从模板创建的文档与该模板保持连接状态（除非您以后分离该文档）。可以修改模板并立即更新基于该模板的所有文档中的设计。第二章 网上购物系统的需求分析前面的内容简单论述了网上

18、购物系统研究的意义与目的（为什么做），以及用哪些工具与技术来设计实现（用什么做）的问题。下面就从消费者跟企业两个方面对网上购物系统进行功能需求的分析。探讨一下消费者跟企业对于一个优质的网上购物系统有着怎样的需求，网上购物系统应该满足消费者跟企业的哪些方面需要，也就是要做些什么的问题。2.1 消费者的需求分析作为消费者，在网上购物系统中的最主要需求，无疑是安全快捷方便的完成购物流程。优质的购物系统应该能够满足消费者以下几点的需求：在最短的时间内找到自己需要购买的商品；用安全、简便、快捷的方式完成电子交易并可以实时关注自己的订单状态；可以根据自身情况选择最适合自己的物流配送方式；在以消费者为中心的

19、购物系统中完成舒适的购物过程等等。（1）商品分类目录与商品搜素功能为满足消费者能够方便快捷的找到自己需要或感兴趣内容的要求，网上购物系统必须有一个健全的符合大部分消费者思维习惯的商品等级分类，为消费者提供一个完善的商品分类目录。这个分类目录指导了整个网站商品展示结构的建立，根据企业的商品特点设计好商品分类目录在整个网络购物系统的设计中有着非常重要的意义。此需求范围内另外一个重点功能是商品搜索功能，为消费者提供个性化搜索，满足在多种情况下的需要。（2）电子交易方式需求 目前国内在电子交易与电子认证领域的发展已经可以在很大程度上满足消费者对于安全，简便，快捷电子交易方式的需要。但在众多电子交易方式

20、中，不同的消费者会根据自身情况有所侧重，使用自己习惯的或者更加信赖的方式进行电子交易。这一点就构成了网上购物系统在电子交易方式上的需求。尽可能满足大多数消费者对于交易方式的需要，是网上购物系统在交易支付方面需要重点考虑的问题。（3）订单状态实时追踪 网上购物系统中，订单是重要的交易凭证之一，交易支付与物流配送都需要以订单作为依据。对于消费者跟企业双方都是尤为重要的。在整个消费过程中，消费者需要查询，管理自己的订单，最好还可以实时追踪自己的订单状态，订单信息是否正确，支付是否成功，配送是否开始，以此来了解自己本次网上购物的各项进程。另外一个人性化的订单查询、管理系统也会在很大程度上让消费者获得舒

21、适的购物体验。（4）物流配送方式需求 近年来，国内电子商务业务范围内的物流发展，相当迅速，与电子交易方式的情况类似，为消费者提供多种选择，但不同消费者也会根据自身情况，以及物流公司本身的信誉情况，资费标准进行不同的选择。尽可能满足大部分消费者在物流配送方式上的不同需求。因此从消费者的利益出发，使消费者可以选择自己最信赖或者最适合自身情况的物流配送方式，尽量为消费者节约运费成本，也是网上购物系统要着重考虑的一个方面。2.2 企业的需求分析作为企业，在网上购物系统中最主要的需求，以如何提高工作效率与经济效益为前提条件，同时处处体现企业优秀的客户服务理念。优质的购物系统应该要满足消费者一下几点的需求

22、：企业整体vi的需求，一致的页面风格，使优秀商品在网络上获得最好的展示效果，刺激消费者的消费欲望，建立公司整体形象；方便快捷的发布各种促销信息，吸引消费者对企业优质商品，推荐商品，相关商品的关注；多种安全可靠的电子交易方式以及物流配送方式，可以最大程度上满足不同消费者的需要；人性化的订单管理与查询系统，方便消费者对于交易状态的跟踪查询；完善的消费者信息统计管理系统，收集消费者反馈信息，结合在线客户服务，与消费者完成良好互动，体现企业的优质客户服务理念。（1）企业的整体vi需求，良好页面展示效果 在网上购物系统中，企业需要依靠系统的整体vi来建立和提升企业形象，获得消费者的初步好感，才能进而刺激

23、消费者的消费欲望，获得经济效益。一个整体的vi形象，在网上购物系统中需要良好的页面展示效果来实现，所以在保持工作效率的前提下，网上购物系统应尽最大可能保证良好的页面效果。（2）商品分类目录与促销信息发布企业在为消费者提供方便快捷的购物环境的同时，也需要利用商品分类目录与商品搜索功能为消费者展示更多类似的优质产品，所以商品分类目录和搜索功能需要在消费者进行商品选择时，展示更多企业所提供的类似的或者相关的商品。一个优秀的网上购物系统不光要有优质的商品，也应该有一个像消费者推荐和展示这些商品的方法与策略，解决企业的这个需求问题，就需要根据自身产品特点建立起良好的商品分类目录，以及推荐商品分类和大量促

24、销信息的发布的体系。（3）电子交易方式与物流配送方式需求随着电子交易与现代物流的发展，越来越多的电子交易方式和物流配送方式可以供网上购物系统选择，满足各种情况的需要，但是一个购物系统所具备的电子交易方式与物流配送方式也并不是越多越好的，因为从企业效益上来讲，过于多样化的交易方式与物流配送方式是不可行的。正确的选择应该是根据自身实际情况，行业特点以及对主要消费者需求情况进行分析后，选择几种能满足大多数消费者要求的交易方式与物流配送方式即可。而且在交易方式与物流配送方式的选择上要从消费者的角度出发，尽可能为消费者节约不必要的附加消费。（4）订单管理与查询在网上购物系统中，订单管理对于消费者和企业的

25、重要性已经在上文做了较详细的说明，企业需要依据消费者的订单来掌握消费者的购物情况，消费者选购的商品信息、数量，以及支付方式的选择，是否完成支付。支付完成之后，需要根据订单内的联系方式，收货地址以及选择的配送方式为消费者展开物流配送。订单管理是网上购物系统中较为繁琐，容易出错的一个环节，所以优质的购物系统应该为企业提供完善，方便的订单管理功能，按照交易支付的进程，物流配送的进程为订单的不同状态，方便企业以及消费者对于订单的查询与管理，以此来掌控购物过程的进行。（5）用户信息管理与客户服务企业需要对消费者信息进行管理，分析，统计。这对于维护原有市场和开拓潜在市场都是有着重要意义的。网上购物系统要为

26、企业提供方便的用户信息管理系统，准确完善的为企业提供用户信息，利于系统为不同消费者提供个性化服务以及企业与用户之间相互的沟通交流。网上购物系统的客户服务体现在多个方面：方便快捷的购物流程，基于消费者留言与投诉的互动，以及在线客户服务为客户提供实时咨询。这些方面都是客户服务理念在网上购物系统中的体现。第三章 网上购物系统结构分析与设计通过前面对于网上购物系统的需求分析，下面就利用管理信息系统（management information system, mis）的开发方法来实现系统结构的分析与设计，系统分为前台和后台管理。前台用于会员注册，登陆，修改个人资料，查询商品，订购商品，生成订单，进行结

27、算，查询与管理订单，进行用户留言咨询等，后台管理包括商品管理，会员管理，管理员管理，订单管理，公告管理，促销信息发布，独立页面管理，网站基本设置管理，留言评价管理。3.1 系统流程分析 以用户的购物流程建立的系统流程图：进入网站登陆商品分类目录商品展示页面注册购买会员放入购物车显示购物信息去收银台，选择支付、配送方式，完善收货人信息注册ny生成订单，确认订单信息，支付金额进行支付，进行配送用户收货，交易完成图2.1 系统流程图figure 2.1 the main flow diagram系统流程文字说明：用户登陆网站，已注册的会员可直接登陆网站进行购物。未注册用户按照系统提示进行注册登陆。用

28、户根据自己的需要，通过系统的商品分类目录、商品搜索功能或各类促销活动，选择自己需要的商品，进入商品细节展示页面。选定商品，点击放入购物车。若用户尚未登陆，提示用户进行注册登陆后再将商品放入购物车。在购物车中查看详细购物信息，确定后去收银台，在收银台完善收货信息，选择支付与配送方式，生成订单。在订单页面确认订单信息后，进行支付，成功后。为用户发货，用户完成收货，交易成功。3.2 系统功能分析根据系统的实现流程，对系统功能进行分析：（1）商品分类目录功能： 按照商品特点进行分类，为用户提供结构清晰的商品分类结构，用户可根据商品分类目录找到自己需要或感兴趣的商品。（2）商品搜索功能： 用户可以进行关

29、键字进行模糊搜索，或者通过已经了解的特定商品的名称或者货号等信息来进行较精确的搜索，找到商品。（3）商品展示功能： 商品详细信息的展示，商品名称，货号，库存数量，价格，规格，尺码颜色等属性的详细说明。商品细节图片展示与详细文字说明。（4）购物车功能： 用户决定购物后，将商品暂存于购物车内，在此显示用户所选购商品的名称，数量，尺码，颜色，价格等等的购物信息。（5）收银台结算功能：用户确认购物信息无误之后，进入收银台，在此选择支付方式，配送方式，完善收货信息，生成订单，确认订单信息后进行结算与支付。（6）订单查询管理功能: 实现用户对订单的查询与管理，用户在此根据：全部订单，未付款的订单，已付款等

30、待发货的订单，已发货的订单，成功交易的订单，已取消的订单几种不同状态，进行查询管理操作。（7）用户留言与商品咨询功能：用户在留言板内进行留言或投诉，在商品展示页面内的进行商品咨询。管理员通过后台回复解答后，在前台页面进行显示。（8）会员管理功能：会员注册，会员登陆，修改个人信息，以及会员丢失密码之后找回密码的功能。（9）后台管理功能：商品管理，会员管理，管理员管理，订单管理，公告管理，推荐管理，促销信息发布，独立页面管理，网站基本设置管理，留言评价管理等功能。3.3 系统功能结构根据系统的流程实现以及功能分析，网上购物系统的前台功能结构如图所示：网 上 购 物 系 统 前 台 功 能 结 构会

31、员管理功能商品分类与展示会员中心客服中心公共页面会员注册会员登录会员找回密码商品分类目录商品搜索查询最新上架商品会员特惠商品明星推荐商品商品展示页面购物车收银台物品分类展示品牌分类展示个人资料修改订单查询管理客户留言商品资询在线客服常见问题联系我们服务声明查看购物车清空购物车图3.1系统前台功能模块结构图figure 3.1 front-stage functional modules structure of the system3.4 前台模块详细功能描述 用户通过前台功能完成整个购物过程。系统前台主要包括：商品分类，商品展示，会员管理，购物车，收银结算，订单查询管理，留言板等几大功能模块

32、。（1）商品分类模块：商品分类模块实现了根据物品分类进行的商品划分和展示，以及根据品牌进行的商品划分。用户可以根据女装，男装，休闲装这样的一级分类进行查询，也可以继续查询女装下的外套，衬衫这样的二级子分类。同时商品也按照商品品牌分类，用户也可以选择某个品牌的商品进行查询。另外还为客户提供最新上架商品，会员特惠商品，明星推荐商品这样的促销类型的分类展示。（2）商品展示模块：商品展示模块实现对于该商品的商品名称，货号，库存数量，价格，规格，尺码颜色等属性的详细说明，以及细节图片和详细的文字说明内容。用户决定订购此商品，对于已登录的用户，直接调用购物车模块，将商品信息放入购物车内。如果用户尚未登陆，

33、则调用会员管理页面请用户先进行登陆或者注册，然后再调用购物车模块完成购物流程。另外本模块还提供商品咨询的功能，为满足所有用户的需求，本模块内的咨询功能支持匿名咨询，无需注册登陆。（3）会员管理模块：会员管理模块实现用户注册成为会员，以及会员登陆。用户注册成为会员时输入用户名，登陆密码，以及真实姓名，联系方式等信息，这些信息用于会员管理，在会员不慎遗失密码时，可以通过个人信息找回登陆密码。（4）购物车模块：购物车模块实现了暂存购物信息的功能，用户可以随时查看自己的购物车内的物品信息或者清空购物车。用户选购某件商品时，将商品放入购物车，在购物车内确认商品信息无误后，到收银台去收生成订单，完成支付。

34、（5）收银结算模块：收银结算模块实现生成订单与结算支付的功能，用户确认购物车内的商品信息无误，点击去收银台，即调用收银台模块，让顾客完善收货人收货信息，支付与配送方式等等的必要信息后，生成订单，确认后，进行支付。（6）订单查询管理模块:订单查询管理模块实现了用户对于订单的查询和管理，并且根据订单的不同状态将其进行划分:全部订单，未付款的订单，已付款未发货的订单，已发货的订单，交易成功的订单，已取消的订单。通过后台对于订单状态的管理，用户的订单随着购物流程中转换成为相应的状态。（7）留言板模块:留言板实现用户对于网站的留言或者投诉，用户可以通过留言板模块发表留言，通过后台对留言内容的回复与操作，

35、在前台留言板页面进行显示。第四章 前台基本功能模块的具体实现4.1 前台商品分类展示页面实现4.1.1 首页功能概述首页的主要功能包括，为用户提供清晰明确的整个系统结构，通过建立导航条与首页分类栏目进行实现。下面为对首页的主要栏目划分进行简单介绍：（1）顶部导航条：首页，登陆，注册，购物车，我的账户，客服中心。（2）商品分类导航条：女装、男装、休闲装分类页面，会员特惠、最新上架、品牌展示、明星推荐分类页面。（3）促销海报展示，网站购物咨讯发布。（4）首页会员登陆栏目，商品搜索栏目。（5）最新上架商品，明星推荐商品，会员特惠商品首页推荐展示栏目，品牌专区栏目。（6）认证信息显示与企业信息显示栏目

36、。界面设计：图4.1 首页页面效果图figure. 4.1 view page of index4.1.2 模板的设计实现 根据网站结构与框架，以及企业整体的vi需求，用photoshop工具绘制网站主要页面的显示效果图，修改完善后，利用photoshop切片工具进行切片，之后利用表格，结合一些div+css的方法，完成对网页的布局设计。 网站顶部导航条、商品分类导航条、底部的认证链接和企业信息显示部分，使用创建dwt模板方法来实现。网站的其他页面都调用此模板(模板.dwt.asp)作为页面框架，不同页面仅需要对模板中间部分的可编辑区进行内容完善。 顶部导航条以及商品分类导航条部分使用图片链接

37、的方式链接到相应的页面。 底部的认证信息栏目内显示认证图标，企业信息栏目内显示企业信息目录。这两个栏目的内容分别使用数据表link与menu，在页面内动态生成。功能实现中用到的对象及属性：l recordset（记录集对象）：用于浏览及操作数据库内的数据，管理返回的记录集，这里不先创建connection对象，直接利用recordset对象的功能来创建recordset对象，此时ado将自动创建所需的connection对象，但需要在随后的recordset对象的open方法中给出连接源。l recordcount(记录集对象属性)：记录集中的记录总数。l response对象的write方法

38、：将信息输出到客户端进行显示。实现过程：对数据表中的相应记录进行查询之后，进行所有记录的循环输出显示。为实现网页中图片显示时可以等比例缩放的功能，在模板中使用javascript脚本定义了resizepic方法。算法描述如下：当图片高宽比大与显示高宽比时，若图片宽度大于显示宽度，目标图片宽度等于显示宽度，高度根据显示高宽比得出。若图片高度大于显示高度，目标图片高度等于显示高度，宽度根据显示高宽比得出。在显示图片的地方调用此方法为参数赋值，实现图片的等比例缩放。模板中使用#include指令调用数据库连接文件（conn.asp）以及网站配置文件（config.asp）等。在#include语句中

39、使用file关键字指定文件的相对路径。4.1.3 首页栏目的设计实现上文对网页模板的内容进行了介绍，下面在模板文件基础上来设计实现前台首页。（1）促销海报展示使用js特效，海报图片进行动态的轮换效果显示，并对切换样式进行定义。在指定时间间隔后，以指定样式更换海报图片，实现海报的动态切换。用到的方法及变量：l getelementbyid：根据指定的 id 属性值得到对象。返回第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。l settimeout：用于在指定的毫秒数后调用函数或计算表达式。实现方法的关键代码，定义切换样式：图片轮转切换的实现方法：function rotate

40、hanger_sn4() document.getelementbyid(divhanger_sn4).filters0.apply();document.all.divhanger_sn4.innerhtml=ahtmls_sn4nhangno_sn4;document.getelementbyid(divhanger_sn4).filters0.play(); (nhangno_sn4=(ahtmls_sn4.length-1)?nhangno_sn4=0:nhangno_sn4+;settimeout(rotatehanger_sn4(),nhanginterval_sn4); （2）个

41、人用户登陆栏目此栏目体现用户登陆状态，判断用户是否登陆，未登录时提供注册、登陆、找回密码功能，登陆后显示会员个人信息，为会员提供购物车、我的账户、订单查询功能。功能实现中用到的对象及属性：l session对象：存储用户个人会话所需的信息，当用户在不同页面切换时，存储在 session对象中变量不会被清除。实现用户信息在多页面内的共享。l recordset对象bof属性：表示记录集的开头，位于第一条记录之前。l recordset对象eof属性：表示记录集的结尾，位于最后一条记录之后。（3）商品搜索栏目在表单内输入关键字，提交至search.asp页面进行处理，对名称或者备注里包含此关键字的

42、商品记录进行模糊查找，并进行输出显示。用到的对象及属性：l request对象：用于获取客户的请求数据，可以访问基于http请求传递的所有信息。l form数据集合：用于获得post方法所提交的表单数据。l action属性：用于设定表单数据程序的url地址，即设置将表单数据提交给谁处理。l method属性：指定表单的资料传到服务器的方式，取值为post或get方法。（4）品牌专区栏目在此栏目内对网站所有品牌的logo图标进行排列显示。点击图标跳转至该品牌的商品展示页面。这里用到一个算法来实现图标的分行排列，关键代码如下：if(rsbrandshow.recordcount mod 2)=0

43、 then y=0 else y=2for i=1 to (rsbrandshow.recordcount2)*2+yif （i mod 2）=1 then writestr=writestr&/当i模2等于1时，则换行显示。if （i mod 2）=0 then writestr=writestr&/当i模2等于0时，换行结束。（5）分类别推荐商品的首页展示栏目新品推荐：显示所有推荐商品中最后上架的三件商品。明星推荐：显示明星推荐分类中最后上架的三件商品。会员特惠：显示会员特惠分类中最后上架的四件商品。4.1.3 商品分类页面的设计与实现商品分类展示页面包括：女装、男装、休闲物品分类；会员特

44、惠、新品上架、热卖商品、明星推荐等推荐商品分类；以及按品牌分类。界面设计：图4.2 商品分类展示页面效果图figure. 4.2 view page of product category show（1）页面顶部的海报在进入分类页面后，进行判断选择，对该分类的海报进行输出显示。关键代码：if request(action)=lu then 女士页面sql=select * from yc_other where id =17elseif request(action)=lan then 男士页面sql=select * from yc_other where id =18elseif requ

45、est(action)=xouxiang then 休闲页面 sql=select * from yc_other where id =19elseif request(action)=price then 活动专区sql=select * from yc_other where id =26elseif request(action)=newadd then 新品上架sql=select * from yc_other where id =20elseif request(action)=hot then 热销产品sql=select * from yc_other where id =21

46、elseif request(action)=elite then 明星推荐sql=select * from yc_other where id =22else 模糊搜索sql=select * from yc_other where id =28end if（2）商品分类目录商品分类结构示意图：商品分类物品分类推荐分类品牌分类女装分类休闲分类活动专区新品上架明星推荐热卖商品单个品牌二级分类二级分类二级分类男装分类图4.3 商品分类结构示意图figure. 4.3 structure of product category 商品的分类目录为两级，一级为女装、男装、休闲分类。在一级分类下面又分

47、为外套，衬衫等的二级分类。女装、男装、休闲页面内，仅显示该分类下的一级菜单及其二级分类目录。但在会员特惠，新品上架等页面内显示全部分类目录。（3）商品分类展示 当用户按照模糊搜索，分类目录，品牌分类对商品进行搜索时，将搜索结果在此进行输出显示。l 输入关键字进行模糊搜索，关键代码：if request(title) thensqlshop=sqlshop & and ( title like % & request(title)&%sqlshop=sqlshop & or memo like &request(title)&%)end ifl 按分类进行搜索，关键代码：if request(c

48、lass) then sqlshop=sqlshop & and class= & cint(request(class)& sql=select * from yc_type where type=产品 and class=& cint(request(class)& order by id set rst=server.createobject(adodb.recordset)rst.open sql,conn,1,1for q=1 to rst.recordcountsqlshop=sqlshop & or class= & rst(id)rst.movenextnextend ifl

49、按品牌进行搜索，关键代码：if request(brandid) then sqlshop=sqlshop & and brandid = & request(brandid)&4.2 商品展示模块实现功能：商品缩略图的展示，商品规格，价格等属性的描述，用户在此页面选择将商品放入购物车，商品的详细图片文字说明，发表商品咨询，及相关产品的推荐展示。（1）商品属性说明在相应位置显示商品名称，规格，价格，编号，品牌，备注等商品属性信息。商品价格的输出应转换为货币值，并且对商品点击次数进行统计与显示。并且对商品缩略图的地址进行判断，如果来自网络，即输出图片地址为绝对地址，来自服务器，则输出为相对地址。

50、实现功能所用到的方法与函数：l connection对象的execute方法：将命令发布到数据源。l recordset对象的update方法：将缓冲区内的数据分批更新到数据库，实现点击次数的统计。l formatcurrency函数：将价格数值转化为货币值。（2）商品咨询留言 发布留言时，在咨询留言表单内填写个人信息，若会员尚未登录，可输入个人信息进行留言。首先判断会员是否登陆，如果用户已经登陆，在表单中，显示会员个人信息。若用户尚未登录，也可以发表留言，但需完善个人信息，发表留言时，若个人信息不完善，提示用户进行完善。实现流程如下图：是否登陆显示会员个人信息留言咨询填写个人信息发表留言咨询

51、信息是否完整留言成功发表留言咨询是否是否弹出提示信息图4.4 留言咨询发表流程图figure. 4.4 the flow diagram of commodity advisory（3）相关产品展示在此栏目内推荐展示与查看商品相关的商品，最多显示四件。查询与查看商品物品分类名称相同，价格与该商品价格接近的商品，进行输出。这里使用到连接数据表的方法来实现相关商品的查询，关键代码：sql=select top 4 product.*, yc_type.classname from product left join yc_type on product.class = yc_type.id whe

52、re yc_type.classname=& rs(classname) & and product.sprice =& rs(sprice)-25 & and product.passed=true order by product.id;4.3 会员管理模块4.3.1 会员管理模块概述会员管理模块为会员提供服务，主要包括会员注册，会员登陆，会员资料修改，找回密码等功能，这些功能都在user.asp页面内，通过调用不同的过程来实现。框架图：注册是否通过验证登陆成功资料修改密码修改订单查询在线购物否是登陆图4.5会员管理模块框架图figure 4.5 frame of member manag

53、ement functional modules 4.3.2 会员注册的实现过程 用户注册过程，主要实现两个功能:一个是收集用户输入的注册信息，另一个是将这些信息保存到指定的数据表中。会员注册信息表单设计：表4.1 会员注册表单table 4.1 form of member registration名称类型对应字段名备注用户名textuser_name必填，不能小于四个字符。密码passworduser_pass必填，区分大小写。确认密码passworduser_pass两次输入密码，必须一致。密码提示问题textuser_question找回密码的提示问题。问题答案textuser_ an

54、swer找回密码的提示问题答案。真实姓名textuser_ture_name必填，真实姓名，方便与会员联系。性别radiouser_sex选择性别。联系电话textuser_tel格式件号码textuser_passport确认用户真实个人信息。e-mailtextuser_mail填入有效邮件地址。qq号码textuser_qq填入常用qq，方便与会员联系。详细地址textuser_address填入详细收货地址。完善注册信息后提交表单，使用数据表yc_user,判断会员登录名称是否已存在，保持用户名的唯一；判断两次密码输入是否一致；判断必填信息是否填写完整；否则不能保存，弹出提示信息。注册信息符合条件，则通过addnew方法保存记录。实现流程图：提交用户名唯一填写注册信息两次密码一致信息完整注册成功是是是否否否图4.5 会员注册流程图figure. 4.5 the flow diagram of member registration4.3.3 会员登陆的实现过程 会员在个人用户登陆栏目或登陆页面login.asp输入用户名与密码，进行登