【畢業(yè)學(xué)位論文】（Word原稿）基于HTML5的電子購物系統(tǒng)的開發(fā)與設(shè)計-軟件工程

中圖分類號： 學(xué)校代碼： 10055 密級： 公開 碩士專業(yè)學(xué)位論文 基于 of 要 I 摘要 移動互聯(lián)網(wǎng)最近幾年正以不可阻擋的趨勢在發(fā)展，隨著蘋果和安卓等手機日新月異的發(fā)展，人們會更多的通過手機去訪問互聯(lián)網(wǎng)，所以互聯(lián)網(wǎng)公司研發(fā)其經(jīng)營業(yè)務(wù)的移動版本已經(jīng)是大勢所趨的問題了。 社會開始進入信息分享與共享的時代，可以很明顯得感覺到， 移動端已經(jīng)成為了現(xiàn)在所有互聯(lián)網(wǎng)公司共同的戰(zhàn)場，無線互聯(lián)網(wǎng)這塊蛋糕，越早投入精力和資金，就越容易獲得產(chǎn)出和收益。 本文結(jié)合“延續(xù)現(xiàn)有業(yè)務(wù)至移動端”的業(yè)務(wù)需求，通過進行大量的數(shù)據(jù)分析與調(diào)研，進行需求分析并確定系統(tǒng)的實現(xiàn)方案。依托本系統(tǒng)，用戶可以進行查看商品、購買下單、查詢進度、反饋評價等諸多特色性功能。針對確定的功能，細(xì)化形成功能模塊圖與各功能模塊之間的業(yè)務(wù)流程，為了極大程度的便于用戶的使用，引用移動設(shè)計的思想與設(shè)計方式進行相關(guān)的開發(fā)與設(shè)計工作，并在開發(fā)中進行大量的用戶用例測試，匯總與分析反饋結(jié)果，進行平臺的優(yōu) 化。產(chǎn)品基于 術(shù)開發(fā)。其中，由 制頁面結(jié)構(gòu)與布局， 制樣式，控制 本， 控制 本，與用戶交互。 開發(fā)實現(xiàn)的功能中，系統(tǒng)通過讀取不同的用戶權(quán)限展現(xiàn)不同的頁面效果，實現(xiàn)美觀與效果共存；商品展示頁給予商品極其豐富的展示空間；購買流程支持用戶從結(jié)算，到付費完成的過程。以上內(nèi)容將使得平臺的維護與管理更加有序。在開發(fā)中本系統(tǒng)進行了多手機端系統(tǒng)及屏幕尺寸兼容性調(diào)試，本系統(tǒng)在 主流手機系統(tǒng)上均可流暢運行。 關(guān)鍵詞 ：移動互聯(lián)網(wǎng)； 子商務(wù)； I n is an in of be to so o R & D of is of of of to a of In to is of of in a of is by to of by to to to In of be in to 錄 摘要 . I . 錄 . 一章緒論 . 1 第一節(jié)論文背景 . 1 第二節(jié)國內(nèi)外研究現(xiàn)狀 . 2 第三節(jié)本文主要研究內(nèi)容 . 3 第四 節(jié)本文組織結(jié)構(gòu) . 4 第二章系統(tǒng)需求分析 . 5 第一節(jié)功能需求 . 5 . 5 目設(shè)計原則 . 6 務(wù)需求內(nèi)容 . 6 第二節(jié)非功能需求 . 7 統(tǒng)安全性要求 . 7 構(gòu)要求 . 8 統(tǒng)兼容性要求 . 8 第三節(jié)系統(tǒng)用例 . 8 錄注冊用例 . 8 品購買用例 . 9 人中心用例 . 10 品瀏覽用例 . 11 目錄 訂單結(jié)算功能用例 . 12 價功能用例 . 12 第三章關(guān)鍵技術(shù) . 13 第一節(jié)本課題所運用的技術(shù)概述 . 13 第二節(jié) . 13 第三節(jié)層疊樣式表（ 介 . 15 第四節(jié) . 17 第五節(jié)開發(fā)環(huán)境和工具 . 18 第四章系統(tǒng)總體設(shè)計 . 19 第一節(jié)邏輯功能架構(gòu) . 19 第二節(jié)系統(tǒng)技術(shù)架構(gòu) . 20 品設(shè)計思路 . 21 發(fā)設(shè)計思路 . 23 第三節(jié)物理拓?fù)浼軜?gòu) . 23 第四節(jié)數(shù)據(jù)庫設(shè)計 . 24 體關(guān)系圖 . 24 據(jù)字典 . 26 接池技術(shù) . 35 . 36 第五章系統(tǒng)詳細(xì)設(shè)計 . 39 第一節(jié)用戶注冊系統(tǒng)詳細(xì)設(shè)計 . 39 第二節(jié)用戶登錄系統(tǒng)詳細(xì)設(shè)計 . 43 第三節(jié)商品搜索功能 . 46 第四節(jié)購物車系統(tǒng)詳細(xì)設(shè)計 . 50 第五節(jié)訂單結(jié)算系統(tǒng)詳細(xì)設(shè)計 . 52 第六節(jié)售后評價系統(tǒng)詳細(xì)設(shè)計 . 54 目錄 V 第六章系統(tǒng)原型實現(xiàn) . 55 第一節(jié)系統(tǒng)開發(fā)及運行環(huán)境 . 55 第二節(jié)系統(tǒng)運營主頁面 . 55 子購物系統(tǒng)首頁 . 56 導(dǎo)航頁面 . 56 品列表頁面 . 57 第三節(jié)用戶注冊子系統(tǒng)實現(xiàn) . 59 第四節(jié)用戶登錄子系統(tǒng)實現(xiàn) . 61 第五節(jié)商品搜索子系統(tǒng)實現(xiàn) . 63 第六節(jié)購物車子系統(tǒng)實現(xiàn) . 64 第七節(jié)訂單結(jié)算子系統(tǒng)實現(xiàn) . 66 第八節(jié)售后評價子系統(tǒng)實現(xiàn) . 69 第九節(jié)核心技術(shù)實現(xiàn) . 70 第七章總結(jié)與展望 . 72 第一節(jié)本文總結(jié) . 72 第二節(jié)進一步展望 . 72 參考文獻 . 74 致謝 . 76 第一章緒論 1 第一章 緒論 第一節(jié) 論文背景 有人說誰掌握了移動互聯(lián)網(wǎng)的先機，誰就掌握了未來，隨著近年來移動互聯(lián)網(wǎng)的加速發(fā)展，越來越多的用戶選擇使用移動終端訪問互聯(lián)網(wǎng)，據(jù) 聯(lián)網(wǎng)數(shù)據(jù)中心預(yù)計， 2012 年手機網(wǎng)民將達(dá) ，繼續(xù)保持 穩(wěn)步增長，并逐漸逼近 民規(guī)模。隨著 3G、 4G 等網(wǎng)絡(luò)覆蓋率的提高，移動互聯(lián)網(wǎng)應(yīng)用的進一步豐富，用戶體驗得到了進一步的提升，越來越多的移動增值服務(wù)被用戶所使用。其中，移動電子商務(wù)占據(jù)了很大一塊比例。 互聯(lián)網(wǎng)進入了共享信息與分享信息的時代，同之前不一樣的是，人們之間掌握的信息量存在很大的差別，需要不停得交流和互換信息，現(xiàn)在這一部分內(nèi)容，可以通過網(wǎng)絡(luò)完美解決，新浪微博的轉(zhuǎn)發(fā)和評論即是此功能。這樣一來，人們彼此間也變得愈加透明，自然而然得再次進入“孤立”的狀態(tài)去尋找興奮點的循環(huán)，畢竟，人與人之間的溝通和交流是需要尋找主題和尋找興奮點的。基于以上的深入思考，我們發(fā)現(xiàn)了互聯(lián)網(wǎng)面臨的新的問題，信息越是通暢、共享程度越高，人與人之間越容易陷入“孤立”的狀態(tài)，或者說，信息的高度透明導(dǎo)致信息接收者的同質(zhì)化現(xiàn)象越來越明顯。我相信，這絕非移動互聯(lián)網(wǎng)發(fā)展的價值歸宿，因為“孤立”必然導(dǎo)致“瓦 解”，而我們要實現(xiàn)的恰恰是“融合”。 可以很明顯得感覺到，移動端已經(jīng)成為了現(xiàn)在所有互聯(lián)網(wǎng)公司共同的戰(zhàn)場，任何一個公司如果想在這場沒有硝煙的戰(zhàn)爭中生存下去，就必須投入足夠的精力與財力，越來越多的手機 發(fā)公司注冊建立，同時傳統(tǒng)互聯(lián)網(wǎng)公司也紛紛成立相應(yīng)的無線部門。無線互聯(lián)網(wǎng)這塊蛋糕，越早投入精力和資金，就越容易獲得產(chǎn)出和收益。 國內(nèi)知名咨詢集團 瑞咨詢于報告中指出（如圖 所示），2011 年中國移動電子商務(wù)市場交易規(guī)模為 元，同比增長 預(yù)計2012 年中國移動電子商 務(wù)市場規(guī)模將達(dá)到 元，到 2013 年將超過 1000億，達(dá)到 元可見，移動電子商務(wù)的藍(lán)海已是電子商務(wù)未來幾年重點的發(fā)展方向了。 第一章緒論 2 圖 006第二節(jié) 國內(nèi)外研究現(xiàn)狀 每個人都很清楚的知道，發(fā)展得非常迅猛的互聯(lián)網(wǎng)技術(shù)，越來越廣泛得應(yīng)用于各個領(lǐng)域。隨之帶來的，電腦桌面程序已經(jīng)越來越缺少用戶和陣地，曾經(jīng)在普通電腦端使用的最多的瀏覽器，那些單純承載圖片和文字的頁面已經(jīng)無法滿足人們的需求，而現(xiàn)行的 準(zhǔn)又怎么可能滿足人們越來越強烈的視頻、動畫等等多 媒體播放的需求 1。因此插件產(chǎn)生了，滿足了人們大多數(shù)的需求極大程度上，同時這些裝了插件的人們，計算機運行越來越慢，越來越容易中毒等問題隨之產(chǎn)生。在這樣的大前提下， 案推出了，我們看到了未來瀏覽器本身也能完成這些使命 2。 1999 年 12 月份是 近一次升級的日子，版本是 那天以后發(fā)生了很多變革。開始的那些瀏覽器的戰(zhàn)爭已經(jīng)逐漸結(jié)束，但瀏覽器戰(zhàn)爭帶來的結(jié)果是 準(zhǔn)運動愈加的混亂，在基于 準(zhǔn)的 ，我們不得不依靠外來的插件來滿足人們播放商品、音頻以及最新 3D 繪圖技術(shù) 的需求，最著名的的當(dāng)然是 司的 司的 了他們，我們不得不在把他們裝在我們越來越臃腫的瀏覽器上，運行速度緩慢到無以復(fù)加的地步，研究 準(zhǔn)有利于從源頭上解決這問題。 2008 年 1 月 22日是 一份正式草案發(fā)布的日子。大多數(shù)的瀏覽器已經(jīng)可以支 持語言模式了，雖然其仍處于一個完善中的階段。 ，超文本標(biāo)記語言或超文本鏈接標(biāo)第一章緒論 3 示語言）隨著 事會或萬維網(wǎng)聯(lián)盟）一直在變化標(biāo)準(zhǔn)， 經(jīng)走過了 4 代的標(biāo)準(zhǔn)，自從 標(biāo)準(zhǔn)草案公布以來， 得了廣大開發(fā)者和大公司們的歡迎，就因為它簡單，有簡單的標(biāo)簽元素，你要知道在這之前要非常復(fù)雜的 碼才能搞定這些。目前移動開發(fā)只有兩種方法，分別是全部使用 法和僅使用原生語法。機應(yīng)用的最大優(yōu)勢就是可以在網(wǎng)頁上直接調(diào)試和修改。因此也有許多手機雜志客戶端是基于 準(zhǔn)，開發(fā)人員可以輕松調(diào)試修改。 因為 準(zhǔn)目前沒有全 球范圍推廣，只是出于研究草案階段，在國內(nèi)外也沒有太多的應(yīng)用，所以瀏覽器的支持并不全面。目前只能支持 盜灣，同時 其網(wǎng)站上實現(xiàn)了部分功能標(biāo)簽。而蘋果公司在其推出的機和 板電腦上則完全支持 準(zhǔn) 3。 第三節(jié) 本文主要研究內(nèi)容 本文通過上述的調(diào)研和分析，結(jié)合本公司特點，確定了手機移動終端（ 實現(xiàn)方案。本課題設(shè)計的平臺采用基于 術(shù)開發(fā)。用戶通過下載 現(xiàn)服務(wù)器與服務(wù)器端數(shù)據(jù)庫的交互。本系統(tǒng)的采用 臺數(shù)據(jù)庫， 進行樣式控制，分為 個版本。 結(jié)合開發(fā)系統(tǒng)的需求特點，確定了電子購物平臺系統(tǒng)功能模塊和運轉(zhuǎn)，完成了系統(tǒng)總體功能設(shè)計和各子系統(tǒng)的詳細(xì)功能設(shè)計。 電子購物系統(tǒng)主要實現(xiàn)的子模塊有如下幾部分，其主旨為確保用戶的商品瀏覽、購買、收藏、評價等在平臺上實現(xiàn)： 商品列表和詳情展示 ，提供用戶瀑布流的瀏覽形式和各類篩選條件，及商品的部分信息，讓用戶根據(jù)各種條件來瀏覽自己想要看到的商品，并展示商品的詳細(xì)信息，包括庫存量，顏色，售價，真人穿戴樣式等。 登錄注冊系統(tǒng) ，實現(xiàn)賬戶的創(chuàng)立，基礎(chǔ)信息 的填寫，及賬號的登錄過程。 購物車系統(tǒng) ，用戶 可以輕松建立一個功能強大的 網(wǎng)絡(luò)訂單 ，實現(xiàn)用戶 下單 、在線定購、在線支付等電子商務(wù)功能 。 訂單管理系統(tǒng) ，用來管理用戶已經(jīng)完成或正在進行中的訂單。 評價系統(tǒng) ， 幫助顧客 購買完成 之后，請顧客對服務(wù)人員的服務(wù)質(zhì)量 和商品質(zhì)量 進行評價 。 第一章緒論 4 第四節(jié) 本文組織結(jié)構(gòu) 本文中，第一章中整體介紹電子購物系統(tǒng)產(chǎn)生的環(huán)境原因，包括：“論文背景”、“國內(nèi)外研究現(xiàn)狀”、“研究內(nèi)容”，分析了為什么要做這樣一個系統(tǒng)的同時，也描述了我們要做一個什么樣的系統(tǒng)； 第二章中，介紹了電子購物系統(tǒng)的系統(tǒng)需求分析，通 過對平臺搭建的目的和運營方需求，構(gòu)架了具體的功能，為系統(tǒng)的設(shè)計及實現(xiàn)打下一個良好的基礎(chǔ)； 第三章中，羅列了開發(fā)本系統(tǒng)所用的關(guān)鍵性的技術(shù)。 第四章中，從整體上介紹了系統(tǒng)的功能設(shè)計，也就是設(shè)計系統(tǒng)總的處理方案，又稱系統(tǒng)概要設(shè)計。 第五章中，詳細(xì)介紹系統(tǒng)的設(shè)計與實現(xiàn)。根據(jù)系統(tǒng)設(shè)計的原則，依照系統(tǒng)的需求分析，將系統(tǒng)的功能從整體到局部進行模塊化，并按照子系統(tǒng)功能模塊開發(fā)實現(xiàn)了各個子模塊的具體功能。 第六章中，結(jié)合相關(guān)技術(shù)及具體實現(xiàn)方案對系統(tǒng)整體進行了描述。 在本文的最后一章，說明了本課題研究中的所得與不足，并對本課題 的前景進行了展望。第二章系統(tǒng)需求分析 5 第二章 系統(tǒng)需求分析 第一節(jié) 功能需求 統(tǒng)總體目標(biāo) 本電子商務(wù)購物系統(tǒng)需要達(dá)到的目標(biāo)是：累積用戶、讓用戶看到感興趣的商品、最新的商品信息、商品評價、本公司的歷史和現(xiàn)狀、人員招聘等，從而擴大公司知名度，開拓更廣闊的市場。 基本策略：產(chǎn)品策略，價格策略，促銷策略。 規(guī)劃和設(shè)計原則： 1）實施商務(wù)流程再造原則：支付營銷，零庫存， 24 7服務(wù)； 2）實施原則：用盡可能少的成本為客戶創(chuàng)造盡可能多的服務(wù)和優(yōu)惠。 采用 上零售系統(tǒng)，即商家對個人客戶的電子商務(wù)。 塊是面向網(wǎng)上零售商 的模式，結(jié)合傳統(tǒng)交易習(xí)慣，改善客戶購物流程，增進網(wǎng)上零售商與客戶間的交流與溝通。通過一系列個性化服務(wù)成功實現(xiàn)網(wǎng)上零售商對客戶的一對一互動式管理，具體功能如圖 示 6。 圖 統(tǒng)目標(biāo)流示例圖 第二章系統(tǒng)需求分析 6 目設(shè)計原則 由于我們的電子購物系統(tǒng)將會把目標(biāo)用戶設(shè)定在整個的亞太地區(qū)，因此，系統(tǒng)的設(shè)計準(zhǔn)則中，應(yīng)該加入可復(fù)用、可延展、便于維護、使用靈活的特性。而且，在整個的研發(fā)的階段里，需要注意那些大規(guī)模反復(fù)的功能開發(fā)，多去使用第三方成熟的控件。同時，還要注意以下的原則： 便于維護的系統(tǒng)是避免系統(tǒng)升級維 護等問題造成的對整個普通使用者的影響，應(yīng)該是易于維護、安裝和升級的。 高度的時效原則，是指需要系統(tǒng)盡量得高效能和緊湊，因為系統(tǒng)隨時隨地都會有必須去完成的并行發(fā)送的業(yè)務(wù)訴求，這樣會適當(dāng)加速每次訴求的反應(yīng)時長，不會出現(xiàn)讓用戶去等著系統(tǒng)進行數(shù)據(jù)加工的情況。 可延展性是指，系統(tǒng)要擁有高效的可延展性和靈敏性，要盡量顧及之后的運營變化情況和網(wǎng)站的發(fā)展情況，可以依據(jù)需求的變化而迅速改變和增加功能需求，而滿足業(yè)務(wù)的發(fā)展。不會讓程序開發(fā)成為制約業(yè)務(wù)發(fā)展的條件，從而能順利發(fā)展公司的業(yè)務(wù)。 具有一致的標(biāo)準(zhǔn)，包括：數(shù)據(jù)庫標(biāo)準(zhǔn)、技術(shù) 標(biāo)準(zhǔn)、設(shè)計規(guī)范、代碼規(guī)范、及其他有關(guān)的規(guī)范內(nèi)容。 平穩(wěn)性原則是指，用戶對網(wǎng)站的訪問過程中，能夠平穩(wěn)有效得進行，不會因為訪問量過大等情況，出現(xiàn)宕機。 易用性原則，只不違背互聯(lián)網(wǎng)用戶的使用習(xí)慣，可以簡單上手，不需要用戶有很高的學(xué)習(xí)成本。 還需要有很高的安全性，指網(wǎng)站的所有數(shù)據(jù)都要非常嚴(yán)謹(jǐn)?shù)谋Ｃ?，任何?nèi)容的丟失和泄露都會是無法彌補的經(jīng)濟損失，所以程序在開發(fā)商要盡一切可能考慮安全和防泄漏的規(guī)則，保證信息不會丟失、泄露。 需要和互聯(lián)網(wǎng)先進的技術(shù)接軌，保證程序和前端設(shè)計上與時俱進，也使得用戶在使用上更加流暢。 務(wù)需求內(nèi)容 注冊功能：外部用戶需要使用郵箱或者手機號注冊，填寫昵稱和密碼。需要保持手機號、郵箱、昵稱三者的唯一性，并且同一個 一個時間段內(nèi)注冊第二章系統(tǒng)需求分析 7 賬號數(shù)量要有所限制。 登錄功能：已經(jīng)注冊過的用戶，可以通過輸入郵箱（或手機號）登錄網(wǎng)站，并且持續(xù)保有之前的購買和收藏夾記錄。同時，一個 一個 用戶，在一定時間段內(nèi)登錄錯誤的次數(shù)要有所限制。 商品展示功能：需要能按照每個商品單獨的頁面的形式，展現(xiàn)不同的商品，同時用戶可以購買到任意有效期間的商品，且該商品下架的時候會提示下架，而非刪除掉。 商品 篩選及排序功能：用戶可以通過顏色、分類、價格區(qū)間、品牌等篩選出想要的商品，且可以按照價格、人氣、上架時間等進行商品排序。 商品搜索功能：可以通過關(guān)鍵詞的輸入搜索到相關(guān)的商品，包括搜索聯(lián)想和錯詞匹配功能。 購物車功能：可以完成商品下單到購買的過程，并且實現(xiàn)銀聯(lián)和支付寶兩種支付方式。 評價功能：實現(xiàn)購買完商品的用戶，對其購買的商品進行評價，未購買商品的用戶不能參與評價的過程。 第二節(jié) 非功能需求 統(tǒng)安全性要求 對于該方面的需求，安全考慮上應(yīng)包括：超時 護、口令傳輸單項不可逆加密、驗證 身份、不同用戶的不同權(quán)限管理，結(jié)構(gòu)代碼必須安全，而且架構(gòu)上要能承受住黑客的攻擊行為。 超時 護 。對 定一個超時的時間，如果長時間不進行任何操作，即視為超時，必須要重新登錄才可以。 口令傳輸單項不可逆加密 。為了防止黑客的惡意攻擊和木馬嗅探的方式，口令的傳輸需要用以上的方式進行加密。 驗證身份 。無論是管理員在后臺登錄，還是前臺普通用戶登錄網(wǎng)站，都應(yīng)該有驗證碼來驗證身份。 不同用戶的不同權(quán)限管理 。后臺的各個模塊應(yīng)該能夠根據(jù)不同的用戶設(shè)置第二章系統(tǒng)需求分析 8 不同的權(quán)限，基于角色來設(shè)定訪問的功能點，同時這些權(quán) 限又是可以變化和調(diào)節(jié)的。另外，要求綁定用戶的 進一步增加安全性，某個賬號只能在這個 碼安全控制。 同時，要做到以下的需求，防止黑客從代碼角度進行攻擊：防止 止 入、腳本注入、 入型的攻擊；防止頻繁試錯和強行破壞方式的攻擊；防止其他站點跨站的欺騙請求和腳本攻擊；防止劫持和被修改 8。 構(gòu)要求 所有的 求采用外部引用的方式，不要直接在頁面中編寫 碼。按不同的模塊需要的 寫多個 件，按需引用。 采用 式來進行日志、審計、錯誤處理等的控制，增加系統(tǒng)的柔性。 統(tǒng)兼容性要求 系統(tǒng)要求良好的瀏覽器兼容性，要求在 卓 以上版本、不同的手機操作系統(tǒng)中可以正常的顯示和處理。在各種瀏覽器中保持頁面展示的一致性，不會發(fā)生頁面變形或 理錯誤 4。 第三節(jié) 系統(tǒng)用例 錄注冊用例 用戶注冊部分，當(dāng)用戶填寫完相應(yīng)資料之后，即可在網(wǎng)站注冊一個屬于自己的賬號，之后也可以通過本次填寫的信息再次登錄，同時，擴展關(guān)系允許用戶自主邀請好友注冊應(yīng)用。 用戶登錄 部分，分為手機號登錄和郵箱登錄兩部分，根據(jù)用戶注冊時填寫信息的不同，登錄可使用的方式也不同，屬于泛化關(guān)系。 用戶信息修改部分，包含登錄密碼修改和基礎(chǔ)信息修改兩部分，修改密碼之后，原密碼將無法再使用，基礎(chǔ)信息修改之后，部分會顯示該信息的區(qū)域會第二章系統(tǒng)需求分析 9 隨之跟著更新。登錄注冊功能的用例圖，如圖 示。 圖 錄注冊功能用例圖 品購買用例 商品購買分為 購物車 和 訂單結(jié)算 兩個子功能，因為內(nèi)容關(guān)聯(lián)性較強，在功能需求部分合并為一個用例單元展示。 在購物車的功能中，分為購物車維護、生成訂單和登錄三個部分的用 例。 其中，購物車維護具有 3 個功能，分別是添加商品、移除商品和更新商品數(shù)量。添加商品即將用戶中意的商品加入其購物車中，刪除商品是將不想購買的商品從購物車中刪除，更新商品數(shù)量是更新用戶的購物車，將其中失效的商品臨時去掉。 登錄功能是直接調(diào)用 中寫到的登錄系統(tǒng)，此處不再復(fù)述。 訂單結(jié)算包含填寫收貨方式、選擇支付方式、使用代金券、使用余額、訂單提交支付 5 個部分。填寫收貨方式時，用戶填寫其收貨人等詳細(xì)信息，后續(xù)會發(fā)給快遞公司寄送商品；選擇支付方式，可選銀聯(lián)支付和支付寶支付；使用代金券，即用戶可以使用其通過 活動等方式收到的各種代金券，可抵免一部分現(xiàn)金；使用余額即用戶可以使用其之前購買后在網(wǎng)站所剩的余額；訂單提交支第二章系統(tǒng)需求分析 10 付即最后步驟，訂單提交到網(wǎng)站中。商品購買流程的用例圖，如圖 示。 圖 品購買功能用例圖 人中心用例 個人中心分為 5 個功能部分，分別是查看更新個人信息、修改密碼、購物車維護、訂單瀏覽維護、退出登錄。 查看更新個人信息即更新該用戶的個人信息，更新后部分顯示該信息的地方也會隨著更新；修改密碼即修改用戶登錄密碼，不再復(fù)述；購物車維護即維護購物車信息，不再復(fù)述；訂單瀏覽維護，是瀏覽 已經(jīng)完成和過程中的訂單，分為 3 部分，訂單列表瀏覽、訂單詳情擦看、訂單狀態(tài)修改，其中“訂單狀態(tài)修改“部分是完成之前未完成的訂單的功能；退出登錄即把自己的用戶狀態(tài)從登錄用戶變?yōu)橛慰蜖顟B(tài)。用戶個人中心用例圖，如圖 示。 第二章系統(tǒng)需求分析 11 圖 人中心功能用例圖 品瀏覽用例 商品瀏覽的情況分為兩部分，商品列表頁查看和商品詳情頁查看。 商品列表頁查看的時候，可以通過關(guān)鍵字搜索找到商品，也可以通過各種條件的篩選找到商品，找到商品以后可以通過一些條件進行結(jié)果的排序。 商品詳情頁查看的過程中，可以添加商品到購物車 和到收藏夾。用戶商品瀏覽功能的用例圖，如圖 示。 第二章系統(tǒng)需求分析 12 圖 品瀏覽用例圖 價功能用例 評價系統(tǒng)包括文字評價和打分兩個部分，只有購買過商品的用戶才能進行評價，并且文字評價和打分兩項均非必填，用戶可以填寫任意一項，或者均不填寫。評價功能的用例圖，如圖 示。 圖 價功能用例圖 第三章關(guān)鍵 技術(shù) 13 第三章 關(guān)鍵技術(shù) 第一節(jié) 本課題所運用的技術(shù)概述 在本系統(tǒng)的設(shè)計中，主要涉及到了如下的技術(shù)： 基于 術(shù)開發(fā)。其中，由 制頁面結(jié)構(gòu)與布局， 制樣式，控制 本， 控制 本，與用戶交互 5。 基礎(chǔ)類庫 本主要開發(fā)語言為 本開發(fā)語言為 靠 為主要基礎(chǔ)類庫，并加載由 發(fā)的 術(shù)，實現(xiàn)對用戶操作的快速響應(yīng)，并兼容 臺瀏覽器。 框架 移動版的框架是在充分吸取 大典型框架的技術(shù)優(yōu)點之后，重構(gòu)完成，已經(jīng)形成獨立框架。新框架以 構(gòu)為基礎(chǔ)，支持對象事件驅(qū)動，并將 行綁定，將應(yīng)用模塊化，實現(xiàn)頁面切換。 數(shù)據(jù)交互與存儲 移動版的與后臺的數(shù)據(jù)交互通過標(biāo)準(zhǔn) 議進行，主要數(shù)據(jù)格式為以瀏覽器原生支持的 式，并充分利用 本地存儲 現(xiàn)在最短時間向用戶展示網(wǎng)站內(nèi)容。 用戶行為統(tǒng)計 為提升用戶體驗，提升銷售業(yè)績，通過基因后臺及 供的接口，記錄用戶行為 9。 第二節(jié) 紹 為了替代 1999 年版本的 其同年制定的 在大多數(shù)的瀏覽器已經(jīng) 可以支持 語言模式了，雖然其仍處于一個完善中的階段。 2 個非常明顯的特征：第一，加強了 術(shù) 14 頁面的功能。第二，添加了本地數(shù)據(jù)庫的網(wǎng)頁端應(yīng)用的性能。整體上說到 往是指 整合在一起的完整技術(shù)。他們致力于減小瀏覽器需要的控件網(wǎng)絡(luò)應(yīng)用服務(wù)，包括 ，而且希望能夠增加強化網(wǎng)絡(luò)使用的標(biāo)準(zhǔn)化的集合。 由于缺乏 后的網(wǎng)絡(luò)標(biāo)準(zhǔn)， 1999 年 12 月 之后就沒有任何的更新了，為了改變這一現(xiàn)狀，增強 式化的發(fā)展，很多的公司一起行動起來，成立了一個叫 團體（ 含義是（ 語言文本開發(fā)程序項目組），其希望改善 用程序和菜單，在 2006 年， 維網(wǎng)聯(lián)盟， 行融合，希望能開發(fā)出一個全新的 準(zhǔn)。 在 2004 年， 互聯(lián)網(wǎng)界公布了一個新的 案 前身是 三年后的 2007 年，與 并，簡歷了新的服務(wù)于 項目團隊。 2008 年 1 月 22 日，他們向人們公布了第一份正式的 草案?，F(xiàn)在大多數(shù)的瀏覽器已經(jīng)可以支持 語言模式了，雖然其仍處于一個完善中的階段。 維網(wǎng)聯(lián)盟）在 2012 年 12 月 17 日，發(fā)言宣布了 規(guī)范正式版本，向世界宣稱： 開放的 絡(luò)平臺的奠基石。 在一年后的 5 月 6 日， 正式版本對外宣布。首次要修改萬維網(wǎng)的核心代碼： 超文本標(biāo)記語言。這個經(jīng)歷了 5 次重大版本的新版本里，為致力增強元素的互動性，提出了很多心的功能。 從同年（ 2012 年）的 12 月 27 日開始，即本版本的發(fā)布時，進行的修改大致近百項，涵蓋相關(guān)的接口、 標(biāo)簽、 標(biāo)簽等，另外 進行了調(diào)整，還有 圖片 理性能，全部由了質(zhì)的飛躍。 能夠支撐 瀏覽器有如下的幾個： 其更高版本， 內(nèi)瀏覽器包括：傲游瀏覽器， 360 瀏覽器、搜狗瀏覽器、 覽 器、獵豹瀏覽器等。 移動端如果要開發(fā)基于 有兩種路子可選，用全部引擎，和用全部 語法。 基于全部使用 手機 運行非常慢，而且錯誤很多，不過在第三章關(guān)鍵 技術(shù) 15 整體效果的改善后會變得好一些。不過卻沒有多少人愿意做這樣費力不討好的改善。 方法雖然很復(fù)雜，但其預(yù)設(shè)了一個 包去用，使手機上的網(wǎng)頁游戲成為了現(xiàn)實。 手機 好處在于可以直接在頁面上 初的 發(fā)者可能需要用非常大的代碼量才能完成 樣式效果 ，要不停得去調(diào)試、修改代碼和測試運行。所以呢，也有很多的手機雜志 用 標(biāo)準(zhǔn)，開發(fā)者的調(diào)試變得很簡單。圖 示了 際標(biāo)準(zhǔn)規(guī)定的圖標(biāo)樣式。 圖 際標(biāo)準(zhǔn)圖標(biāo) 第三節(jié) 層疊樣式表（ 介 也被稱為層疊樣式表。它的作用是定義如何顯示 素，同時控制 面的外觀。樣式存儲在樣式表中，通常放在 部分（內(nèi)部樣式表）或存儲在外部 件（外部樣式表）里。實際應(yīng)用中，設(shè)計者可以通過修改樣式表的定義 方式使頁面展現(xiàn)出完全不同的外觀，當(dāng)網(wǎng)站擁有大量，如幾十，上百的頁面時，通過修改頁面鏈接的樣式表文件即可修改頁面的外觀，而不用修改每一個頁面，從而大量的減少工作量。相較于傳統(tǒng)的表格布局方式而言，層疊樣式表具有便于網(wǎng)頁修改、便于網(wǎng)頁的統(tǒng)一、減少網(wǎng)頁體積等特點。圖 際標(biāo)準(zhǔn)中定義的圖標(biāo)。 第三章關(guān)鍵 技術(shù) 16 圖 際標(biāo)準(zhǔn)圖標(biāo) 1996 年 12 月定版發(fā)布第一個版本，一經(jīng)發(fā)布，其構(gòu)思和方法即吸引各方的注意。 1997 年初， 維網(wǎng)聯(lián)盟）成立了專門的 作組，并于 1998 年 5 月出版第二版，即為 這當(dāng)中，新增了諸如通用、相鄰?fù)?、子選擇器等多種高級選擇器，也添加了諸如浮動和定位等高級概念，令能變得更加得全面，應(yīng)用起來也更加得方便。 版本（草案版本）出現(xiàn)在 2009 年，與之前相比較，模塊化的開發(fā)方式被加入到 開發(fā)框架中。其中，分解成用很多小的模塊用以代替原有的大模塊，又研發(fā)了很多新模塊，諸如：多欄布局、超級鏈接的方式、背景、邊框、列表模式、文字特效等。頁面布局中，設(shè)計者通過對層疊樣式表（ 靈活使用，克服了一個在之前開發(fā)中一直很難解決的普遍問題： 起初的設(shè)計中 標(biāo)簽是用作被定義文檔的內(nèi)容。原先，我們標(biāo)記“段落”、“表格”、“標(biāo)題”等會使用諸如 、 、 等類型的標(biāo)簽，瀏覽器則負(fù)責(zé)完成對文檔布局的功能，并不涉及到任何格式化形式的標(biāo)簽。目前的主要的瀏覽器形式（ 斷往 規(guī)范中添加了很多新的諸如字體標(biāo)簽和顏色的屬性和新的 簽，將一件事情變得越來越困難，那就是創(chuàng)建一個清晰的文檔，用于文檔的表現(xiàn)層。 萬維網(wǎng)聯(lián)盟，創(chuàng)造出了新的樣式且高于現(xiàn)在的 本，為了去解決以上提到的這個問題，那么差不多所有的瀏覽器， 都會支持這種層疊樣式表（ 在不斷的應(yīng)用與凝練中，設(shè)計者們通過使用 術(shù)有效地提高了工作效率，通過運用外部樣式表，使開發(fā)者可以同時改變網(wǎng)站中所有頁面的布局與外觀。通過對 件進行修改，網(wǎng)站中的所有元素均會自動進行更新，從而實現(xiàn)全局更新的目的。 第三章關(guān)鍵 技術(shù) 17 第四節(jié) 術(shù) 在網(wǎng)頁開發(fā)過程中，除了對頁面進行布局以外，經(jīng)常需要在頁面上實現(xiàn)諸多的特殊效果，使自己的網(wǎng)站具有出眾的視覺沖擊和表現(xiàn)張力。為了實現(xiàn)特殊效果，開發(fā)者經(jīng)常會采用 表現(xiàn)，誠然 網(wǎng)頁表現(xiàn)力上具有非常優(yōu)秀的效果，但是大量 的 入將會嚴(yán)重拖緩頁面的讀取速度，對于用戶的使用而言，不能稱之為一種好的辦法。 為了解決這種問題，更多的開發(fā)者使用 代替 實現(xiàn)特效，但是傳統(tǒng)意義的 表現(xiàn)力明顯不能令用戶與資方滿意， 的出現(xiàn)和應(yīng)用改變了這一狀況，使頁面在加載速度和表現(xiàn)力上獲得了一個出色的平衡點。由頂尖 發(fā)人員組成的核心團隊開發(fā)出的 一個強大的 。開發(fā)者可以運用其中的方法來增強自己的網(wǎng)站。 一個緊湊的文件中提供 了豐富多樣的特性、簡單易學(xué)的語法和穩(wěn)健的跨平臺兼容性。此外，百余種為擴展 能而開發(fā)的插件，更使得它幾乎成為適用于各類客戶端腳本編程的必備工具。 為 本編程提供了通用的抽象層，它容易擴展而且不斷有新插件面世來對其功能進行增強，使得它幾乎適用于任何腳本編程的情形。 以實現(xiàn)以下的這些需求： 找到某個頁面里邊的元素點。 了精準(zhǔn)地找到急需查詢和控制的文檔里的元素點，貢獻了非常迅捷和靠譜的機制 到以上這點，在不考慮 庫的情況下，不用他去遍尋文檔對象模型樹，一定要敲非常多的程序代碼，去找尋 檔類目里的一些特定的部分。 改變網(wǎng)頁的外形。使用 要寫很少的程序代碼，就可以完成修改文本、重新排序列表、轉(zhuǎn)動和插入圖像，因為面臨瀏覽器不能完美支持同樣的準(zhǔn)的時候，雖然 這方面給出了非常大的支持的手段，但仍就顯得力不從心。但 過給出跨瀏覽器的解決方法的方式，完美得解決了這一點。而且，就算頁面已經(jīng)完成并呈現(xiàn)給了用戶， 是可以修改頁面中的某個部分的樣式的屬性。 配合訪問者的對于頁 面的操作。 供了截取形形色色的頁面事件的適當(dāng)方式，而不需要使用事件處理程序搞亂 碼。此外，它的事件處理消除了經(jīng)常困擾 發(fā)人員的瀏覽器不一致性。 第三章關(guān)鍵 技術(shù) 18 添加了很多動態(tài)效果到頁面里。 內(nèi)置了大量的淡入、擦除、縮放、彈出、過度的效果，為開發(fā)者所用，進而增加其頁面增加表現(xiàn)力。 圖 際標(biāo)準(zhǔn)圖標(biāo) 第五節(jié) 開發(fā)環(huán)境和工具 發(fā) 要一個開發(fā)框架和編譯環(huán)境， 我們 選擇 的是 開源的 平臺 一個開源的開發(fā)框架，使用 構(gòu)建跨平臺的的移動應(yīng)用程序。它使開發(fā)者能夠利用 能手機的核心功能 包括地理定位，加速器，聯(lián)系人，聲音和振動等，此外 有豐富的插件，可以以此擴展無限的功能。 圖 示了 國際標(biāo)準(zhǔn)圖