基于Web的众换平台的设计与实现-物品的展示介绍和购买块模

完整源代码CAD设计资料请联系68661508索要本科生毕业设计（论文）题目基于Web众换平台的设计与实现——物品的展示介绍和购买模块姓名 学号 学院 信息工程学院专业 软件工程指导教师 2016年5月16日摘要随着科技的不断进步，网络技术更是发展迅猛，应用到了社会的各个领域。有的用于通信交流，有的用于商业使用，在网上买卖、拍卖、宣传等操作。从而使得网络在社会中变得必不可少，而网站则是网络的重要组成部分之一。建立网站的首要条件是，要了解用户的需求，根据用户的需求来规划网站的内容，以及网站的界面设计，这样才能更好的实现网站与用户之间的交互操作，进而满足用户的需求，吸引更多的用户来我们的网站浏览使用。由于互联网信息传递起来更加便捷，受众人群覆盖面积更加广阔。因此，为了不让物品失去其该有的价值，众换网站出现了，它能让大家在平台上把对大家没有作用的物品，交换成对自己有用的东西。这样能让物品价值重生，也是大家享受到了换物的乐趣，更是减少了物品的浪费。关键词：二手交易；交换；Mysql；JspAbstractWiththeconstantprogressofscienceandtechnology,networktechnologyisdevelopingrapidly,appliedtoeachfieldofthesociety.Usedincommunication,usedforcommercialuse,buyingandselling,intheonlineauction,propaganda,andsoon.Soastomakethenetworkbecomeessentialinthesociety,andthesiteisoneofanimportantpartofthenetwork.Websitefirstconditionisthattounderstandtheneedsofusers,thecontentoftheplanningsite,accordingtotheneedsofusersaswellasthewebsiteinterfacedesign,soastobettertheimplementationofthesiteandtheinteractionbetweentheuseroperations,tosatisfytheneedsofusers,toattractmoreuserstobrowseusingourwebsite.BecauseoftheInternetinformationtransfermoreconvenient,coverareawideraudience.Therefore,inordertokeepthesomeitemslosetheirvalue,andtheinsite,itallowseveryonetohavenoeffectontheplatformofgoods,exchangetheirusefulthingsinpairs.Rebirth,thiscanletthegoodsvalueisalsoeverybodyenjoyedthefunofbarter,butalsoreducethewasteoftheitem.Keywords:Second-handtransactions;Exchange;Mysql;Jsp

目录TOC\o"1-2"\h\z\t"标题3,3"19846摘要 I25266Abstract I281331绪论 1295241.1选题背景 162401.2课题的目的和意义 1189141.3平台设计思想 1208231.3.1实用性 2115731.3.2先进性 2123731.3.3可扩展性及灵活性 2231602相关技术与工具介绍 367792.1B/S体系结构 3215982.2Struts2技术 3228782.3Hibernate技术 343752.4HTML介绍 4147692.5Mysql介绍 494062.6Myeclipse介绍 5308423可行性分析 6133933.1技术可行性 6150023.2经济可行性 675533.3社会行性 6271254平台需求分析 7250424.1目标 7277734.2业务流程分析 761164.3用户需求 733064.4平台基本需求 7317074.4.1实用性 7271144.4.2技术性 7164554.4.3可维护性 7102475模块概要设计 928035.1平台功能设计 9173095.2功能模块描述 1096035.2.1登录注册 1029605.2.2浏览界面 10265855.2.3易物车界面 10211566数据库设计 11211196.1数据库概念结构设计 1152866.2表的逻辑结构设计 14168286.3表的详细设计 15301497众换网站平台的设计与实现 1997267.1平台注册登录功能 19301547.2平台首页展示功能 24216787.3导航栏功能 25158987.4分类列表页功能 25237397.5物品详细展示功能 26267817.6易物车功能 27256877.7平台易物功能 2720222结论 29440致谢 3011497参考文献 31

