基于HTML5的网络书店系统doc.docx

1、基于HTML5的网络书店系统doc毕 业 设 计（论 文）设计（论文）题目： 基于HTML5的网络书店系统研究 学 院 名 称： 电子与信息工程学院 专 业： 计算机科学与技术 班 级： 09级1班（网络） 姓 名： 季炜 学 号 09401010139 指 导 教 师： 李庆风 职 称 副教授 定稿日期：2013 年5月18日基于HTML5的网络书店系统研究 摘 要 Html5是一种建立在平台之上的动态网页制作语言，它是一种网页浏览的新标准，它在原有的HTML基础上新增和优化了部份内容，使得网页更加快捷和对外部更加兼容。本课题用HTML5语言开发小型网络书店网站。主要目的是运用HTML5技术

2、于网络书店，探讨HTML5这一新技术带来的变革，并对HTML5的一些新特性进行了研究和实验。本文阐述了网络书店的设计与实现，给出了网站的系统分析，描述了网页设计概况。关键词：HTML5，网络书店，网站ONLINE BOOKSTORE SYSTEM STUDY BASED ON HTML5ABSTRACT Html5 is a language based on platform of dynamic web page creation, it is a new web standard, it is on the basis of the original Html new and optim

3、ize the part to make web pages more quickly and more compatible and external. This paper main implementation is to use the HTML5 language development small network bookstore website, online bookstore is a typical representative of books issued under the network environment, this study is the study o

4、f the online bookstore system based on HTML5. Main purpose is to use the HTML5 technology in network bookstore, discussion on HTML5, a new technology of change, and studied the HTML5s new features and experimental. This paper expounds the design and implementation of online bookstore, gives a system

5、atic analysis of websites, describes the profile of web design.Key Words: HTML5, online bookstore, website第1章 绪论1.1本课题国内外研究现状网络书店是随着网络技术的发展而出现的一种售书渠道。它通过人与电子通信方式相结合，依靠互联网实现图书的在线交易。与传统的书店相比，网络书店既可以避免书目订货的局限和盲目，又可以克服看样订货投入大、费用高、管理难的不足，而且网上选择范围广能直观看样本、可浏览内容、可随时添订、结算及时、快捷方便、周转高速。这些优势是其它交易方式难以达到的。目前比较著名的

6、国内外网络书店有：亚马逊、当当网。1.1.1 国外现状 世界上第一家网络书店是1991年在美国联机公司(AOL)的网络上建立的阅读美国书店。1994年贝佐斯在西雅图成立的亚马逊网络书店，如今已成为全球最大网络书店，1998年的顾客总数为450万，销售额达6.1亿美元，股票市值100多亿美元，控制着美国80%的网上图书销售市场。亚马逊网络书店的成功在图书销售领域产生了巨大影响。1997年5月，美国最大的连锁书店巴诺书店也正式开办了网络书店。 亚马逊首页有搜索功能，可以根据自己需要来搜索想要的产品或相关产品；首页左边有所有产品的分类，形成一个菜单，顾客也可以从这里逐级查找所要产品；首页有一个叫“W

7、hat Other Customer Are Looking At Right Now”的版块，这是其他顾客正在查看的产品展示，动态资料为顾客提供最新信息；“DigitalCamerasBestsellers”版块是最畅销的相机展示，这些为想买相机的朋友们提供了一个非常有用的信息；“The Best Prices on the Most Laptops”板块为价格最合理的笔记本电脑展示，这些为正在浏览网站的顾客们提供了许多有用的信息；在首页下端有一个区域”YourRecentHistory”记录着你最近浏览过的网页和途径，可以轻松点击查看自己之前访问过的产品。所以我们看到了中意的产品时就不会找

8、不到它，轻松查看。首页右边部分放着少量的促销产品，有兴趣的人可以快速点击查看。这里可以看到比较少的广告，主要是为顾客考虑，太多广告妨碍视线，也会使顾客产生一种厌恶感，因此去掉了许多广告，使得整个界面一目了然。 亚马逊网站与传统的商务网站有些不同，非常简洁的界面给顾客留下了一个好印象，几个与众不同的特色板块让人拍手叫好，强大的搜索引擎搜索产品时非常快速准确。但是目前移动设备盛行，颇具历史的亚马逊网络书店为了与时俱进采用APP技术，使用手机访问效果如图： 图1-1 手机APP浏览亚马逊这种第三方应用软件支持方式无疑是需要额外成本的，如果采用HTML5设计开发网站的话，就不需要如此繁复了，无论在什么

