基于HTML5的网络书店系统

毕业设计（论文）

设计（论文）题目：基于HTML5的网络书店系统研究

学院名称：电子与信息工程学院

专业：计算机科学与技术

班级：09级1班（网络）

姓名：季炜学号09401010139 指导教师：李庆风职称副教授

定稿日期：2013 年5月18日

基于HTML5的网络书店系统研究

摘要

Html5是一种建立在平台之上的动态网页制作语言，它是一种网页浏览的新标准，它在原有的HTML基础上新增和优化了部份内容，使得网页更加快捷和对外部更加兼容。

本课题用HTML5语言开发小型网络书店网站。主要目的是运用HTML5技术于网络书店，探讨HTML5这一新技术带来的变革，并对HTML5的一些新特性进行了研究和实验。本文阐述了网络书店的设计与实现，给出了网站的系统分析，描述了网页设计概况。

关键词：HTML5，网络书店，网站

ONLINE BOOKSTORE SYSTEM STUDY

BASED ON HTML5

ABSTRACT

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 optimize 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 of 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 HTML5's new features and experimental. This paper expounds the design and implementation of online bookstore, gives a systematic analysis of websites, describes the profile of web design.

Key Words: HTML5, online bookstore, website

目录

摘要 ................................................................................................................................................... I ABSTRACT ...................................................................................................................................... II 目录 .................................................................................................................................................. III 第1章绪论. (1)

1.1 本课题国内外研究现状 (1)

1.1.1 国外现状 (1)

1.1.2 国内现状 (3)

1.2 本课题研究目的 (6)

1.3 论文结构 (7)

第2章研究内容及相关技术 (8)

2.1 研究内容 (8)

2.2 相关技术介绍 (11)

2.2.1 PHP+AP ACHE+MYSQL (11)

2.2.2 HTML5 (13)

第3章系统设计 (15)

3.1 图书展示功能 (15)

3.2 图书查询功能 (15)

3.3 留言功能、涂鸦功能 (16)

3.4 图书评选功能 (16)

第4章系统详细设计及实现 (17)

4.1 数据库设计与实现 (17)

4.2 网站具体实现 (18)

4.2.1 网站首页 (18)

4.2.2 查询功能 (19)

4.2.3 留言板设计 (21)

4.2.4 图书评选 (24)

第5章总结与展望 (26)

5.1 总结 (26)

5.2 展望 (26)

参考文献 (27)

致谢 (28)

软件使用说明书 (29)

1. 软件概述 (29)

2. 运行环境 (29)

3. 使用指南 (29)

第1章绪论

1.1本课题国内外研究现状

网络书店是随着网络技术的发展而出现的一种售书渠道。它通过人与电子通信方式相结合，依靠互联网实现图书的在线交易。与传统的书店相比，网络书店既可以避免书目订货的局限和盲目，又可以克服看样订货投入大、费用高、管理难的不足，而且网上选择范围广能直观看样本、可浏览内容、可随时添订、结算及时、快捷方便、周转高速。这些优势是其它交易方式难以达到的。

目前比较著名的国内外网络书店有：亚马逊、当当网。

1.1.1国外现状

世界上第一家网络书店是1991年在美国联机公司(AOL)的网络上建立的"阅读美国"书店。1994年贝佐斯在西雅图成立的亚马逊网络书店，如今已成为全球最大网络书店，1998年的顾客总数为450万，销售额达6.1亿美元，股票市值100多亿美元，控制着美国80%的网上图书销售市场。亚马逊网络书店的成功在图书销售领域产生了巨大影响。1997年5月，美国最大的连锁书店巴诺书店也正式开办了网络书店。

