《基于移动浏览器的购物网站设计与实现,网站设计论文.docx》由会员分享，可在线阅读，更多相关《基于移动浏览器的购物网站设计与实现,网站设计论文.docx（12页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、基于移动浏览器的购物网站设计与实现,网站设计论文本篇论文目录导航：【】【】【】【】【】 基于移动阅读器的购物网站设计与实现 购物网站设计毕业论文：基于移动阅读器的购物网站设计与实现 内容摘要：手机上网已成为网民重要的上网方式, 最新的互联网应用技术5能够根据它的跨平台性为各种系统提供网站设计的支持, 因而5开发能够知足更多用户的需求。文章利用专门针对移动端Web设计的App Framework框架构造购物网站, 采用PDO数据库连接方式防止SQL注入, 并利用先进的百度应用引擎快速开发并部署应用, 以期学习成本与开发成本降至最低, 减少开发工作内容, 加强电子商务的安全性。 本文关键词语：5;
2、 App Framework; Web App; 购物网站; Design of Shopping Web App Based on the 5 HOU Xiaoli Taiyuan City Vocational College Abstract：Nowadays, the prospering mobile has become one of the most important accesses to the internet.In this paper, the latest Internet Application technology 5 provides a unified so
3、lution to the problem of adaptation between different operating systems due to its virtue of good cross-platform, so 5 development can meet the needs of more users.A shopping website is designed with the help of App Framework, which is the frame that specially made for the mobile web.It can make lea
4、rning costs and development costs to a minimum and enable developers to maximize the productivity of liberation by using PDO database connection to prevent SQL injection, and using advanced Baidu App Engine to quickly develop and deploy Applications, 引言 移动互联网是移动通信和互联网二者的严密结合体。移动互联网自诞生以来, 一直保持着高速增长的态
5、势, 估计到2021年中国整体移动互联网市场规模将突破一万亿。移动互联网带给用户一种全新的业务体验, 已经成为一个潜力最大、发展最为迅速、竞争异常剧烈的信息化技术领域。在移动互联网时代, 入口对企业显得尤为重要。入口是指用户接入互联网的门户, 成为入口就能够获得大量的用户。移动互联网经太多年的发展、竞争和淘汰, 如今逐步构成了两个主要的入口:Native App、Web1。Native App在移动应用向企业推广的经过中首先成为一种趋势。所以企业在探寻求索发展移动信息化时常用Native App原生的app开发形式2。但是随着时间的推移, 企业必须对Native App的更新、维护投入很大的资
6、源, 逐步构成了一种拖累, 所以Native App原生应用开发形式很难再继续走下去。在移动互联网方面企业大都从尝试和探索开场, 假如不能尽快更新则很难持续地保存用户, 所以需要以迭代的方式在短周期内不断完善Native App的功能, 以知足市场和用户日新月异的诉求3。但是Native App对企业来讲, 无论以什么样的方式, 外包或者自个开发, 都会碰到开发周期长、更新滞后、维护成本高昂的问题。所以真正想发展移动信息化的企业都认识到要避免Native App的负面影响, 就必须放弃Native App原生应用的开发形式, 寻找别的更适宜的方式方法。 基于5的网页能够允许Native App
7、能够实现的功能直接通过网页实现, 也就是实现Web App的开发形式。5技术能够降低由于不同系统兼容问题带来的各种成本, 只需要基于5的标准开发一套Web App就能够适配不同平台、不同终端, 有了这样的便利之后, 企业和开发者能够大幅度缩短对用户及市场的新特性及需求的相应时间;对于用户来讲, 基于5的Web App能够使用户免于频繁的下载不同的Native App以及同一个Native App不同的版本4。所以, 固然到当前为止甚至短期内Web App还不能完全代替Native App原生应用的开发形式, 但是推动互联网的发展是其开放、自由的属性, 基于5的Web APP将会成为主流。 1
8、基于HMTL5的应用开发优势 在跨平台性、开发难度和版本控制及传播形式方面, 5应用较之Native应用具有一定的优势。 1.1 跨平台性 Native应用运行于本地计算机时, 电脑的响应时间、处理效率等指标都是最优的, 而且它还能有很多版本来兼容不同的操作系统和硬件平台。但是, 在这种技术运行形式下, 开发出来的应用会比拟依靠电脑的配置, 十分是操作系统的版本, 这就会产生应用和硬件不匹配的问题。 5的应用能够解决很多Native应用不尽人意的地方, 它能够在云端上来运行代码, 硬件平台对于它来讲影响不会很大, 这就使开发应用减小对操作系统的依靠, 到达很好地跨平台的效果。 1.2 开发难度
9、和版本控制方面 由于Native应用对操作系统的高度依靠性, 因而在面对不同操作系统、不同规格的终端时, 开发者往往投入很大的精神和资源去开发不同的应用版本, 以适配相应的操作系统和终端。另外, 移动互联网是一个竞争剧烈、节拍很快的领域, 企业越快地知足用户及市场的诉求, 越快地更新、更正移动应用的功能, 就会占领很大程度的先入优势。互联网产品具有可复制性强、免费的属性, 且具有很强的群体效应, 所以假如无法第一时间构成先入优势, 后入者很难再获得大量用户。而Native App在版本更新和bug修复方面要付出很大的代价, 并且不能随时进行修复和更新。 相较于Native应用的乏力, 基于5的
10、移动互联网应用只需要开发人员集中精神完善一个版本, 并且投入的时间和人力以及成本也相对较少。在修复应用bug方面, 由于基于5的移动互联网应用是Web网页端的内容, 因而不需要迭代版本, 只需要在后台修改即可修复bug。 1.3 传播形式 当前手机App商店势不可当, 种类和功能多种多样, 极大地推动了整个移动手机App产业的发展, 并且基于安卓系统自行开发的手机App更是层出不穷。但是Native应用的入口非常单一, 只能通过App商店来下载。而基于5的移动互联网应用的导流入口数量较多且操作简单, 超级App (如微信朋友圈) 、搜索引擎、应用市场、阅读器等都是5移动互联网应用的流量入口。并
11、且Web借助其容易接触到客户的特性, 通过Web找到内容, 每一项发布的内容都有一个独立的地址, 手机客户端用户能够根据自个的需求在不同的软件中直接打开, 或者进行共享链接5。 2 5的核心功能分析 2.1 离线存储技术 离线存储技术能够解决用户在没有网络信号的情况下继续访问Web应用。在5中, 通过cache manifest文件列出了应用程序离线工作时需要的所有资源文件, 以便用户在离线状态能够继续与Web App进行交互和操作数据, 5使用DOM Storage和Web SQL Database来给用户提供不同的存储方式, DOM Storage能够提供易用的key/value存储方式,
12、 同时Web SQL能够提供基本数据库存储。同时5提供了Navigator.online和online/offline两种方式检测用户能否在线, 当用户状态为在线以后, 将离线状态存储到本地的数据同步到服务器上。 2.2 即时通讯技术 Web应用有一个很重要的信息特征就是信息的实时性, 比方讲监控系统、新闻播报系统、在线游戏、在线会议等应用, 要求信息在服务器和客户端进行交互的经过中, 每一个步骤都要快速并且保证信息的完好性, 十分是服务器接收信息并进行处理的经过和客户端进行信息显示的经过。这也就是Web应用开发人员首先要解决的一个问题, 通常他们会使用轮询或者comet技术, 但是效果不太好
13、6。假如使用5 Web Socket就能够到达很好的效果, 使客户端快速显示服务器信息到达实时通讯的效果。它基本是通过Javascript来实现这个功能, 首先向服务器发出连接请求, 然后实现客户端和服务器TCP连接直接交换数据。因而, 这种技术能够实时传输数据, 并且保持数据的完好性和稳定性。 2.3 多媒体技术 当前所使用的阅读器绝大多数是通过Adobe Flash这种插件来进行多媒体文件播放的, 但是这种产品稳定性较差, 时常需要进行升级维护, 更糟糕的是阅读器会由于使用了flash插件消耗应用内存, 造成启动时间增加或者导致阅读器瘫痪。而基于5技术的应用能够不使用flash插件直接播放
14、多媒体文件, 这样大大降低了多媒体应用的开发难度, 而且能够节约系统内存, 很好地解决上述阅读器瘫痪的难题。 5中标签Canvas、Video和Audio将视频音频处理功能参加到了应用中7。这三种标签各有所长, Canvas标签虽没有可操作的行为, 但是它能够把绘制的矢量图绘制到画布上, 而且没有相应的在网页上显示的标准, 所以是客户端绘制矢量图最好是工具;Video标签可成为网页加载的一种标准化的视频文件;Audio标签使网页中加载一种标准化的音频, 并且能够播放出来。 一个典型的5video API代码如下: 3 系统设计 3.1 总体设计 本设计在进行购物网站平台建设时, 充分考虑手机性
15、能、用户体验、支付安全、开发周期与成本因素, 设计原则如下:一是为了提高手机阅读5网页的速度, 选用针对手机阅读器开发框架AppFramework;二是将5网页内置在微信公众平台中, 并采用微信支付方式, 提升用户的购物体验;三是利用百度云应用引擎 (BAE) 将购物网站托管在安全可靠的云服务器中, 减少了对服务器的运维成本, 加快开发周期8。 整个购物时序如此图1所示, 微信公众平台是整个购物网站的入口, 通过平台的功能按钮跳转至购物网站;购物网站用来展示商品信息, 用户通过此系统完成商品的选择;百度应用引擎是购物网站的后台管理系统, 它能够及时响应用户操作, 并保存个人信息和订单信息等;微
16、信支付系统是专业的在线支付平台, 提供安全便捷的支付服务。整个购物的支付流程为当用户通过微信公众平台访问购物网站时, 该用户被分配一个唯一的用户辨别码openid, 只要通过openid才能获取调用微信支付API接口函数的权限;为了防止用户从购物车修改商品价格, 在生成订单后需再次连接百度云数据库, 通过商品ID查询相应价格;当用户点击付款按钮时, 微信公众平台调用微信支付API接口向微信支付系统发起支付请求, 微信支付系统返回支付受权认证 (即用户需核对支付金额及密码) , 用户提交受权后即完成了本次交易。用户支付完成后, 为了准确告知用户该订单的支付结果, 通过订单号在微信支付系统查询支付
17、状态, 然后跳转至购物页面向用户展示支付结果。 图1 系统时序图 3.2 数据库设计 保密性和安全性对于购物网站非常重要, 比方SQL注入、XSS攻击、Session劫持和跨网站请求伪造等。SQL注入9的本质就是恶意攻击者将SQL代码插入或添加到程序的参数中, 而程序并没有对传入的参数进行正确处理, 导致参数中的数据被当作代码来执行, 并最终将执行结果返回给执行者。传统处理SQL注入是将用户输入的数据通过addslashes () 、mysql-real-escape-string () 等函数对特殊字符和可能引起数据库操作出错的字符进行转义, 或者使用MySQLi方式方法, 但是这两种方式方
18、法效率低, 且不能从根本上解决SQL注入问题, 为此本系统采用PDO方式, 能够从根本上杜绝SQL注入的问题, 其工作原理是将SQL模板和变量是分两次发送给MySQL, 由MySQL完成变量的转义处理, 由于变量和SQL模板是分两次发送的, 那么就不存在SQL注入的问题。示例代码如下: PDO方式不仅能够防止SQL注入, 而且使用prepare方式, 只在服务端编辑一次SQL语句, 能够大大提高效率。以下图为MySQLi与PDO性能的比拟, 如此图2所示。 图2 数据库连接性能比拟 通过上图比拟发现采用PDO的长连接方式性能最佳, 即时连接MySQLi的性能要优于PDO, 之所以PDO比MyS
19、QLi快, 是由于PDO对数据库的操作比MySQLi要少。 4 系统测试 本系统包含首页显示商品分类和商品明细, 商品分类主要用于将商品分门别类, 便于用户对商品进行检索;商品明细主要向用户展示商品名称、价格及商品图片等信息。在Android和iOS手机的微信内置阅读器对系统进行功能测试, 测试结果表示清楚, 界面简洁, 数据稳定, 用户交互体验良好, 能很好知足用户购买商品的需求10。如此图3所示。 图3 界面测试 为了突显App Framework框架的性能, 采用当下流行的Jquery Mobile框架进行测试, 测试指标分别为连接时长、第一个字节消耗损费时长、加载总时长, 测试内容如表
20、1所示: 表1 App Framework与JqueryMobile性能比拟 通过上述性能比拟, 发现Jquery Mobile框架文件庞大, 相比拟App Framework框架, 加载文件消耗损费时间长, 尤其在移动端操作响应延迟缓慢, 影响用户的操作体验。 5 结束语 本文介绍以电脑客户端购物网站为基础, 使用App Framework与5快速开发基于移动阅读器的购物网站, 华而不实响应式设计、UI、模拟Native App的各种效果和操作主要由App Framework框架实现, 数据库连接方式选用安全性高、性能好的PDO方式, 对于动态生成内容则用PHP完成, 整个购物网站部署在百度
21、云应用引擎平台上, 减少了服务器环境配置和运维成本。随着5技术不断发展, 加上微信的发展, 各种公众号的出现, Web App的应用将越来越广泛。 以下为参考文献 1曾昭江, 汤怀.WebAPP在校园网站移动化应用中的研究与实践J.计算机光盘软件与应用, 2020, 11 (7) :41-43. 2马新强, 孙兆, 等.Web标准与5的核心技术研究J, 2018, 34 (6) :72-74. 3平淑文, 潘珏羽, 等.基于5和JavaScript轻量型动画框架开发J.计算机技术与发展, 2020, 5 (12) :35-38. 4罗黎霞.基于云计算的服务平台 Google App Engin
22、eJ.信息与电脑 (理论版) , 2018, 39 (8) :89-94. 5黄永慧, 陈程凯, 等.5在移动应用开发上的应用前景J.重庆文理学院学报 (自然科学版) , 2020, 11 (7) :41-43. 6李慧云, 何震苇, 等.5技术与应用形式研究J.电信科学, 2020, 39 (5) :101-103. 7张奇伟.基于5的移动应用的研究与开发D.北京:北京邮电大学, 2020. 8杨磊.基于ASP的网上购物系统的设计与实现D.厦门:厦门大学, 2020. 9薛玉芳.数据库安全及黑客入侵防备D.安徽:安徽理工大学, 2020. 10李江.主流Javascript框架比拟与分析J.鞍山师范学院学报, 2021, 51 (4) :11-14.