基于移動瀏覽器的購物網(wǎng)站設計與實現(xiàn),網(wǎng)站設計論文

基于移動瀏覽器的購物網(wǎng)站設計與實現(xiàn),網(wǎng)站設計論文本篇論文目錄導航：【】【】【】【】【】基于移動閱讀器的購物網(wǎng)站設計與實現(xiàn)購物網(wǎng)站設計畢業(yè)論文：基于移動閱讀器的購物網(wǎng)站設計與實現(xiàn)內容摘要：手機上網(wǎng)已成為網(wǎng)民重要的上網(wǎng)方式,最新的互聯(lián)網(wǎng)應用技術5能夠根據(jù)它的跨平臺性為各種系統(tǒng)提供網(wǎng)站設計的支持,因而5開發(fā)能夠知足更多用戶的需求。文章利用專門針對移動端Web設計的AppFramework框架構造購物網(wǎng)站,采用PDO數(shù)據(jù)庫連接方式防止SQL注入,并利用先進的百度應用引擎快速開發(fā)并部署應用,以期學習成本與開發(fā)成本降至最低,減少開發(fā)工作內容,加強電子商務的安全性。本文關鍵詞語：5;AppFramework;WebApp;購物網(wǎng)站;DesignofShoppingWebAppBasedonthe5HOUXiaoliTaiyuanCityVocationalCollegeAbstract：Nowadays,theprosperingmobilehasbecomeoneofthemostimportantaccessestotheinternet.Inthispaper,thelatestInternetApplicationtechnology5providesaunifiedsolutiontotheproblemofadaptationbetweendifferentoperatingsystemsduetoitsvirtueofgoodcross-platform,so5developmentcanmeettheneedsofmoreusers.AshoppingwebsiteisdesignedwiththehelpofAppFramework,whichistheframethatspeciallymadeforthemobileweb.ItcanmakelearningcostsanddevelopmentcoststoaminimumandenabledeveloperstomaximizetheproductivityofliberationbyusingPDOdatabaseconnectiontopreventSQLinjection,andusingadvancedBaiduAppEnginetoquicklydevelopanddeployApplications,引言移動互聯(lián)網(wǎng)是移動通信和互聯(lián)網(wǎng)二者的嚴密結合體。移動互聯(lián)網(wǎng)自誕生以來,一直保持著高速增長的態(tài)勢,估計到2021年中國整體移動互聯(lián)網(wǎng)市場規(guī)模將突破一萬億。移動互聯(lián)網(wǎng)帶給用戶一種全新的業(yè)務體驗,已經(jīng)成為一個潛力最大、發(fā)展最為迅速、競爭異常劇烈的信息化技術領域。在移動互聯(lián)網(wǎng)時代,入口對企業(yè)顯得尤為重要。入口是指用戶接入互聯(lián)網(wǎng)的門戶,成為入口就能夠獲得大量的用戶。移動互聯(lián)網(wǎng)經(jīng)太多年的發(fā)展、競爭和淘汰,如今逐步構成了兩個主要的入口:NativeApp、Web[1]。NativeApp在移動應用向企業(yè)推廣的經(jīng)過中首先成為一種趨勢。所以企業(yè)在探尋求索發(fā)展移動信息化時常用NativeApp原生的app開發(fā)形式[2]。但是隨著時間的推移,企業(yè)必須對NativeApp的更新、維護投入很大的資源,逐步構成了一種拖累,所以NativeApp原生應用開發(fā)形式很難再繼續(xù)走下去。在移動互聯(lián)網(wǎng)方面企業(yè)大都從嘗試和探索開場,假如不能盡快更新則很難持續(xù)地保存用戶,所以需要以迭代的方式在短周期內不斷完善NativeApp的功能,以知足市場和用戶日新月異的訴求[3]。但是NativeApp對企業(yè)來講,無論以什么樣的方式,外包或者自個開發(fā),都會碰到開發(fā)周期長、更新滯后、維護成本高昂的問題。所以真正想發(fā)展移動信息化的企業(yè)都認識到要避免NativeApp的負面影響,就必須放棄NativeApp原生應用的開發(fā)形式,尋找別的更適宜的方式方法?；?的網(wǎng)頁能夠允許NativeApp能夠實現(xiàn)的功能直接通過網(wǎng)頁實現(xiàn),也就是實現(xiàn)WebApp的開發(fā)形式。5技術能夠降低由于不同系統(tǒng)兼容問題帶來的各種成本,只需要基于5的標準開發(fā)一套WebApp就能夠適配不同平臺、不同終端,有了這樣的便利之后,企業(yè)和開發(fā)者能夠大幅度縮短對用戶及市場的新特性及需求的相應時間;對于用戶來講,基于5的WebApp能夠使用戶免于頻繁的下載不同的NativeApp以及同一個NativeApp不同的版本[4]。所以,固然到當前為止甚至短期內WebApp還不能完全代替NativeApp原生應用的開發(fā)形式,但是推動互聯(lián)網(wǎng)的發(fā)展是其開放、自由的屬性,基于5的WebAPP將會成為主流。1基于HMTL5的應用開發(fā)優(yōu)勢在跨平臺性、開發(fā)難度和版本控制及傳播形式方面,5應用較之Native應用具有一定的優(yōu)勢。1.1跨平臺性Native應用運行于本地計算機時,電腦的響應時間、處理效率等指標都是最優(yōu)的,而且它還能有很多版本來兼容不同的操作系統(tǒng)和硬件平臺。但是,在這種技術運行形式下,開發(fā)出來的應用會比擬依靠電腦的配置,十分是操作系統(tǒng)的版本,這就會產(chǎn)生應用和硬件不匹配的問題。5的應用能夠解決很多Native應用不盡人意的地方,它能夠在云端上來運行代碼,硬件平臺對于它來講影響不會很大,這就使開發(fā)應用減小對操作系統(tǒng)的依靠,到達很好地跨平臺的效果。1.2開發(fā)難度和版本控制方面由于Native應用對操作系統(tǒng)的高度依靠性,因而在面對不同操作系統(tǒng)、不同規(guī)格的終端時,開發(fā)者往往投入很大的精神和資源去開發(fā)不同的應用版本,以適配相應的操作系統(tǒng)和終端。另外,移動互聯(lián)網(wǎng)是一個競爭劇烈、節(jié)拍很快的領域,企業(yè)越快地知足用戶及市場的訴求,越快地更新、更正移動應用的功能,就會占領很大程度的先入優(yōu)勢。互聯(lián)網(wǎng)產(chǎn)品具有可復制性強、免費的屬性,且具有很強的群體效應,所以假如無法第一時間構成先入優(yōu)勢,后入者很難再獲得大量用戶。而NativeApp在版本更新和bug修復方面要付出很大的代價,并且不能隨時進行修復和更新。相較于Native應用的乏力,基于5的移動互聯(lián)網(wǎng)應用只需要開發(fā)人員集中精神完善一個版本,并且投入的時間和人力以及成本也相對較少。在修復應用bug方面,由于基于5的移動互聯(lián)網(wǎng)應用是Web網(wǎng)頁端的內容,因而不需要迭代版本,只需要在后臺修改即可修復bug。1.3傳播形式當前手機App商店勢不可當,種類和功能多種多樣,極大地推動了整個移動手機App產(chǎn)業(yè)的發(fā)展,并且基于安卓系統(tǒng)自行開發(fā)的手機App更是層出不窮。但是Native應用的入口非常單一,只能通過App商店來下載。而基于5的移動互聯(lián)網(wǎng)應用的導流入口數(shù)量較多且操作簡單,超級App(如微信朋友圈)、搜索引擎、應用市場、閱讀器等都是5移動互聯(lián)網(wǎng)應用的流量入口。并且Web借助其容易接觸到客戶的特性,通過Web找到內容,每一項發(fā)布的內容都有一個獨立的地址,手機客戶端用戶能夠根據(jù)自個的需求在不同的軟件中直接打開,或者進行共享鏈接[5]。25的核心功能分析2.1離線存儲技術離線存儲技術能夠解決用戶在沒有網(wǎng)絡信號的情況下繼續(xù)訪問Web應用。在5中,通過cachemanifest文件列出了應用程序離線工作時需要的所有資源文件,以便用戶在離線狀態(tài)能夠繼續(xù)與WebApp進行交互和操作數(shù)據(jù),5使用DOMStorage和WebSQLDatabase來給用戶提供不同的存儲方式,DOMStorage能夠提供易用的key/value存儲方式,同時WebSQL能夠提供基本數(shù)據(jù)庫存儲。同時5提供了Navigator.online和online/offline兩種方式檢測用戶能否在線,當用戶狀態(tài)為在線以后,將離線狀態(tài)存儲到本地的數(shù)據(jù)同步到服務器上。2.2即時通訊技術Web應用有一個很重要的信息特征就是信息的實時性,比方講監(jiān)控系統(tǒng)、新聞播報系統(tǒng)、在線游戲、在線會議等應用,要求信息在服務器和客戶端進行交互的經(jīng)過中,每一個步驟都要快速并且保證信息的完好性,十分是服務器接收信息并進行處理的經(jīng)過和客戶端進行信息顯示的經(jīng)過。這也就是Web應用開發(fā)人員首先要解決的一個問題,通常他們會使用輪詢或者comet技術,但是效果不太好[6]。假如使用5WebSocket就能夠到達很好的效果,使客戶端快速顯示服務器信息到達實時通訊的效果。它基本是通過Javascript來實現(xiàn)這個功能,首先向服務器發(fā)出連接請求,然后實現(xiàn)客戶端和服務器TCP連接直接交換數(shù)據(jù)。因而,這種技術能夠實時傳輸數(shù)據(jù),并且保持數(shù)據(jù)的完好性和穩(wěn)定性。2.3多媒體技術當前所使用的閱讀器絕大多數(shù)是通過AdobeFlash這種插件來進行多媒體文件播放的,但是這種產(chǎn)品穩(wěn)定性較差,時常需要進行升級維護,更糟糕的是閱讀器會由于使用了flash插件消耗應用內存,造成啟動時間增加或者導致閱讀器癱瘓。而基于5技術的應用能夠不使用flash插件直接播放多媒體文件,這樣大大降低了多媒體應用的開發(fā)難度,而且能夠節(jié)約系統(tǒng)內存,很好地解決上述閱讀器癱瘓的難題。5中標簽Canvas、Video和Audio將視頻音頻處理功能參加到了應用中[7]。這三種標簽各有所長,Canvas標簽雖沒有可操作的行為,但是它能夠把繪制的矢量圖繪制到畫布上,而且沒有相應的在網(wǎng)頁上顯示的標準,所以是客戶端繪制矢量圖最好是工具;Video標簽可成為網(wǎng)頁加載的一種標準化的視頻文件;Audio標簽使網(wǎng)頁中加載一種標準化的音頻,并且能夠播放出來。一個典型的5videoAPI代碼如下:3系統(tǒng)設計3.1總體設計本設計在進行購物網(wǎng)站平臺建設時,充分考慮手機性能、用戶體驗、支付安全、開發(fā)周期與成本因素,設計原則如下:一是為了提高手機閱讀5網(wǎng)頁的速度,選用針對手機閱讀器開發(fā)框架AppFramework;二是將5網(wǎng)頁內置在微信公眾平臺中,并采用微信支付方式,提升用戶的購物體驗;三是利用百度云應用引擎(BAE)將購物網(wǎng)站托管在安全可靠的云服務器中,減少了對服務器的運維成本,加快開發(fā)周期[8]。整個購物時序如此圖1所示,微信公眾平臺是整個購物網(wǎng)站的入口,通過平臺的功能按鈕跳轉至購物網(wǎng)站;購物網(wǎng)站用來展示商品信息,用戶通過此系統(tǒng)完成商品的選擇;百度應用引擎是購物網(wǎng)站的后臺管理系統(tǒng),它能夠及時響應用戶操作,并保存?zhèn)€人信息和訂單信息等;微信支付系統(tǒng)是專業(yè)的在線支付平臺,提供安全便捷的支付服務。整個購物的支付流程為當用戶通過微信公眾平臺訪問購物網(wǎng)站時,該用戶被分配一個唯一的用戶辨別碼openid,只要通過openid才能獲取調用微信支付API接口函數(shù)的權限;為了防止用戶從購物車修改商品價格,在生成訂單后需再次連接百度云數(shù)據(jù)庫,通過商品ID查詢相應價格;當用戶點擊付款按鈕時,微信公眾平臺調用微信支付API接口向微信支付系統(tǒng)發(fā)起支付請求,微信支付系統(tǒng)返回支付受權認證(即用戶需核對支付金額及密碼),用戶提交受權后即完成了本次交易。用戶支付完成后,為了準確告知用戶該訂單的支付結果,通過訂單號在微信支付系統(tǒng)查詢支付狀態(tài),然后跳轉至購物頁面向用戶展示支付結果。圖1系統(tǒng)時序圖3.2數(shù)據(jù)庫設計保密性和安全性對于購物網(wǎng)站非常重要,比方SQL注入、XSS攻擊、Session劫持和跨網(wǎng)站請求偽造等。SQL注入[9]的本質就是惡意攻擊者將SQL代碼插入或添加到程序的參數(shù)中,而程序并沒有對傳入的參數(shù)進行正確處理,導致參數(shù)中的數(shù)據(jù)被當作代碼來執(zhí)行,并最終將執(zhí)行結果返回給執(zhí)行者。傳統(tǒng)處理SQL注入是將用戶輸入的數(shù)據(jù)通過addslashes()、mysql-real-escape-string()等函數(shù)對特殊字符和可能引起數(shù)據(jù)庫操作出錯的字符進行轉義,或者使用MySQLi方式方法,但是這兩種方式方法效率低,且不能從根本上解決SQL注入問題,為此本系統(tǒng)采用PDO方式,能夠從根本上杜絕SQL注入的問題,其工作原理是將SQL模板和變量是分兩次發(fā)送給MySQL,由MySQL完成變量的轉義處理,由于變量和SQL模板是分兩次發(fā)送的,那么就不存在SQL注入的問題。示例代碼如下:PDO方式不僅能夠防止SQL注入,而且使用prepare方式,只在服務端編輯一次SQL語句,能夠大大提高效率。以下圖為MySQLi與PDO性能的比擬,如此圖2所示。圖2數(shù)據(jù)庫連接性能比擬通過上圖比擬發(fā)現(xiàn)采用PDO的長連接方式性能最佳,即時連接MySQLi的性能要優(yōu)于PDO,之所以PDO比MySQLi快,是由于PDO對數(shù)據(jù)庫的操作比MySQLi要少。4系統(tǒng)測試本系統(tǒng)包含首頁顯示商品分類和商品明細,商品分類主要用于將商品分門別類,便于用戶對商品進行檢索;商品明細主要向用戶展示商品名稱、價格及商品圖片等信息。在Android和iOS手機的微信內置閱讀器對系統(tǒng)進行功能測試,測試結果表示清楚,界面簡潔,數(shù)據(jù)穩(wěn)定,用戶交互體驗良好,能很好知足用戶購買商品的需求[10]。如此圖3所示。圖3界面測試為了突顯AppFramework框架的性能,采用當下流行的JqueryMobile框架進行測試,測試指標分別為連接時長、第一個字節(jié)消耗損費時長、加載總時長,測試內容如表1所示:表1AppFramework與JqueryMobile性能比擬通過上述性能比擬,發(fā)現(xiàn)JqueryMobile框架文件龐大,相比擬AppFramework框架,加載文件消耗損費時間長,尤其在移動端操作響應延遲緩慢,影響用戶的操作體驗。5結束語本文介紹以電腦客戶端購物網(wǎng)站為基礎,使用AppFramework與5快速開發(fā)基于移動閱讀器的購物網(wǎng)站,華而不實響應式設計、UI、模擬NativeApp的各種效果和操作主要由AppFramework框架實現(xiàn),數(shù)據(jù)庫連接方式選用安全性高、性能好的PDO方式,對于動態(tài)生成內容則用PHP完成,整個購物網(wǎng)站部署在百度云應用引擎平臺上,減少了服務器環(huán)境