亚马逊首页有搜索功能，可以根据自己需要来搜索想要的产品或相关产品；首页左边有所有产品的分类，形成一个菜单，顾客也可以从这里逐级查找所要产品；首页有一个叫“What Other Customer Are Looking At Right Now”的版块，这是其他顾客正在查看的产品展示，动态资料为顾客提供最新信息；“Digital Cameras Bestsellers”版块是最畅销的相机展示，这些为想买相机的朋友们提供了一个非常有用的信息；“The Best Prices on the Most Laptops”板块为价格最合理的笔记本电脑展示，这些为正在浏览网站的顾客们提供了许多有用的信息；在首页下端有一个区域”Your Recent History”记录着你最近浏览过的网页和途径，可以轻松点击查看自己之前访问过的产品。所以我们看到了中意的产品时就不会找不到它，轻松查看。首页右边部分放着少量的促销产品，有兴趣的人可以快速点击查看。这里可以看到比较少的广告，主要是为顾客考虑，

太多广告妨碍视线，也会使顾客产生一种厌恶感，因此去掉了许多广告，使得整个界面一目了然。

亚马逊网站与传统的商务网站有些不同，非常简洁的界面给顾客留下了一个好印象，几个与众不同的特色板块让人拍手叫好，强大的搜索引擎搜索产品时非常快速准确。但是目前移动设备盛行，颇具历史的亚马逊网络书店为了与时俱进采用APP技术，使用手机访问效果如图：

图1-1 手机APP浏览亚马逊

这种第三方应用软件支持方式无疑是需要额外成本的，如果采用HTML5设计开发网站的话，就不需要如此繁复了，无论在什么平台，使用什么设备，只要有支持HTML5的浏览器，它就可以完美访问。下面是基于HTML5的网络书店系统在PC机上浏览和在手机上浏览的截图效果，不需插件、不需APP可以完美访问，且展示效果完美。

图1-2 电脑上访问本系统效果

图1-3 手机上访问本系统效果

1.1.2国内现状

我国有庞大的网民基数和民众购买行为的改变，因此网络书店在我国存在着

巨大的市场潜力。当当网是一个“纯网络”型BtoC网上商店。当当网自1999年

11月开通，号称是目前全球最大的中文网上图书音像商城，面向全世界中文读者提供近三十多万种中文图书和音像商品，每天为成千上万的消费者提供方便、快捷的服务，给网上购物者带来极大的方便和实惠。当当网的使命是坚持“更多选择，更多低价”，全球已有2000万的顾客在当当网上选购自己喜爱的商品。

当当网的网页最上层是分类区，方便用户根据自己的要求查询。在左面是商品分类：包括百货、图书/杂志、影视、音乐、游戏等的分类。其中提供的三十万种图书，占中国大陆可供书市场的百分之九十。另外还有店中店的商品分类，中间是主要的广告内容，在右边就是最近的一些新产品以及TOP排行榜。

当当网还设立了专门的论坛。不论你是对商品、服务、还是网站有任何的不满，或者对当当网有什么建议，你都可以在论坛上发表你的观点。这样不但有利于其他客户增加对该商品的了解，也有助于网站的设计或管理人员及时修补网站的漏洞，使网站的功能更强大，更快更好的满足顾客的个性化需求。

搜索比价系统，是当当网开发的智能比价系统。通过此系统，当当每天都实施对其他电子商务网站的同类商品与当当网同类商品的价格进行对比。如果对方同类商品价格低于当当网商品价格，此系统将自动调低当当网同类商品的价格。

2006年10月下旬，当当网个性化商品推荐功能上线。其全新推出的“为你推荐”个性化服务的过人之处在于，当当网购物系统将根据顾客的购物习惯自动向他们推荐相关商品。另外，细心的网络顾客还会发现，当当网的购物搜索也悄然更换了面孔。出去界面变得更简洁清新外，更重要的是，如今当当网顾客的搜索范围不仅包括当当网近百万自营商品，还把当当数千家店中的各类商品一搜到底。显然，再打出“搜索+个性化”网购组合后，当当网在电子商务市场不但增强了顾客粘性，而且再次引领了市场趋势。

