《02严林红龙夏基于HTML5的移动商城应用.doc》由会员分享，可在线阅读，更多相关《02严林红龙夏基于HTML5的移动商城应用.doc（41页珍藏版）》请在三一办公上搜索。
1、合肥学院2012 届毕业论文（设计）论文(设计)题目基于Html5的移动商城应用院系名称计算机科学与技术系专业（班级）网络工程2008级本科2班姓名（学号）严林红（0804032029）指导教师龙 夏系负责人袁 暋完成时间2012-5-30基于Html5的移动商城应用的设计与实现中 文 摘 要随着移动通信与Internet的飞速发展及相互融合，GPRS使无线网络高速接入到Internet成为现实，移动用户从而可以享受到Internet提供的服务。移动终端不再仅是通讯网络的终端，还将成为互联网的终端。伴随着移动互联网技术在各行各业日益广泛和深入的应用，网络的概念早已深入人心。移动网络在各行各业的
2、发展战略中占据了重要的位置，成为商家不可分割的部分。商品的宣传已不只局限于电视与报纸，手机网络已成为商家展示自己的另一个舞台。商家建立网站，将商家各方面的宣传与服务展现于网络中，通过网络更可实现如网上购物、信息查寻等功能，这些在改变我们原有经营方式与经营理念的同时，也为商家带来了更高的效益。因此，对于商家来说，拥有一个属于自己的手机网站是至关重要的。本应用主要使用Html相关知识，建设一个不局限与手机系统的移动商城，本应用是建立在IOS系统上。只要改变Html与手机的融合部分，就可以使本商城在其他系统的手机上使用，从而减少了软件编程的工作。系统使用苹果公司以Object-c语言为核心的iOS开
3、发工具Xcode，利用苹果公司提供的Mac OS X建立运行环境，建立工程并建立Html页面，不断改进，知道功能基本实现的可行系统。关键词：IOS；Html5；移动客户端；手机商城Mobile Mall ApplicationBase On Html5ABSTRACTAs the mobile communication and the rapid development of Internet and the mutual fusion, GPRS wireless network high-speed access to the Internet to become a reality,
4、mobile users can enjoy Internet to provide services. The mobile terminal is no longer only the terminals of the communication network, and will be the Internet terminals.Mobile network in all walks of life development strategy played an important role, become an integral part of the business. The go
5、ods have not restricted in the television publicity with newspaper, the mobile phone network has become a businessman to show his another stage. Merchants build web site, will merchants all aspects of propaganda and the service show at the network, through the network of more can now such as online
6、shopping, information search, and other functions, the changing our original mode of operation and management idea, but also for merchants brought greater benefit. So, for business for, have their own mobile web sites is very important.The main application using Html knowledge, to build a not limite
7、d and mobile phone system mobile mall, this application is based on IOS system. As long as the change of the Html and mobile phone fusion part, can make the mall in other systems on the cell phone use, thus reducing the software programming work.Systems use apple to Object-c language as the core of
8、the iOS development tools Xcode, using apples Mac OS X provide establish the operation environment, and build a project and establish Html page, continuous improvement, know the basic function of the realization of the feasible system.KEY WORDS: IOS；Html5；Mobile client；Mobile mall目 录中 文 摘 要IABSTRACT
9、II第一章 绪论11.1 课题的来源及意义11.2 课题主要研究的问题11.3 系统设计的目标21.4 iOS架构2第二章 相关介绍42.1 相关知识介绍42.1.1 iOS介绍42.1.2 iOS关于Web的支持42.1.3 iOS应用程序类型62.1.4 Objective-C介绍72.1.5 HTML5介绍72.2 相关开发工具介绍8第三章 系统分析93.1 需求分析93.1.1 需求说明93.1.2 可行性分析93.1.3 系统主功能93.2 商城页面分析103.3 商品信息实体分析103.4 CSS样式表文件分析11第四章 商城页面设计124.1 主界面设计：124.2 商品列表页面
10、：134.3 商品具体信息页面：144.4 顾客浏览历史页面：144.5 顾客浏览历史页面：15第五章 移动商城的系统测试185.1 系统测试过程185.2 系统测试结果18第六章技术总结246.1 iOS中UIWebView246.2 Web SQL Database27结 论29参考文献30致 谢31第一章 绪论1.1 课题的来源及意义近年来，随着Internet的迅速崛起，网络购物日益成为人们的购物的最佳渠道。随着手机功能的增加，人们对手机应用程序的需求也随之加大，这其中很多人都是喜欢手机的娱乐功能，这主要是因为手机随身都带着，可以随时随地拿出来消磨一下无聊的时光。这就使得手机商城很快发
11、展开来，手机商城网站也就随之发展了。于是手机电子商务开始流行起来。越来越多的商家在手机上建立起在线商店，向消费者展示出一种新颖的购物理念。手机类B2C网站在传统渠道之外开辟了新的营销模式和增长点，随着中国互联网用户和消费用户的成倍增长，这一全新的B2C营销模式在丰富传统行业的营销方式之余，也打破了传统店面营销模式在时间和空间的固定限制，因此具有更大的发展潜力和成长潜力。网上订购系统作为B2B，B2C（即企业对消费者），C2C（即消费者对消费者），电子商务的前端商务平台，其商务活动全过程中起着举足轻重的作用。本文旨在手机上建立B2C的移动商城应用。移动商城是一种具有交互功能的行业信息应用。它向用
12、户提供静态和动态两类信息资源。所谓静态信息是指那些不经常变动或更新的资源，如商品规格，简介等等；动态信息是指随时变化的信息，如商品报价，商品数量等。网上购物具强大的交互功能，可使商家和用户方便的传递信息，完成电子交易。相信在未来一段时间内，垂直类B2C将凭借其灵活性，机动性的特点，在B2C行业占据半壁江山，发展势头将依然坚挺，手机类B2C商城前景无限。根据艾瑞咨询发布的2008-2009年中国移动电子商务行业发展报告数据表明，08年中国移动电子商务市场交易规模为2.1亿元，09年随着3G商用时代到来，以及无线运营商与传统电子商务企业的纷纷试水，交易规模达6.4亿元，艾瑞预计2012年，我国的移
13、动电子商务交易规模将到108亿元。加快移动电子商务的发展将对我国的经济发展产生重要的作用。1.2 课题主要研究的问题（1）如何将手机与商城结合？（2）如何在首页显示一个滚动的热卖商品（3）如何从Html的Form中接受信息并存到数据中（4）如何建立多个页面之间的导航栏1.3 系统设计的目标本应用主要设计用于客户在不方便使用电脑的情况下比如公交上、等车时、咖啡厅等等情况下购物的需要，所以本应用设计目标有三点：如何让可与在首页就能对商城留下深刻的印象，如何让客户可以多次购物一起结账，如何让客户可以轻松的购买到自己想要的商品。1.4 iOS架构所有的iPhone应用程序都是基于UIKit框架构建而成
14、的，因此，它们在本质上具有相同的核心架构。UIKit负责提供运行应用程序和协调用户输入及屏幕显示所需要的关键对象。应用程序之间不同的地方在于如何配置缺省对象，以及如何通过定制对象来添加用户界面和行为。从应用程序启动到退出的过程中，UIKit框架负责管理大部分关键的基础设施。iPhone应用程序不断地从系统接收事件，而且必须响应那些事件。接收事件是UIApplication对象的工作，但是，响应事件则需要您的定制代码来处理。为了理解事件响应需要在哪里进行，我们有必要对iPhone应用程序的整个生命周期和事件周期有一些理解。本文的下面部分将描述这些周期，同时还对iPhone应用程序开发过程中使用的
15、一些关键设计模式进行总结。从应用程序启动到退出的过程中，UIKit框架负责管理大部分关键的基础设施。iPhone应用程序不断地从系统接收事件，而且必须响应那些事件。接收事件是UIApplication对象的工作，但是，响应事件则需要您的定制代码来处理。为了理解事件响应需要在哪里进行，我们有必要对iPhone应用程序的整个生命周期和事件周期有一些理解。本文的下面部分将描述这些周期，同时还对iPhone应用程序开发过程中使用的一些关键设计模式进行总结。应用程序的生命周期是由发生在程序启动到终止期间的一序列事件构成的。在iPhone OS中，用户可以通过轻点Home屏幕上的图标来启动应用程序。在轻点
16、图标之后的不久，系统就会显示一个过渡图形，然后调用相应的main函数来启动应用程序。从这个点之后，大量的初始化工作就会交给UIKit，由它装载应用程序的用户界面和准备事件循环。在事件循环过程中，UIKit会将事件分发给您的定制对象及响应应用程序发出的命令。当用户进行退出应用程序的操作时，UIKit会通知应用程序，并开始应用程序的终止过程。图1-1显示了一个简化了的iPhone应用程序生命周期。这个框图展示了发生在应用程序启动到退出过程中的事件序列。在应用程序初始化和终止的时候，UIKit会向应用程序委托对象发送特定的消息，使其知道正在发生的事件。在事件循环中，UIKit将事件派发给应用程序的定
17、制事件处理器2。 图1-1应用程序的声明周期第二章 相关介绍2.1 相关知识介绍2.1.1 iOS介绍iOS是由苹果公司开发的操作系统。运行于iPhone、iPod touch以及iPad设备的操作系统。它管理设备硬件并为手机本地应用程序的实现提供基础技术。根据设备不同，操作系统具有不同的系统应用程序，Phone、Mail以及Safari，这些应用程序可以为用户提供标准系统服务1。iPhone SDK包含开发、安装以及运行本地应用程序所需的工具和接口。本地应用程序使用iOS系统框架和Objective-C语言进行构建，并且直接运行于iOS设备。它与web应用程序不同，意识它位于所安装的设备上，
18、二十不管是否有网络连接它都能运行。可以说本地应用程序和其他系统应用程序具有相同地位。iPhone SDK包含开发、安装及运行本地应用程序所需的工具和接口。本地应用程序使用iOS系统框架和 Objective-C语言进行构建，并且直接运行于iOS设备。它与web应用程序不同，一是它位于所安装的设备上，二是不管是否有网络连接它都能运行。可以说本地应用程序和其他系统应用程序具有相同地位。本地应用程序和用户数据都可以通过iTunes同步到用户计算机。2.1.2 iOS关于Web的支持UIWebView类使您可以将一个微型web浏览器集成到应用程序的用户界面上。UIWebView类充分使用了iPhone
19、 OS上的web技术，同样的这些技术也用于实现iPhone OS上的Safari、实现对HTML、CSS、和JavaScript内容的全面支持。UIWebView还支持很多用户在Safari中已经熟悉了的手势，比如通过双击和双指捏夹（pinch）的手势来放大和缩小页面，还有通过手指拖动来滚动页面。除了显示内容，您还可以用web视图对象来显示web表单，收集用户输入。和UIKit的其它文本类相似，如果您在web页面的表单中有可编辑的文本框，则轻触该文本框就会弹出键盘，用户可以通过键盘输入文本。这是web浏览整体体验的一部分，web视图会自行管理键盘的显示和消除。显示了一个UIWebView对象的
20、例子，它来自UICatalog示例程序，该程序演示了UIKit框架中的很多视图和控件。这个例子只是显示HTML内容，如果您希望用户可以象使用web浏览器那样在网页之间进行漫游，需要加入一些控件。如图1-2的web视图只是占用URL文本框下面的空间，而不包含文本框的本身。图1-2 Web视图web视图通过其关联的委托对象提供有关网页何时被装载、及装载过程是否发生错误的信息。web委托是指实现一个或多个UIWebViewDelegate协议方法的对象。您可以通过实现委托方法来响应装载错误或处理一些与装载有关的其它任务。如果您的用户界面包含UIWebView对象，就可以显示本地或网络上的内容。对于本
21、地的内容，您可以动态创建，也可以使用文件，然后调用loadData:MIMEType:textEncodingName:baseURL:或loadHTMLString:baseURL:方法；如果要从网络加载，则需要创建一个NSURLRequest对象，然后传递给web视图对象的loadRequest:方法。在发起一个基于网络的请求后，如果由于某种原因必须释放web视图，则必须在释放之前取消待处理的请求。为此，您可以调用web视图的stopLoading方法。通常情况下，您可以在web视图的视图控制器的viewWillDisappear:方法中执行这些代码。如果需要确定一个请求是否处于等待状态，
22、可以通过web视图的loading属性来判断2。2.1.3 iOS应用程序类型 （1） iOS appsiOS app使用低层iOS SDK开发，基于iOS环境直接编译运行。像相册、日历、邮件等内置程序。（2） Web contentWeb content是以网站的形式部署。我们在iOS移动设备中看到的Web content可以分为三类：a、Web app。页面通过模拟成iOS app的形式被访问，从界面上来说，通过隐藏Safari的UI，使其看起来很像iOS app。然后通过在主屏幕上添加一个icon（类似电脑中的快捷方式），它可以像iOS app程序打开一样运行。b、Optimized w
23、ebpages。通过重构的方式将页面进行优化处理（主要是替除其中一些不支持的技术，如：插件、flash及java），使其能在iOS Safari中更好的运行。这里值得一提的是：进过优化处理的页面，应根据设备的分辨率及尺寸来自适应。c、Compatible webpages。此类页面不去做特别的优化，除了iOS Safari中不支持的一些web技术，任然能很好的显示其它内容。iOS web接口:设备中的Safari浏览器已提供了相关访问web内容的接口。尽管iOS的Safari与电脑中使用的Safari中看起来很像，但它们还是存在很多不同点。最大的不同就是用户不能改变可视窗口的尺寸。在电脑中用户
24、只需要通过改变浏览器窗口的大小就可以实现。在iOS中，可视窗口不可以改变，除非改变设备的方向。iOS用户可以改变可视窗口的比例来实现放大与缩小，并移动页面来改变它的显示区域。以下是关于iOS中Safari的一些特性7：a、支持cookies。b、不支持flash、java（包含java applets）及第三方插件。支持HTML5的和标签、Javascript和CSS3动画。c、使用手指触摸来实现各种交互。d、支持全屏。Web app通过主屏幕上的图标来触发，并且通过隐藏Safari的操作界面，使其更像本地应用程序。2.1.4 Objective-C介绍Objective-C，是扩充C的面向对
25、象编程语言。主要使用于Mac OS X和GNUstep这两个使用OpenStep标准的系统，而在NeXTSTEP和OpenStep中它更是基本语言。Objective-C可以在gcc运作的系统写和编译，因为gcc含Obective-C的编译器。Objective-C,通常协作Obj-C。Objective-C是非常“实际”的语言。它使用一个用C写成、很小的运行库，只会令应用程序的大小增加很小，和大部分OO系统使用极大的VM执行时间会取代了整个系统的运作相反。ObjC写成的程序通常不会比其原始码大很多。而其函式库(通常没附在软件发行本)亦和Smalltalk系统要使用极大的内存来开启一个窗口的情
26、况相反。 Objective-C的最初版本并不支持垃圾回收。在当时这是争论的焦点之一，很多人考虑到Smalltalk回收时有漫长的“死亡时间”，令整个系统失去功用。Objective-C为避免此问题才不拥有这个功能。虽然某些第三方版本已加入这个功能(尤是GNUstep), Apple在其Mac OS X 10.3中仍未引入这个功能。另一个问题是ObjC不包括命名空间机制(namespace mechanism)。取而代之的是程序设计师必须在其类别名称加上前缀，时常引致冲突。在2004年，在Cocoa编程环境中，所有Mac OS X类别和函式均有“NS”作为前缀，例如NSObject或NSBut
27、ton来清楚分别它们属于Mac OS X核心;使用“NS”是由于这些类别的名称在NeXTSTEP开发时定下。虽然Objective-C是C的母集，但它也不视C的基本型别为第一级的对象。和C+不同，Objective-C不支援运算子多载(它不支持ad-hoc多型)。亦与C+不同，但和Java相同，Objective-C只容许对象继承一个类别(不设多重继承)68。由于Obj-C使用动态运行时类型，而且所有的方法都是函数调用（有时甚至连系统调用（syscalls）也如此），很多常见的编译时性能优化方法都不能应用于Obj-C（例如：内联函数、常数传播、交互式优化、纯量取代与聚集等）。这使得Obj-C性
28、能劣于类似的对象抽象语言（如C+）。不过Obj-C拥护者认为既然Obj-C运行时消耗较大，Obj-C本来就不应应用于C+或Java常见的底层抽象。2.1.5 HTML5介绍HTML5是HTML下一个主要的修订版本，现在仍处于发展阶段。目标是取代1999年所制定的HTML4.01和XHTML1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。HTML 5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需
29、要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA），如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA），如Adobe Flash、Microsoft Silverlight，与OracleJavaFX的
30、需求，并且提供更多能有效增强网络应用的标准集41。2.2 相关开发工具介绍Xcode -是一个集成开发环境，它负责管理应用程序工程。您可以通过它来编辑、编译、运行以及调试代码。Xcode还集成了许多其他工具，它是开发过程中使用到的主要应用程序。Xcode包含一个先进的文本编辑器，支持许多特性，例如代码完成，语法高亮，代码折叠，以及行内的错误警告提示等等。Xcode的构建系统提供了默认的设置，另外还提供令你随心设置环境的能力。如果你需要文档，研究助手可以提供内容相关的文档，Xcode文档窗口让你可以浏览和查找信息。Interface Builder（界面构建器）-以可视化方式组装用户接口的工具。
31、通过Interface Builder创建出来的接口对象将会保存到某种特定格式的资源文件，并且在运行时加载到应用程序。使用界面构建器，你可以用拖拽预置组件的方式装配你的程序窗口。组件包括标准的系统控件，例如选择器，文本框，按钮，还包括用来展现程序提供的视图的定制视图。当你把组件放置在窗口上，你可以通过拖拽来移动它们，利用查看器修改他们的属性，以及在这些对象和你的代码之间建立联系9。Instruments - 运行时性能分析和调试工具。您可以通过 Instruments 收集应用程序运行时的行为信息，并利用这些信息来确认可能存在的问题。为了确保你的软件有最好的用户体验，Instruments环境
32、可以帮你分析你的iPhone应用程序在模拟器或者设备上面运行的性能表现。 Instruments可以从运行的应用程序中获取数据，并可以把数据展现为叫做时间线的图形。你可以获取关于程序的内存用量，磁盘活动，网络活动以及图形性能等数据。第三章 系统分析3.1 需求分析3.1.1 需求说明 本课题是开发基于HTML5的移动商城应用，并用于iOS平台上，用户点击系统快捷方式进入商城系统，由于是用平板进行购物，所以操作尽可能要简单，进入商城后需要一个给顾客留下一个深刻的印象，所以可以开发一个能够滑动的商品展示橱窗，进入商城商品列表页，里面需要显示一系列的商品，信息只需要显示商品图片，商品名称和商品的价格
33、，这样才能简单明了，在具体信息页面将全部的商品信息都呈现出来，让顾客仔细进行挑选。挑选之后可以进入购物车进行结账。最终的展示结果是在iPad客户端。3.1.2 可行性分析可行性分析是在系统调查的基础上，针对新系统的开发是否具备必要性和可能性，对新系统的开发从经济、技术等方面进行分析和研究，以避免投资失误，保证新系统的开发成功。其目的是用最小的代价在尽可能短的时间内确定问题是否能够解决。 （1） 经济可行性本系统由于是一个中小型软件系统，无需投入太大的开发经费，使用一些成熟稳定的开源技术，有利于用户随时随地进行购物，具有使用价值，所以经济上是可行的。 （2） 技术可行性本系统开发中设计在以iOS
34、为操作系统的平板上。它能够提供足够的API进行相应的应用开发。对于商城功能，最新发布的HTML5新标准，使开发一个类似网站的商城变得很容易。iOS提供一个UIWebView来结合iOS与HTML5商城，这些技术已经很成熟。 3.1.3 系统主功能按照系统开发的基本观点对商城进行分解，从内容上可对商城作如下划分：（1） 搜索商品：通过它超找你想需要的商品。（2） 会员登录：提供会员项目，方便会员购物。（3）购物车查询：可以查询选中的商品有哪些，是否需要更改。3.2 商城页面分析（1）尽可能全部采用DIV+CSS制作：样式设计要支持Safari，Firefox。（2）页面表现不能单一使用豆腐块模式
35、，多使用图文并茂，丰富页面表现力：但是不能过多使用图片。（3）页面的底部顶部，样式分开十几，不和其他的页面样式重合。可以在顶部和底部设计导航栏，在导航里设计一些快捷按钮，能过快速跳转到其他页面。（4）全站页面中相同表现形式的样式，应用一种样式参数，不要重复设计多余的样式。如果相同表现形式，有小部分的区分。（5）框架设计时，注意内容表现的密度，不要使页面看起来很紧凑。（6）信息表现页面，不要单一所有类信息都是相同的页面结构，要有所区分，页面中的辅助信息尽可能设计和信息相关的。（7）所有页面从头至尾都要使用导航标志，尤其是要用“返回到首页”连接，可以在每个页面都这样做。如果是图像导航按钮，那么要有
36、清晰的标识，让人看的明白。（8）不要过多的抄袭别人的作品，注意版权问题，可以借鉴，作为己用。（9）对于文件名，和文件夹名称要简洁些。（10）首页文件名都定义为index.html。（11）一定注意HTML标签应用的完整性，一切按照HTML标准的完整性来。3.3 商品信息实体分析商品信息实体包括编号、名称、价格、图片路径、商品类型等等属性。根据商城的需求为商品标上一些属性，如是否在购物车、是否浏览过等等很多属性，是根据商城在应用过程中添加的。3.4 CSS样式表文件分析CSS是英语Cascading Style Shees(层叠样式表单)的缩写，它是一种用来表现HTML文件样式表的计算机语言。C
37、SS目前最新版本为CSS3，能够对网页中对象的位置排版进行像素级的精确控制，支持机会所有的字体字号样式，拥有网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言3。在网页中CSS方法样式如下：（1）把CSS文件放在文档的（2）把CSS写在HTML里面。.（3） 将写好的CSS文档保存为.css文件，然后在里调用该文件。调用方式5。第四章 商城页面设计商城系统座位一种交易系统，为了方便大家浏览商品，便于管理，因此在手机上应该把关于所售产品和产品相关信息通过一定的方式表现出来（如图4-1）。主界面对于一个面向客户的购物网站来说是很重要的，它是网站的门户，主界面设计的
38、得体，有助于为客户留下良好的印像，同时在设计主界面时也要该网站一些常用的功能模块罗列出来，如“商品展示”功能，“搜索”功能，使手机购物成为一件愉快而又方便的事。商城设计流程图： 图4-1商城设计流程图4.1 主界面设计：在主页面上设计一个可以滑动的热卖商品的展示窗口，可以让客户了解到当期比较热卖的一些商品，供客户挑选。热卖商品展示图片可以点击，进入到商品具体显示页面。如图4-2。在滑动窗口下制作一个小型的商品架，点击可以进入商品列表页面。这个模块是由imageflow的几个文件实现的，主要是作出滑动效果，可以自动滑动，也可以手指滑动7。在顶部的导航栏里会有搜索等按钮，帮助顾客查询想要购买的商品
39、。在底部的导航栏里有右下角有两个按钮，浏览历史和购物车。两个按钮分别对应两个页面。图4-2 商城主页4.2 商品列表页面：如图4-3在主页面点击之后会跳转到当前的商品列表页面，在当前页面上会将一系列的产品列出，并附有商品图片、商品名称和商品价格，在这里可以根据第一印像挑选合适的商品，在页面的顶部，会有一个导航栏，在导航栏中会有一些按钮，这些按钮控制返回上层页面，返回主页的功能，并提供排序、筛选、查找商品等功能。在底部导航栏中会有登录按钮，提供客户登录自己的账户。 图4-4 商品列表页4.3 商品具体信息页面：在此页面上，会显示商品的大图、商品大图、商品价格、商品简介等等信息，如图4-4，让顾客
40、可以清楚的知道自己是否需要次产品图4-4 具体商品信息页面4.4 顾客浏览历史页面：如图4-5，顾客在浏览完商品之后会被系统自动添加到历史，在浏览历史里可以清楚的查看到顾客前段时间浏览过的商品，这样就可以在找到自己心仪的商品，浏览其他商品之后还能找到以前浏览过的商品。当前页面是可以左右滑动的，因此浏览的商品再多也可以放的下。图4-5浏览历史4.5 顾客浏览历史页面：如图4-6是商品顾客购物车页面，当前页面是顾客在选定商品之后添加到购物车，进行结账的页面，当前页面是为了方便顾客不用购买一个商品就要结一次帐，很大程度上方便了顾客购物。图4-6购物车4.5 数据库设计考虑到代码的重用性与维护的方便，
41、本系统将数据库连接代码单独放在一个文件红，需要使用时，通过文件名调用既可。包含语法：，运用了此方法后，使系统模块化，便于修改和维护11。在本系统中，我们将数据库连接文件定义为：database.js数据库表文件：采用的是web SQL 数据库，建立creative.db文件。图4-7 products表包含products 商品信息表文件，products表包含的所有商品的数据：表4-1 商品信息表字段名类型说明idintegermodeltext商品类型detailedDescriptiontext商品详细描述classtext商品种类subclasstext商品子种类pricesingle
42、商品价格colortext商品颜色featurestext商品特征specificationstext商品规格packageContentstext包装目录imageSmallAddresstext小图片地址imageBigAddresstext中图片地址imageBiggerAddresstext大图片地址isInShoppingCartinteger是否在购物车countInShoppingCartinteger购物车商品数量reviewstext综述recentlyOpendCounterinteger是否最近浏览第五章 移动商城的系统测试5.1 系统测试过程在系统的测试过程中，首先需要
43、解决的是各模块运行顺序问题，尤其是各个页面的联系和区别。5.2 系统测试结果（1）系统主界面图5-1商城主页顶部是导航栏，右侧有查找商品按钮。中上部是一个可以自动换图片的橱窗展示，当然，也可以手动滑动。中下部是一个手动滑动的小型橱窗展示。底部也是导航栏，有登录、浏览纪录、购物车三个按钮，分别跳转到三个页面。（2）系统商品列表页面：顶部导航栏：如图5-2，总共有5个按钮，第一个按钮，返回前一个页面。第二个按钮，返回系统主页。第三个按钮，进行商品排序。图5-2导航栏点击sort按钮后会弹出一个框，如图5-3，出现三个选项All、Sort by Price、Sort by Sales Volume。表示三种排序方式，AllSort by PriceSort by Sales Volume点击不同的选项会有不同的响应，进行重新获得数据库里的数据，并且排序，排序之后window.location.reload()会将页面刷新一次，将排序后的结果加载到当前页面图5-3排序按钮右侧有两个按钮，一个是Filter一个是搜索按钮Filter是筛选按钮，点击之后出现五个选项，如图5-4所示。实现代码：AllSort by Pricea