基于Web的众换平台的设计与实现——物品的展示介绍和购买块模1绪论1.1选题背景现在是一个网络信息化时代，任何一种传播方式都比不过网络的传播速度。所以把这中方式应用到现实生活中，就能解决一些物品的再利用，减少资源的浪费。换客就比较明显的发挥了网络这一强大的资源共享平台所凝聚的作用，通过网络建立起来了人脉关系和物资资源网，我们不需要且觉得无用的东西，可能在网络的另一边有人需要，这样我们就能通过网络建立起来的联系进行物品的交换。网络给我们的生活带来了切切实实的便利。现在物价飞涨，买件衣服都不便宜，现在很多“换客”已经在网络上开始与别人交换自己闲置的物品。“以你所需换我所求”，秉承这个理念，当下换物网平台越来越火爆，正为年轻人所追捧。而换物网站直接催生了“换客”这一群体，这一群体以年轻人为主，他们遵循“需求决定价值”的理念，在网络上交换自己所需的物品和服务，并从交换的过程和收货的东西中享受乐趣。以物易物，这是一种古老的交易方式，现在则是以一种时尚、新潮的姿态华丽亮相。换我网、上海换物街、易物天下、换物吧、换啦联盟总站、中国换客网、一起换货网、换就换手机回收网、爱喜千团网……众多换物网站都想打造出一个崭新模式的“社区化物品交换平台”，为广大的换客提供一种安全、诚信、有保障的在线物品交换的新体验。1.2课题的目的和意义众换平台是一个致力于为中国的网络用户打造一个全方位、立体的网上换物平台。网站是基于WEB技术来设计实现的，向网站的换客们提供了免费的物品交换平台。通过这个平台，换客可以通过原始的交易方式在网站上发布自己的闲置物品，但是本平台为了保证用户的安全交易，发货前双方需要向平台官方缴纳保证金，待双方收货，确保物品没问题以后，官方退还双方的保证金。这样，换客们不仅换到了自己所需要的物品，还让闲置物品的价值再次被利用。平台用户主要以年轻人为中心，因为他们追求时尚新物品，闲置物品较多，且受资金影响，不能总是想够买自己喜欢的物品，因此可以把自己闲置的物品交换自己喜欢的物品。关键操作围绕着您“有什么”和“要什么”来进行。在这里，有多种分类的物品可供您选择；物品的详细分类，可以让您十分方便地选择自己想要交换的物品；物品详情界面对于物品有完整的信息介绍，有物品发布人的联系方式，可以使您快速地阅读信息和交换物品。同时，网站还为换客交换物品时，提供了物品进行安全交换的保障方式。1.3平台设计思想一个易物网平台，必须要有一个正确的设计指导思想，通过合理选择页面功能设计、数据库逻辑设计、操作系统和开发环境，进而构建出一个完善的体系结构，这样才可能充分发挥出网络信息化的优势。根据实际需求分析，本网站平台的设计按照下列原则进行。1.3.1实用性平台以用户需求为目标，以方便用户为原则[1]。根据实际用户需求的功能情况，来创建一个具有巨大优势的易物平台，尽可能降低使用前的指导和使用中的维护时间。充分满足用户现在及未来的各种需求，真正为用户交换物品提供强有力的支持。1.3.2先进性本设计将充分应用现有成熟的web技术，为用户提供高性能的平台。平台采用Mysql数据库管理系统，可以方便的将用户和物品的各类信息进行统一的管理，方便快捷。1.3.3可扩展性及灵活性本平台的设计为了方便未来业务的扩展和系统功能的增加，系统要求能够方便的升级，能够充分保护系统的用户个人信息和数据资源。

