畢業(yè)設計-基于iH5的商場導購系統(tǒng)

鹽城師范學院畢業(yè)設計畢業(yè)設計基于iH5的商場導購系統(tǒng)學生姓名 學院 專業(yè) 班級 學號 指導教師 2016年5月16日基于iH5的商場導購系統(tǒng)摘要現代信息化社會，商場規(guī)模在日益擴大，但是對應的商場導購方式以及便捷程度卻并沒有跟上商場規(guī)模的腳步。傳統(tǒng)的商場導購僅限于在商場入口放置商場布局圖，已經不能滿足顧客的要求。針對此情況，筆者開發(fā)了商場導購系統(tǒng)。本系統(tǒng)采用了ih5在線交互設計工具，是基于HTML5的在線交互導購系統(tǒng)，有較強的互動性、展示性。系統(tǒng)從交互和導購的人性化角度出發(fā)，讓消費者足不出戶事先了解商城的貨物位置及價格等信息，同時也提供在線訂購功能。這種線上線下互動的購物模式可能逐漸成為消費主流。本系統(tǒng)正迎合了人們的這種消費需求，具有較強的現實意義?！娟P鍵詞】基于iH5；商場導購系統(tǒng)；交互性MarketnavigationsystembasedoniH5AbstractFormoderninformationsociety,themallgrowingfast,butthemallshoppingguideandconvenientmannerdonotkeepupwiththepaceofthemall.Themallshoppingguideislimitedtotheentrancetraditionalmall,ithasbeenunabletomeetcustomerrequirements.Forthissituation,theauthordevelopedthemallshoppingguidesystem.Thissystemusesih5onlineinteractivedesigntools,theinteractiveshoppingguideisbasedononlinesystemHTML5,thereisastronginteractionanddemonstrative.Thesystemcomefromahumanpointofviewandinteractiveshoppingguideofdeparture,sothatconsumerscanknowinadvanceinformationhomesmalllocationandpriceofgoods,italsoorderinganonlinecapability.Thisinteractiveonlineandofflineshoppingpatternsmaygraduallybecomethemainstreamconsumer.Thissystemistomeetthepeopleofthisconsumerdemand,withastrongpracticalsignificance.[Keywords]iH5;shoppingguidance;interaction目錄1.緒論 11.1課題背景 11.2課題目的 11.3課題意義 12.系統(tǒng)需求分析與總體設計 22.1需求分析說明 22.2可行性分析 22.3系統(tǒng)主要功能 23.系統(tǒng)開發(fā)環(huán)境及開發(fā)工具介紹 33.1開發(fā)本系統(tǒng)所需要環(huán)境 33.2相關技術 33.2.1ih5 33.2.2Photoshop 44.系統(tǒng)具體設計 44.1概要設計 44.2數據庫設計 55.系統(tǒng)功能的實現 65.1系統(tǒng)流程圖 65.2對象樹結構與用途 75.3注冊部分 75.3.1注冊部分設計 75.3.2注冊部分實現 85.4登錄部分 85.4.1登錄部分設計 85.4.2登錄部分實現 95.5商場導航部分 105.5.1導航整體設計與實現 105.5.2導航功能設計與實現 115.6訂購功能設計與實現 125.7賣家信息提交設計與實現 135.8周邊類設計與實現 145.9功能拓展 156.系統(tǒng)的測試 166.1測試緣由及概述 166.2測試用例及測試結果 167.總結 18參考文獻 19致謝 20第1.緒論1.1課題背景社會發(fā)展迅速，大型商場應運而生，大型商場商品種類數量繁多，極大的滿足了人們購物的需求，但男人與女人在購物的時候心理上還是存在差別的。男人希望能夠很快把目光從甲點直接移到乙點。逛街買東西時，希望迅速的成功地找到想買的物品，如果大型商城只配備簡單的導購圖，男人的視線在人群與商品間不斷穿梭，這會導致他們感到極不自在。女人的視野較廣，因此在擁擠的購物中心里逛街買東西不是件難事。我們常?？吹竭@樣情況，許多男性顧客在購買商品時，事先記好所要購買的商城、商品名、式樣、規(guī)格等，如果商品符合他們的要求，則采取購買行動，否則，就放棄購買動機。但筆者在逛商城的時候發(fā)現了目前大型商場的導購方式過于傳統(tǒng)，大多數商城只配備商城導購圖而已，在交互性和便利性上都不能滿足顧客、特別是男性顧客的需求，導致了他們不能及時找到所需物品；另外，大型商場一般都是線下購物，缺少網絡購物平臺，這樣的情況跟不上顧客的消費理念與需求。大型商城導購圖急需升級到信息化的商城購物導航系統(tǒng)。針對目前市面上關于信息化的商場導航系統(tǒng)較少[1]，商場網絡購物不成熟的現況，筆者開發(fā)了網頁版和手機版的都能使用的信息化的商場導購系統(tǒng)，該系統(tǒng)是基于ih5，使用一款全球領先的在線交互設計工具VXPLO互動大師作為開發(fā)工具，（），VXPLO的誕生，源于孟智平2008年創(chuàng)辦“世云多媒體”時的技術延伸。VXPLO是全球做交互功能最強大的一款，是純云端工具，支持HTML5和Flash，能實現很好的效果，還可以一鍵分享到好友和朋友圈里面。打開瀏覽器就可制作基于HTML5互動內容（包括：創(chuàng)意廣告，網頁小游戲，PPT，互動視頻，網絡互動劇，網站，輕APP等），這些內容還可以放到微信中進行傳播。有較強的互動性、展示性，在線性?；趇H5的商場導購系統(tǒng)是從交互和導購的人性化角度出發(fā)，讓消費者足不出戶事先了解各大商城的貨物位置及價格等信息，同時也提供在線訂購功能。1.2課題目的筆者開發(fā)此系統(tǒng)，是基于市場目前信息化商場導航系統(tǒng)較少和線上購物不成熟的情況。為了避免這一尷尬現象，系統(tǒng)旨在幫助消費者提前了解商品情況，提供在線位置導航，提供商品網上訂購功能，旨在進一步提升商場的服務質量。商場導購購物系統(tǒng)的優(yōu)勢體現在三個方面，一方面是在商場里，顧客能夠根據系統(tǒng)提示，迅速找到需要的商品價格性能及位置所在，這一功能，對于想快速買到物品的顧客，有著極大的便利；另一方面，對于想提前了解信息的顧客，商場還提供在線訂購功能，突破了地域限制，方便顧客在家訂購，一定程度上為顧客帶來極大的便利；最后，對于一些在商場附近游玩閑逛的顧客，系統(tǒng)還提供了周邊類信息以及公交路線。1.3課題意義課題主要探究交互性導航對于超市顧客的服務是否能吸引顧客，是否能增加超市人流量以及消費量。本商場導航系統(tǒng)在提供商品位置提示服務的同時，還提供在線訂購功能，支持手機微信查看，方便顧客足不出戶的購買商品。對于喜歡親自逛商場的顧客來說，系統(tǒng)還提供了周邊店鋪信息以及附近公交路線，方便顧客往來。這種線上線下互動的商城導航系統(tǒng)方便了顧客特別是男性顧客購物心理，具有較強的現實意義和一定的商業(yè)運用價值。2.系統(tǒng)需求分析與總體設計2.1需求分析說明飛速發(fā)展的信息技術讓高交互性導航系統(tǒng)成為受人們歡迎的焦點[2]，本系統(tǒng)旨在建立在線商場導航，為顧客提供人性化、具有交互性的商場導航，同時提供網頁版以及手機版的訂購服務，為顧客提供一個自主快捷的購物平臺。本系統(tǒng)是在html5技術的基礎上，使用ih5互動大師這個軟件在線編輯制作具有交互性的動態(tài)網頁，讓顧客可以在線查看商品位置分布，并查詢自己感興趣商品，提高顧客購物的效率，更好的為顧客服務。2.2可行性分析調研結果表明，與傳統(tǒng)購物方式相比，在三個方面，在線商場導航購物存在優(yōu)勢，52.9%的人覺得送貨上門很便利，51.1%的人認為網購更便宜，43.8%的人感覺網上購物能買到更多的物品。從經濟角度分析，本系統(tǒng)基于零代碼免費使用的iH5在線交互工具，對經濟需求并不高。從技術角度分析，本系統(tǒng)iH5作為主要開發(fā)平臺，全程零代碼操作，同時使用photoshop作為輔助處理工具，完成整個系統(tǒng)的開發(fā)。從應用角度分析：第一，目前市場上關于商場導購類的系統(tǒng)并不常見，值得開發(fā)；第二，該系統(tǒng)無疑為商場購物帶來了很大的便利，實用性非常強。2.3系統(tǒng)主要功能a）注冊模塊功能：顧客注冊登錄進入系統(tǒng)，能夠查看不同商品位置。顧客需要填寫姓名手機號碼等基本資料才能注冊成為用戶。系統(tǒng)默認手機號碼為登錄帳號。b）商品訂購模塊功能：顧客進入系統(tǒng)，通過鼠標滾輪轉動，拉出商場整體導購模型和菜單欄，通過點擊左側菜單欄，調出對應介紹圖片，通過點擊圖片，即可調出訂購窗口。顧客可以在此窗口選擇并訂購商品。c）查看商品模塊功能：顧客、管理員能夠在線查看商場提供的已有商品。d）查看商品及各類實施所在位置功能：顧客通過點擊所需物品的類別，來查看該類商品所在商場的位置，且會有訂購提示框出現，方便顧客選擇訂購商品。e）查看周邊類：顧客能夠查看商場周邊類店鋪以及附近公車路線情況。3.系統(tǒng)開發(fā)環(huán)境及開發(fā)工具介紹3.1開發(fā)本系統(tǒng)所需要環(huán)境該系統(tǒng)在windows7系統(tǒng)下，基于html5，通過ih5互動大師進行編輯開發(fā)。軟件環(huán)境圖如圖3-1所示。圖3-1軟件環(huán)境圖3-2編輯環(huán)境3.2相關技術3.2.1ih5iH5，原為VXPLO互動大師，是一套完全自主研發(fā)的設計工具，允許在線編輯網頁交互內容，研發(fā)時間超過8年，有超過50項專利[3]。支持各種移動端設備和主流瀏覽器，能夠設計制作出PPT、應用原型、數字賀卡、相冊、簡歷、邀請函、廣告視頻等多種類型的交互內容[4]。ih5提供平臺社交功能，包括各種類型工具的使用，用戶能通過零代碼實現對設計的在線編輯操作。除了零代碼，ih5還提供專業(yè)的模版，還有各類移動交互設計樣式。目前網絡上的很多內容都還是以靜態(tài)的展示為主，大多數的互動內容開發(fā)成本高，時間長，所以仍是互聯(lián)網內容中的很小的一部分。VXPLO的價值就在于構建了一種全新的內容，并通過提供交互內容快速滲透到現有互聯(lián)網行業(yè)中去。3.2.2PhotoshopPS在我們生活中屬于常見的軟件之一，它在計算機圖像設計領域的應用十分廣泛，不論是3D動畫軟件、平面設計軟件、網頁制作軟件、矢量圖形軟件、多媒體制作軟件還是排版軟件，Photoshop在每一個環(huán)節(jié)中都發(fā)揮著不可替代的重要作用[5]。PS在功能方面主要有以下幾個部分，一是圖像編輯，這是圖像處理類軟件的基礎功能；二是圖像合成，圖像合成就是將軟件中想處理的幾個圖像通過一些工具的使用，使其完美結合到一起，看起來自然真實；三是校色調色，PS能夠通過選取所需要的區(qū)域，再通過背景色填充的方式，來方便快捷的調整圖像的顏色，包括顏色的種類、明暗等，以滿足不同的媒體需求；四是特效制作，通過通道、濾鏡以及特殊效果等工具的搭配使用，完成圖像的特殊創(chuàng)意和特殊效果。4.系統(tǒng)具體設計4.1概要設計本系統(tǒng)共分為三個部分：第一個是注冊登錄部分，包括用戶的注冊和用戶的登錄兩個部分。顧客的注冊的信息會被收集到對應的數據庫中。顧客注冊是登錄進入主頁面的必要前提。注冊完畢后，顧客輸入手機號以及密碼，進行登錄，訪問商場主頁面。第二個是商場導航部分，商場導航包括三大主要功能。第一個是商品位置指示功能，顧客通過點擊左側的菜單，來查看所需類別商品在商場中的地理位置。第二個是商品的訂購功能，顧客通過點擊右側的對應商品的大類展示圖片，來調出訂購菜單，通過輸入訂購數量要求來訂購商品，所有的訂購信息會在后臺數據庫顯示。管理員可以通過查看數據庫來明確訂購信息。第三個是申請賣家的功能，可以通過發(fā)布賣家需求來提交申請，相應信息會傳到后臺數據庫[6]，管理員可以查看。第三個是周邊部分，周邊部分有外賣訂購和附近路線兩個，外賣訂購類似于商品訂購，附近路線則是可以通過超鏈接查看附近公交的路線介紹。系統(tǒng)模塊如圖4-1所示。商品訂購商品訂購申請賣家注冊登錄商品位置外賣訂購附近路線周邊部分注冊登錄部分鹽城商場導航商場導航部分圖4-1系統(tǒng)模塊圖4.2數據庫設計a)用戶users表中記錄了用戶注冊登錄等信息，具體如表4-6所示表4-6用戶表users字段名稱字段類型字段說明允許為nullidint（11）編號不允許phonevarchar（13）手機不允許passinvarchar（40）密碼不允許namevarchar（40）姓名不允許b)商品product表中記錄了商品購買的有關信息，具體如表4-7所示表4-7用戶表product字段名稱字段類型字段說明允許為nullidint（11）編號不允許numberint（11）購買數量允許timeOrdertime時間不允許c)賣家sell表中記錄了賣家有關信息，具體如表4-8所示表4-8賣家表sell字段名稱字段類型字段說明允許為nullidint（11）編號不允許newsvarchar(100)賣家信息允許timeordertime時間不允許d)外賣訂購order表中記錄了外賣訂購有關信息，具體如表4-9所示表4-9外賣訂購order字段名稱字段類型字段說明允許為nullidint（11）編號不允許newsint（11）訂購信息允許timeordertime時間不允許addressvarchar(100)地址允許5.系統(tǒng)功能的實現5.1系統(tǒng)流程圖系統(tǒng)功能流程圖如圖5-1所示：圖5-1系統(tǒng)功能流程圖5.2對象樹結構與用途如圖5-2所示，iH5為零代碼在線交互軟件，是通過在對象樹中添加工具來實現系統(tǒng)的編輯。其中注冊頁面，登錄頁面和登錄數據庫是管理核實用戶注冊登錄信息，頁面3則是商場導航主頁面，頁面3新建完成后，在其中分出各類子類事件及工具，用來實現導航主頁面的各個功能。舞臺上還建立各類商品數據庫和對應的數據變量，通過事件綁定將數據變量與數據庫相連接，用來收集管理頁面3中的各類商品輸入信息。圖5-2對象樹結構5.3注冊部分5.3.1注冊部分設計用戶通過瀏覽器或者微信掃描二維碼打開頁面進行注冊，如圖5-3和圖5-4所示。用戶在瀏覽器中通過輸入網址進入網站，或者用微信掃描二維碼進入系統(tǒng)，按照系統(tǒng)進行注冊。當用戶注冊完畢，調用RegisterServlet[7]方法將姓名，13位手機號碼，以及密碼通過post請求傳遞到RegisterServlet層，將注冊信息保存到數據庫并查詢。圖5-3注冊頁面網頁版 圖5-4注冊頁面手機版5.3.2注冊部分實現在注冊頁面添加相應提升文字和輸入框等工具，并在文字“確定”處添加事件。設置事件觸發(fā)條件為“輕觸”，并將目標對象設置為“登錄數據庫”，把注冊信息儲存到“登錄數據庫”中。如圖5-5所示。圖5-5注冊實現5.4登錄部分5.4.1登錄部分設計用戶注冊完畢，即可開始登錄，如圖5-6和圖5-7所示。為了增加便利性，在注冊完畢后系統(tǒng)會自動跳轉到登錄頁面。用戶在登錄頁面輸入13位手機號碼以及密碼，點擊確定即可進入商場導航的主頁面。當用戶開始登錄，調用LoginServlet[8]方法將手機號碼和密碼通過post請求傳遞到LoginServlet層，在數據庫中進行賬號密碼的校驗操作。圖5-6登錄頁面網頁版圖5-7登錄頁面手機版用戶登錄時，系統(tǒng)會有賬戶密碼檢測，當賬戶輸入錯誤時，會提示“無此用戶”；當密碼輸入錯誤時，則會提示“密碼錯誤”，如圖5-8和圖5-9所示。圖5-8用戶名錯誤提示 圖5-9密碼錯誤提示5.4.2登錄部分實現登錄頁面除了添加文字和輸入框等工具，還添加了密碼判斷計數器，在其下添加兩個事件，分別對應觸發(fā)值0和1。同時在舞臺下添加變量，將添加的變量與對應輸入框綁定，收集用戶輸入的數據，并通過與登錄數據庫中數據比對，來判斷賬戶密碼是否正確。當輸入數據正確時，觸發(fā)值0，成功跳轉頁面；當輸入數據錯誤時，觸發(fā)值1，根據登錄錯誤原因進行提示，用戶名錯誤時，提示“無此用戶”；密碼錯誤時，提示“密碼不正確”。如圖5-10所示。圖5-10登錄部分實現5.5商場導航部分5.5.1導航整體設計與實現用戶登錄成功后頁面，如圖5-11所示。在html5的基礎下，在ih5在線交互軟件中，通過在登錄編輯頁面下添加密碼判斷計數器，并為它綁定compare變量[9]，同時在密碼判斷計數器下添加兩組事件交互組件。在登錄頁面中，添加了相應的菜單組件，包括服裝區(qū)、飾品區(qū)、批發(fā)區(qū)、海鮮區(qū)、干貨區(qū)、青蔬區(qū)、辦公室和廁所等。同時添加了一個時間軸和滑動時間軸，在不同的時間點下，設置菜單選項框不同的位置，來實現菜單滑動效果，以加深用戶體驗，添加整體的交互性。在頁面3下添加事件一與事件二，兩個事件的綁定目標對象為滑動時間軸，同時設置動作對象播放關鍵幀，以此實現鼠標滾輪滑動菜單效果。如圖5-12所示。圖5-11主頁面圖5-12主頁面實現5.5.2導航功能設計與實現商品導航功能顯示，如圖5-13和圖5-14所示。在主頁面設計中，添加時間軸，在各個按鈕子目錄下添加軌跡控件，設置轉到主頁時的運動軌跡，添加交互性。同時添加各個菜單按鈕，在其下設置按鈕具體形狀樣式，并給各個按鈕添加區(qū)塊顯示控制器，在其中加上事件，設置當點擊時隱藏同層控件。即點擊某一個菜單按鈕，其他按鈕顯示的內容會隱藏，保證頁面簡潔性。當點擊按鈕時，對應位置會出現顏色閃爍效果，提醒用戶目標位置，并有對應介紹圖片出現。如下圖示例，點擊蔬菜按鈕，出現對應位置提示，并有對應介紹圖片出現，讓用戶方便易懂，提升交互性。圖5-13導航頁面圖5-14導航實現5.6訂購功能設計與實現商品購買功能，如圖5-15和5-16所示。在介紹的圖片下添加事件，設置目標對象為對應的購買窗口，目標動作為顯示，實現當用戶點擊圖片時，彈出購買窗口的效果。在購買窗口中添加兩個對應按鈕，一是關閉按鈕，用來關閉購買窗口，點擊透明按鈕，在其中添加事件，設置目標動作為隱藏，當點擊關閉按鈕時候，隱藏整個窗口；二是購買成功提示窗口，在其中添加事件，鏈接到購買成功提示窗口，目標動作為顯示，當用戶點擊購買按鈕時候，顯示對應窗口。在購買窗口中添加輸入框，并于舞臺建立商品數據庫，在數據庫中添加文本字段工具，文本字段工具綁定對應購買輸入框，設置字段名稱為number。在購買按鈕中多加入一個事件，設置目標對象為商品數據庫，目標動作為提交，當用戶點擊購買時候，不僅出現購買成功對話框，同時number變量[10]傳遞到商品數據庫。圖5-15訂購頁面圖5-16訂購成功5.7賣家信息提交設計與實現賣家信息提交功能，如圖5-17和5-18所示。賣家信息提交窗口包括一個輸入框，和三個透明按鈕。通過綁定商家數據庫里的文本字段，把輸入框內的輸入內容存儲到數據庫中，存儲的字段名稱為news，字段類型為varchar(100)[11]。圖5-17發(fā)布頁面圖5-18發(fā)布實現5.8周邊類設計與實現周邊類服務功能，如圖5-19和圖5-20所示。周邊類功能包括兩個部分，一是汽車站點提示，二是外賣訂購。汽車站點提示下有添加超鏈接，用戶點擊時，會鏈接到公交路線說明。外賣訂購窗口包括兩個輸入框和一個透明按鈕，輸入框綁定外賣信息數據庫，用戶輸入完畢，點擊提交按鈕時，對應信息會傳到外賣信息數據庫并保存。圖5-19周邊頁面圖5-20周邊實現5.9功能拓展由于時間技術問題，一些設想的功能暫時沒實現。本系統(tǒng)還可以添加如下功能：a)在線支付功能，通過接入支付寶，提供物品的在線支付。b）商品添加入購物車功能，顧客能夠將商品加入購物車。c）查看購物車功能，顧客可以通過查看購物車來了解自己訂購物品詳情，并對購物車商品進行添加和刪除[12]。d)商家接單顯示功能，顧客可以看到商家是否確認訂單。6.系統(tǒng)的測試6.1測試緣由及概述為保證系統(tǒng)的正常運行，防止bug，特此開始系統(tǒng)的整體測試。此節(jié)主要內容為系統(tǒng)的各個部分的功能檢測。本次測試環(huán)境為windows7操作系統(tǒng)，瀏覽器基于谷歌chromium內核[13]，基于html5的ih5互動大師在線編輯軟件。6.2測試用例及測試結果a）注冊及登錄功能：用戶注冊登錄。表6-1注冊登錄功能測試測試編號No.1測試目的測試用戶注冊登錄。測試過程打開注冊頁面，按要求注冊，注冊成功后按要求登錄。預期結果1.注冊、登錄成功;2.用戶名填寫錯誤時出現提示;3.當密碼填寫錯誤時出現相應提示。測試結果測試結果與預期相同，測試成功。b）商鋪位置顯示功能：顯示不同類型商品位置。表6-2商鋪位置顯示功能測試編號No.2測試目的測試商品能否按設定的位置顯示。測試過程點擊對應商品，查看效果。預期結果1.按設定位置顯示。測試結果測試結果與預期相同，測試成功。c）商品訂購功能：用戶通過網頁或者手機訂購商品。表6-3商品訂購功能測試測試編號No.3測試目的測試用戶訂購完畢后，商品信息是否正確傳輸到后臺數據庫。測試過程打開訂購菜單，填寫數量，并確定。預期結果1.訂購成功，商品訂購數量成功傳輸后臺。測試結果測試結果與預期相同，測試成功。d）賣家申請?zhí)峤还δ埽嘿u家信息提交。表6-4賣家申請?zhí)峤还δ軠y試測試編號No.4測試目的測試用戶訂購完畢后，商品信息是否正確傳輸到后臺數據庫。測試過程打開我是賣家提交窗口，輸入信息，并提交預期結果1.提交成功，相關賣家申請信息成功傳輸后臺數據庫測試結果測試結果與預期相同，測試成功。7.總結從開始做這個設計，到最后完工，感覺就像搭建一個城堡，從開始的一磚一瓦，到現在的參天大廈，在其中也投入了很多的心血。系統(tǒng)包含的各個功能，能在大體上滿足商場的要求，但是很多部分因為自身技術略有欠缺，加上時間問題，完善程度還不夠。能進一步拓展的地方還有很多。在功能方面，首先，對于數據庫的整體結構完善有所欠缺，并且數據庫對于大量數據的承受能力尚未知曉；其次，未添加管理類功能，用戶無法知曉訂購信息；最后，數據庫中各個數據的聯(lián)系性不夠。在美工方面，部分圖片處理和場景設計可以進一步加強，在一些細節(jié)上，可以有所提高。通過這次