9、平台，使用什么设备，只要有支持HTML5的浏览器，它就可以完美访问。下面是基于HTML5的网络书店系统在PC机上浏览和在手机上浏览的截图效果，不需插件、不需APP可以完美访问，且展示效果完美。图1-2 电脑上访问本系统效果 图1-3 手机上访问本系统效果1.1.2 国内现状我国有庞大的网民基数和民众购买行为的改变，因此网络书店在我国存在着巨大的市场潜力。当当网是一个“纯网络”型BtoC网上商店。当当网自1999年11月开通，号称是目前全球最大的中文网上图书音像商城，面向全世界中文读者提供近三十多万种中文图书和音像商品，每天为成千上万的消费者提供方便、快捷的服务，给网上购物者带来极大的方便和实惠

10、。当当网的使命是坚持“更多选择，更多低价”，全球已有2000万的顾客在当当网上选购自己喜爱的商品。当当网的网页最上层是分类区，方便用户根据自己的要求查询。在左面是商品分类：包括百货、图书/杂志、影视、音乐、游戏等的分类。其中提供的三十万种图书，占中国大陆可供书市场的百分之九十。另外还有店中店的商品分类，中间是主要的广告内容，在右边就是最近的一些新产品以及TOP排行榜。 当当网还设立了专门的论坛。不论你是对商品、服务、还是网站有任何的不满，或者对当当网有什么建议，你都可以在论坛上发表你的观点。这样不但有利于其他客户增加对该商品的了解，也有助于网站的设计或管理人员及时修补网站的漏洞，使网站的功能更

11、强大，更快更好的满足顾客的个性化需求。搜索比价系统，是当当网开发的智能比价系统。通过此系统，当当每天都实施对其他电子商务网站的同类商品与当当网同类商品的价格进行对比。如果对方同类商品价格低于当当网商品价格，此系统将自动调低当当网同类商品的价格。 2006年10月下旬，当当网个性化商品推荐功能上线。其全新推出的“为你推荐”个性化服务的过人之处在于，当当网购物系统将根据顾客的购物习惯自动向他们推荐相关商品。另外，细心的网络顾客还会发现，当当网的购物搜索也悄然更换了面孔。出去界面变得更简洁清新外，更重要的是，如今当当网顾客的搜索范围不仅包括当当网近百万自营商品，还把当当数千家店中的各类商品一搜到底。

12、显然，再打出“搜索+个性化”网购组合后，当当网在电子商务市场不但增强了顾客粘性，而且再次引领了市场趋势。目前当当网进军移动市场，开发并发布了iphone版、Android版、iPad版、Windows Phone版以及Android Pad版如此之多的APP，以方便用户随时随地通过移动设备访问。这不禁让人联想到整个系统的开发、更新以及维护是十分麻烦的，如果使用HTML5技术这些问题便可迎刃而解，只需要考虑浏览器是否支持即可。从而省去众多APP的开发、维护费用，专注于电子商务事业。当当网在pc机访问和在手机使用APP访问效果如下:图1-4当当网主页 图1-5 当当网手机APP界面 由此可见，当当

13、网在电脑和移动终端的用户体验是完全不同的，一些动态效果是无法体现的，HTML5就不同了，使用电脑和手机访问视频、音乐、动态效果是不会发生改变的。图1-6 HTML5拖拽页面图1-7手机上拖拽页面1.2本课题研究目的尽管亚马逊和当当网已经相当成功，但是随着无线网络技术的成熟，包括手机、平板电脑在内的移动终端备受人们青睐，大多数传统的电子商务网站都面临着如何很好的支持移终端这一问题。随时随地上网浏览并获取所需信息，真可谓：一切尽在“掌”握，然而目前便携设备对于一些网络应用支持的不是十分完美，比如说网络书店，我们用便携设备浏览亚马逊，当当网时，看到的并不是电脑上看到的那样的网页，而是App。这种把网