2相关技术与工具介绍2.1B/S体系结构本平台所面向的用户是平台的会员用户，为了要突出平台的时代感和时尚感。因此，本平台将要采用比较热门的B/S三层结构。图2-1B/S三层结构图B/S体系结构和C/S，两者相比B/S体系结构不但有用其全部的优点，而且还拥有C/S体系结构所不具备的独特优势:(1)开放的标准：B/S所采用的标准都是、非专用的，是经过标准化组织所确定而非单一政府所制定，保证了其应用的通用性和跨平台性[2]。(2)较低的开发和维护成本：B/S的应用只需在客户端安装通用的浏览器即可，和升级工作都在服务器端进行，不需对客户端进行任何改变，故而大大降低了开发和维护的成本[3]。(3)用户使用简单，界面友好：B/S用户的界面都在统一的浏览器上，浏览器易于使用、，又因为它不再负责数据的存取和复杂数据计算等任务，只需要进行显示，因而大大降低了对客户端的要求[4]。从上面的分析和比较能够得出，B/S拥有C/S模式无法替代的优越性:它不但简化了平台的，而且适用于网上发布信息。因此，我开发的在线物品交换平台采用了B/S模式的体系结构。2.2Struts2技术作为Struts的下一代产品，Struts2整合了Struts1和WebWork的技术基础。作为优秀的B/S软件开发框架，Struts2凭借着它强大的功能，优雅的实现，简洁的应用，已经被人们使用好几年了[5]。目前很多企业都利用Struts2来进行产品的开发。所以说，掌握Struts2技术是每一个B/S模式软件开发程序员的必备技能，这样说毫不夸张。2.3Hibernate技术作为一个开放源代码的对象关系映射框架，Hibernate对JDBC进行了轻量级的封装，我们可以通过操作对象来对数据库进行一定的操作[6]。既可以在java开发的客户端程序中使用，也可以在B/S模式的软件或系统中使用。最值得注意的是，Hibernate完成了在J2EE架构中数据持久化的重任。Hibernate封装了JDBC对数据库的操作，使得我们在使用Hibernate时，不用写繁琐的sql语句，对数据的操作更加方便、易于书写[7]。总之，Hibernate优点有很多，就目前我在学习中体会到的最大的优点是：以对象的形式操作数据，提高了开发效率，更换数据库只要修改配值文件，不用关心数据库种类。2.4HTML介绍HTML的英文全称是"HypertextMarkupLanguage",中文译为“超文本标记语言”[8]。“超文本”就是指页面内可以包含图片，联接，甚至音乐，程序等非文字的元素[9]。一个HTML文件中包含了所有将显示在网页上的文字信息，其中也包括对浏览器的一些指示，如哪些文字应放置在何处，显示样式是什么样的等。如果你还有一些图片、动画、声音或是任何其它形式的资源，HTML文件也会告诉浏览器到哪里去查找这些资源，以及这些资源将放置在网页的什么位置[10]。浏览的网页就是由HTML语言编写出来的。虽然HTML是一种，但HTML不是程序语言，如C++和Java，它只是标示语言，你只要各种标记的用法便算学会了HTML，HTML非常简单，只是由文字及标记，因此任何文本编辑器都可以制作HTML页面[11]。本平台采用了一些HTML5的canvas绘图技术，如下：<canvasid="canvas"style="border:0solidaquamarine;position:absolute;z-index:-1;"></canvas><scripttype="text/javascript">varcanvas=document.getElementById('canvas');canvas.width=1100;canvas.height=80;varcontext=canvas.getContext('2d'); varlGrd=context.createLinearGradient(0,0,0,80); lGrd.addColorStop(0,'#4f4f48'); lGrd.addColorStop(0.5,'#797970'); lGrd.addColorStop(1,'#c5c5b9'); context.fillStyle=lGrd; context.fillRect(0,0,canvas.width,canvas.height); </script>利用以上代码实现网页头部颜色的渐变来作为背景色，实现结果如下图2-2所示：图2-2canvas实现颜色渐变2.5Mysql介绍Mysql是一个完全支持Web的数据库产品，提供了对可扩展标记语言(XML)的核心支持以及在Internet上和防火墙外进行查询的能力，提供了以Web标准为基础的扩展数据库编程功能[12]。目前MySQL被广泛地应用在Internet上的中小型网站中。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库[13]。本平台则是使用MySQL作为网站数据库，来实现平台数据的存储。2.6Myeclipse介绍作为开发客户端程序,B/S模式软件的Eclipse插件集合，MyEclipse凭借它强大的功能，当之无愧的被人们称为十分优秀的工具[14]。由于MyEclipse集成了强大的功能，利用它我们可以很方便地进行软件开发和JavaEE的发布，极大提高了工作效率。在对开源产品的支持上，MyEclipse可谓做到了极致，例如，它可以完美支持Struts、JDBC、Hibernate、JSP等多项数据库连接工具。

