购物网站开发毕业设计.doc

天津科技大学2014届本科生毕业设计 引言1999年，我们迎来了互联网的高潮，直到今日，人们的生活已经离不开互联网，互联网已经成为了人们生活的一个重要组成部分。21世纪是一个网络化和知识经济的时代，信息产业将成为全国竞争力的焦点，直接影响着国家的生存与发展。随着互联网的发展，传统的商业模式已经跟不上人们的脚步，人们的购物方式也随之改变，网购逐渐成为大多数人尤其是年轻人的新宠。中国网购用户规模飞速上升，截至今年，我国网络购物人数已达3.56亿，并呈继续增长趋势。对于商家来说，网络购物的一个最大的优势就是一种潜藏的低成本销售的可能性，不受时间与空间的限制，同时又能拥有巨大的客户流量。对于个人来说，网络购物不仅可以节约人们的时间、金钱，更可以拥有更多的选择。目前，比较受大众喜爱的购物平台为天猫、淘宝、京东、亚马逊等等。中国的网上购物在不断摸索中成长，支付宝、货到付款等都是中国在网络购物上的成功创新。数据显示，2013年阿里“双十一”创下了191亿销售额的奇迹，突破1亿仅仅用时55秒。由此可见，商家在当今的时代想要大大提高销售额，走网络渠道是非常必要的。走网络渠道，必然要和网上商城打交道。网上商城也就是一个提供网上销售与购物的平台。一般的购物网站分为三种模式，第一种为b2b型，即商家和商家建立商业关系，如现在的阿里巴巴；第二种为b2c型，也就是商家对个人，即通过网络为消费者提供了一个新的购物环境网络商城；第三种为c2c型，即客户对客户，它的特点为大众化交易，淘宝网所采用的就是这种模式。用户根据自己的需求，选择相应模式的购物网站，这样才能创造利润，满足自己的需求。对于个人来说，考虑购物安全的话，b2c模式就要比c2c有保障了。一个完整的网上购物商城，为商家和用户搭建起一个交流与交易平台，使得商家和用户可以更方便的传递信息，完成交易。开发这种具有交互功能的网站，主要包括前端界面与后台管理两个方面。对于前者首先要求界面清晰，使得用户能够在有效地时间内找到想要的产品。其次是功能完善，易于使用，用户可以进行基本的购物操作，如注册、登陆、添加购物车、提交订单等。对于后者则要求数据的完整性与一致性，且要易于管理，管理员能够对前端的页面内容进行操作，并能对用户以及用户订单进行管理。本文旨在开发一个界面友好，易于操作的在线购物网站，使购物者不用再受传统购物方式的限制，可以方便的在网上进行交流与交易。此次课题将以手表专卖店为例，运用asp.net编程语言以及sql server数据库，采用三层架构以及web service技术开发一个b2c类型的网上购物平台。使之能够实现基本的购物与管理功能。第一章 绪论第1节 研究背景当今时代，互联网几乎被每个人所熟知和使用，他就像我们的一个熟悉的朋友。互联网的全称为国际互联网，英文名字叫做internet，于1969年在美国诞生。互联网是属于人类的，是全球性的。他是承载信息，提供交流的一个大平台。互联网在当今世界处于不可忽视的地位，他改变了人们的生活方式，使得我们的生活更加丰富多彩。网站相对于互联网来说就是形象的，具现化的形体。目前比较普遍的网站开发技术有asp、php、jsp、asp.net等等。这几种技术各有特色，不同的技术适用于不同类型的网站。一般相对大型的网站采用jsp语言，它采用ja脚本技术，做出的网站安全性好，但是费用较高。比较小的网站普遍采用语言搭建，搭配数据库使用。对于中等类型的网站，一般采用或者，部分网站也会选择语言。在网站前台页面的编程中主要使用的技术为html，即超文本标记语言。当前最大的购物平台淘宝网所采用的是两种语言综合的，底层采用的，界面部分采用各大编程语言没有好坏之分，选择最适合自己网站的语言才是最好的。第2节 研究内容本论文主要采用microsoft sql server数据库作为odbc数据源，并与网站进行数据库的存取和连接，将数据库与网站紧密联系起来。前端开发主要使用dreamweaver cs5，使得交互界面更加美观。采用css+div的网页布局方法，是网页页面内容与样式分离，更加便于管理和操作。网站开发程序选择asp.net，开发语言选择c#，使得网站的开发拥有更大的灵活性，可以运行在web应用软件开发者几乎全部的平台上。通用的语言基本库和数据接口都能无缝的整合到asp.net的web应用中。网站设计采用三层架构，降低了层与层之间的依赖性，更加有利于逻辑的复用，且使得网站结构更加清晰。第3节 研究意义信息技术发展是如此之迅速，各种网站也是层出不穷，网络已经成为人们生活中必不可少的一部分。计算机技术已经是当今时代的潮流技术，也是未来社会的发展技术。信息技术的发展不仅改变了人们的生活方式，也改变了当今的商业模式，电子商务出现。各大商户陆续将店面搬到了网络上，并赢得了巨大的收益。电子商务已经成为世界经济发展的一个重要的推动力。我们的时代是知识经济的时代，是信息时代。作为当代大学生应该努力培养自己的信息素养，学习信息技术，成为中国发展的中流砥柱。本网站呈现的是一个模式的购物交易平台，为顾客提供查看、购买商品的功能，为商家提供商品管理及销售的功能。购物网站的发展前景良好，努力学习网站开发技术，帮助更多的商家进入网络市场，推动网络的发展与普及，也为我国的经济发展贡献自己的一份力量。第二章 开发工具与技术第1节 b/s体系1、 b/s体系介绍一般来说有两种体系结构，分别是b/s体系和c/s体系。其中c/s体系也就是client/server，即客户机/服务器，这种体系结构将程序分为两部分：一部分是由多个用户所共享的信息和功能，也就是服务器端；另一部分是被每个用户所专用的，叫做客户机端。如果使用c/s体系结构，那么在客户端以及服务器端都应安装相应的软件，两边分别完成相应的工作，数据库则由服务器端保存。而b/s体系结构，即browser/server，也就是浏览器和服务器端。这种体系结构下客户端无需安装专用的软件，需要的仅仅是一个浏览器。客户端所运行的程序是由浏览器，如ie登陆服务器端进行的。客户端只需要在浏览器中完成相应的计算任务即可。2、 b/s体系优势使用b/s体系结构，使得系统的维护和升级方式变得更加简单，节省了用户的人力、物力等开支，降低了成本。无论用户在内部还是外部都可以随时对系统进行访问。除此之外b/s体系结构还具有良好的扩展性和较高的接口性能。第2节 asp.net1、 asp.net技术介绍（一） 关于asp在了解asp.net前，首先要了解asp。asp全称为active server pages，是由微软公司提供的。asp是开放的，可以将html和active server组件以及脚本结合在一起的，用来构造动态页面的技术。asp是面向对象的，并用将script嵌入html的方式，将静态页面和动态页面有机的融合在一起。（二） 关于asp.netasp.net不只是asp技术的简单升级，而是微软公司新一代的产物，是.net这种新的体系结构的一部分。总的来说，asp.net就是一个开发框架或者可以说是一个编程模型，使用html、css、javascript以及服务器脚本开发网站，用于建立基于web的应用程序。由于asp.net归属于.net framework框架,所以asp.net可以使用.net框架所提供的一切服务，也就使得web程序更加的丰富。asp仅仅限于jscript和vbscript语言的使用，而asp.net具有语言上的独立性，他可以选择c#、vb或者是j#。asp.net具有三种不同的开发模式，分别是单页面模式（web pages）、模型-视图-控制器模式（mvc）以及事件驱动模式。（3） asp.net工作原理asp.net在工作时，首先是由用户请求web页面，然后请求到达web服务器，服务器寻找.aspx格式的指令文件，接着asp.net代码被发送给公共语言运行时进行编译，再将html流返回给浏览器和指令，最后浏览器翻译处理html并显示在页面上。这就是asp.net的一个工作流程。二、 asp.net技术优势（一） 性能高，编译速度快asp.net可利用.net平台，是已经进行编译的代码，不同于早期的asp技术，asp.net能够进行实时编译，运用盒外缓存和早期绑定服务可以显著地提高性能。（2） 界面与逻辑分离，管理性强asp.net使用分级的配置系统，将web应用与服务器的分离，无需本地管理工具的帮助即可应用新的设置，操作简便，可管理性强。（3） 安全asp.net与iis一起使用，可以使用三种方式进行用户验证，分别是windows用户验证、forms身份验证以及客户证书身份验证，。安全性较高。第3节 sql server20051、 数据库简介随着市场的发展以及信息技术的不断壮大，以前的数据管理技术再也无法满足人们的要求，数据管理技术由最初的人工管理阶段进化到文件系统阶段进而进化到当今的数据库系统阶段。数据库是一项新的数据管理技术，按照字面上的意义来说，就是存储数据的仓库，用户可以在这个巨型的数据仓库中进行增删改查的操作。以不同的数据库观察角度，数据库被分为三个结构层次，分别是物理数据层、概念数据层以及逻辑数据层。其中物理数据层是实际存储于物理设备上的数据的集合；概念数据层则处于数据库中间的位置，表示数据库整体的逻辑；而逻辑数据层则是表示数据库逻辑记录的集合。这些层次之间也是可以互相转换的。2、 数据库分类一般来说，目前被大家广泛使用的数据库有oracle、db2、sql server、access、mysql、bd2等。其中oracle、db2以及sql server都是比较大型的数据库。其中oracle被普遍认为性能最高，难度最大，支持多种工业标准；db2具有很好的并行性，性能较高，适用于在线事物的处理和数据仓库，并且可以跨平台；sql server被称为最容易的数据库系统，虽然没有很成熟的并行性也未获得任何安全证书，而且性能在多用户时还不稳定，但操作简便，是应用最广泛，最流行的数据库。剩余的access、mysql、bd2都是比较小型的数据库。access一般适用于初级应用，配合asp、asp.net、jsp使用。mysql一般与php组合的比较完美。3、 sql server2005sql server是一个数据解决方案，具有集成以及端到端的特点。sql server2005是由微软公司推出的数据库管理系统，是一个全面的数据库平台，具有安全可靠的、可伸缩的关系数据模型。他服务于it行业以及信息工作者，这个数据平台包括多种工具。sql server2005为数据管理人员提供了一个单独的控制台以及一个可扩展的管理架构，使其能够更加方便的监视和管理数据库相关服务，并且可以简化编程以及拓展应用。除此之外，sql server2005还拥有较高的可用性，创新了数据镜像和故障转移集群以及数据快照等技术，使得企业关机系统是可用的。另外sql server2005还具有可伸缩性以及安全性的特点，他提供了一些高级可伸缩性的功能，像是表分区、64位支持以及快照隔离等。在安全性方面，sql server2005还提供了更严格的数据控制，强制sql server login密码策略并且具有本机加密功能，支持虚拟服务器身份验证。第三节 dreamweaver1、 html简介（一） 关于html如今人们从浏览器中看到的一个个漂亮的网页，不论是从结构上还是风格上都各有特色。那么一个网页是怎样生成的呢？网页的主体实际上是一个文本，这个文本由html代码创建，搭配相应的标签使用，无论是文本、图片、动画、声音、视频，都可以在网页上出现。html语言是一种标准，中文称为超文本标记语言，是我们在编写网站时主要用到的语言。html主要包括两种结构，一种是头部，另一种是主体。头部（head）存放的是浏览器所需的信息，主体（body）存放的是网页的具体内容。（2） html的特点html文档功能强大，容易创建，制作简单，可以导入各种格式的文件。另外，html与平台无关，可以兼容多个平台，可扩展性强，网络传输速度快。2、 css+div（1） css与divcss是一种新兴的网页制作技术，又叫做“层叠样式表”。用户在浏览网页时所需的仅是网页的内容，而网页的格式却不是用户希望或者说需要看到的。于是，出现了一种将网页的内容与格式分离的技术。而css可以看做是网页的格式，使用css制作网页，不仅使得网页风格统一，更加大大的缩减了页面代码提高了网页制作的速度和浏览速度。div是html语言中的一个标签，主要用来控制网页中各个块的摆放位置，也可以直接将页面中的每一个块看做一个div，每一个块的内容或大小一般都存放于两个div之间，这样就起到了一个定位的作用。（2） css+divcss+div是一种网站布局，这种结构已经获得大多数人的认可，目前大部分网页的设计都是采用这种布局。采用css+div结构，使得网页结构简洁，定位灵活，页面架构更加完善。在使用这种结构时，首先要对页面有一个整体的规划，先将页面用div分块，设计好每个块的大小和位置，再连接css，对每个块进行定位，实现网站页面的整体规划。三、 dreamweaver html语言是一种文本文件，可以用任意一个文本编辑器打开或编写。而dreamweaver则使得网页的编辑与制作可视化，更加便于使用。dreamweaver简称dw，由macromedia公司开发制作，是一种设计网站页面的软件。dreamweaver使用所见即所得接口，拥有自动检测标签功能以及强大的css支持，适应当前所有主流浏览器。而且，在dreamweaver cs5版本中又增加了标签编辑器和选择器，使得用户可以对网页代码中的标签进行修改。他使得网站的制作更加简便化、形象化，不懂html语言的人使用dreamweaver也可制作出简单的网页。第三章 网站简介第1节 网站描述一、 网站背景本网站命名为“手表网店”。为一家拥有手表实体店的商户所建设。二、 网站用户“手表网店”拥有三种类型的用户，分别为：超级管理员、管理员以及顾客。其中管理员相当于手表店的员工，其权限为：管理产品，管理会员，管理订单，而超级管理员也就是网站的老板，除了拥有管理员的所有权限外，还拥有管理员工的权限。三、 项目需求手表店为了增强影响力，提高产品的销量，扩大销售市场，增加销售渠道，现要求在网上上线一个b2c网站。此网站涉及到的内容有手表网店的前台界面设计，功能模块的开发，以及测试和维护。该“手表网店”前端通过顾客登陆，浏览产品，加购物车，下订单等来实现用户功能模块；进而通过管理员管理商品，管理用户，处理订单来实现后台管理功能模块。第2节 网站需求分析1、 功能需求分析（1） 项目目的本项目目的为开发一个网上商店，帮助手表店老板打通网络渠道，通过网站实现手表的销售与管理功能。根据网站用户以及项目需求的描述，现决定使用asp.net+sql server数据库来实现。（2） 前台系统之顾客操作步骤根据网站的主要用户，顾客访问网站进行购物的操作流程基本如下：第一步：顾客进入网站首页，首先进行注册会员，填写会员名称、密码、邮箱等基本信息。顾客注册成功之后，可使用刚刚注册成功的用户名及密码登陆。第二步：顾客登陆成功，进入手表商店，挑选商品。选产品时可以通过产品类别浏览，也可以通过搜索类别或直接搜索商品名称，找到自己想要的商品。第三步：顾客查看商品详细说明，了解商品性能，价格与库存数量等。第四步：选中商品，确认购买数量并加入购物车。第五步：顾客挑选结束，进入购物车，确认无误后系统默认为订单。第六步：等待卖家发货，完成整个购物过程。（3） 后台管理之后台主要功能网站的后台是由网站管理员使用的，是一个用来管理网站，对网站的内容进行增加、删除或修改的界面。网站后台管理员又分为普通管理员与超级管理员，两种管理员的权限仅仅是在对管理员的管理方面有所不同。根据前台以及模块功能，并加以分析其他购物网站可总结得出：此手表网店的后台管理系统主要需要实现的功能有：后台管理员管理、用户管理、商品管理、商品类别管理、新闻管理、订单管理等。2、 性能需求分析系统的运行对运行环境的一些要求：硬件环境：处理器：cpu奔腾4（2.0g）内存：不小于256mb硬盘空间：不小于60gb显卡：amd radeon hd 8790m软件环境：windows 7开发工具：visual studio2005、dreamweaver cs5、pscs6数据库管理系统：sql server2005运行环境：windows 7第3节 网站模块简介1、 面向用户部分功能模块（1） 注册功能顾客在使用网站购物功能之前，首先要注册成为网上商城的商户。注册时要完成个人信息的填写。注册后，用户可以自己的用户名和密码登录，实现购物车及其他功能。（2） 产品分类与搜索功能用户浏览网上商城，将自己需要的产品添加到购物车。用户选择产品可以通过产品列表或者产品分类亦或是直接搜索产品名称。（3） 购物车管理功能：顾客选择完商品后可进入购物车页面，查看自己购买的商品，若购物车中的商品不是顾客想要的或者数量不对，顾客可以删除购物车重新下单。（4） 留言功能用户若想咨询有关问题，可以进入在线交谈页面，对管理员进行留言，等待管理员回复。（5） 新闻查看功能用户进入本网站不仅可以单纯的购物，还颗粒浏览最新新闻动态，更加人性化。（6） 购物帮助功能如果顾客在购物时遇到问题，除了留言外还可以选择查看购物帮助，帮助顾客了解本网站的购物流程、注意和须知等。2、 后台管理部分功能模块（一） 管理员管理此项为超级管理员的权限，可以管理网站的其他普通管理员，赋予权限或者进行添加、修改、删除的工作。（2） 注册会员管理网站的后台管理员可以对在本网站注册的用户进行信息管理，但是只能进行删除工作，其他权限均有注册用户所有，后台管理员不可任意更改。（3） 留言交流管理管理员可以查看用户留言，并通过邮箱或者电话对顾客的问题进行回复，在留言管理中，管理员仍然只具有删除留言的权限。（4） 商品管理在后台管理中，管理员可以进行商品和商品类别的管理。对于商品类别，管理员可以进行添加、修改、删除操作。对于商品管理，管理员可以添加商品，选择商品类别，并对商品进行相应描述，或者删除或修改商品内容。（5） 订单管理管理员在订单管理界面可以查看订单，修改发货状态，删除订单。（6） 新闻管理在新闻管理模块，分为管理新闻和管理购物帮助。管理员对新闻和购物帮助都可以进行添加、修改、删除的操作。（7） 友情链接管理友情链接也叫做互换链接，就是指双方网站将对方链接放在自己网站中，可以看做是网站和网站的一种合作方式。从网站优化方面看，友情链接是增加网站流量和pr值的一个重要手段。在友情链接模块，管理员可以添加、删除和修改自己网站的友情链接。（8） 修改密码在后台功能中，修改密码是必不可少的，管理员可以随时修改自己的密码。第4章 网站数据库设计第一节 数据库设计概述对于一个完整的网站来说，数据库是必不可少的，处于至关重要的地位，是进行信息管理的一大重要手段。本购物网站所使用的为sql server数据库管理工具，利用数据库来存储和管理信息，让购物网站更加完善，使用者更加方便。在设计数据库之前，首先要了解网站在各个方面的需求以及网站所要服务的几个对象。根据前文在网站前后台的几个功能模块上的描述可知，本数据库系统主要目的是实现会员、商品、商品类别、新闻等信息的收录、修改、删除、查询等操作，前后台功能与数据库关系具体如图4-1所示。图4-1 数据库与前后台功能关系图第2节 数据库概念结构设计1、 概念设计简介数据库概念设计就是将所进行的需求分析抽象成为一个信息过程。一般的数据库概念结构设计有两种方法，一种是集中式模式设计法，主要设计的是一种全局模式，对于小型的系统比较适用；另一种是视图设计法，这种方法与第一种不同之处在于将体统分解开，形成几个小的子系统，通过建立局部视图来形成全局模式。经过如上的分析，可以设计出符合网站需要的实体以及实体之间的关系，这些实体相互作用，形成数据流。2、 概念设计之网站实体e-r图根据需求分析得到的数据结构，绘制出如下几个实体的e-r图。图4-2 实体关系图图4-3 管理员实体e-r图图4-4 注册用户（顾客）实体e-r图图4-5 商品实体e-r图图4-6 商品类别实体e-r图图4-7 订单实体e-r图第3节 数据库逻辑结构设计1、 数据库逻辑结构简介上一节完成了数据库的概念结构设计，接下来需要进行数据库逻辑结构设计。数据库逻辑结构设计就是将上文的概念结构设计得出的e-r图体现到我们所用的数据库管理系统（sql server2005）中，将关系模型转换为sql server2005所支持的数据模型，即将e-r图转化为数据库中的表。2、 网站数据库表（一） 创建数据库首先登陆sql server2005，选择z-pc服务器，使用windows身份验证登陆。新建一个数据库，命名为“net05shfwdzsw”，以下称为“net05数据库”。net05数据库用来存放与网站有关的一些需要存储和进行操作的数据信息，协助网站实现图4-1中的几大功能模块，以下为各大功能模块的具体实现。（2） 会员用户管理的实现会员用户管理模块的主要功能是：顾客进入网站后，进行注册或登录时需要填写用户名、密码等个人信息，为了存储和操作这些信息，需要建立一个存放会员信息的表，命名为“khusers”。这个客户信息表主要包括的字段如表4-1所示。其中主键为id，设置自动增长，标识增量为1。表4-1 表“khusers”具体结构属性字段名称数据类型是否允许为空会员编号idint否用户名usernamevarchar（15）否密码pwdvarchar（15）否真实姓名realnamevarchar（10）是联系电话telvarchar（15）否身份证号sfzvarchar（20）是地址addrvarchar（50）是性别gendervarchar（2）否注册时间addtimedatetime是（3） 商品类别的实现商品分类功能主要用于方便的管理商品，更加可以让寻找商品的顾客快速找到自己想要的商品，节约时间。所以要单独建立一个商品分类表，命名为：“alllb”。alllb表所包括的内容与设置如表4-1所示。其中“id”为主键，标识增量为1。表4-2 表“alllb”具体结构属性字段名称数据类型是否允许为空商品类别编号idint否商品类别名称lbvarchar（20）否添加时间addtimedatetime是（4） 商品模块的实现此模块的功能主要包括前台页面商品的展示与查询，以及后台的商品管理功能。这就自然而然的形成了一个商品表，用于存放商品的名称、库存、类别等基本信息，其中商品表的类别是外键。新建商品表，命名为“allpro”，此表的具体内容与结构如表4-3所示，主键的设置同上。表4-3 表“allpro”具体结构属性字段名称数据类型是否允许为空商品编号idint否商品名称mcvarchar（50）否商品类别lbvarchar(20)否商品原价price1float是商品现价price2float是商品描述contentvarchar(500)是图片fnvarchar(20)是添加时间addtimedatetime是库存量shuliangint是（5） 购物车模块的实现购物车模块在前台的功能主要是顾客添加购物车，后台功能为管理员对购物车所生成的订单进行管理。这个模块需要存放前台顾客所购买的商品信息以及商品数量以及后台商品的发货状态等。新建购物车表，命名为“gwc”，此表的具体内容与结构如表4-4所示，主键设置同上。表4-3 表“gwc”具体结构属性字段名称数据类型是否允许为空订单编号idint否顾客名称usernamevarchar（50）否商品售价priodint是添加时间addtimedatetime是发货状态ztvarchar（50）是购买数量shuliangint否（6） 留言版模块的实现留言板模块，顾名思义，前台用户用来留言，后台管理员用来管理留言的功能模块。要想实现这个模块的功能，就要在数据库中新建一个表，用于存储用户对商品或网站的反馈信息。留言表命名为“book”，主键设置同上，具体结构与内容参照表4-4。表4-4 表“book”具体结构属性字段名称数据类型是否允许为空留言编号idint否用户名称usernamenvarchar（20）否用户性别sexnvarchar（4）是内容bodynvarchar（500）是用户qqqqnvarchar（10）是用户emailemailnvarchar（20）是头像facenvarchar（10）是添加时间adddatedatetime是悄悄话选项ishiddenbit是首页homepagenvarchar（20）是（7） 新闻模块的实现本网站的数据库中，新闻模块与购物帮助模块合为一个表，节省空间。此模块主要实现的功能为：前台用户的浏览功能以及后台管理员对新闻的管理。在数据库中新建公告表，命名为“allgonggao”，结构如下表所示。表4-5 表“allgonggao”具体结构属性字段名称数据类型是否允许为空留言编号idint否用户名称usernamenvarchar（20）否用户性别sexnvarchar（4）是内容bodynvarchar（500）是用户qqqqnvarchar（10）是用户emailemailnvarchar（20）是头像facenvarchar（10）是添加时间adddatedatetime是悄悄话选项ishiddenbit是首页homepagenvarchar（20）是（8） 后台管理员模块的实现此模块主要服务于超级管理员，用于管理后台管理员信息，需要设计一个用于存放管理员信息的数据表，命名为“allusers”，具体结构如表4-6所示。表4-6 表“allusers”具体结构属性字段名称数据类型是否允许为空留言编号idint否管理员用户名usernamevarchar（20）否管理员密码pwdnvarchar（20）否管理员权限cxvarchar（10）是添加时间addtimedatetime是第5章 网站前台页面设计第1节 首页静态页面设计1、 网页设计概述当今社会，网络为我们带来了很多便捷，网络时代已经降临。当人们在网络上浏览网页时都是有选择性的，一般来说，网民在选择网页时，第一看中的是内容，第二就是设计风格了。现在，网页设计已经成为了一个专业的艺术学科，网页设计至关重要，他是在网站受众面前首先出现的，是对一个网站整体的诠释。如果在网站制作中忽视了前台页面的设计，只强调网站后台程序的重要性，那么这可能会使网站流失一大部分流量，也就失去了一个网站存在的意义。2、 网站首页布局（一） 布局介绍网站首页是用户进入网站首先看到的页面，首页一般命名为index或default，本网站命名为“default.aspx”。首页在整个网站中处于至关重要的地位，可以看做是网站的门面，门面不好是不会有人愿意进去的，就算进去了，停留时间也不会太久。网站经过多年的发展，主要产生出了几大布局，有标题正文型、国字型、左右框架型和拐角型等。像是国字型一般适用于比较大型的网站，上方长条放置广告和导航条，中间放主要内容，左右两边放次要信息，这也是当前比较普遍的网站布局。本课题研究的为购物网站，想要设计好购物网站的首页，就要先对目前网络上的各大购物网进行分析，再结合自己的能力进行本网站的首页布局。（2） 各大网站首页布局分析目前网络上比较大型的购物网站有淘宝、京东、亚马逊等。淘宝网的布局可以看做是一个国字型，中间部分着重展示特卖产品的广告，左侧为产品分类，导航条与搜索条位于网页上方通屏，下面是各个卖点的分块展示。京东网的首页布局与淘宝网如出一辙。亚马逊网站则是使用拐角型布局，与国字型类似，只是把搜索下面的正文广告部分占了一大半页面，左侧依旧是分类导航，下面则是分类展示商品。通过对几大网站的分析，可以知道，一般的购物网站的首页有这些内容：搜索条、导航条、广告为、商品分类、登陆注册、友情链接、购物帮助等。再加以考虑用户显示屏的大小以及ie浏览器下窗口的大小，可以将网页宽度设置在773px。（3） 本网站首页布局通过上述分析，总结出本网站的首页布局。考虑本网站为b2c网站，且拥有者为一家手表店，现将网站首页头部设置为手表店名称，下方为网站导航，导航部分主要包含首页、用户注册、商品列表、购物帮助、购物车、在线交谈以及后台管理的链接。左侧部分为商品分类导航以及用户登陆注册入口，左下方为友情链接；网站左半部分分别放置最新新闻、购物帮助以及最新商品。（4） 网站首页前台代码简介首先新建网页default.aspx,在程序的头部“”之间填上网站名称以及连接图片image和样式表css，程序如下： 手表馆 首页所包含的几个内容中，导航部分在前台代码中体现为：用户登陆注册部分首页代码如下，其中left1为登陆注册功能模块，登陆之前显示用户名密码的文本框，登陆之后显示用户的名字以及修改密码和退出链接。      用户登陆商品分类导航首页部分代码为：      站内导航其余部分代码类似，友情链接部分为“left5”，最新新闻、购物帮助以及最新商品中均未代码，此部分将在下一章进行介绍。第2节 用户注册静态页面设计 本网站用户注册页面命名为：“userreg.aspx”。在本网站的用户注册部分，除左侧内容改变为用户注册页面，其他部分仍旧与首页布局保持一致。用户注册部分可以看做是一个表格的填写，表格中包含用户名、密码、确认密码、真实姓名、性别、电话、身份证号、联系地址等信息。其中性别为选择按钮表单，性别部分代码如下，其余部分详情代码请参见附录二。性别部分前台代码：在后台程序中，控制用户注册与登录，首先判断用户点击的哪个按钮，是登陆按钮还是注册按钮，若点击注册按钮则跳到注册页，在注册页userreg.aspx.cs中，将注册按钮命名为“button1”，注册事件的程序将写在button1_click事件中。用户注册时首先要判断必填的项如用户名、密码等是否为空，若不为空则继续判断两次输入的密码是否一致，不一致的话则给出提示“两次密码输入不一致，请确认”，若一致则将用户输入的信息加入数据库，具体代码实现如下。 protected void button1_click(object sender, eventargs e) if (username.text.tostring() != & pwd.text.tostring().trim() != & pwd2.text.tostring().trim() != & sfz.text.tostring().trim() != ) if (pwd.text.tostring().trim() != pwd2.text.tostring().trim() response.write(javascript:alert(两次密码不一至，请确认);); else string sql; sql = select id from khusers where username= + username.text.tostring().trim() + ; dataset result = new dataset(); result = new class1().hsggetdata(sql); if (result != null) if (result.tables0.rows.count 0) response.write(javascript:alert(该用户名已经存在，请换其他用户名);); else string gender; if (radiobutton1.checked) gender = 男; else gender = 女; sql = insert into khusers(username,pwd,realname,tel,sfz,addr,gender) values( + username.text.tostring().trim() + , + pwd.text.tostring().trim() + , + realname.text.tostring().trim() + , + tel.text.tostring().trim() + , + sfz.text.tostring().trim() + , + addr.text.tostring().trim() + , + gender + ); int result2; result2 = new class1().hsgexucute(sql); if (result2 = 1) sessionnuser = username.text.tostring().trim(); response.write(javascript:alert(注册成功，您可以去购物了);location.href=default.aspx;); else response.write(javascript:alert(系统错误);); else response.write(javascript:alert(请填写必填选项);); 第3节 商品静态页面设计商品页分为商品列表页和商品详情页，其中商品列表页主要展示所有商品，可以看做是一个目录。商品列表页命名为：“prolist.aspx”。此页面与用户注册页面布局相同，在商品列表内容模块的编写上主要应用的asp.net技术，在前台页面中只是简单用、规定了datagrid的位置和格式。商品详情页用于展示单个商品的详细介绍，包括商品名称、商品图片、商品类别、价格、库存数量以及简介等内容。商品详情页命名为：“pro_detail.aspx”，除以上内容外还需要添加一个加入购物车的链接，这样才能延续顾客之后的购买工作。在商品列表功能的实现上，本网站使用了datagrid控件，这个控件在asp.net技术中是一个非常重要的控件，用于显示数据库中的数据。datagrid控件呈现在网页上是一个表格的形式，其中每一个单元格都可以包含文本值并可以任意选定来进行编程。商品列表的控件命名为“datagrid1”，绑定数据库中的商品表数据源。在商品列表页面还有分类检索以及搜索商品的功能，在代码中实现过程为：首先判断本页面是否首次加载，如果是在分类检索下拉列表中加载所有的商品类别名称，然后判断搜索框中的内容是否为空，若为空，则加载所有商品；若不为空则搜索与搜索框中文本名称相同或包含的产品；若开始判断的商品类别选框中不为空，接着判断搜索框中内容是否为空，若为空则检索该类别的所有商品，若不为空，则检索该类别下与搜索内容相同的产品，具体程序详见附录三、附录四。商品列表中的商品中含有链接，点击后连接到商品详情页，这里页面用参数pn控制，也就是说，如果点击的单元格中的商品为1号，则跳转到1号商品的详情页面。在商品详情页中商品信息由商品列表页传过来的id控制，获得这个id号的语句为：“sql = select * from allpro where id= + requestid.tostring();”，得到id后，将相应的内容传送给商品详情label的text中。第4节 购物帮助静态页面设计 购物帮助页面与新闻页布局是一样的，同样分类两页，购物帮助分别分为帮助列表，以及帮助详细页；新闻页同样分为新闻列表与新闻详细页。另外，在详细页中还需增加一个返回列表的链接，方便用户继续查看自己想要的内容。在列表页中主要包括新闻序号，标题以及新闻发布时间；在详情页中依旧要显示新闻标题，并加以详细描述。第5节 购物车静态页面设计购物车页面命名为：“gwc.aspx”。位置与布局同上，主要显示商品的一些信息，像是：序号、商品名称、类别、价格、下单时间等，除此之外还要显示购买数量以及发货状态等，在购物列表的最后，出于人性化考虑，增加了一个购物记录与总金额的统计。购物车的程序和前面一样，只是用、规定了位置和格式，具体功能的实现代码在后台程序中。商品购物车依然用控件datagrid实现，在本页面默认命名为“datagrid1”。购物车在工作时首先判断用户名是否为空，若为空则提示“对不起，请您先登录”，若不为空，进行下一步。首先判断从商品页获得的商品id是否为空，若为空则提示