14、站做成App以便支持便携设备浏览的做法，无疑给电子商务企业带来额外的技术费用开支，但是随着HTML5的出现将改变这一现状。以往我们用Flash或者是Java在网站之中嵌入网页应用程序，这种技术并不是浏览器原生的，所以说并不是能对于网页提供无缝的支持，尤其是对于手机、平板电脑等移动终端的支持不是很完美，需要APP来完成。但是Html5就不是这样的了，Html5是一种标准，只要是浏览器遵循这样的标准我们就能调用底层的硬件对于上层的网页进行显示，而且也是能方便的编写各种Web应用。1 换言之，就是使用HTML5技术开发一个网页，无论用户通过什么终端访问，看到的都是原生态的网页，它的音视频播放不依赖任

15、何第三方插件，无需安装Flash、SVG，通过移动设备访问只需使用支持HTML5的浏览器即可，无需APP技术。1.3论文结构本文主要是对基于HTML5的网络书店系统原理的研究，同时通过部署APACHE服务器，使用MySQL数据库，自己设计和开发web网站来实现基于HTML5的网络书店系统。 第一章 绪论。主要介绍了研究背景，目前网络书店的国内外发展情况，同时对本文的主要工作做了简单的介绍。 第二章 研究内容及相关技术。主要对相关技术，如PHPnow（Apache+PHP+MySQL）、HTML5做了详细的介绍与分析。 第三章 系统设计。主要对系统进行总体设计，对系统的架构进行设计，对系统所需要

16、完成的功能提出需求，包括查询系统、留言系统、图书评选系统。第四章 系统详细设计及实现。主要是完成基于HTML5的网络书店系统的实现。对各个模块进行详细设计和开发，数据库的详细设计与实现。第五章 总结与展望。主要是对本系统的总结、今后要做的工作以及未来HTML5技术的前景。第2章研究内容及相关技术2.1研究内容随着HTML5的迅猛发展，各大浏览器开发公司如Google、微软、苹果Mozilla和Opera的浏览器开发业务都变的异常繁忙，近年来无论是Mozilla的Firefox、Google的Chrome、苹果的Safar，还是微软的Internet Explorer，以及Opera都处于不断推

17、陈出新的状态当中。2 HTML5是一种技术，或者说是一种网页浏览的新标准。著名调查公司AC尼尔森的一项研究显示：中国网民有超过五分之三的人群在网上购物，而超过一半的网上购物者选择网上买书，也就是说最受欢迎的网上商品是书籍。而随着移动终端的粉墨登场，由于使用HTML5技术的网络书店具有优秀的跨平台、跨终端能力，仅需要一个浏览器就可以，所以这将是网络环境下图书发行的必然发展趋势。电脑上通过Web浏览器执行的HTML5应用正取代安装型本地应用成为主流，这一潮流也蔓延到了智能手机，“火狐OS”及“Tizen”等主推HTML5的移动OS已经问世，谷歌也做出多项决策，要将安卓大幅转向HTML5。本课题旨在

18、以制作网络书店为前提，体验HTML5这一新技术。众所周知，框架可以帮助我们更快速、更容易实现功能，让开发者集中精力于更重要的方面，而不会浪费时间做重复的任务。本网络书店系统想要实现一下HTML5新特性：1.HTML5全新的标签。 取消了一些过时的标记，HTML4中的内容标签级别相同，无法区分各部分内容。而HTML5中的内容标签互相独立，级别不同，搜索引擎以及统计软件等均可快速识别各部分内容。千篇一律的注定要淘汰掉，如图2-1所示，HTML5与之前布满的页面相比，已经变得清晰了很多。涉及的各种头部，都会包含在标签内，各种结尾内容都会使用标签，导航菜单放在标签,主要内容放在标签，独立的文章部分放在

19、标签，相关简介等内容放在侧边标签内。图2-1 全新的标记2.全新的表单对象。 在实际的表单应用中，一些数据输入需要一个独立的规则，如邮箱地址、网址等，我们都会提供一个特定的格式限定和验证。HTML5对表单的发展是适应互联网发展的需要，也是在适应开发者的需要，在做表单处理的时候，最常用的就是表单验证了。一般的验证会写很多冗长的JavaScript代码，或者借助一些基于JavaScript的验证框架，如目前较为流行的jQuery的验证框架。HTML5发展了这些表单，把具有特定规则意义的表单，扩展一些特有的特性作为表单的原始功能；验证表单的功能，也作为表单本身应具备的功能，原生地被支持，即可以抛弃J

