基于移动浏览器的购物网站设计与实现,网站设计论文

基于移动浏览器的购物网站设计与实现,网站设计论文本篇论文目录导航：【】【】【】【】【】基于移动阅读器的购物网站设计与实现购物网站设计毕业论文：基于移动阅读器的购物网站设计与实现内容摘要：手机上网已成为网民重要的上网方式,最新的互联网应用技术5能够根据它的跨平台性为各种系统提供网站设计的支持,因而5开发能够知足更多用户的需求。文章利用专门针对移动端Web设计的AppFramework框架构造购物网站,采用PDO数据库连接方式防止SQL注入,并利用先进的百度应用引擎快速开发并部署应用,以期学习成本与开发成本降至最低,减少开发工作内容,加强电子商务的安全性。本文关键词语：5;AppFramework;WebApp;购物网站;DesignofShoppingWebAppBasedonthe5HOUXiaoliTaiyuanCityVocationalCollegeAbstract：Nowadays,theprosperingmobilehasbecomeoneofthemostimportantaccessestotheinternet.Inthispaper,thelatestInternetApplicationtechnology5providesaunifiedsolutiontotheproblemofadaptationbetweendifferentoperatingsystemsduetoitsvirtueofgoodcross-platform,so5developmentcanmeettheneedsofmoreusers.AshoppingwebsiteisdesignedwiththehelpofAppFramework,whichistheframethatspeciallymadeforthemobileweb.ItcanmakelearningcostsanddevelopmentcoststoaminimumandenabledeveloperstomaximizetheproductivityofliberationbyusingPDOdatabaseconnectiontopreventSQLinjection,andusingadvancedBaiduAppEnginetoquicklydevelopanddeployApplications,引言移动互联网是移动通信和互联网二者的严密结合体。移动互联网自诞生以来,一直保持着高速增长的态势,估计到2021年中国整体移动互联网市场规模将突破一万亿。移动互联网带给用户一种全新的业务体验,已经成为一个潜力最大、发展最为迅速、竞争异常剧烈的信息化技术领域。在移动互联网时代,入口对企业显得尤为重要。入口是指用户接入互联网的门户,成为入口就能够获得大量的用户。移动互联网经太多年的发展、竞争和淘汰,如今逐步构成了两个主要的入口:NativeApp、Web[1]。NativeApp在移动应用向企业推广的经过中首先成为一种趋势。所以企业在探寻求索发展移动信息化时常用NativeApp原生的app开发形式[2]。但是随着时间的推移,企业必须对NativeApp的更新、维护投入很大的资源,逐步构成了一种拖累,所以NativeApp原生应用开发形式很难再继续走下去。在移动互联网方面企业大都从尝试和探索开场,假如不能尽快更新则很难持续地保存用户,所以需要以迭代的方式在短周期内不断完善NativeApp的功能,以知足市场和用户日新月异的诉求[3]。但是NativeApp对企业来讲,无论以什么样的方式,外包或者自个开发,都会碰到开发周期长、更新滞后、维护成本高昂的问题。所以真正想发展移动信息化的企业都认识到要避免NativeApp的负面影响,就必须放弃NativeApp原生应用的开发形式,寻找别的更适宜的方式方法。基于5的网页能够允许NativeApp能够实现的功能直接通过网页实现,也就是实现WebApp的开发形式。5技术能够降低由于不同系统兼容问题带来的各种成本,只需要基于5的标准开发一套WebApp就能够适配不同平台、不同终端,有了这样的便利之后,企业和开发者能够大幅度缩短对用户及市场的新特性及需求的相应时间;对于用户来讲,基于5的WebApp能够使用户免于频繁的下载不同的NativeApp以及同一个NativeApp不同的版本[4]。所以,固然到当前为止甚至短期内WebApp还不能完全代替NativeApp原生应用的开发形式,但是推动互联网的发展是其开放、自由的属性,基于5的WebAPP将会成为主流。1基于HMTL5的应用开发优势在跨平台性、开发难度和版本控制及传播形式方面,5应用较之Native应用具有一定的优势。1.1跨平台性Native应用运行于本地计算机时,电脑的响应时间、处理效率等指标都是最优的,而且它还能有很多版本来兼容不同的操作系统和硬件平台。但是,在这种技术运行形式下,开发出来的应用会比拟依靠电脑的配置,十分是操作系统的版本,这就会产生应用和硬件不匹配的问题。5的应用能够解决很多Native应用不尽人意的地方,它能够在云端上来运行代码,硬件平台对于它来讲影响不会很大,这就使开发应用减小对操作系统的依靠,到达很好地跨平台的效果。1.2开发难度和版本控制方面由于Native应用对操作系统的高度依靠性,因而在面对不同操作系统、不同规格的终端时,开发者往往投入很大的精神和资源去开发不同的应用版本,以适配相应的操作系统和终端。另外,移动互联网是一个竞争剧烈、节拍很快的领域,企业越快地知足用户及市场的诉求,越快地更新、更正移动应用的功能,就会占领很大程度的先入优势。互联网产品具有可复制性强、免费的属性,且具有很强的群体效应,所以假如无法第一时间构成先入优势,后入者很难再获得大量用户。而NativeApp在版本更新和bug修复方面要付出很大的代价,并且不能随时进行修复和更新。相较于Native应用的乏力,基于5的移动互联网应用只需要开发人员集中精神完善一个版本,并且投入的时间和人力以及成本也相对较少。在修复应用bug方面,由于基于5的移动互联网应用是Web网页端的内容,因而不需要迭代版本,只需要在后台修改即可修复bug。1.3传播形式当前手机App商店势不可当,种类和功能多种多样,极大地推动了整个移动手机App产业的发展,并且基于安卓系统自行开发的手机App更是层出不穷。但是Native应用的入口非常单一,只能通过App商店来下载。而基于5的移动互联网应用的导流入口数量较多且操作简单,超级App(如微信朋友圈)、搜索引擎、应用市场、阅读器等都是5移动互联网应用的流量入口。并且Web借助其容易接触到客户的特性,通过Web找到内容,每一项发布的内容都有一个独立的地址,手机客户端用户能够根据自个的需求在不同的软件中直接打开,或者进行共享链接[5]。25的核心功能分析2.1离线存储技术离线存储技术能够解决用户在没有网络信号的情况下继续访问Web应用。在5中,通过cachemanifest文件列出了应用程序离线工作时需要的所有资源文件,以便用户在离线状态能够继续与WebApp进行交互和操作数据,5使用DOMStorage和WebSQLDatabase来给用户提供不同的存储方式,DOMStorage能够提供易用的key/value存储方式,同时WebSQL能够提供基本数据库存储。同时5提供了Navigator.online和online/offline两种方式检测用户能否在线,当用户状态为在线以后,将离线状态存储到本地的数据同步到服务器上。2.2即时通讯技术Web应用有一个很重要的信息特征就是信息的实时性,比方讲监控系统、新闻播报系统、在线游戏、在线会议等应用,要求信息在服务器和客户端进行交互的经过中,每一个步骤都要快速并且保证信息的完好性,十分是服务器接收信息并进行处理的经过和客户端进行信息显示的经过。这也就是Web应用开发人员首先要解决的一个问题,通常他们会使用轮询或者comet技术,但是效果不太好[6]。假如使用5WebSocket就能够到达很好的效果,使客户端快速显示服务器信息到达实时通讯的效果。它基本是通过Javascript来实现这个功能,首先向服务器发出连接请求,然后实现客户端和服务器TCP连接直接交换数据。因而,这种技术能够实时传输数据,并且保持数据的完好性和稳定性。2.3多媒体技术当前所使用的阅读器绝大多数是通过AdobeFlash这种插件来进行多媒体文件播放的,但是这种产品稳定性较差,时常需要进行升级维护,更糟糕的是阅读器会由于使用了flash插件消耗应用内存,造成启动时间增加或者导致阅读器瘫痪。而基于5技术的应用能够不使用flash插件直接播放多媒体文件,这样大大降低了多媒体应用的开发难度,而且能够节约系统内存,很好地解决上述阅读器瘫痪的难题。5中标签Canvas、Video和Audio将视频音频处理功能参加到了应用中[7]。这三种标签各有所长,Canvas标签虽没有可操作的行为,但是它能够把绘制的矢量图绘制到画布上,而且没有相应的在网页上显示的标准,所以是客户端绘制矢量图最好是工具;Video标签可成为网页加载的一种标准化的视频文件;Audio标签使网页中加载一种标准化的音频,并且能够播放出来。一个典型的5videoAPI代码如下:3系统设计3.1总体设计本设计在进行购物网站平台建设时,充分考虑手机性能、用户体验、支付安全、开发周期与成本因素,设计原则如下:一是为了提高手机阅读5网页的速度,选用针对手机阅读器开发框架AppFramework;二是将5网页内置在微信公众平台中,并采用微信支付方式,提升用户的购物体验;三是利用百度云应用引擎(BAE)将购物网站托管在安全可靠的云服务器中,减少了对服务器的运维成本,加快开发周期[8]。整个购物时序如此图1所示,微信公众平台是整个购物网站的入口,通过平台的功能按钮跳转至购物网站;购物网站用来展示商品信息,用户通过此系统完成商品的选择;百度应用引擎是购物网站的后台管理系统,它能够及时响应用户操作,并保存个人信息和订单信息等;微信支付系统是专业的在线支付平台,提供安全便捷的支付服务。整个购物的支付流程为当用户通过微信公众平台访问购物网站时,该用户被分配一个唯一的用户辨别码openid,只要通过openid才能获取调用微信支付API接口函数的权限;为了防止用户从购物车修改商品价格,在生成订单后需再次连接百度云数据库,通过商品ID查询相应价格;当用户点击付款按钮时,微信公众平台调用微信支付API接口向微信支付系统发起支付请求,微信支付系统返回支付受权认证(即用户需核对支付金额及密码),用户提交受权后即完成了本次交易。用户支付完成后,为了准确告知用户该订单的支付结果,通过订单号在微信支付系统查询支付状态,然后跳转至购物页面向用户展示支付结果。图1系统时序图3.2数据库设计保密性和安全性对于购物网站非常重要,比方SQL注入、XSS攻击、Session劫持和跨网站请求伪造等。SQL注入[9]的本质就是恶意攻击者将SQL代码插入或添加到程序的参数中,而程序并没有对传入的参数进行正确处理,导致参数中的数据被当作代码来执行,并最终将执行结果返回给执行者。传统处理SQL注入是将用户输入的数据通过addslashes()、mysql-real-escape-string()等函数对特殊字符和可能引起数据库操作出错的字符进行转义,或者使用MySQLi方式方法,但是这两种方式方法效率低,且不能从根本上解决SQL注入问题,为此本系统采用PDO方式,能够从根本上杜绝SQL注入的问题,其工作原理是将SQL模板和变量是分两次发送给MySQL,由MySQL完成变量的转义处理,由于变量和SQL模板是分两次发送的,那么就不存在SQL注入的问题。示例代码如下:PDO方式不仅能够防止SQL注入,而且使用prepare方式,只在服务端编辑一次SQL语句,能够大大提高效率。以下图为MySQLi与PDO性能的比拟,如此图2所示。图2数据库连接性能比拟通过上图比拟发现采用PDO的长连接方式性能最佳,即时连接MySQLi的性能要优于PDO,之所以PDO比MySQLi快,是由于PDO对数据库的操作比MySQLi要少。4系统测试本系统包含首页显示商品分类和商品明细,商品分类主要用于将商品分门别类,便于用户对商品进行检索;商品明细主要向用户展示商品名称、价格及商品图片等信息。在Android和iOS手机的微信内置阅读器对系统进行功能测试,测试结果表示清楚,界面简洁,数据稳定,用户交互体验良好,能很好知足用户购买商品的需求[10]。如此图3所示。图3界面测试为了突显AppFramework框架的性能,采用当下流行的JqueryMobile框架进行测试,测试指标分别为连接时长、第一个字节消耗损费时长、加载总时长,测试内容如表1所示:表1AppFramework与JqueryMobile性能比拟通过上述性能比拟,发现JqueryMobile框架文件庞大,相比拟AppFramework框架,加载文件消耗损费时间长,尤其在移动端操作响应延迟缓慢,影响用户的操作体验。5结束语本文介绍以电脑客户端购物网站为基础,使用AppFramework与5快速开发基于移动阅读器的购物网站,华而不实响应式设计、UI、模拟NativeApp的各种效果和操作主要由AppFramework框架实现,数据库连接方式选用安全性高、性能好的PDO方式,对于动态生成内容则用PHP完成,整个购物网站部署在百度云应用引擎平台上,减少了服务器环境