目前当当网进军移动市场，开发并发布了iphone版、Android版、iPad版、Windows Phone版以及Android Pad版如此之多的APP，以方便用户随时随地通过移动设备访问。这不禁让人联想到整个系统的开发、更新以及维护是十分麻烦的，如果使用HTML5技术这些问题便可迎刃而解，只需要考虑浏览器是否支持即可。从而省去众多APP的开发、维护费用，专注于电子商务事业。当当网在pc机访问和在手机使用APP访问效果如下:

图1-4当当网主页

图1-5 当当网手机APP界面

由此可见，当当网在电脑和移动终端的用户体验是完全不同的，一些动态效果是无法体现的，HTML5就不同了，使用电脑和手机访问视频、音乐、动态效果

是不会发生改变的。

图1-6 HTML5拖拽页面

图1-7手机上拖拽页面

1.2本课题研究目的

尽管亚马逊和当当网已经相当成功，但是随着无线网络技术的成熟，包括手机、平板电脑在内的移动终端备受人们青睐，大多数传统的电子商务网站都面临着如何很好的支持移终端这一问题。随时随地上网浏览并获取所需信息，真可谓：一切尽在“掌”握，然而目前便携设备对于一些网络应用支持的不是十分完美，

比如说网络书店，我们用便携设备浏览亚马逊，当当网时，看到的并不是电脑上

看到的那样的网页，而是App。这种把网站做成App以便支持便携设备浏览的做法，无疑给电子商务企业带来额外的技术费用开支，但是随着HTML5的出现将改变这一现状。

以往我们用Flash或者是Java在网站之中嵌入网页应用程序，这种技术并不是浏览器原生的，所以说并不是能对于网页提供无缝的支持，尤其是对于手机、平板电脑等移动终端的支持不是很完美，需要APP来完成。但是Html5就不是这样的了，Html5是一种标准，只要是浏览器遵循这样的标准我们就能调用底层的硬件对于上层的网页进行显示，而且也是能方便的编写各种Web应用。[1] 换言之，就是使用HTML5技术开发一个网页，无论用户通过什么终端访问，看到的都是原生态的网页，它的音视频播放不依赖任何第三方插件，无需安装Flash、SVG，通过移动设备访问只需使用支持HTML5的浏览器即可，无需APP技术。

1.3论文结构

本文主要是对基于HTML5的网络书店系统原理的研究，同时通过部署APACHE 服务器，使用MySQL数据库，自己设计和开发web网站来实现基于HTML5的网络书店系统。

第一章绪论。主要介绍了研究背景，目前网络书店的国内外发展情况，同时对本文的主要工作做了简单的介绍。

第二章研究内容及相关技术。主要对相关技术，如PHPnow（Apache+PHP+ MySQL）、HTML5做了详细的介绍与分析。

第三章系统设计。主要对系统进行总体设计，对系统的架构进行设计，对系统所需要完成的功能提出需求，包括查询系统、留言系统、图书评选系统。

第四章系统详细设计及实现。主要是完成基于HTML5的网络书店系统的实现。对各个模块进行详细设计和开发，数据库的详细设计与实现。

第五章总结与展望。主要是对本系统的总结、今后要做的工作以及未来HTML5技术的前景。

第2章研究内容及相关技术

2.1研究内容

随着HTML5的迅猛发展，各大浏览器开发公司如Google、微软、苹果Mozilla 和Opera的浏览器开发业务都变的异常繁忙，近年来无论是Mozilla的Firefox、Google的Chrome、苹果的Safar，还是微软的Internet Explorer，以及Opera 都处于不断推陈出新的状态当中。[2] HTML5是一种技术，或者说是一种网页浏览的新标准。

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

本课题旨在以制作网络书店为前提，体验HTML5这一新技术。众所周知，框架可以帮助我们更快速、更容易实现功能，让开发者集中精力于更重要的方面，而不会浪费时间做重复的任务。本网络书店系统想要实现一下HTML5新特性：

1.HTML5全新的标签。

取消了一些过时的标记，HTML4中的内容标签级别相同，无法区分各部分内容。而HTML5中的内容标签互相独立，级别不同，搜索引擎以及统计软件等均可快速识别各部分内容。千篇一律的