20、avaScript或者是PHP，只通过HTML5来定义表格单元的输入格式和这个单元是否是必填的等等。3.Canvas对象。 到目前为止，基本上想要直接在网页上进行绘图还是不能轻易完成的，即使是几何图形也不可以。在浏览器当中直接能跟图片的交互操作也很有限，多数是保存和点击。若要在页面中实现绘图就要借助第三方工具，如Flash、SVG、VML等，这种做法无疑把问题复杂化了，在互联网应用不断的发展中，页面绘图使用越来越多，Canvas元素应运而生。HTML5 了解人们的需求，HTML5 已经确定引入canvas元素，它自己没有行为，只是把一个绘图API展现给客户端JavaScript,以使脚本能够把

21、想绘制的东西都绘到一块画布上。4.HTML5取代Flash。在HTML5之前，要在网页中添加音频或视频，最简单、最通用的方法，是使用Flash。如果在网站上要放置一个Flash视频，通常需要对Adobe ActionScript和专有工具有很强的理解，才能编码视频和创建播放器控件，在HTML5中实现多媒体，不需要知道数据类型，因为标签已经指明；也不需要设置版本信息，因为不涉及；可以有css样式表来控制尺寸，因为它们是页面元素，只需要一行代码就可以。这些原生的优势，是其他任何第三方插件都无法企及的。5.可触到的拖放功能在WEB应用中良好的用户体验是设计师们一直追求的目标，拖放体验就是其中之一，H

22、TML5的拖放包括三个方面：首先为页面元素提供了拖放特性；其次是为鼠标事件增加了拖放事件；最后是用于存储拖放数据的对象。本系统应用页面拖放特性，即新增的draggable特性，该特性有三个可选值：true、false和auto，用于定义元素是否允许用户拖放。为了使拖放控制更加具体，HTML5提供了7个与拖放相关的鼠标响应事件： dragstart事件，开始拖放时触发的事件，作用对象是被拖放元素。 drag事件，拖放过程中触发的事件，作用对象是被拖放元素。 dragenter事件，有拖放的元素进入本元素范围内时触发，作用对象是拖放过程中鼠标经过的元素。 dragover事件，有拖放的元素在本元素

23、范围内移动时触发，作用对象是拖放过程中鼠标经过的元素。 dragleave事件，有拖放的元素离开本元素时触发，作用对象是拖放过程中鼠标经过的元素。 drop事件，有拖放的的元素被拖放到本元素中时触发，作用对象是拖放的目标元素。 dragend事件，拖放操作结束时触发，作用对象是被拖放元素。在拖放过程中通过触发这7个拖放事件来实现页面的灵活控制。6.强大的离线应用随着人们对Web应用的依赖逐渐增强，对Web应用的要求也越来越高。但是Web应用通常都有一个致命的缺陷，就是如果不能连接网络或网络不畅通便无法使用Web应用程序。HTML5的离线存储使得这个问题迎刃而解，HTML5的Web storag

24、e API采用离线缓存技术，会生成一个清单文件：manifest file，这个清单文件实质就是一系列的URL列表文件，这些URL分别指向页面当中的HTML，CSS，Javascript，图片等相关内容。使用离线应用时，应用会引入这一清单文件，浏览器会读取这一文件，下载相应的文件，并将其缓存到本地。使得这些web应用能够脱离网络使用，而用户在离线时的更改也同样会映射到清单文件中，并在重新连线之后将更改返回应用，工作方式与我们现在所使用的网盘有着异曲同工之处。2.2相关技术介绍2.2.1 PHP+APACHE+MYSQLPHP是最流行的Web脚本语言之一，它运行在Web服务器端，根据用户请求或服

25、务器端的数据产生动态网页。它功能强大，和HTML脚本融合在一起，并内建访问数据库的能力。它能够作为ApacheWeb服务器的模块执行使得执行效率较高。PHP特性：1）开放源码，它是遵循GNU通用公共许可的免费软件；2）没有运行费用，PHP是免费的；3）基于服务器端，由于PHP是在Web服务器端运行的，PHP程序可以很大、很复杂而不会降低客户端的运行速度；4）跨平台能力好，PHP程序可以运行在UNIX，Linux，或者Windows操作系统下；5）嵌入HTML，PHP的使用不需要编译（不需要编译成可执行文件），而是将PHP代码嵌入到HTML内部，其使用过程和ASP一样，所以PHP比较容易学习；6