3可行性分析可行性分析也称为可行性研究，是在调查的基础上，针对新网站平台的开发是否具备必要性和可能性，对新网站平台的开发从技术、经济、社会等方面进行分析和研究，以避免投资失误，保证新网站平台的开发成功[15]。可行性研究的目的是为了用最小的代价在尽可能短的时间内确定问题是否能够解决。接下来，我将从技术、经济、社会这三方面对众换平台的创建进行分析和规划。3.1技术可行性根据社会发展，物质消费的功能、性能及实现网站平台的各种约束条件，根据网站平台的目标来衡量所需的技术是否具备。就目前而言，现有的技术已较为成熟，硬件、软件的性能要求等各种条件良好，估计利用现有技术应该完全可以达到本平台的功能需求。整个平台可分为前台界面，和后台对象的开发。前台主要是界面设计和控件的使用，预计实现将比较容易。通过以上分析可知，众换平台的开发在技术上是可行的。3.2经济可行性软件的经济可行性是指软件所能带来的经济效益与开发设计所需要的投资相比，是否相适宜，同时还要看此软件能否真正给用户带来足够的经济效益[16]。我所开发的全国众换平台易物网正是基于为用户提高工作效率、节省工作时间、方便操作与管理的目的而设计的。本平台的开发在经济上是完全可行的。开发此网站平台不需要大量的，而且是学生设计，可以节省许多费用，同时也可提高我们个人的实际能力。网站平台的开发基于本人对程序开发的实践学习而来，无需太多资金投入，并且软件开发过程投入的成本不高，因此开发经费完全可以接受。由以上分析可知，众换平台在经济上是可行的。3.3社会可行性本网站平台是根据众换平台的实际情况开发的，是通过分析大量网络数据得出来的，网站平台的软件设计是在独立的环境下完成的，无可供抄袭的软件产品。本网站平台对用户的要求，除了需要具备会使用电脑上网外，并不需要特别的技术能力。使用网站平台的管理员，需要具备对Tomcat服务器的使用能力，在投入使用前，无需对操作网站系统的人员进行培训。这样既减少投入成本又简化了操作环节。由以上分析可知，本网站平台具有社会可行性。4平台需求分析需求是用户对系统提出的要求，这些要求可以是原始的、笼统的，也可以是抽象的，细节化的。任何一个全国众换交易网站的开发都必须以这些需求作为出发点。网站需求分析工作质量的好坏，将对后面几个阶段的开发工作产生决定性的影响。一个网站平台不管其设计、编码工作做得多好，若需求分析存在缺陷，不能满足用户要求，将严重影响网站质量并会给开发者带来很大的困难和损失。需求分析过程是整个平台开发最重要的阶段，分析的成功与否，决定着整个平台功能的完善性以及稳定性[17]。在该阶段需求分析人员需要确定整个系统的，并且将现实事务抽象成对象并建模。4.1目标独立开发并完成此平台主要功能，满足用户的基本需求，产品能投入到实际使用。编写出详细的文档，为后续开发维护做好准备。代码在保证足够的性能的前提下尽量追求可读性。4.2业务流程分析在进行业务时，需要按照原有信息，逐个地调查分析所有环节的、、处理顺序和对处理时间的要求，弄清各个环节需要的信息、、流经去向、处理方法、、提供信息的时间和信息形态（、报单、）等。业务流程分析可以了解该业务，和处理网站系统调查工作中的错误和。业务流程分析是通过业务流程图来进行，即用一些规定的符号及连线来表示某个具体业务处理过程[18]。4.3用户需求平台分为用户和管理员，用户可以在平台发布自己想要交换的物品，并处理自己的订单，修改自己的个人信息，管理员主要在于审核用户提交的订单。审核通过，订单双方则可以发货。4.4平台基本需求4.4.1实用性软件设计开发的最终目的就是应用。因而本软件以实用性为终极目标，实行人性化设计，操作简单、方便。4.4.2技术性本软件开发环境是在Windows的开发平台上，用Myeclipse编写，Mysql作后台数据库开发。具有安全可靠、可移植性强的特点。4.4.3可维护性一个软件的也是软件开发过程中研究的一个，本平台秉承软件工程程序，注重程序的可重用性，将需重复使用的代码进行封装，减少了，提高了效率。同时，时尽量注重数据之间的关联性，使表结构、，提高数据的可维护性。5模块概要设计5.1平台功能设计网站系统设计是一个把软件需求转换成用软件网站系统表示的过程[19]。通过对目标网站系统的分析和研究，做出了众换平台的总体规划，这是全面开发网站系统的重要基础。在对众换平台全面分析调查的基础上，制定出众换平台的总体规划。网站系统设计包括网站系统总体设计、网站、网站系统数据库设计、和开发模式等。下图为本平台的模块功能图，描述了本平台的操作功能。如下图所示：图5-1平台模块功能图图5-2商品浏览模块图图5-3商品购买模块图5.2功能模块描述5.2.1登录注册此平台提供用户注册，管理员和用户的登录。5.2.2浏览界面主界面模块：进行物品的简单分类导航，显示物品的名称，名称由用户自定义。并有显示最新物品的模块和点击率最高的物品，以及最新物品的图片的轮播。分类物品列表模块：显示该类物品的信息，包括物品名称，物品的估价，卖家昵称，以及物品所在地等。物品详细介绍模块：左侧显示卖家的信息，包含卖家的昵称和联系方式，右侧显示物品信息，包含物品图片，物品的名称，新旧程度，物品估价，以及物品的详细描述等。5.2.3易物车界面显示加入易物车的物品信息，包括物品的名称，分类，评估价格，数量，以及对物品的删除操作。也能返回首页，继续选购物品。或者点击下一步，跳转到生成订单界面。生成订单模块：在想要交换的物品下面，留下自己提供的物品信息，以及自己的收货地址。点击下一步，生成订单号。6数据库设计6.1数据库概念结构设计数据库关系模型的组成元素有：实体、属性、联系。数据库关系模型用数据库关系图表示。实体是用户工作环境中所涉及的事务，属性是对实体特征的描述[20]。(1)模型中的实体相当于实体集、，而不是单个实体或表中的一行。实体用矩形框表示，实体名称标注在矩形框内。用菱形表示实体间的联系，菱形框内写上联系名，用无向边把菱形分别与有关实体相连接，在无向边旁标上联系的类型[21]。(2)属性是。用椭圆，与用一条线相连表的主码是，加下划线[22]。(3)各子网站系统模块中主键相同的字段之间存在着相互关联的关系[23]。(4)在程序中实现对他们的和一致性控制。网站中用户信息实体E-R图，如图6-1所示：图6-1用户信息实体图网站中物品信息实体E-R图，如图6-2所示：图6-2物品信息实体图网站订单信息实体E-R图，如图6-3所示：图6-3订单信息实体图网站物品分类信息实体E-R图，如图6-4所示：图6-4分类信息实体图网站中易物车订单信息E-R图，如图6-5所示：图6-5易物车实体图数据库E-R图，如图6-6所示：图6-6数据库实体图从数据中得出网站系统的实体图，遵循三范式原则，对实体之间的依赖关系进行了整合，得出网站系统数据库关系图，如图6-9所示：图6-7众换平台数据库关系图6.2表的逻辑结构设计将概念模型转换为逻辑模型，得到以下众换平台系统的关系模型：1.用户信息表关系模型用户信息表（用户编号，用户姓名，用户真实姓名，用户密码，用户QQ，用户电话号码，用户邮箱，用户性别，用户身份标识，用户地址），主码为用户编号，外码为用户地址。2.地址信息表关系模型地址信息表（地址编号，地址父级编号，地址名称，地址排序），主码为地址编号。3.物品信息表关系模型物品信息表（物品编号，物品姓名，物品的新旧程度，提供想要想交换的物品，物品的价格，物品的数量，物品的描述，物品的图片地址1，物品图片地址2，物品图片地址3，物品图片地址4，物品是否出售的标识，用户编号，地址编号，物品分类编号，物品发布时间，物品点击次数）主码为物品编号，外码为用户编号，地址编号，物品分类编号。4.物品分类信息表关系模型物品分类信息表（物品分类编号，物品分类名称）主码为物品分类编号。5.物品订单关系表关系模型物品订单关系表（物品编号，订单编号，提供要交换的物品，对提供要交换物品的描述，交换物品的数量）主码为物品编号，订单编号，外码为物品编号，订单编号。6.易物车信息表关系模型易物车信息表（易物车编号，易物车总价，物品数量，用户编号），主码为易物车编号，外码为用户编号。7.物品易物车关系表关系模型物品易物车关系表（物品编号，易物车编号），主码为物品编号，易物车编号，外码为物品编号，易物车编号。8.订单信息表关系模型订单信息表（订单编号，订单总价，订单生成时间，订单发货时间，订单完成时间，订单收货地址），主码为订单编号。9.用户订单关系表关系模型用户订单关系表（用户编号，订单编号，用户在该订单中的状态），主码为用户编号，订单编号，外码为用户编号，订单编号。6.3表的详细设计用户表，表名user表6-1用户表列名类型长度是否为空是否为主键说明user_idint否是主键，用户的唯一性user_namevarchar45否否用户昵称，登录使用，要求不能重名user_realvarchar10是否用户真实姓名user_passwordint32否否登录密码user_qqint否否用户QQ号user_phonevarchar11否否用户电话号码user_emailvarchar45否否用户邮箱user_sexchar4是否用户性别user_1varchar45是否用户标识符，0表示普通用户，1表示网站管理员user_addressint否否用户所在地址。外键，所属身份address说明：用于存储用户的信息，便于登陆网站，与用户之间交流。物品表，表名goods表6-2物品表列名类型长度是否为空是否为主键说明good_idint否是主键。值自动增一good_namevarchar45否否物品名称good_newoldvarchar10否否物品的新旧程度createtimevarchar32是否该物品的发布时间good_1varchar45否否标识符，表示物品出售还是库存good_changevarchar15是否想要交换的物品good_describetext是否对该物品的描述good_pricefloat否否对该物品的评估价格good_numint否否该物品的数量good_picture1varchar100是否该物品的第一张图片地址good_picture2varchar100是否该物品的第二张图片地址good_picture3varchar100是否该物品的第三张图片地址good_picture4varchar100是否该物品的第四张图片地址click_countint是否该物品的点击次数Address_idint否否物品所在地址。外键。所属身份addressuser_idint否否物品发布人。外键，所属身份usergoods_classify_idint否否表示该物品所属的分类。外键，所属身份goods_classify说明：该表用于存储物品的信息，物品所属的分类，以及物品的发布人和物品的图片地址。3．订单表，表名t_order表6-3订单表列名类型长度是否为空是否为主键说明order_idint否是主键，自动增一order_total_pricefloat否是该订单的总价格send_good_timevarchar20是是该订单的发货时间order_addressvarchar200否是收货地址order_timevarchar20否是该订单产生时间order_finish_timevarchar20是是该订单的完成时间说明：该表用来存储订单的信息，包含订单的价格，订单的产生时间，完成时间，发货时间等。4．易物车表，表名shopping表6-4易物车表列名类型长度是否为空是否为主键说明shop_idint否是主键。值自动增一Shop_total_pricefloat否否购物车的总价格shop_numint否否该物品所在购物车的数量user_idint否否该购物车的主人，外键，所属身份user说明：该表为易物车的存储信息表，存储了易物车的总价格，包含了易物车与用户对应的关系。5.地址表，表名address表6-5地址表列名类型长度是否为空是否为主键说明address_idint否是主键。值自动增一address_pidint否否地址级别address_namevarchar30否否地址名字address_sortvarchar45否否地址排序说明：该表存储地址信息。物品分类表，表名goods_classify表6-6物品分类表列名类型长度是否为空是否为主键说明goods_classify_idint否是主键。值自动增一goods_classify_namevarchar45否否分类名称goods_classify_1varchar45是否备用字段1goods_classify_2varchar45是否备用字段2说明：该表用于存储物品的类别。商品和订单的关联表，表名goods_order表6-7商品和订单的关联表列名类型长度是否为空是否为主键说明good_idint否是外键，所属身份Goodsorder_idint否否外键，所属身份t_ordergood_numint否否该物品要交换的数量changegoodvarchar80是否提供交换物品的名称changegood_desvarchar2000是否对提供交换物品的描述说明：该表商品和订单关联表，把双方需要交换的物品关联起来。易物车和物品关联表，表名goods_shopping表6-8易物车和物品的关联表列名类型长度是否为空是否为主键说明goods_idint否是外键，所属身份goodsshop_idint否是外键，所属身份shopping说明：把易物车里面的物品和对应的易物车关联起来。用户和订单关联表，表名user_order_status表6-9用户和订单的关联表列名类型长度是否为空是否为主键说明user_idint否是外键，所属身份userorder_idint否是外键，所属身份t_orderuser_order_statusint否否订单的交易状态，默认为0说明：用与显示订单的交易状态。7众换网站平台的设计与实现7.1平台注册登录功能1.平台用户的注册流程图，如下图7-1所示：图7-1注册流程图用户注册界面，如下图7-2所示：图7-2用户注册页面该界面使用于人们注册成为网站会员，本页面通过使用javascript来判断用户信息是否填写完整，信息没有填写完整不能进行提交信息进行注册，反之，填写正确且完整的信息可以可以提交注册信息，成为网站会员。主要判断信息代码如下：//判断用户名functioncheck_username(){ //alert("dd"); varusername=$('.username').val(); varaa=true; if(username.replace(/(^s*)|(s*$)/g,"").length==0){ document.getElementById("username_re").innerHTML="<spanstyle='color:red;'>用户名不能为空！</span>"; returnfalse; }else{ $.ajax({ url:'usernamecheck.action', type:'post', dataType:'json', data:{username:username}, success:function(data){ if(data=="ok"){ document.getElementById("username_re").innerHTML="<spanstyle='color:red;'>用户名已存在，请重新填写！</span>"; aa=false; }else{ document.getElementById("username_re").innerHTML="<spanstyle='color:green;'>正确！</span>"; aa=true; } } }); returnaa; }}//判断密码functioncheck_password(){ varpassword=$('.password').val(); if(password.length==0){ document.getElementById("password_re").innerHTML="<spanstyle='color:red;'>密码不能为空！</span>"; returnfalse; }elseif(password.length<6||password.length>16){ document.getElementById("password_re").innerHTML="<spanstyle='color:red;'>密码不能大于16位或者低于6位</span>"; returnfalse; }else{ document.getElementById("password_re").innerHTML="<spanstyle='color:green;'>正确！</span>"; returntrue; }}//确认密码functioncheck_repassword(){ varpassword=$('.password').val(); varrepassword=$(".repassword").val(); if(password==repassword){ document.getElementById("repassword_re").innerHTML="<spanstyle='color:green;'>正确！</span>"; returntrue; }else{ document.getElementById("repassword_re").innerHTML="<spanstyle='color:red;'>两次输入密码不一致！</span>"; returnfalse; }}//判断真实姓名functioncheck_realname(){ varrealname=$('.realname').val(); if(realname.replace(/(^s*)|(s*$)/g,"").length==0){ document.getElementById("realname_re").innerHTML="<spanstyle='color:red;'>姓名不能为空！</span>"; returnfalse; }else{ document.getElementById("realname_re").innerHTML="<spanstyle='color:green;'>正确！</span>"; returntrue; }}//判断QQfunctioncheck_qq(){ varqq=$('.qq').val(); if(qq.length==0){ document.getElementById("qq_re").innerHTML="<spanstyle='color:red;'>QQ不能为空！</span>"; returnfalse; }elseif(qq.length<5){ document.getElementById("qq_re").innerHTML="<spanstyle='color:red;'>请输入正确的QQ号</span>"; returnfalse; }else{ document.getElementById("qq_re").innerHTML="<spanstyle='color:green;'>正确！</span>"; returntrue; } }//判断电话functioncheck_phone(){ varphone=$('.phone').val(); if(phone.length==0){ document.getElementById("phone_re").innerHTML="<spanstyle='color:red;'>手机号不能为空！</span>"; returnfalse; }elseif(phone.length!=11){ document.getElementById("phone_re").innerHTML="<spanstyle='color:red;'>请输入正确的手机号</span>"; returnfalse; }else{ document.getElementById("phone_re").innerHTML="<spanstyle='color:green;'>正确！</span>"; returntrue; }}//地址选择functioncheck_address(){ }//邮箱判断functioncheck_email(){ varemail=$('.email').val(); if(email.length==0){ document.getElementById("email_re").innerHTML="<spanstyle='color:red;'>邮箱不能为空！</span>"; returnfalse; }else{ document.getElementById("email_re").innerHTML=""; returntrue; } }functioncheck(){ if(check_username()&&check_password()&&check_repassword()&&check_realname()&&check_qq()&&check_phone()&&check_email()){ //alert("dd"); returntrue; }else{ //alert("gg"); returnfalse; }}2.平台用户的登录流程图，如下图7-3所示：图7-3登录流程图网站用户登录功能界面，如下图7-4所示图7-4登录界面该界面用于网站用户登录，首页利用css将登录框隐藏起来，点击登录通过javascript来显示出来，并使用了animate来实现弹出登录框的动画移动效果。3.用户登录前后的头部区别，如下图所示：图7-5用户登录前的头部图7-6用户登录后的头部网站平台的头部使用HTML5的canvas绘图技术来实现背景色从上往下由深到浅。用户登录平台以前，头部显示注册和登录模块，用户登录以后，平台头部显示用户的用户名，以及用户的个人管理，跳转个人后台管理，还有易物车，跳转到用户的易物车，最后则是退出平台的功能。7.2平台首页展示功能1.网站首页显示最新发布物品，查看最热门的物品，并且运用了滚动播放的方式，滚动播放展示热门商品的图片，如下图7-7所示：图7-7网站主界面1图7-8网站主界面2图7-9网站主界面3以上3个图片界面显示了前面3个热门物品的图片轮播显示，左侧则是通过物品的发布时间来读取显示出最新的物品，右侧则是通过物品的点击次数来显示热门物品，点击次数越高，在热门物品中显