基于HTML5的网络书店系统

毕业设计（论文）设计（论文）题目基于HTML5的网络书店系统研究学院名称电子与信息工程学院专业计算机科学与技术班级09级1班（网络）姓名季炜学号09401010139指导教师李庆风职称副教授定稿日期2013年5月18日I基于HTML5的网络书店系统研究摘要HTML5是一种建立在平台之上的动态网页制作语言，它是一种网页浏览的新标准，它在原有的HTML基础上新增和优化了部份内容，使得网页更加快捷和对外部更加兼容。本课题用HTML5语言开发小型网络书店网站。主要目的是运用HTML5技术于网络书店，探讨HTML5这一新技术带来的变革，并对HTML5的一些新特性进行了研究和实验。本文阐述了网络书店的设计与实现，给出了网站的系统分析，描述了网页设计概况。关键词HTML5，网络书店，网站IIONLINEBOOKSTORESYSTEMSTUDYBASEDONHTML5ABSTRACTHTML5ISALANGUAGEBASEDONPLATFORMOFDYNAMICWEBPAGECREATION,ITISANEWWEBSTANDARD,ITISONTHEBASISOFTHEORIGINALHTMLNEWANDOPTIMIZETHEPARTTOMAKEWEBPAGESMOREQUICKLYANDMORECOMPATIBLEANDEXTERNALTHISPAPERMAINIMPLEMENTATIONISTOUSETHEHTML5LANGUAGEDEVELOPMENTSMALLNETWORKBOOKSTOREWEBSITE,ONLINEBOOKSTOREISATYPICALREPRESENTATIVEOFBOOKSISSUEDUNDERTHENETWORKENVIRONMENT,THISSTUDYISTHESTUDYOFTHEONLINEBOOKSTORESYSTEMBASEDONHTML5MAINPURPOSEISTOUSETHEHTML5TECHNOLOGYINNETWORKBOOKSTORE,DISCUSSIONONHTML5,ANEWTECHNOLOGYOFCHANGE,ANDSTUDIEDTHEHTML5SNEWFEATURESANDEXPERIMENTALTHISPAPEREXPOUNDSTHEDESIGNANDIMPLEMENTATIONOFONLINEBOOKSTORE,GIVESASYSTEMATICANALYSISOFWEBSITES,DESCRIBESTHEPROFILEOFWEBDESIGNKEYWORDSHTML5,ONLINEBOOKSTORE,WEBSITEIII目录摘要IABSTRACTII目录III第1章绪论111本课题国内外研究现状1111国外现状1112国内现状312本课题研究目的613论文结构7第2章研究内容及相关技术821研究内容822相关技术介绍11221PHPAPACHEMYSQL11222HTML513第3章系统设计1531图书展示功能1532图书查询功能1533留言功能、涂鸦功能1634图书评选功能16第4章系统详细设计及实现1741数据库设计与实现1742网站具体实现18421网站首页18422查询功能19423留言板设计21424图书评选24IV第5章总结与展望2651总结2652展望26参考文献27致谢28软件使用说明书291软件概述292运行环境293使用指南29宁波工程学院本科毕业设计论文1第1章绪论11本课题国内外研究现状网络书店是随着网络技术的发展而出现的一种售书渠道。它通过人与电子通信方式相结合，依靠互联网实现图书的在线交易。与传统的书店相比，网络书店既可以避免书目订货的局限和盲目，又可以克服看样订货投入大、费用高、管理难的不足，而且网上选择范围广能直观看样本、可浏览内容、可随时添订、结算及时、快捷方便、周转高速。这些优势是其它交易方式难以达到的。目前比较著名的国内外网络书店有亚马逊、当当网。111国外现状世界上第一家网络书店是1991年在美国联机公司AOL的网络上建立的“阅读美国“书店。1994年贝佐斯在西雅图成立的亚马逊网络书店，如今已成为全球最大网络书店，1998年的顾客总数为450万，销售额达61亿美元，股票市值100多亿美元，控制着美国80的网上图书销售市场。亚马逊网络书店的成功在图书销售领域产生了巨大影响。1997年5月，美国最大的连锁书店巴诺书店也正式开办了网络书店。亚马逊首页有搜索功能，可以根据自己需要来搜索想要的产品或相关产品；首页左边有所有产品的分类，形成一个菜单，顾客也可以从这里逐级查找所要产品；首页有一个叫“WHATOTHERCUSTOMERARELOOKINGATRIGHTNOW”的版块，这是其他顾客正在查看的产品展示，动态资料为顾客提供最新信息；“DIGITALCAMERASBESTSELLERS”版块是最畅销的相机展示，这些为想买相机的朋友们提供了一个非常有用的信息；“THEBESTPRICESONTHEMOSTLAPTOPS”板块为价格最合理的笔记本电脑展示，这些为正在浏览网站的顾客们提供了许多有用的信息；在首页下端有一个区域”YOURRECENTHISTORY”记录着你最近浏览过的网页和途径，可以轻松点击查看自己之前访问过的产品。所以我们看到了中意的产品时就不会找不到它，轻松查看。首页右边部分放着少量的促销产品，有兴趣的人可以快速点击查看。这里可以看到比较少的广告，主要是宁波工程学院本科毕业设计论文2为顾客考虑，太多广告妨碍视线，也会使顾客产生一种厌恶感，因此去掉了许多广告，使得整个界面一目了然。亚马逊网站与传统的商务网站有些不同，非常简洁的界面给顾客留下了一个好印象，几个与众不同的特色板块让人拍手叫好，强大的搜索引擎搜索产品时非常快速准确。但是目前移动设备盛行，颇具历史的亚马逊网络书店为了与时俱进采用APP技术，使用手机访问效果如图图11手机APP浏览亚马逊这种第三方应用软件支持方式无疑是需要额外成本的，如果采用HTML5设计开发网站的话，就不需要如此繁复了，无论在什么平台，使用什么设备，只要有支持HTML5的浏览器，它就可以完美访问。下面是基于HTML5的网络书店系统在PC机上浏览和在手机上浏览的截图效果，不需插件、不需APP可以完美访问，且展示效果完美。宁波工程学院本科毕业设计论文3图12电脑上访问本系统效果图13手机上访问本系统效果112国内现状我国有庞大的网民基数和民众购买行为的改变，因此网络书店在我国存在着巨大的市场潜力。当当网是一个“纯网络”型BTOC网上商店。当当网自1999宁波工程学院本科毕业设计论文4年11月开通，号称是目前全球最大的中文网上图书音像商城，面向全世界中文读者提供近三十多万种中文图书和音像商品，每天为成千上万的消费者提供方便、快捷的服务，给网上购物者带来极大的方便和实惠。当当网的使命是坚持“更多选择，更多低价”，全球已有2000万的顾客在当当网上选购自己喜爱的商品。当当网的网页最上层是分类区，方便用户根据自己的要求查询。在左面是商品分类包括百货、图书/杂志、影视、音乐、游戏等的分类。其中提供的三十万种图书，占中国大陆可供书市场的百分之九十。另外还有店中店的商品分类，中间是主要的广告内容，在右边就是最近的一些新产品以及TOP排行榜。当当网还设立了专门的论坛。不论你是对商品、服务、还是网站有任何的不满，或者对当当网有什么建议，你都可以在论坛上发表你的观点。这样不但有利于其他客户增加对该商品的了解，也有助于网站的设计或管理人员及时修补网站的漏洞，使网站的功能更强大，更快更好的满足顾客的个性化需求。搜索比价系统，是当当网开发的智能比价系统。通过此系统，当当每天都实施对其他电子商务网站的同类商品与当当网同类商品的价格进行对比。如果对方同类商品价格低于当当网商品价格，此系统将自动调低当当网同类商品的价格。2006年10月下旬，当当网个性化商品推荐功能上线。其全新推出的“为你推荐”个性化服务的过人之处在于，当当网购物系统将根据顾客的购物习惯自动向他们推荐相关商品。另外，细心的网络顾客还会发现，当当网的购物搜索也悄然更换了面孔。出去界面变得更简洁清新外，更重要的是，如今当当网顾客的搜索范围不仅包括当当网近百万自营商品，还把当当数千家店中的各类商品一搜到底。显然，再打出“搜索个性化”网购组合后，当当网在电子商务市场不但增强了顾客粘性，而且再次引领了市场趋势。目前当当网进军移动市场，开发并发布了IPHONE版、ANDROID版、IPAD版、WINDOWSPHONE版以及ANDROIDPAD版如此之多的APP，以方便用户随时随地通过移动设备访问。这不禁让人联想到整个系统的开发、更新以及维护是十分麻烦的，如果使用HTML5技术这些问题便可迎刃而解，只需要考虑浏览器是否支持即可。从而省去众多APP的开发、维护费用，专注于电子商务事业。当当网在PC机访问和在手机使用APP访问效果如下宁波工程学院本科毕业设计论文5图14当当网主页图15当当网手机APP界面由此可见，当当网在电脑和移动终端的用户体验是完全不同的，一些动态效果是无法体现的，HTML5就不同了，使用电脑和手机访问视频、音乐、动态效果是不会发生改变的。宁波工程学院本科毕业设计论文6图16HTML5拖拽页面图17手机上拖拽页面12本课题研究目的尽管亚马逊和当当网已经相当成功，但是随着无线网络技术的成熟，包括手机、平板电脑在内的移动终端备受人们青睐，大多数传统的电子商务网站都面临着如何很好的支持移终端这一问题。随时随地上网浏览并获取所需信息，真可谓一切尽在“掌”握，然而目前便携设备对于一些网络应用支持的不是十分完美，比如说网络书店，我们用便携设备浏览亚马逊，当当网时，看到的并不是电脑宁波工程学院本科毕业设计论文7上看到的那样的网页，而是APP。这种把网站做成APP以便支持便携设备浏览的做法，无疑给电子商务企业带来额外的技术费用开支，但是随着HTML5的出现将改变这一现状。以往我们用FLASH或者是JAVA在网站之中嵌入网页应用程序，这种技术并不是浏览器原生的，所以说并不是能对于网页提供无缝的支持，尤其是对于手机、平板电脑等移动终端的支持不是很完美，需要APP来完成。但是HTML5就不是这样的了，HTML5是一种标准，只要是浏览器遵循这样的标准我们就能调用底层的硬件对于上层的网页进行显示，而且也是能方便的编写各种WEB应用。1换言之，就是使用HTML5技术开发一个网页，无论用户通过什么终端访问，看到的都是原生态的网页，它的音视频播放不依赖任何第三方插件，无需安装FLASH、SVG，通过移动设备访问只需使用支持HTML5的浏览器即可，无需APP技术。13论文结构本文主要是对基于HTML5的网络书店系统原理的研究，同时通过部署APACHE服务器，使用MYSQL数据库，自己设计和开发WEB网站来实现基于HTML5的网络书店系统。第一章绪论。主要介绍了研究背景，目前网络书店的国内外发展情况，同时对本文的主要工作做了简单的介绍。第二章研究内容及相关技术。主要对相关技术，如PHPNOW（APACHEPHPMYSQL）、HTML5做了详细的介绍与分析。第三章系统设计。主要对系统进行总体设计，对系统的架构进行设计，对系统所需要完成的功能提出需求，包括查询系统、留言系统、图书评选系统。第四章系统详细设计及实现。主要是完成基于HTML5的网络书店系统的实现。对各个模块进行详细设计和开发，数据库的详细设计与实现。第五章总结与展望。主要是对本系统的总结、今后要做的工作以及未来HTML5技术的前景。宁波工程学院本科毕业设计论文8第2章研究内容及相关技术21研究内容随着HTML5的迅猛发展，各大浏览器开发公司如GOOGLE、微软、苹果MOZILLA和OPERA的浏览器开发业务都变的异常繁忙，近年来无论是MOZILLA的FIREFOX、GOOGLE的CHROME、苹果的SAFAR，还是微软的INTERNETEXPLORER，以及OPERA都处于不断推陈出新的状态当中。2HTML5是一种技术，或者说是一种网页浏览的新标准。著名调查公司AC尼尔森的一项研究显示中国网民有超过五分之三的人群在网上购物，而超过一半的网上购物者选择网上买书，也就是说最受欢迎的网上商品是书籍。而随着移动终端的粉墨登场，由于使用HTML5技术的网络书店具有优秀的跨平台、跨终端能力，仅需要一个浏览器就可以，所以这将是网络环境下图书发行的必然发展趋势。电脑上通过WEB浏览器执行的HTML5应用正取代安装型本地应用成为主流，这一潮流也蔓延到了智能手机，“火狐OS”及“TIZEN”等主推HTML5的移动OS已经问世，谷歌也做出多项决策，要将安卓大幅转向HTML5。本课题旨在以制作网络书店为前提，体验HTML5这一新技术。众所周知，框架可以帮助我们更快速、更容易实现功能，让开发者集中精力于更重要的方面，而不会浪费时间做重复的任务。本网络书店系统想要实现一下HTML5新特性1HTML5全新的标签。取消了一些过时的标记，HTML4中的内容标签级别相同，无法区分各部分内容。而HTML5中的内容标签互相独立，级别不同，搜索引擎以及统计软件等均可快速识别各部分内容。千篇一律的注定要淘汰掉，如图21所示，HTML5与之前布满的页面相比，已经变得清晰了很多。涉及的各种头部，都会包含在标签内，各种结尾内容都会使用标签，导航菜单放在标签,主要内容放在标签，独立的文章部分放在标签，相关简介等内容放在侧边标签内。宁波工程学院本科毕业设计论文9图21全新的标记2全新的表单对象。在实际的表单应用中，一些数据输入需要一个独立的规则，如邮箱地址、网址等，我们都会提供一个特定的格式限定和验证。HTML5对表单的发展是适应互联网发展的需要，也是在适应开发者的需要，在做表单处理的时候，最常用的就是表单验证了。一般的验证会写很多冗长的JAVASCRIPT代码，或者借助一些基于JAVASCRIPT的验证框架，如目前较为流行的JQUERY的验证框架。HTML5发展了这些表单，把具有特定规则意义的表单，扩展一些特有的特性作为表单的原始功能；验证表单的功能，也作为表单本身应具备的功能，原生地被支持，即可以抛弃JAVASCRIPT或者是PHP，只通过HTML5来定义表格单元的输入格式和这个单元是否是必填的等等。3CANVAS对象。到目前为止，基本上想要直接在网页上进行绘图还是不能轻易完成的，即使是几何图形也不可以。在浏览器当中直接能跟图片的交互操作也很有限，多数是保存和点击。若要在页面中实现绘图就要借助第三方工具，如FLASH、SVG、VML等，这种做法无疑把问题复杂化了，在互联网应用不断的发展中，页面绘图使用越来越多，CANVAS元素应运而生。HTML5了解人们的需求，HTML5已经确定引入CANVAS元素，它自己没有行为，只是把一个绘图API展现给客户端JAVASCRIPT,以使脚本能够把想绘制的东西都绘到一块画布上。4HTML5取代FLASH。在HTML5之前，要在网页中添加音频或视频，最简单、最通用的方法，是使用FLASH。如果在网站上要放置一个FLASH视频，通常需要对ADOBE宁波工程学院本科毕业设计论文10ACTIONSCRIPT和专有工具有很强的理解，才能编码视频和创建播放器控件，在HTML5中实现多媒体，不需要知道数据类型，因为标签已经指明；也不需要设置版本信息，因为不涉及；可以有CSS样式表来控制尺寸，因为它们是页面元素，只需要一行代码就可以。这些原生的优势，是其他任何第三方插件都无法企及的。5可触到的拖放功能在WEB应用中良好的用户体验是设计师们一直追求的目标，拖放体验就是其中之一，HTML5的拖放包括三个方面首先为页面元素提供了拖放特性；其次是为鼠标事件增加了拖放事件；最后是用于存储拖放数据的对象。本系统应用页面拖放特性，即新增的DRAGGABLE特性，该特性有三个可选值TRUE、FALSE和AUTO，用于定义元素是否允许用户拖放。为了使拖放控制更加具体，HTML5提供了7个与拖放相关的鼠标响应事件DRAGSTART事件，开始拖放时触发的事件，作用对象是被拖放元素。DRAG事件，拖放过程中触发的事件，作用对象是被拖放元素。DRAGENTER事件，有拖放的元素进入本元素范围内时触发，作用对象是拖放过程中鼠标经过的元素。DRAGOVER事件，有拖放的元素在本元素范围内移动时触发，作用对象是拖放过程中鼠标经过的元素。DRAGLEAVE事件，有拖放的元素离开本元素时触发，作用对象是拖放过程中鼠标经过的元素。DROP事件，有拖放的的元素被拖放到本元素中时触发，作用对象是拖放的目标元素。DRAGEND事件，拖放操作结束时触发，作用对象是被拖放元素。在拖放过程中通过触发这7个拖放事件来实现页面的灵活控制。6强大的离线应用随着人们对WEB应用的依赖逐渐增强，对WEB应用的要求也越来越高。但是WEB应用通常都有一个致命的缺陷，就是如果不能连接网络或网络不畅通便无法使用WEB应用程序。HTML5的离线存储使得这个问题迎刃而解，HTML5的WEB宁波工程学院本科毕业设计论文11STORAGEAPI采用离线缓存技术，会生成一个清单文件MANIFESTFILE，这个清单文件实质就是一系列的URL列表文件，这些URL分别指向页面当中的HTML，CSS，JAVASCRIPT，图片等相关内容。使用离线应用时，应用会引入这一清单文件，浏览器会读取这一文件，下载相应的文件，并将其缓存到本地。使得这些WEB应用能够脱离网络使用，而用户在离线时的更改也同样会映射到清单文件中，并在重新连线之后将更改返回应用，工作方式与我们现在所使用的网盘有着异曲同工之处。22相关技术介绍221PHPAPACHEMYSQLPHP是最流行的WEB脚本语言之一，它运行在WEB服务器端，根据用户请求或服务器端的数据产生动态网页。它功能强大，和HTML脚本融合在一起，并内建访问数据库的能力。它能够作为APACHEWEB服务器的模块执行使得执行效率较高。PHP特性1）开放源码，它是遵循GNU通用公共许可的免费软件；2）没有运行费用，PHP是免费的；3）基于服务器端，由于PHP是在WEB服务器端运行的，PHP程序可以很大、很复杂而不会降低客户端的运行速度；4）跨平台能力好，PHP程序可以运行在UNIX，LINUX，或者WINDOWS操作系统下；5）嵌入HTML，PHP的使用不需要编译（不需要编译成可执行文件），而是将PHP代码嵌入到HTML内部，其使用过程和ASP一样，所以PHP比较容易学习；6）用户可以使用PHP存取任何支持ODBC标准的数据库。APACHE是开放源码软件中的一个成功典范。几年间，它一跃成为市场占有率很高的WEB服务器，并获得了WEB管理员们的广泛青睐，被认为是“价格低廉、升级容易、安全可靠”的产品。网络为APACHE提供了孕育的温床。APACHE的成功也给予开源的网络开发模式以强有力的证明。这是一个和商业模式结合得如此完美的开放源代码软件，它的许可证制度保证了它的健康发展，既不脱离开放源宁波工程学院本科毕业设计论文12代码世界，也不因为缺乏资金而夭折。APACHE的特性1几乎可以运行在所有的计算机平台上；2支持最新的HTTP/11协议；3简单而且强有力的基于文件的配置HTTPDCONF；4支持HTTP认证；5集成的代理服务器；6可以通过WEB浏览器监视服务器的状态；7具有用户会话过程的跟踪能力。本课题选用APACHEPHPMYSQL技术完成，即目前比较流行的PHPNOW。PHPNOW是WIN32下绿色的APACHEPHPMYSQL环境套件包。简易安装、快速搭建支持虚拟主机的PHP环境。附带PNCPCMD控制面板，可以快速配置套件，使用非常方便。安装PHPNOW只需解压、初始化，就可得到一个标准的PHPMYSQL的服务器环境。宁波工程学院本科毕业设计论文13图21PHPNOW环境222HTML5HTML5是用于取代1999年所制定的HTML401和XHTML10标准的HTML标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些HTML5技术。HTML5有两大特点首先，强化了WEB网页的表现性能。其次，追加了本地数据库等WEB应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JAVASCRIPT在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务，如ADOBEFLASH、MICROSOFTSILVERLIGHT，与ORACLEJAVAFX的需求，并且提供更多能有效增强网络应用的标准集。HTML5的一些特性1表单验证轻松搞定。以前，制作一个表单提交页面，需要各种验证与判断，现在则只需要在标签内使用自带的属性和正则表达式，就能解决问题。2数据类型扩大一倍。大量新增的INPUT属性带来的更加友好的用户界面，是以前需要花费巨大的精力与成本去实现的。可以毫不夸张地说，从一个小小的INPUT标签属性的变化就可以预见HTML5应用的美好前景。3动画简单易懂。以前，制作一个简单的动画效果必须要依赖JAVASCRIPT和FLASH，编写大量的脚本，或者制作动画帧。而现在，依赖强大的CSS3动画属性将快速高效地开发出各种动画效果，甚至3D效果的制作都将是一件轻而易举的事情。4原生支持无需插件。以前网页中对音频和视频的处理都会依赖各种插件来完成，这一直是使用HTML4标准进行网页设计时的一个遗憾。但是，现在HTML5对音频和视频的处理有了强大的支持，AUDIO和VIDEO标签就是专门为此而诞生的。各种可控的属性、预载、插页功能都令人激动不已，因为我们知道原生的意义重大。3HTML5的优点1）提高可用性和改进用户的友好体验；2）有几个新的标签，这将有助于开发人员定义重要的内容；3）可以给站点带来更多的多媒体元素视频和音频；4）可以很好的替代FLASH和SILVERLIGHT；宁波工程学院本科毕业设计论文145）当涉及到网站的抓取和索引的时候，对于SEO很友好；6）将被大量应用于移动应用程序和游戏。由于PHPNOW的免费、方便，HTML5的上述优秀特性，所以本课题选用APACHEPHPMYSQL环境，HTML5语言、PHP语言完成，使得本系统拥有卓越的跨平台、跨终端能力，并具有良好的可修改、可扩展性。宁波工程学院本科毕业设计论文15第3章系统设计网络书店是网络环境下图书发行的典型代表，越来越齐全的品种让消费者对其依赖度日益增加。本研究是基于HTML5的网络书店系统的研究，主要目的是运用HTML5技术于网络书店，探讨HTML5这一新技术带来的变革。用HTML5作为前端语言，PHPAPACHEMYSQL构架一个网络书店系统。要充分体现HTML5的优点所在，就目前来讲HTML5并不是很完美的获得各大浏览器的支持，本网站使用对HTML5支持较好的CHROME浏览器展示。本系统共有如下几个模块图书查询、留言系统、评选系统。整个网站由HTML5的标准来建设，最显著的标志就是代码首行以简洁的开始，而不带版本信息等其他内容。用标签、JQUERY做出其炫丽的2D、3D效果美化网站，给人耳目一新的感觉。31图书展示功能HTML5的新元素产生更干净的代码，让页面更易懂，虽然、依然有效，但不会像以前那般频繁的应用了，很多页面更喜欢用等去定义。本系统采用CSS样式制定文字LOGO，摆脱把LOGO做成图片贴上去的牢笼。使用CSS网络字体功能直接使用文字元素使得字体图片矢量化，而不依赖于图片，不像以前制作带有个性化字体的WEB效果需要用图片来辅助完成。所有的阴影、圆角效果都是直接使用CSS设计制作，摆脱了将它们设计之好后定格在图片中的方式，使这一效果可以控制。32图书查询功能查询页面定义一块，制作一个实时更新，显示时间的数字时钟。使用、标签添加音、视频，原生支持无需插件，不依赖于FLASH、SVG等，并且内置强大的可控属性、预载功能，唯一需要解决问题就是HTML5目前支持音、视频的格式较少。查询功能使用HTML5标签内自带的属性和正则表达式，取代之前要用宁波工程学院本科毕业设计论文16JAVASCRIPT的ONBLUR、ONFOCUS来单独做一块验证功能。使用PHP语言、MYSQL数据库完成。33留言功能、涂鸦功能留言模块使用HTML5新的表单验证功能，在表单验证方面，使用了标签内自带的属性和正则表达式，取代之前要用JAVASCRIPT的ONBLUR、ONFOCUS来单独做一块验证功能。二维作画功能在页面实现也比以前简单许多，它不需要用到FLASH、SVG等插件，只需定义一块画布，这是为了客户端矢量图形而设计的能够把想绘的东西绘制在画布上，在留言板使用涂鸦功能。34图书评选功能评选功能由拖放特性实现，良好的用户体验是设计师们的追求，而这华丽的拖放功能就是其中之一，所以使用拖拽功能做出图书评选这一块。过去我们想实现网页中的拖拽效果，基本上都是使用DOM事件模型中的MOUSEDOWN、MOUSEMOVE、MOUSEUP的事件监听来模拟拖拽效果，为了实现实时的拖拽移动效果，要不停地获取鼠标的坐标，还要不停的修改元素的位置，代码要堆很多，而且性能上也很不好不停地修改元素位置会导致页面REFLOW，除非绝对定位，现在有了HTML5原生的DRAGELSEIFTYPEOFARGSTRINGTHISCANVASDOCUMENTGETELEMENTBYIDARGELSERETURNTHISINITDRAWPROTOTYPEINITFUNCTIONVARTHATTHISIFTHISCANVASGETCONTEXTRETURN宁波工程学院本科毕业设计论文23THISCONTEXTTHISCANVASGETCONTEXT2DTHISCANVASONSELECTSTARTFUNCTIONRETURNFALSETHISCANVASONMOUSEDOWNFUNCTIONEVENTTHATDRAWBEGINEVENT,DRAWBEGINFUNCTIONEVARTHATTHIS,STAGE_INFOTHISCANVASGETBOUNDINGCLIENTRECTWINDOWGETSELECTIONWINDOWGETSELECTIONREMOVEALLRANGESDOCUMENTSELECTIONEMPTYTHISCONTEXTMOVETOECLIENTXSTAGE_INFOLEFT,ECLIENTYSTAGE_INFOTOPDOCUMENTONMOUSEMOVEFUNCTIONEVENTTHATDRAWINGEVENTDOCUMENTONMOUSEUPTHISDRAWEND,DRAWINGFUNCTIONEVARSTAGE_INFOTHISCANVASGETBOUNDINGCLIENTRECTTHISCONTEXTLINETOECLIENTXSTAGE_INFOLEFT,ECLIENTYSTAGE_INFOTOPTHISCONTEXTSTROKE,DRAWENDFUNCTIONDOCUMENTONMOUSEMOVEDOCUMENTONMOUSEUPNULL宁波工程学院本科毕业设计论文24VARDRAWNEWDRAWTHE_STAGE424图书评选用可拖拽元素来实现图书评选功能。在元素中设置“DRAGGABLE“TRUE”即可实现图片拖拽。响应鼠标拖放之前使用渐变效果，并没有使用图形设计软件，而是直接通过一个线性命令完成渐变效果，即在CSS中设置渐变效果。完成一次成功页面内元素拖拽的行为事件过程应该是DRAGSTARTDRAGENTERDRAGOVERDROPDRAGEND图46拖拽前图47拖拽后宁波工程学院本科毕业设计论文25CSS样式部分代码如下TESTBORDERWIDTH1PXBORDERSTYLESOLIDBORDERRADIUS11PXPADDING5PXWEBKITKEYFRAMESGLOW0WEBKITBOXSHADOW0012PXRGBA00,00,00,05BORDERCOLORRGBA100,100,100,05100WEBKITBOXSHADOW0012PXRGBA00,00,00,10,0030PXRGBA90,90,90,10BORDERCOLORRGBA00,00,00,10FFFPADDING3PXBORDER1PXSOLIDD1EEEEBACKGROUNDCOLORWHITEWEBKITBOXSHADOW008PXRGBA00,00,00,05BOXSHADOW008PXRGBA00,00,00,05FFFHOVERBACKGROUNDCOLORD1EEEEWEBKITANIMATIONNAMEGLOWWEBKITANIMATIONDURATION1SWEBKITANIMATIONITERATIONCOUNTINFINITEWEBKITANIMATIONDIRECTIONALTERNATEWEBKITANIMATIONTIMINGFUNCTIONEASEINOUT宁波工程学院本科毕业设计论文26第5章总结与展望51总结经过几个月的学习，我设计并开发的基于HTML5的网络书店系统已经开发完毕。由于个人能力和时间问题，所以该系统很多地方都不尽如人意，有待进一步改善。在整个过程中遇到大大小小不少问题，很多不明白的地方我经常去请教老师和同学，最后设计成功不是很完美，但是我在整个过程中收获了很多，我很高兴有这样的机会学习并掌握HTML5这一前端技术。本系统充分利用HTML5的新特性全新的网页布局，表单样式，音视频播放功能，CANVAS以及拖放功能实现，给予用户极佳的操作体验。可以查看、访问大量图书和视频资源，扩展视野，增长见识，还可以留言，表达自己对本系统的看法，也可以用鼠标作画，拖拽书籍，体验HTML5带来的乐趣。52展望虽然本系统初步完成，但是仍然有许多地方需要改进以获得更好的用户体验，在未来将在细节上做的更完美、更精致，不像现在较为粗糙；考虑建立一个完整的后台管理系统来完善本系统