26、）用户可以使用PHP存取任何支持ODBC标准的数据库。Apache是开放源码软件中的一个成功典范。几年间，它一跃成为市场占有率很高的Web服务器，并获得了Web管理员们的广泛青睐，被认为是“价格低廉、升级容易、安全可靠”的产品。网络为Apache提供了孕育的温床。Apache的成功也给予开源的网络开发模式以强有力的证明。这是一个和商业模式结合得如此完美的开放源代码软件，它的许可证制度保证了它的健康发展，既不脱离开放源代码世界，也不因为缺乏资金而夭折。apache的特性:1)几乎可以运行在所有的计算机平台上；2)支持最新的http/1.1协议；3)简单而且强有力的基于文件的配置(httpd.co

27、nf)；4)支持http认证；5)集成的代理服务器；6)可以通过web浏览器监视服务器的状态；7)具有用户会话过程的跟踪能力。本课题选用Apache + PHP + MySQL技术完成，即目前比较流行的PHPnow。PHPnow是 Win32 下绿色的 Apache + PHP + MySQL 环境套件包。简易安装、快速搭建支持虚拟主机的 PHP 环境。附带 PnCp.cmd 控制面板，可以快速配置套件，使用非常方便。安装 PHPnow 只需解压、初始化，就可得到一个标准的 PHP + MySQL 的服务器环境。图2-1 PHPnow环境2.2.2 HTML5HTML5是用于取代1999年所制

28、定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些 HTML5 技术。HTML 5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务，如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。HTML5的一些特性：1.表单验证轻松搞定。以前，制作

29、一个表单提交页面，需要各种验证与判断，现在则只需要在标签内使用自带的属性和正则表达式，就能解决问题。2.数据类型扩大一倍。大量新增的input属性带来的更加友好的用户界面，是以前需要花费巨大的精力与成本去实现的。可以毫不夸张地说，从一个小小的input标签属性的变化就可以预见HTML5应用的美好前景。3.动画简单易懂。以前，制作一个简单的动画效果必须要依赖JavaScript和Flash，编写大量的脚本，或者制作动画帧。而现在，依赖强大的CSS3动画属性将快速高效地开发出各种动画效果，甚至3D效果的制作都将是一件轻而易举的事情。4.原生支持无需插件。以前网页中对音频和视频的处理都会依赖各种插件

30、来完成，这一直是使用HTML 4标准进行网页设计时的一个遗憾。但是，现在HTML5对音频和视频的处理有了强大的支持，audio和video标签就是专门为此而诞生的。各种可控的属性、预载、插页功能都令人激动不已，因为我们知道原生的意义重大。3 HTML5的优点：1）提高可用性和改进用户的友好体验；2）有几个新的标签，这将有助于开发人员定义重要的内容；3）可以给站点带来更多的多媒体元素(视频和音频)；4）可以很好的替代FLASH和Silverlight；5）当涉及到网站的抓取和索引的时候，对于SEO很友好；6）将被大量应用于移动应用程序和游戏。由于PHPnow的免费、方便，HTML5的上述优秀特性

31、，所以本课题选用APACHE+PHP+MYSQL环境，HTML5语言、PHP语言完成，使得本系统拥有卓越的跨平台、跨终端能力，并具有良好的可修改、可扩展性。第3章系统设计网络书店是网络环境下图书发行的典型代表，越来越齐全的品种让消费者对其依赖度日益增加。本研究是基于HTML5的网络书店系统的研究，主要目的是运用HTML5技术于网络书店，探讨HTML5这一新技术带来的变革。用HTML5作为前端语言，PHP+Apache+MySQL构架一个网络书店系统。要充分体现HTML5的优点所在， 就目前来讲HTML5并不是很完美的获得各大浏览器的支持，本网站使用对HTML5支持较好的chrome浏览器展示。本系统共有如下几个模块图书查询、留言系统、评选系统。整个网站由HTML5的标准来建设，最显著的标志就是代码首行以简洁的开始，而不带版本信息等其他内容。用标签、JQuery做出其炫丽的2D、3D效果美化网站，给人耳目一新的感觉。3.1图书展示功能HTML5的新元素产生更干净的代码，让页面更易懂，虽然、依然有效，但不会像以前那般频繁的应用了，很多页面更喜欢用