基于ASP.NET的多灵键鼠外设产品网站的设计说明书 毕业论文.doc

东莞职业技术学院毕业设计说明书基于asp.net的多灵键鼠外设产品网站的设计与实现 学生姓名： 学 号：0302100239年级专业：2010级网页设计指导老师： 系 部：计算机工程系广东东莞提交日期：2013年5月目 录1 前言22 关键技术介绍321 asp.net322 c#323 dreamweaver cs3.0324 photoshop cs3.0425 sqlserver 200853 系统分析和设计631 需求分析632 数据库设计633 系统总体设计104 系统的实现114.1 页面设计114.2 功能设计115 结束语25参考文献26基于asp.net的多灵键鼠外设产品网站的设计与实现作 者：郑志辉指导老师：王超英 (东莞职业技术学院2010级网页设计2班，东莞 523000) 摘要：本文首先介绍了本网站所使用的开发工具和开发环境，接着详细介绍了基于asp的键鼠外设商城网站的设计，包括系统功能分析，数据库结构设计，程序设计及页面详细功能的介绍分析。该网站功能分为几个功能模块：用户的注册，用户登录，用户找回密码，用户密码的更改，条件查询商品，购物车的添加，删除，产品数量更新，提交订单。其中购物车和订单功能是该网站的主要功能模块，它实现用户购买商品的相关操作和提交用户购买订单的功能。当用户喜欢某键鼠标，可以将它添加到自己的购物车中，如果想买的话，可以在购物车添加数量，并提交到订单中，如果在商城中找到更好的东西，可以将之前添加到购物车的东西删除。其开发主要包括数据库的建立维护和应用程序的开发这两个方面。关键词：asp.net；购物车管理；提交订单第 28 页 共 30 页1 前言随着信息技术在国际贸易和商业领域的广泛应用，利用计算机技术，网络通信技术和internet来实现商务活动的国际化，信息化和无纸化，已成为各国商务发展的一大趋势，电子商务正是为了这种以全球为市场变化的而出现与发展起来的。它可以使销售商和供应商更紧密的联系在一起，以更快的满足用户的需求。有些人也许会问为什么这么多行业，我为什么要选择键鼠外设这个课题呢。因为很多人都以为鼠标和键盘都是差不多的。没什么讲究，没什么特色，没什么市场前景。其实这个想法是错的。因为科技在前进。什么东西都会向更先进的一方面去发展的。那鼠标来说吧。我们以前用得鼠标就只有两个按键，没用滚轮，用得是ps/2插口的，现在就基本有滚轮的，有usb插口的，更好一点的，方便些的有无线的鼠标，有可以调dpi的鼠标，也有专门用于电子竞技的鼠标。因为我自己也比较喜欢玩游戏，所以对于竞技游戏鼠标有比较多的了解。比如现在就有许多专门设计游戏鼠标的公司“雷蛇”，“魔蝎”等。所以随着人们生活水平的提高，我认为键鼠外设在市场中是有很大潜力的。所以我就做了这个多灵键鼠外设商城这个网站。这个网站也许做的不是那么尽善尽美，但是这个网站还是有比较多的实用性强的功能的。2 关键技术介绍21 asp.netaspnet是asp的升级版本，提供了一种以microsoftnet framework为基础开发web应用程序的全新编程模式。aspnet是建立在通用语言运行时刻库(clr)上的应用程序框架，用来在服务器端构建功能强大的web应用程序。aspnet提供了几个超越以前web开发模式的优点：(1)增强的性能。(2)世界级水平的开发工具支持。(3)强大而富有弹性。(4)简单。(5)易于管理。(6)可订制和扩展。(7)安全性。22 c#microsoft c#是一种新的编程语言，它是为生成运行在net framework上的、广泛的企业级应用程序而设计的。c#语言满足了开发人员要求编程语言象visualbasic那样易于编写、阅读和维护的要求，同时仍然保持c+的功能和灵活性。c#类似于java，但比它更优秀。c#的设计目的是简便性，而不是追求纯粹的功能。虽然放弃了一些处理功能，但同时也获得更大的益处和补偿。c#为开发者提供了以下主要益处：1. 简便性、 一致性、现代性、面向对象、类型无关、可升级性、版本支持、兼容性、灵活性。2. c# 是为了快速开发而设计的语言，内部提供了大量的封装好的接口和类，只需添加相应的命名空间就可以调用。无需关心底层运行状况。并且自动释放资源，是编程者省去了很多需要注意的东西。23 dreamweaver cs3.0dreamweaver是美国macromedia公司（现已被adobe公司收购，成为adobe dreamweaver）开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 dreamweaver、flash以及在dreamweaver之后推出的针对专业网页图像设计的fireworks，三者被macromedia公司称为dreamteam（梦之队），足见市场的反响和macromedia公司对它们的自信。说到dreamweaver我们应该了解一下网页编辑器的发展过程，随着互联网(internet) 的家喻户晓，html技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在word中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 特性：最佳的制作效率。dreamweaver可以用最快速的方式将fireworks，freehand，或photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。dremweaver能与您喜爱的设计工具，如playback flash，shockwave和外挂模组等搭配，不需离开dremweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使dreamweaver自动开启firework或photoshop来进行编辑与设定图档的最佳化。 网站管理：使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，dreamweaver 会自动更新所有连结。使用支援文字、html码、html属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。 无可比拟的控制能力：dreamweaver是唯一提供roundtrip html、视觉化编辑与原始码编辑同步的设计工具。它包含homesite和bbedit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。当您正使用dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和xml dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出xml内容。 24 photoshop cs3.0photoshop cs3.0是一个由adobe systems开发和发行的图像处理软件。photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。2003年，adobe将adobe photoshop 8更名为adobe photoshop cs。因此，最新版本adobe photoshop cs6是adobe photoshop中的第13个主要版本。从功能上看，该软件可分为图像编辑、图像合成、校色调色及特效制作部分等。 图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。 图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路；该软件提供的绘图工具让外来图像与创意很好地融合，成为可能使图像的合成天衣无缝。 校色调色是该软件中深具威力的功能之一，可方便快捷地对图像的颜色进行明暗、色偏的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。 特效制作在该软件中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由该软件特效完成。而各种特效字的制作更是很多美术设计师热衷于该软件的研究的原因 25 sqlserver 2008sql server 是一个关系数据库管理系统。它最初是由microsoft、sybase 和ashton-tate三家公司共同开发的，于1988 年推出了第一个os/2 版本。在windows nt 推出后，microsoft与sybase 在sql server 的开发上就分道扬镳了，microsoft 将sql server 移植到windows nt系统上，专注于开发推广sql server 的windows nt 版本。sybase 则较专注于sql server在un 操作系统上的应用。 microsoft sql server 2008是一个重大的产品版本，它推出了许多新的特性和关键的改进，使得它成为至今为止的最强大和最全面的microsoft sql server版本。 微软的这个数据平台满足这些数据爆炸和下一代数据驱动应用程序的需求，支持数据平台愿景：关键任务企业数据平台、动态开发、关系数据和商业智能。这个平台有以下特点：可信任的使得公司可以以很高的安全性、可靠性和可扩展性来运行他们最关键任务的应用程序。高效的使得公司可以降低开发和管理他们的数据基础设施的时间和成本。智能的提供了一个全面的平台，可以在你的用户需要的时候给他发送观察和信息。3 系统分析和设计31 需求分析在设计本网站的时候，本人首先对许多电脑外设商城进行了观察，了解到了网上商城一般所具有的功能。根据对用户的需求分析，考虑实现以下功能：(1)用户的登录和注册功能(2)用户密码的修改和找回功能(3)商品的多条件查询功能。(4)用户添加商品的购物车功能(5)用户对商品的数量的修改功能。(6)用户删除商品的功能。(7)用户提交订单的功能。需求分析是开发人员通过对应用问题及环境的理解和分析，为问题涉及的信息、功能及系统行为建立模型，将用户需求精确化、完全化的过程。数据库能否正确地反映现实世界，主要取决于需求分析。32 数据库设计1.概念设计本网站后台数据库系统的e-r图如下图所示。图3-1 数据库系统e-r图2.逻辑设计下面主要是系统的表结构，包括用户信息表、鼠标信息表、键盘信息表、键鼠套装信息表、购物车信息表、订单信息表等。表3-1 用户信息表（tb_user）字段数据类型（长度）允许空主键/外键备注idintnot null idusernamevarchar(50)not null主键用户名passwordvarchar(50)not null 密码emailvarchar(50)null电子邮箱telvarchar(50)null手机号码questionvarchar(50)not null密保问题answervarchar(50)not null密保问题的答案表3-2 鼠标信息表（tb_mouse）字段数据类型（长度）允许空主键/外键备注idintnot null idmmodelvarchar(50)not null主键鼠标名brandvarchar(50)not null 品牌pricenumeric(18, 0)not null价格imagesvarchar(50)not null产品图片mtypevarchar(50)null鼠标类型connectionvarchar(50)null鼠标连接方式bnumvarchar(50)null鼠标按键个数wheelnumvarchar(50)null滚轮个数minterfacevarchar(50)null鼠标接口dpivarchar(50)null鼠标精度mhevarchar(50)null人体工程学mpowervarchar(50)null鼠标供应电源colorvarchar(50)null颜色propertiesvarchar(50)null鼠标特点表3-3 键盘信息表（tb_keyboard）字段数据类型（长度）允许空主键/外键备注idintnot null idkbodelvarchar(50)not null主键键盘名brandvarchar(50)not null 品牌pricenumeric(18, 0)not null价格imagesvarchar(50)not null产品图片kbtypevarchar(50)null键盘类型kbconnectionvarchar(50)null键盘连接方式kbinterfacevarchar(50)null键盘接口kbhevarchar(50)null人体工程学kbpowervarchar(50)null键盘供应电源colorvarchar(50)null颜色kbpropertiesvarchar(50)null键盘特点表3-4 键鼠套装信息表（tb_kmset） 字段数据类型（长度）允许空主键/外键备注idintnot null idkmsetmodelvarchar(50)not null主键键鼠套装名brandvarchar(50)not null 品牌pricenumeric(18, 0)not null价格imagesvarchar(50)not null产品图片 kbmodelvarchar(50)null键盘名kbtypevarchar(50)null键盘类型kbconnectionvarchar(50)null键盘连接方式kbinterfacevarchar(50)null键盘接口kbpropertiesvarchar(50)null键盘特点mmodelvarchar(50)null鼠标名mtypevarchar(50)null鼠标类型mconnectionvarchar(50)null鼠标连接方式dpivarchar(50)null鼠标精度mnumvarchar(50)null按键个数mpropertiesvarchar(50)null鼠标特点表3-5 购物车信息表（tb_cart） 字段数据类型（长度）允许空主键/外键备注idintnot null idusernamevarchar(50)not null用户名goodsnamevarchar(50)not null 商品名pricenumeric(18, 0)null价格imagevarchar(50)null产品图片 quantityvarchar(50)null数量totalpricenumeric(18, 0)null小计ifbuyvarchar(50)null是否已购买表3-6 订单信息表（tb_cart）字段数据类型（长度）允许空主键/外键备注idintnot null idusernamevarchar(50)not null用户名realnamevarchar(50)not null用户真名goodsnamevarchar(50)not null 商品名pricenumeric(18, 0)null价格sumpricenumeric(18, 0)null总计 quantityvarchar(50)null数量telvarchar(50)手机号码youbian varchar(50)邮编addressvarchar(50)null地址paymodelvarchar(50)支付方式liuyanvarchar(max)订单留言ifbuyvarchar(50)null是否已购买33 系统总体设计图3-l 系统总体设计图4 系统的实现4.1 页面设计1、前台页面效果 图4-1 首页效果图2、首页的布局头部由logo，导航组成，销售热线，注册按钮等组成。logo和导航主要采用蓝色来配色的。头部的背景是浅灰到白的渐变。导航栏下面是一组可以轮流显示的大图广告，右下角有1234四个数字，分别对应一张图片，点击可以显示对应的图片。广告下面的事登陆框，服务框和产品的推荐，左边的登陆部分文字采用蓝色字，登陆和重置按钮是自己设计的上半部透明的按钮。右边是产品的推荐。自己选了一些比较好看的图片，用ps将图片的大小改变。四张一组，令页面看起来比较充实，最下面是这个网站的版权所有，文字也是对应导航栏的蓝色。4.2 功能设计1、注册页面用户的注册功能：点击图1右上方的注册可以进入注册页面，显示效果如图4-2所示。 图4-2 注册页面效果图用户注册的代码如下所示。protected void button1_click(object sender, eventargs e) db_help dbhelp = new db_help();主要语句/ string sql = insert into tb_user(username,password,email,tel,question,answer) values( + textbox1.text + , + textbox2.text + , + textbox4.text + , + textbox5.text + , + dropdownlist1.selectedvalue.tostring() + , + textbox7.text + );/这是一句将文本框和dropdownlist内的内容插入到数据库中的sql语句 try int i = dbhelp.executenonequery(sql);/执行语句 if (i 0)/判断数据库i是否有值 response.write(alert(添加成功！);location=index.aspx); /有值显示添加成功 else response.write(alert(添加失败！);location=register.aspx);/否则显示添加失败 catch (exception ex) response.write(ex.message); 这个通过一个插入表的sql语句将用户的信息插入到user表中。dbhelp是自己编写的一个类，里面有执行sql语句的方法。2、用户登录功能图4-3 用户登录页面主要代码如下所示。protected void imagebutton1_click(object sender, imageclickeventargs e) db_help dbhelp = new db_help(); string sql = select * from tb_user where username= + textbox2.text + and password= + textbox3.text + ;/查询user表，用户名等于用户名对应的框，密码等于对应的框 try dataset ds = dbhelp.getdatasetbysql(sql);/设置集合ds，ds的值为sql语句查询的值 if (ds.tables0.rows.count = 0)/如果行数为o（即没有这条数据） response.write(alert(用户名或密码错误！);window.close(););/输出用户名或密码错误 else user user1 = new user(ds); sessionuser = user1; response.write(alert(登陆成功！);location=index.aspx);/否则输出登陆成功 catch (exception ex) response.write(ex.message); 如果填写错误可以点击重置按钮来清空文本框。 代码：protected void unnamed1_click(object sender, imageclickeventargs e) textbox2.text = ; textbox3.text = ; 3、密码找回 图4-3 密码找加页面如果忘记密码可以点击图2中的忘记密码右边对应的点击这里的按钮。弹出图4-3所示的页面，填写密保问题可以得到密码。主要代码如下所示。 protected void button1_click(object sender, eventargs e) string sql = select * from tb_user where username= + textbox1.text + and question= + dropdownlist1.selectedvalue.tostring() + ;/查询用户名，和密保问题 try dataset ds = dbhelp.getdatasetbysql(sql);/数据集ds等于刚才sql语句查询出来的数据 if (ds.tables0.rows.count = 0)/如果没有这条数据（用户名或密保问题错误），输出用户名错误或密保问题错误 response.write(alert(用户名错误或问题错误！);window.close();); else string sql1= select * from tb_user where username= + textbox1.text + and question= + dropdownlist1.selectedvalue.tostring() + and answer= + textbox3.text + ; dataset ds1 = new dataset(); ds1 = dbhelp.getdatasetbysql(sql1); /否则执行sql1的sql语句，查询用户的密保问题和答案 if (ds1.tables0.rows.count = 0)/验证dropdownlist1.的选项组的答案是否回答正确 response.write(alert(答案错误);window.close();); else label3.text=你的密码是：; label4.text = ds1.tables0.rows0password.tostring(); catch(exception ex) response.write(ex.message); 4.修改密码 如果想修改密码可以点击图4-2中的修改密码右边对应的点击这里的按钮，进入如图4-4所示的修改页码页面。 图4-4 修改密码页主要代码如下所示。db_help dbhelp = new db_help();/新建db_help类对象dbhelp protected void page_load(object sender, eventargs e) if (sessionuser = null) response.write(alert(请先登录);location=index.aspx;); /验证用户是否登录，如果用户没登录，发出请先登录的警报 protected void button1_click(object sender, eventargs e) user user1 = new user(); user1 = (user)sessionuser; try label3.text = user1.username;/ 将登录用户的登陆名赋给label3。 catch (exception ex) response.write( ); if (user1.password = textbox2.text)/如果用户的旧密码和textbox2上的值相等 string sql = update tb_user set password= + textbox3.text + where username= + label3.text + ;/就更新用户的密码，密码的值为textbox3上的值。 try int i = dbhelp.executenonequery(sql); if (i 0) response.write(alert(修改成功！); location=index.aspx;); catch (exception ex) response.write(alert(修改 出现异常！);location=modify_password.aspx;); else label1.text = 原密码输入错误; 5、商品页面功能 点击图4-1上的鼠标，键盘，键鼠套装，可以分别进入对应商品的页面，此处以商品鼠标为例。图4-5 商品显示页面 6、多条件查询商品例如。你想要搜索牌子为雷蛇价格范围在0-199之间可以点击相应的按钮。与平时我们利用dropdownlist控件所做的多条件查询不同。这个网站是利用button 按钮来做多条件查询功能的。当然，利用button来做多条件查询功能的过程也比较复杂。（lable2用来记录品牌，lable3用来记录价格）主要代码如下所示。protected void button4_click(object sender, eventargs e) if (label2.text = )/如果lable2没有品牌的值，则查询价格在0-199的所有鼠标（sql语句） string sql1 = select * from tb_mouse where price0 and price200 ; label3.text = 0-199;/并赋值0-199给lable3 try ds = dbhelp.getdatasetbysql(sql1);/执行sql1语句 gridview1.datasource = ds;/ gridview1的数据源为sql1语句的数据 gridview1.databind(); dropdownlist2.items.clear(); for (int i = 0; i 0 and price200 and brand= + label2.text + ; label3.text = 0-199;/否则执行sql语句,查询0-199，并且品牌为lable2上显示的品牌的鼠标 try ds = dbhelp.getdatasetbysql(sql); gridview1.datasource = ds; gridview1.databind(); dropdownlist2.items.clear(); for (int i = 0; i gridview1.pagecount; i+) dropdownlist2.items.add(i + 1).tostring(); catch (exception ex) response.write(ex.message); 7、获取商品详细信息并添加商品到购物车 图4-7 商品详细信息页面详细页面获取数据得代码如下所示。public void load() id = request.querystringid;/获取页面传过来的商品的id(图4-6中的更多参数中有商品id,) string sql = select * from tb_mouse where id= + id + ;/查询鼠标id为传过来的id的鼠标信息 try dataset ds = dbhelp.getdatasetbysql(sql); image1.imageurl = ds.tables0.rows0images.tostring(); label3.text = ds.tables0.rows0mmodel.tostring(); label4.text = ds.tables0.rows0price.tostring(); label5.text = ds.tables0.rows0mtype.tostring(); label6.text = ds.tables0.rows0connection.tostring(); label7.text = ds.tables0.rows0bnum.tostring(); label8.text = ds.tables0.rows0wheelnum.tostring(); label9.text = ds.tables0.rows0minterface.tostring(); label10.text = ds.tables0.rows0mhe.tostring(); label11.text = ds.tables0.rows0mpower.tostring(); label12.text = ds.tables0.row