計(jì)算機(jī)科學(xué)與技術(shù)-基于vue框架積木網(wǎng)上商城的設(shè)計(jì)與實(shí)現(xiàn)

PAGE 基于Vue框架積木網(wǎng)上商城的設(shè)計(jì)與實(shí)現(xiàn)摘要：隨著物資生活逐漸完善的今天，許多家庭越來越重視兒童的教育問題，兒童的智力發(fā)育問題漸漸受到大家的關(guān)注和重視，如何讓兒童身心得到健康發(fā)展是很重要的社會(huì)問題?？茖W(xué)研究認(rèn)為5-8歲是少兒的智力發(fā)展的重要階段，在這個(gè)階段之中益智玩具是兒童智力開發(fā)的手段之一，把游戲當(dāng)做一種教育，將教育跟娛樂結(jié)合在一起，會(huì)有更好的效果。查看相關(guān)的網(wǎng)絡(luò)調(diào)查報(bào)告和根據(jù)2017-2019年網(wǎng)購(gòu)數(shù)據(jù)分析，積木類益智玩具成為了家長(zhǎng)和少兒教育機(jī)構(gòu)的首要選擇對(duì)象，對(duì)兒童的智商能力開發(fā)上能起到很大的幫助作用，同時(shí)能增強(qiáng)家長(zhǎng)或者少兒教育機(jī)構(gòu)與兒童之間的互動(dòng)。所以開發(fā)一個(gè)積木網(wǎng)上商城發(fā)展前景巨大，能讓社會(huì)上有需要的人帶來很好的平臺(tái)。使用2016年5月份發(fā)布的Vue.js2.0前端漸進(jìn)式Javascript框架REF_Ref1009\r[1]加上elementUI框架來作為項(xiàng)目的開發(fā)平臺(tái)。Vue框架針對(duì)如今多屏分辨率不統(tǒng)一的趨勢(shì)下，能更有效率地響應(yīng)不同設(shè)備之間分辨率的差異化適應(yīng)，同時(shí)實(shí)現(xiàn)前端與后端的代碼分離，大大地提高了前后端的開發(fā)速度和分清開發(fā)職責(zé)；elementUI框架是如今在Vue平臺(tái)上支持度較高的UI框架，組件顯示美觀，同時(shí)使用方便。使用vscode作為本項(xiàng)目的開發(fā)工具，它的優(yōu)點(diǎn)在于開發(fā)界面非常簡(jiǎn)潔、使用方便并且具有代碼糾錯(cuò)提示。對(duì)本系統(tǒng)進(jìn)行需求分析和詳細(xì)設(shè)計(jì)，通過技術(shù)開發(fā)系統(tǒng)的功能和界面完成本項(xiàng)目的開發(fā)，最后對(duì)各個(gè)功能模塊進(jìn)行測(cè)試和優(yōu)化。基于Vue框架積木網(wǎng)上商城是針對(duì)兒童開發(fā)智力，方便家長(zhǎng)和少兒教育機(jī)構(gòu)挑選和購(gòu)買積木玩具所開發(fā)的一套網(wǎng)上商城系統(tǒng)，本商城與現(xiàn)在網(wǎng)絡(luò)上的商城具有特色的地方在于，積木網(wǎng)上商城專營(yíng)各種積木類益智玩具，面對(duì)市面上參差不齊的積木商品，材質(zhì)和安全性得不到保障的情況下，本商城專營(yíng)積木玩具商品，最大的特點(diǎn)就是保障其商品安全性，經(jīng)過人工篩選才會(huì)上架，提供適合不同年齡段的兒童的積木玩具商品。關(guān)鍵詞：Vue框架，積木網(wǎng)上商城，開發(fā)智力DesignandimplementationofbuildingblockonlineshoppingmallbasedonVueframeworkAbstract：Withthegradualimprovementofmateriallifetoday,manyfamiliesarepayingmoreandmoreattentiontochildren'seducationalissues,andchildren'sintellectualdevelopmentisgraduallyreceivingeveryone'sattentionandattention.Howtoallowchildrentodevelophealthilyisanimportantsocialissue.Scientificresearchbelievesthat5-8yearsoldisanimportantstageofchildren’sintellectualdevelopment.Inthisstage,educationaltoysareoneofthemeansofchildren’sintellectualdevelopment.Takinggamesasaneducation,combiningeducationandentertainment,therewillbeBetterresults.Viewingrelevantonlinesurveyreportsandanalysisofonlineshoppingdatafrom2017to2019,buildingblockeducationaltoyshavebecometheprimarychoiceforparentsandchildren’seducationalinstitutions,whichcangreatlyhelpchildren’sIQdevelopment.Canenhancetheinteractionbetweenparentsorchildren'seducationalinstitutionsandchildren.Therefore,thedevelopmentofabuildingblockonlineshoppingmallhashugedevelopmentprospects,whichcanbringagoodplatformtothoseinneedinthesociety.TheVue.js2.0front-endprogressiveJavascriptframeworkREF_Ref1009\r[1]releasedinMay2016plustheelementUIframeworkwasusedasthedevelopmentplatformfortheproject.TheVueframeworkismoreresponsivetothedifferentresolutionsofdifferentdevicesinresponsetothetrendoftoday'smulti-screenresolutionisnotuniform,andatthesametimerealizestheseparationoffront-endandback-endcode,greatlyimprovingthedevelopmentspeedandseparationoffront-endandback-endDevelopmentresponsibilities;elementUIframeworkisaUIframeworkwithahighdegreeofsupportontheVueplatform.Thecomponentsdisplaybeautifullyandareeasytouse.Usingvscodeasthedevelopmenttoolforthisproject,itsadvantageisthatthedevelopmentinterfaceisverysimple,easytouseandhascodeerrorcorrectionprompts.Carryouttheneedsanalysisanddetaileddesignofthesystem,throughthefunctionandinterfaceofthetechnologydevelopmentsystem,andfinallytestandoptimizeeachfunctionalmoduletocompletethedevelopmentofthisproject.BuildingblocksonlinemallbasedonVueframeworkisasetofonlinemallsystemdevelopedforchildrentodevelopintelligencetofacilitateparentsandchildren’seducationalinstitutionstoselectandpurchasebuildingblockstoys.Allkindsofbuildingblockeducationaltoys,inthefaceoftheunevenbuildingblocksonthemarket,thematerialandsafetycannotbeguaranteed,themallspecializesinbuildingblocktoyproducts,thebiggestfeatureistoensurethesafetyoftheirproducts,aftermanualThescreeningwillbeputontheshelftoprovidebuildingblocktoyproductssuitableforchildrenofdifferentages.Keywords：Vueframework,Buildingblockonlineshoppingmall,Developingintelligence

目錄第1章緒論 11.1研究背景和意義 11.1.1本課題背景分析 11.1.2本課題的研究意義 11.2文獻(xiàn)綜述 21.2.1國(guó)內(nèi)現(xiàn)狀 21.2.2國(guó)外現(xiàn)狀 21.3課題研究方法和內(nèi)容 31.3.1研究方法 31.3.2研究?jī)?nèi)容 31.4開發(fā)技術(shù)與開發(fā)工具 41.4.1Vue.js2.0前端框架 41.4.2Webpack[14]構(gòu)建工具 4第2章系統(tǒng)需求分析 52.1系統(tǒng)需求分析 52.1.1功能需求分析 52.1.3非功能需求分析 102.1.4技術(shù)可行性分析 112.1.5操作可行性分析 112.2系統(tǒng)用例圖 122.2.1商品瀏覽模塊用例圖 122.2.2用戶信息模塊用例圖 122.2.3社區(qū)談?wù)撃K用例圖 132.2.4購(gòu)物車管理模塊用例圖 132.3用例規(guī)約 132.4本章總結(jié) 21第3章系統(tǒng)設(shè)計(jì) 223.1系統(tǒng)總體功能設(shè)計(jì) 223.1.1系統(tǒng)總體設(shè)計(jì) 223.2系統(tǒng)類圖 233.3數(shù)據(jù)庫設(shè)計(jì) 233.3.1用戶表設(shè)計(jì) 233.3.2商品表設(shè)計(jì) 243.4

系統(tǒng)流程圖 253.4.1商品瀏覽流程圖 253.4.3訂單管理流程圖 273.4.5購(gòu)物車管理流程圖 283.5

系統(tǒng)接口設(shè)計(jì) 283.5.1Axios請(qǐng)求接口庫 283.5.2Api接口設(shè)計(jì) 29第4章系統(tǒng)實(shí)現(xiàn) 334.1商品瀏覽模塊實(shí)現(xiàn) 334.2訂單支付模塊實(shí)現(xiàn) 364.3用戶信息模塊實(shí)現(xiàn) 374.4訂單管理模塊實(shí)現(xiàn) 404.5購(gòu)物車管理模塊實(shí)現(xiàn) 42第5章系統(tǒng)測(cè)試 445.2測(cè)試的目的 445.3功能測(cè)試 445.3.1商品瀏覽模塊測(cè)試 445.3.2用戶信息模塊測(cè)試 455.3.3訂單管理模塊測(cè)試 455.3.5購(gòu)物車管理模塊測(cè)試 46第6章結(jié)論與展望 476.1結(jié)論 476.2展望 47參考文獻(xiàn) 49致謝 50PAGEPAGE51第1章緒論1.1研究背景和意義1.1.1本課題背景分析自21世紀(jì)以來，青少年智力技能的發(fā)展已受到更多人的重視，對(duì)于兒童來說，在兒童年齡發(fā)展其大腦非常必要。對(duì)兒童智力調(diào)查表和玩具市場(chǎng)的綜合研究表明，積木類益智玩具是父母和兒童教育機(jī)構(gòu)的第一個(gè)解決方案，在促進(jìn)兒童智力發(fā)展方面起著重要的作用。在線購(gòu)物變得越來越流行，并且已經(jīng)成為一種趨勢(shì)。網(wǎng)絡(luò)購(gòu)物是網(wǎng)絡(luò)發(fā)展的必然趨勢(shì)，例如在線購(gòu)物商城有每個(gè)人都熟悉淘寶，卓越網(wǎng)，當(dāng)當(dāng)網(wǎng)，eBay，拍拍網(wǎng)和一些較大的在線商城。隨著這個(gè)時(shí)代的步伐，人們生活質(zhì)量的提高也促進(jìn)了網(wǎng)上購(gòu)物這一新的購(gòu)物方式的成熟，越來越多的消費(fèi)者正從傳統(tǒng)購(gòu)物轉(zhuǎn)向網(wǎng)上購(gòu)物。但是對(duì)于在線購(gòu)物商城來說高質(zhì)量和劣質(zhì)產(chǎn)品的結(jié)合導(dǎo)致缺乏一個(gè)整理、值得消費(fèi)者信賴的平臺(tái)。因此，市場(chǎng)需要先進(jìn)的直銷理念和高效完善的購(gòu)物系統(tǒng)，以便以便宜，快速和方便的方式為客戶提供高質(zhì)量的積木玩具和開發(fā)智力社區(qū)的網(wǎng)上商城。1.1.2本課題的研究意義這個(gè)積木網(wǎng)上商店旨在為兒童開發(fā)智力，方便家長(zhǎng)和少兒教育機(jī)構(gòu)挑選和購(gòu)買積木玩具所開發(fā)的一套網(wǎng)上商城系統(tǒng)，區(qū)別于現(xiàn)在網(wǎng)絡(luò)上的商城，面對(duì)市面上參差不齊的積木商品，材質(zhì)和安全性得不到保障的情況下，本商城專營(yíng)積木玩具商品，最大的特點(diǎn)就是保障其商品安全性，經(jīng)過人工篩選才會(huì)上架，提供適合不同年齡段的兒童的積木玩具商品。1.2文獻(xiàn)綜述1.2.1國(guó)內(nèi)現(xiàn)狀根據(jù)中國(guó)心理衛(wèi)生雜志2020年最新的兒童心理及智力開發(fā)的期刊REF_Ref2639\r[2]中指出，主題積木游戲?qū)?～6歲兒童數(shù)學(xué)能力和空間技能發(fā)展的干預(yù)效果，能很好的促進(jìn)兒童對(duì)于數(shù)學(xué)和空間上的大腦開發(fā)能力。從數(shù)據(jù)上看，目前，中國(guó)14歲以下的青少年、兒童和嬰兒人口接近3億，占全國(guó)人口的25%，8000萬城市兒童構(gòu)成了玩具消費(fèi)者的一個(gè)大群體。有資料表明,中國(guó)目前有6,000家玩具制造商，其中79％生產(chǎn)兒童玩具，56％生產(chǎn)不同類型的積木玩具。據(jù)中國(guó)玩具協(xié)會(huì)估計(jì)，2018年中國(guó)積木玩具需求將達(dá)到300億元左右。REF_Ref2792\r[3]。綜合市場(chǎng)分析，在中國(guó)2017年雙十一拼插積木類玩具在天貓和京東平臺(tái)的銷售額分別是17億和13億元，而2018年兩個(gè)平臺(tái)的銷售額分別增長(zhǎng)了45.9%和34.6%；但是積木玩具本身的安全性、無毒性也引起來社會(huì)上各人士的高度重視，在沒有專業(yè)人士的推薦下，如何選擇合適的積木玩具成為一個(gè)令家長(zhǎng)頭痛的問題。在技術(shù)上，使用前后端分離驅(qū)動(dòng)的前端框架是現(xiàn)在IT行業(yè)和互聯(lián)網(wǎng)發(fā)展的趨勢(shì)，加上B/S多層體系結(jié)構(gòu)REF_Ref32252\r[4]、MVVM設(shè)計(jì)模式REF_Ref2858\r[5]使開發(fā)過程變得簡(jiǎn)單。根據(jù)網(wǎng)上的數(shù)據(jù)調(diào)查，如今Vue雖然市場(chǎng)使用率不如其他兩大框架多約占15%，但近兩年來的增長(zhǎng)率非常高，已經(jīng)成為國(guó)內(nèi)互聯(lián)網(wǎng)市場(chǎng)的新寵，而且Vue非常適合中小型項(xiàng)目的部署與開展。1.2.2國(guó)外現(xiàn)狀最初的積木玩具是在國(guó)外興起的，全球最大的積木公司樂高在2011年的銷售額為185.07億丹麥克朗，比2010年增長(zhǎng)了約17%。據(jù)樂高美國(guó)總經(jīng)理稱，2011年，樂高在美國(guó)的銷售額增長(zhǎng)了45%。樂高今年第一季度的表現(xiàn)同比飆升60%。預(yù)計(jì)從2030年到2050年，美國(guó)將成為樂高世界最大的市場(chǎng)之一。REF_Ref30805\r[6]。根據(jù)該項(xiàng)目的技術(shù)分析，國(guó)外對(duì)Vue框架的使用與中國(guó)不同。在國(guó)外使用React和Angular的原因更多是因?yàn)榻陙黹_發(fā)的Vue前端框架尚未被外國(guó)開發(fā)人員使用。但是，其使用的增長(zhǎng)速度是十分明顯的。根據(jù)《2019年JavaScript生態(tài)圈研究報(bào)告》REF_Ref2962\r[7]，未來60％的外國(guó)受訪者更愿意接受和使用Vue作為發(fā)展平臺(tái)，而94％的外國(guó)受訪者將使用官方文檔了解了Vue。1.3課題研究方法和內(nèi)容1.3.1研究方法早期的網(wǎng)站大多數(shù)依賴于后臺(tái)服務(wù)器，例如基于java語言開發(fā)的jsp頁面、php語言的php偽靜態(tài)頁面，這種動(dòng)態(tài)頁面的優(yōu)點(diǎn)在于頁面直接在服務(wù)端運(yùn)行，可以與后臺(tái)數(shù)據(jù)庫高度交互，數(shù)據(jù)更直接在頁面上處理，而缺點(diǎn)在于開發(fā)重心在后臺(tái)技術(shù)上，后臺(tái)開發(fā)人員在處理邏輯業(yè)務(wù)的同時(shí)也要參與到頁面開發(fā)的編程中，無疑加大了后端人員的工作分量；同時(shí)html頁面中有很多后端語言代碼，耦合性非常大，后期維護(hù)成本和難度都增大。所以這種網(wǎng)頁開發(fā)的技術(shù)不適合做商城網(wǎng)站系統(tǒng)等面向公眾的項(xiàng)目。本文研究方向是積木商城系統(tǒng)，面向?qū)ο蟮闹饕歉改负秃⒆?，其界面美觀度和操作易用性是十分重要的，所以使用前后端分離REF_Ref5790\r[8]的方式把整個(gè)項(xiàng)目的開發(fā)權(quán)重往前移，平衡前后端模塊的職責(zé)，前端的責(zé)任是負(fù)責(zé)頁面的樣式顯示與優(yōu)化并動(dòng)態(tài)地處理從后端接口返回的數(shù)據(jù)，而后端只關(guān)注邏輯處理，這對(duì)項(xiàng)目開發(fā)是非常必要的?；赩ue框架積木網(wǎng)上商城的前期通過京東、淘寶等現(xiàn)有的大型電子商城的調(diào)查，針對(duì)積木類益智商品的銷售量、營(yíng)銷手段以及用戶評(píng)價(jià)分析數(shù)據(jù)總結(jié)如何為積木商城建立可靠的數(shù)據(jù)庫。1.3.2研究?jī)?nèi)容本文研究的目的主要是使用Vue前端框架來設(shè)計(jì)和開發(fā)一套主題是積木網(wǎng)上商城的系統(tǒng)。該系統(tǒng)主要針對(duì)15歲以下的兒童，提供了一個(gè)安全可靠的專營(yíng)積木類益智商品線上商品平臺(tái)，主要包括產(chǎn)品瀏覽模塊，用戶信息模塊，訂單管理模塊，社區(qū)談?wù)撃K，購(gòu)物車管理模塊，還提供了對(duì)適合不同年齡兒童的玩具進(jìn)行分類的推薦，并加入社區(qū)討論功能，以便消費(fèi)者能夠了解更多商品并使用商品。憑借先進(jìn)的直銷理念，結(jié)合高效完善的購(gòu)物系統(tǒng)，我們可以為消費(fèi)者提供質(zhì)優(yōu)價(jià)廉、快捷方便的優(yōu)質(zhì)正品。研究的流程是首先了解用戶對(duì)系統(tǒng)的產(chǎn)品需求，其中核心的需求是系統(tǒng)需求提供多樣全面的積木玩具商品，能讓用戶有更多的選擇；其次了解系統(tǒng)的操作流程，從瀏覽、選擇商品，選擇商品的產(chǎn)品規(guī)格，下單再到收貨成功，在開始項(xiàng)目是需要制定完整的流程方案，才能更好地完成系統(tǒng)的實(shí)現(xiàn)。需要解決的主要問題是：在滿足用戶需求的前提下，該項(xiàng)目能否在穩(wěn)定運(yùn)行，信息安全，操作簡(jiǎn)便，界面美觀的前提下，履行積木商城系統(tǒng)所需的基本功能。1.4開發(fā)技術(shù)與開發(fā)工具1.4.1Vue.js2.0前端框架Vue前端框架在2016年“出生”，它是由數(shù)據(jù)驅(qū)動(dòng)和組件組成的漸進(jìn)式的、基于MVVM模式的Javascript庫，雖然誕生至今只有四年時(shí)間，但它有著專注于View層，使開發(fā)者不必花過多時(shí)間去處理數(shù)據(jù)等優(yōu)點(diǎn)，所以稱為了前端開發(fā)的“新寵”。與原生的JQuery不同，Vue提供專門的周期函數(shù)，開發(fā)者根據(jù)自身項(xiàng)目需求在指定的函數(shù)內(nèi)執(zhí)行方法，配合v-model、v-bind等語法糖，能更有效地進(jìn)行數(shù)據(jù)驅(qū)動(dòng)和雙向綁定，便于實(shí)現(xiàn)功能。同時(shí)使用組件化原則，開發(fā)者引入需要的組件，這樣做的好處在于能更好地管理插件和代碼，清晰地讓開發(fā)者知道項(xiàng)目的組成。1.4.2Webpack構(gòu)建工具WebpackREF_Ref21817\r\h[14]構(gòu)建工具的創(chuàng)立是為了更方便地管理依賴包、和代碼，如今的Web前端應(yīng)用變化多樣，使用的語言和技術(shù)比后端的多，如果由人為地去管理代碼和依賴包，隨著后期項(xiàng)目的開展，代碼會(huì)變得非常冗余且容易出錯(cuò)。Webpack構(gòu)建工具被稱為模塊加載器（MODULEBUNDLER）,能夠把頁面中的依賴文件打包成靜態(tài)資源，按需去加載這些資源，大大地減少了項(xiàng)目的體積以及更易管理文件。

系統(tǒng)需求分析對(duì)該系統(tǒng)的需求進(jìn)行分析，調(diào)查并了解父母購(gòu)買兒童積木玩具的需求，分析市場(chǎng)上積木玩具的銷量，并在收到此數(shù)據(jù)后進(jìn)行分析?，F(xiàn)在該系統(tǒng)與市面上現(xiàn)有的網(wǎng)上商城不同之處在于，積木網(wǎng)上商城使用數(shù)據(jù)分析對(duì)積木商品進(jìn)行分類和收集，從而形成一個(gè)只針對(duì)兒童人群的線上積木銷售平臺(tái)。對(duì)于功能性和非功能性需求，使用功能性分析方法、結(jié)構(gòu)性分析方法、信息建模方法和面向?qū)ο蟮姆治龇椒▉碜R(shí)別、分析和綜合問題，制定規(guī)范和評(píng)審過程。在競(jìng)爭(zhēng)激烈的市場(chǎng)中，不僅內(nèi)容應(yīng)豐富多樣，而且要提高核心競(jìng)爭(zhēng)力，如果網(wǎng)站可以吸引更多的客戶，則它應(yīng)該在許多方面具有自己的特征，同時(shí)在頁面美學(xué)方面也要吸引人。特別是該系統(tǒng)屬于特征人群訪問網(wǎng)站，有必要開發(fā)一種符合兒童審美觀的用戶界面，并通過視覺效果吸引更多的顧客。使用HTML+CSSREF_Ref607\r[9]裝飾Web界面，使網(wǎng)站擺脫舊的和丑陋的局面，再加上千變?nèi)f化的前端技術(shù)，通過前框架Vue前端和流行的UI框架element，顯示網(wǎng)頁的效果非常漂亮，開發(fā)一個(gè)用于積木主題商城的網(wǎng)站。2.1系統(tǒng)需求分析2.1.1功能需求分析《基于Vue框架積木網(wǎng)上商城》的主要功能要五個(gè)功能模塊：商品瀏覽模塊、用戶信息模塊、訂單管理模塊、社區(qū)談?wù)撃K、購(gòu)物車管理模塊。商品瀏覽模塊功能需求圖2-1商品瀏覽模塊圖商品列表：無論是用戶還是游客都可以在網(wǎng)站首頁查看各種品牌的積木玩具商品、熱門商品、導(dǎo)購(gòu)指南；商品清單有兩類:價(jià)格類和銷售類。默認(rèn)情況下，它按銷售從高到低的順序顯示。商品列表顯示商品數(shù)據(jù)，例如商品照片，商品價(jià)格和商品銷量。2）商品分類:系統(tǒng)根據(jù)品牌、適用性別和適用年齡對(duì)商品進(jìn)行分類，這三種分類可以聯(lián)合篩選。3)展示商品詳情:積木玩具商品明細(xì)、外觀圖片、價(jià)格、屬性、庫存數(shù)量等信息的顯示；用戶選擇商品的規(guī)格(顏色、型號(hào)、數(shù)量)添加到購(gòu)物車或購(gòu)買中。如果用戶未登錄，在繼續(xù)下一步之前，將提示用戶登錄。如果用戶已登錄，用戶將直接進(jìn)入下一步。選擇產(chǎn)品規(guī)格后，用戶點(diǎn)擊添加購(gòu)物車按鈕，系統(tǒng)提示用戶“添加購(gòu)物車成功”，否則提示“添加購(gòu)物車失敗，請(qǐng)重試”；在用戶選擇商品規(guī)格并點(diǎn)擊購(gòu)買按鈕后，他將跳轉(zhuǎn)到提交訂單的頁面。4)搜索:搜索分為兩種搜索方法，即模糊搜索和分類搜索。用戶可以搜索商品的標(biāo)題字段以找出匹配條件的積木商品；分類搜索是用戶通過商品所屬的類型進(jìn)行搜索，搜索結(jié)果以列表顯示。2.用戶信息模塊功能需求圖2-2用戶信息模塊圖1）個(gè)人基本信息：包括用戶設(shè)置頭像、昵稱、郵箱、居住地區(qū)、購(gòu)物愛好選擇等個(gè)人信息。2）收貨地址：填寫收貨人的名稱、收貨人的手機(jī)號(hào)碼、所在地區(qū)、詳細(xì)地址；其中，手機(jī)號(hào)碼通過正則表達(dá)式驗(yàn)證，確保用戶輸入的手機(jī)號(hào)碼是正確的；所在地區(qū)是通過匹配中國(guó)地區(qū)數(shù)據(jù)庫獲取地區(qū)信息供用戶選擇，保證地址正確；用戶確認(rèn)保存收貨地址信息后，可以直接選擇已經(jīng)保存的收貨地址信息，也可以通過下訂單的方式創(chuàng)建新的收貨地址信息；3）默認(rèn)收貨地址：用戶可在已保存的收貨信息列表中選擇其中一個(gè)地址信息作為默認(rèn)收貨地址，默認(rèn)收貨地址是不會(huì)有重復(fù)的，設(shè)置后的默認(rèn)收貨地址會(huì)一直顯示在收貨地址列表的第一位，并加上“默認(rèn)”標(biāo)簽。3.訂單管理模塊功能需求圖2-3訂單管理模塊圖1）檢查訂單狀態(tài):訂單狀態(tài)有五種狀態(tài):“全部”、“待支付”、“待接收”、“已完成”和“已取消”?！叭俊睜顟B(tài)顯示用戶的所有訂單；“待定付款”狀態(tài)顯示用戶提交訂單，系統(tǒng)將檢查商品是否有貨。如果沒有庫存，系統(tǒng)會(huì)提示用戶商品缺貨。否則，系統(tǒng)將鎖定訂單信息10分鐘?！按邮铡睜顟B(tài)顯示系統(tǒng)執(zhí)行的操作，如發(fā)貨單；“完成”狀態(tài)表示用戶已經(jīng)收到貨物，并且確認(rèn)訂單沒有問題；“已取消”狀態(tài)表示用戶提交訂單，但在10分鐘內(nèi)還沒有支付成功的訂單，或者訂單被用戶取消；2)訂單管理:用戶可以在五種狀態(tài)下查看明細(xì)和刪除訂單；3)支付方式:用戶提交訂單時(shí)，選擇支付方式，包括支付寶和微信；4）送貨時(shí)間：用戶在提交訂單時(shí)選擇適合的送貨時(shí)間，系統(tǒng)會(huì)安排送貨員在制定時(shí)間段內(nèi)送貨上門；如果用戶沒有選擇送貨時(shí)間，則系統(tǒng)默認(rèn)支付訂單成功后安排配送積木商品。4.社區(qū)管理模塊功能需求圖2-4社區(qū)管理模塊圖1）商品談?wù)摚河脩暨M(jìn)入商城社區(qū)交流平臺(tái)，用戶可發(fā)布相關(guān)商品的提問，所有用戶都可以評(píng)論該用戶提出的問題，同時(shí)標(biāo)識(shí)出購(gòu)買過和未購(gòu)買過的評(píng)論用戶，同時(shí)系統(tǒng)篩選出用戶提問的相似問題進(jìn)行匯合處理，以使用戶更清晰地了解該商品。5.購(gòu)物車管理模塊功能需求圖2-5購(gòu)物車管理模塊圖1)購(gòu)物車列表:用戶在商品詳細(xì)信息頁中選擇商品規(guī)格，并向購(gòu)物車中添加。這個(gè)清單顯示了購(gòu)物車中的貨物和貨物的存儲(chǔ)狀態(tài)。如果商品無效，則表示該商品無法購(gòu)買，用戶需要清除該商品信息。2)購(gòu)物車管理:管理購(gòu)物車中的商品，并快速刪除無效商品;刪除選定的商品;貨物結(jié)算和貨物數(shù)量操作。3)購(gòu)物車結(jié)算:用戶管理購(gòu)物車中有效商品的結(jié)算。待結(jié)算商品進(jìn)入訂單管理，用戶可以查看訂單。2.1.2非功能需求分析基于本系統(tǒng)是面向家長(zhǎng)、兒童使用的，所以保證前端界面用戶體驗(yàn)是必要的，所以會(huì)考慮下面幾個(gè)非功能性需求：兼容性需求自從HTML5協(xié)議問世以來，由于IE瀏覽器對(duì)HTML5的支持度不如其他的瀏覽器，IE瀏覽器一統(tǒng)天下的局面已不復(fù)存在，如今成為了谷歌公司的Chrome瀏覽器，火狐公司的FireFox瀏覽器、和微軟公司的IE瀏覽器三足鼎立。不同瀏覽器的面世，他們基本上使用自家公司制定的協(xié)議標(biāo)準(zhǔn)，此外，不同的瀏覽器使用不同的內(nèi)核，因此它們對(duì)HTML5和CSS3的分析和支持將會(huì)不同，尤其是IE9以下的版本，只能盡可能地兼容這些瀏覽器的顯示效果以及交互功能，例如在Chrome瀏覽器下自定義的一些原生控件樣式，但在火狐瀏覽器卻不能正常顯示，這給前端開發(fā)帶來一定的難度。性能需求前端擁有良好的性能將有效改善系統(tǒng)的用戶體驗(yàn),所以在前端編程時(shí)進(jìn)行優(yōu)化將是系統(tǒng)開發(fā)的重要工作。以下幾點(diǎn)則是主要優(yōu)化工作。a)減少HTTP請(qǐng)求次數(shù)與頻率瀏覽器在加載和刷新頁面的時(shí)候，每次都會(huì)發(fā)送HTTP請(qǐng)求到后臺(tái)獲取數(shù)據(jù)，這個(gè)過程會(huì)消耗大量的時(shí)間，導(dǎo)致頁面在首次加載的時(shí)候都會(huì)有段時(shí)間的空白，當(dāng)網(wǎng)絡(luò)不佳的時(shí)候這種情況會(huì)更明顯。而請(qǐng)求耗時(shí)除了取決于網(wǎng)絡(luò)就是網(wǎng)頁資源加載,因此我們將主要優(yōu)化網(wǎng)頁資源。主要方法就是合并圖片,合并JS文件與CSS文件。b)減少DOM操作操作DOM將會(huì)嚴(yán)重消耗頁面性能,所以盡量避免操作DOM,本文選用Vue.js框架,將有效避免直接操作DOM這一問題，因?yàn)樗褂玫氖请p向綁定來進(jìn)行對(duì)樣式和功能的操作，在前端框架出現(xiàn)之前，網(wǎng)頁的功能基本上是使用Javascript對(duì)DOM元素進(jìn)行操作以獲得需要的功能，但Vue.js能有效的減少直接對(duì)DOM元素的操作，進(jìn)而更有效的提高網(wǎng)頁性能。響應(yīng)式多屏自適應(yīng)需求REF_Ref859\r[10]在4G時(shí)代的帶領(lǐng)下，多終端成為了普遍現(xiàn)象，一個(gè)網(wǎng)頁響應(yīng)不同設(shè)備的分辨率顯示是十分必要的，這樣子能解決程序員一套代碼多端使用的情況，很大程度上提高的開發(fā)效率。嚴(yán)格定義的響應(yīng)式一般是指響應(yīng)式Web設(shè)計(jì)、而Web憑借其特有的靈活性和可塑性，在網(wǎng)頁中使用rem和百分比的形式，獲取瀏覽器的寬高，對(duì)齊進(jìn)行自適應(yīng)，從而響應(yīng)不同尺寸、不同分辨率下的設(shè)備。2.1.3技術(shù)可行性分析整個(gè)系統(tǒng)使用的技術(shù)以Vue2.0作為前端開發(fā)框架，實(shí)現(xiàn)前后端分離，由于本人在公司擔(dān)任前端開發(fā)的職位，知道Vue.js的語法糖、周期函數(shù)以及路由處理等操作；HTML+CSS的網(wǎng)頁界面開發(fā)語言能滿足我們對(duì)主題顯示預(yù)期的效果，適當(dāng)?shù)氖褂肑QueryREF_Ref3510\r[11]幫助補(bǔ)充Vue中的功能不足；后臺(tái)方面使用集成度很高的thinkPhp5.0后臺(tái)開發(fā)框架，技術(shù)方面一般能滿足。2.1.4操作可行性分析由于本系統(tǒng)是面向于家長(zhǎng)和兒童，所以我們對(duì)系統(tǒng)目標(biāo)是簡(jiǎn)單易用的，就好像中國(guó)偉大的企業(yè)家馬云說過，一個(gè)好的產(chǎn)品是讓任何人學(xué)會(huì)如何使用，盡可能的降低學(xué)習(xí)成本，所以在商城系統(tǒng)的操作方面沒有要求，用戶只要學(xué)會(huì)一般的網(wǎng)購(gòu)流程即可。2.2系統(tǒng)用例圖2.2.1商品瀏覽模塊用例圖圖2-1商品瀏覽模塊用例圖2.2.2用戶信息模塊用例圖圖2-2用戶管理子系統(tǒng)用例圖2.2.3社區(qū)談?wù)撃K用例圖圖2-3社區(qū)談?wù)撃K用例圖2.2.4購(gòu)物車管理模塊用例圖圖2-4購(gòu)物車管理模塊用例圖2.3用例規(guī)約1.商品瀏覽1)查看商品列表用例規(guī)約表2-1查看商品列表用例規(guī)約表用例編號(hào)SB011用例名稱查看商品列表功能描述游客或用戶查看商品列表，列表默認(rèn)以銷量最高到低排序，其中包括關(guān)鍵字模糊搜索和分類搜索；執(zhí)行者用戶、游客、系統(tǒng)前置條件網(wǎng)絡(luò)正常；后置條件用戶或游客查看條件篩選后的商品列表涉眾利益用戶、游客基本路徑用戶/游客查看商品；用戶/游客根據(jù)商品標(biāo)題模糊查詢商品；用戶/游客根據(jù)商品分類查詢商品；系統(tǒng)獲取商品數(shù)據(jù)后展示；用戶/游客查看商品。擴(kuò)展1、用戶沒有對(duì)商品查詢進(jìn)行操作1.1、系統(tǒng)以默認(rèn)條件顯示商品；2、用戶搜索沒有結(jié)果2.1、系統(tǒng)提示搜索結(jié)果為空，并要求用戶重新搜索；字段列表商品信息；商品分類；業(yè)務(wù)規(guī)則預(yù)定業(yè)務(wù)規(guī)則：1、用戶/游客搜索的結(jié)果為空，則在頁面中提示搜索結(jié)果為空，請(qǐng)重新搜索；2、系統(tǒng)默認(rèn)列表以銷量最高到低排序；備注2)查看商品詳情用例規(guī)約表2-2查看商品詳情用例規(guī)約表用例編號(hào)SB012用例名稱查看商品詳情功能描述游客或用戶查看商品詳情；執(zhí)行者用戶、游客、系統(tǒng)前置條件網(wǎng)絡(luò)正常；后置條件用戶或游客可以查看商品的詳細(xì)信息，用戶可以將商品添加到購(gòu)物車，進(jìn)入社區(qū)談?wù)摶蛸?gòu)買商品。涉眾利益用戶、游客續(xù)表2-2基本路徑用戶/游客查看商品詳情；判斷該角色是商城用戶還是游客；提示游客登錄；允許用戶將商品放入購(gòu)物車中、進(jìn)入社區(qū)談?wù)摶蛸?gòu)買；游客只能查看商品詳情；擴(kuò)展1、游客進(jìn)行加入購(gòu)物車、進(jìn)入社區(qū)談?wù)摶蛸?gòu)買操作1.1、系統(tǒng)提示游客進(jìn)行登錄；2、用戶將商品提交到購(gòu)物車2.1、加入成功；2.2、庫存為空，加入失敗；3、用戶購(gòu)買商品3.1、提交訂單；3.2、庫存為零，購(gòu)買失?。蛔侄瘟斜砩唐访Q；商品編號(hào)；商品數(shù)量；售價(jià)；規(guī)格；商品分類；庫存業(yè)務(wù)規(guī)則預(yù)定業(yè)務(wù)規(guī)則：1、當(dāng)商品庫存不為零時(shí)，用戶才能加入購(gòu)物車或購(gòu)買；備注2.用戶信息1）填寫個(gè)人基礎(chǔ)信息表2-3填寫個(gè)人基礎(chǔ)信息用例規(guī)約用例編號(hào)SB003用例名稱填寫個(gè)人基礎(chǔ)信息功能描述已登錄的用戶填寫和完善個(gè)人基礎(chǔ)信息執(zhí)行者用戶、系統(tǒng)前置條件網(wǎng)絡(luò)正常；用戶已登錄；用戶打開個(gè)人信息頁后置條件用戶保存?zhèn)€人基礎(chǔ)信息成功涉眾利益用戶填寫完個(gè)人基本信息后，系統(tǒng)可以獲取該信息基本路徑1、用戶設(shè)置頭像、昵稱、郵箱、居住地區(qū)、個(gè)人愛好選擇、購(gòu)物愛好等個(gè)人基礎(chǔ)信息；。2、系統(tǒng)判斷郵箱、居住地址是否正確；3、用戶提交個(gè)人基礎(chǔ)信息；4、點(diǎn)擊提交，個(gè)人基礎(chǔ)信息已完善；擴(kuò)展1、用戶取消填寫個(gè)人基礎(chǔ)信息1.1、結(jié)束流程；2、用戶沒有填寫必填項(xiàng)2.1、系統(tǒng)提示用戶填寫必填項(xiàng)，并禁止提交。3、系統(tǒng)錯(cuò)誤3.1、用戶再次填寫個(gè)人基本信息續(xù)表2-3字段列表頭像；昵稱；郵箱；居住地區(qū)，購(gòu)物愛好選擇；生日；身份證號(hào)業(yè)務(wù)規(guī)則預(yù)定業(yè)務(wù)規(guī)則：1、郵箱、購(gòu)物愛好選擇、生日為必填。2、居住地區(qū)具體到市/縣，下拉選擇框；3、郵箱必須是正確的郵箱格式。備注2）收貨地址用例規(guī)約表2-4收貨地址用例規(guī)約表用例編號(hào)SB004用例名稱填寫收貨地址功能描述用戶在提交訂單或個(gè)人信息中填寫收貨地址執(zhí)行者用戶、系統(tǒng)前置條件網(wǎng)絡(luò)正常；用戶已登錄后置條件用戶已填寫收貨地址，系統(tǒng)保存收貨地址成功涉眾利益用戶可以在提交訂單時(shí)選擇已經(jīng)存在的收貨地址信息，或者直接創(chuàng)建新的收貨地址信息?；韭窂接脩舸蜷_個(gè)人信息頁，進(jìn)入收貨地址列表頁；創(chuàng)建或編輯、刪除收貨地址；用戶必須填寫詳細(xì)收貨地址、收貨人、手機(jī)號(hào)碼；用戶也可以在提交訂單時(shí)新建收貨地址；系統(tǒng)成功保存收貨地址信息；6、用戶管理收貨地址。擴(kuò)展1、用戶取消填寫收貨地址信息1.1、結(jié)束流程；2、用戶沒有填寫必填項(xiàng)2.1、系統(tǒng)提示用戶填寫必填項(xiàng)，并禁止提交。3、系統(tǒng)出錯(cuò)3.1、用戶重新填寫個(gè)人基礎(chǔ)信息4、提交訂單時(shí)沒有需要的收貨地址4.1、新建收貨地址字段列表詳細(xì)收貨地址；收貨人；手機(jī)號(hào)碼業(yè)務(wù)規(guī)則預(yù)定業(yè)務(wù)規(guī)則：1、所有表單字段為必填。2、詳細(xì)收貨地址由省市區(qū)+詳細(xì)地區(qū)組成；備注3）默認(rèn)收貨地址用例規(guī)約表2-5默認(rèn)收貨地址用例規(guī)約表用例編號(hào)SB005用例名稱設(shè)置默認(rèn)收貨地址功能描述用戶在收貨地址列表設(shè)置收貨地址執(zhí)行者用戶、系統(tǒng)前置條件網(wǎng)絡(luò)正常；用戶已登錄；有一個(gè)以上的收貨地址信息后置條件默認(rèn)收貨地址設(shè)置成功涉眾利益用戶基本路徑用戶打開收貨地址頁；用戶設(shè)置一條收貨地址為默認(rèn)收貨地址；系統(tǒng)數(shù)據(jù)更新；默認(rèn)收貨地址顯示在列表第一條；設(shè)置成功；擴(kuò)展1、用戶取消設(shè)置默認(rèn)收貨地址1.1、結(jié)束流程；2、系統(tǒng)出錯(cuò)2.1、用戶重新設(shè)置默認(rèn)收貨地址字段列表默認(rèn)收貨地址業(yè)務(wù)規(guī)則預(yù)定業(yè)務(wù)規(guī)則：1、用戶收貨地址列表中必要有一條以上的收貨地址信息才能設(shè)置默認(rèn)收貨地址。2、默認(rèn)收貨地址顯示在列表的首位，并帶有“默認(rèn)”標(biāo)簽；備注3.訂單管理1）查看訂單狀態(tài)表2-6查看訂單狀態(tài)用例規(guī)約表用例編號(hào)SB031用例名稱查看訂單狀態(tài)功能描述用戶創(chuàng)建了訂單，進(jìn)行訂單操作并查看訂單狀態(tài)執(zhí)行者用戶、系統(tǒng)前置條件網(wǎng)絡(luò)正常；用戶創(chuàng)建了訂單后置條件用戶查看訂單列表和狀態(tài)涉眾利益用戶基本路徑用戶創(chuàng)建訂單；用戶查看訂單的狀態(tài)，分別是“全部”、“待付款”、“待收貨”、“已完成”、“已取消”；3、用戶切換tab欄選擇查看訂單的狀態(tài)續(xù)表2-6擴(kuò)展1、用戶沒有創(chuàng)建和提交訂單1.1、五個(gè)狀態(tài)均為空數(shù)據(jù)；2、系統(tǒng)出錯(cuò)2.1、系統(tǒng)顯示數(shù)據(jù)有問題，提示用戶刷新；字段列表狀態(tài)；訂單商品規(guī)格；訂單商品數(shù)量；業(yè)務(wù)規(guī)則預(yù)定業(yè)務(wù)規(guī)則：1、五個(gè)狀態(tài)的type從1到5排序；備注2）管理訂單表2-7管理訂單用例規(guī)約表用例編號(hào)SB031用例名稱管理訂單功能描述用戶對(duì)訂單進(jìn)行支付、刪除、收貨等操作執(zhí)行者用戶、系統(tǒng)前置條件網(wǎng)絡(luò)正常；用戶創(chuàng)建了訂單后置條件用戶修改訂單的狀態(tài)涉眾利益用戶基本路徑用戶創(chuàng)建并提交訂單；十分鐘內(nèi)未支付，訂單狀態(tài)為“待支付”；系統(tǒng)監(jiān)聽用戶的支付情況，十分鐘內(nèi)未支付。系統(tǒng)自動(dòng)把訂單修改成為“已取消”狀態(tài)；用戶也可自行取消訂單的支付；用戶支付成功，訂單狀態(tài)從“待支付”變?yōu)椤按肇洝?；用戶點(diǎn)擊收貨，訂單狀態(tài)從“待收貨”變?yōu)椤耙淹瓿伞?；用戶查看所有狀態(tài)下訂單的詳情；用戶可以刪除已完成的訂單；擴(kuò)展用戶支付失敗1.1更換支付方式；1.2取消支付；字段列表訂單狀態(tài)；訂單詳情信息；是否刪除；業(yè)務(wù)規(guī)則預(yù)定業(yè)務(wù)規(guī)則：1、用戶只能對(duì)“已完成”和“已取消”的訂單進(jìn)行刪除操作；備注3）支付方式表2-8支付方式用例規(guī)約表用例編號(hào)SB033用例名稱選擇支付方式功能描述用戶在支付訂單時(shí)選擇支付方式執(zhí)行者用戶、系統(tǒng)前置條件網(wǎng)絡(luò)正常；用戶創(chuàng)建了訂單，還沒支付后置條件用戶選擇支付方式并以這種方式支付金額涉眾利益用戶基本路徑1、用戶選擇商品并提交訂單；2、系統(tǒng)提示選擇支付方式；3、用戶選擇一種支付方式；擴(kuò)展無字段列表支付方式；業(yè)務(wù)規(guī)則預(yù)定業(yè)務(wù)規(guī)則：1、支付方式有支付寶、微信支付、貨到付款等三種方式；備注4）選擇送貨時(shí)間表2-9選擇送貨時(shí)間用例規(guī)約表用例編號(hào)SB034用例名稱選擇送貨時(shí)間功能描述用戶在支付訂單時(shí)選擇支付方式后選擇送貨時(shí)間執(zhí)行者用戶、系統(tǒng)前置條件網(wǎng)絡(luò)正常；用戶創(chuàng)建訂單并選擇付款方式后置條件用戶已選擇送貨時(shí)間涉眾利益用戶基本路徑用戶選擇商品并提交訂單；系統(tǒng)選擇了支付方式；然后選擇送貨時(shí)間；擴(kuò)展無字段列表送貨時(shí)間；業(yè)務(wù)規(guī)則預(yù)定業(yè)務(wù)規(guī)則：1、送貨收貨精確到天；備注4.購(gòu)物車管理1）查看購(gòu)物車列表表2-10查看購(gòu)物車信息用例規(guī)約表用例編號(hào)SB051用例名稱查看購(gòu)物車列表功能描述用戶查看購(gòu)物車列表，并查看購(gòu)物車信息續(xù)表2-10執(zhí)行者用戶、系統(tǒng)前置條件網(wǎng)絡(luò)正常；用戶已登錄后置條件用戶成功查看購(gòu)物車列表涉眾利益用戶基本路徑用戶已登錄；用戶查看購(gòu)物車列表；若購(gòu)物車列表為空，則提示購(gòu)物車沒有商品，請(qǐng)?zhí)砑?；?gòu)物車不為空，查看購(gòu)物車商品信息列表；擴(kuò)展1、用戶沒有登錄1.1、系統(tǒng)提示用戶去登陸；2、購(gòu)物車?yán)锏纳唐范际强盏?.1、用戶選擇要添加到購(gòu)物車的商品字段列表購(gòu)物車商品；商品數(shù)量；商品信息；業(yè)務(wù)規(guī)則無備注2）管理購(gòu)物車表2-11管理購(gòu)物車用例規(guī)約表用例編號(hào)SB051用例名稱管理購(gòu)物車功能描述用戶管理購(gòu)物車，包括刪除無效商品、刪除商品和向購(gòu)物車添加商品執(zhí)行者用戶、系統(tǒng)前置條件網(wǎng)絡(luò)正常；用戶已登錄后置條件系統(tǒng)處理用戶的操作涉眾利益用戶基本路徑用戶在商品詳細(xì)信息頁面上將商品添加到購(gòu)物車；系統(tǒng)查詢商品是否有庫存；把商品加入購(gòu)物車；用戶清除加入購(gòu)物車后庫存或其他原因不能結(jié)算的商品；用戶刪除不需要的商品；擴(kuò)展1、用戶沒有登錄1.1、系統(tǒng)提示用戶去登陸；2、購(gòu)物車商品為空2.1、用戶去挑選商品將其放入購(gòu)物車列表中；3、購(gòu)物車中的商品過期3.1過期商品無法結(jié)算；字段列表購(gòu)物車商品；商品數(shù)量；商品信息；是否失效；是否被刪除；業(yè)務(wù)規(guī)則無備注3）購(gòu)物車結(jié)算表2-12購(gòu)物車結(jié)算用例規(guī)約表用例編號(hào)SB051用例名稱購(gòu)物車結(jié)算功能描述用戶清點(diǎn)購(gòu)物車中的商品執(zhí)行者用戶、系統(tǒng)前置條件網(wǎng)絡(luò)正常；用戶已登錄；結(jié)算商品有效后置條件用戶成功結(jié)算涉眾利益用戶基本路徑用戶選擇需要結(jié)算的商品；選擇商品數(shù)量；提交結(jié)算；系統(tǒng)保存結(jié)算信息。擴(kuò)展無字段列表商品數(shù)量；商品信息；業(yè)務(wù)規(guī)則無備注2.4本章總結(jié)本章主要從軟硬件、功能、非功能、技術(shù)、操作五個(gè)方面分析了基于Vue框架積木網(wǎng)上商城系統(tǒng)的需求，并且用用例圖和用例規(guī)約表說明了各功能模塊的功能、業(yè)務(wù)和規(guī)則，展示系統(tǒng)各組件的主要功能和聯(lián)系。

第3章系統(tǒng)設(shè)計(jì)3.1系統(tǒng)總體功能設(shè)計(jì)3.1.1系統(tǒng)總體設(shè)計(jì)積木網(wǎng)上商城系統(tǒng)總功能模塊如圖3-1所示：圖3-1系統(tǒng)總功能模塊圖3.2系統(tǒng)類圖圖3-2系統(tǒng)類圖3.3數(shù)據(jù)庫設(shè)計(jì)作為一個(gè)商城系統(tǒng)，數(shù)據(jù)庫設(shè)計(jì)上需要關(guān)聯(lián)多個(gè)表以查詢和更新信息，其中商品sku(庫存量單位）數(shù)據(jù)較為復(fù)雜，一個(gè)產(chǎn)品的多種屬性形成了層級(jí)之間的組合，加上商城要處理用戶的個(gè)人信息、購(gòu)物車信息和訂單信息。本系統(tǒng)使用的數(shù)據(jù)庫是MYSQL數(shù)據(jù)庫，這個(gè)數(shù)據(jù)庫有體積小、高效、開源的特點(diǎn)，非常適合用于本系統(tǒng)的開發(fā)，本節(jié)將對(duì)系統(tǒng)用到的數(shù)據(jù)庫表結(jié)構(gòu)進(jìn)行詳細(xì)設(shè)計(jì)。3.3.1用戶表設(shè)計(jì)SB_USER表:用戶結(jié)構(gòu)表中id為自增字段，其中用戶名、密碼、地址、頭像、郵箱設(shè)置為非空，用戶必須填寫這些字段。表3-1用戶結(jié)構(gòu)表列名類型是否允許為空備注Idint(11)NO用戶編號(hào),主鍵usernamevarchar(12)NO用戶名passwordvarchar(50)NO密碼sexintYES性別(1男，2女，3保密)phoneint(11)NO電話emailvarchar(50)NO郵箱addressvarchar(50)YES收貨地址photovarchar(100)YES頭像birthdatetimeYES生日ID_cardvarchar(50)YES身份證號(hào)3.3.2商品表設(shè)計(jì)SB_GOODS表:商品結(jié)構(gòu)表中id為自增字段，goods_spec為聯(lián)系規(guī)格表的外鍵，其中商品名稱、商品編號(hào)、售價(jià)、規(guī)格、庫存為非空字段。表3-2商品結(jié)構(gòu)表列名類型是否允許為空備注Idint(11)NO商品ID,主鍵goods_namevarchar(12)NO商品名稱goods_snvarchar(12)NO商品編號(hào)goods_numberintYES商品數(shù)量goods_priceintNO售價(jià)goods_specvarchar(50)NO規(guī)格goods_classvarchar(50)YES商品分類goods_stockintNO庫存3.4

系統(tǒng)流程圖系統(tǒng)流程圖是用戶、管理員對(duì)積木網(wǎng)上商城系統(tǒng)的流程進(jìn)行分析說明，主要流程是用戶從注冊(cè)登錄賬號(hào)開始，完善個(gè)人信息，瀏覽商城商品，加入購(gòu)物車，添加訂單，結(jié)算收貨結(jié)束流程，管理員在后臺(tái)對(duì)商品、用戶、系統(tǒng)等進(jìn)行管理操作。3.4.1商品瀏覽流程圖圖3-1商品瀏覽流程圖商品瀏覽流程敘述：首頁展示積木商品；用戶瀏覽積木商品；根據(jù)商品搜索的條件，用戶根據(jù)商品名稱的模糊查詢找到符合條件的商品；用戶頁可以通過分類篩選搜索出商品；進(jìn)入產(chǎn)品詳細(xì)信息頁面，用戶瀏覽產(chǎn)品圖片、詳細(xì)信息、規(guī)格、備注等信息；該頁面顯示商品的sku(庫存單位)信息。用戶選擇商品的規(guī)格和數(shù)量后，可以將其添加到購(gòu)物車或直接購(gòu)買；系統(tǒng)判斷用戶是否已經(jīng)登錄，如果沒有，則提示用戶打開登錄頁面進(jìn)行登錄操作；如果用戶登錄了，則進(jìn)行下一步操作；7、登錄用戶操作后，系統(tǒng)會(huì)將商品添加到購(gòu)物車或直接生成訂單，跳轉(zhuǎn)提交訂單，并進(jìn)行支付操作。3.4.2用戶信息流程圖圖3-2用戶信息流程圖用戶信息流程敘述：用戶進(jìn)入頁面前，系統(tǒng)判斷用戶狀態(tài)是否登錄，若沒登錄，提示并跳轉(zhuǎn)到登錄頁進(jìn)行登錄；用戶進(jìn)入用戶信息頁或收貨地址頁；用戶編輯用戶信息，用戶信息中所有字段都是必填的，用戶填寫全部用戶信息后提交到后臺(tái)，并結(jié)束此流程；用戶編輯收貨地址后，填寫收貨地址、收貨人、收貨手機(jī)號(hào)碼等，用戶可以選擇收貨地址作為默認(rèn)收貨地址，然后提交信息；3.4.3訂單管理流程圖圖3-3訂單管理流程圖訂單管理流程敘述：用戶在商品詳情頁按下購(gòu)買按鈕；系統(tǒng)后臺(tái)接收提交的訂單信息；3、系統(tǒng)根據(jù)訂單信息查詢?cè)撋唐穾齑媸欠癯鋵?shí)，如果庫存為零，則提示用戶該商品庫存為零，拒絕訂單提交；若庫存充足，則完善訂單信息；4、用戶可以選擇支付方式，包括支付寶、微信支付和貨到付款；5、用戶根據(jù)自己需要選擇送貨時(shí)間；6、系統(tǒng)為用戶鎖定訂單信息；7、用戶需要在十分鐘內(nèi)支付，如果用戶給沒有在十分鐘內(nèi)支付，則系統(tǒng)自動(dòng)取消該訂單，用戶可查看訂單狀態(tài)為“已取消”;用戶十分鐘內(nèi)支付成功，訂單狀態(tài)改為“待收貨”；3.4.4購(gòu)物車管理流程圖圖3-4購(gòu)物車管理流程圖購(gòu)物車管理流程敘述：在商品詳細(xì)信息頁面上選擇商品的規(guī)格和數(shù)量后，用戶按下“添加購(gòu)物車”按鈕；系統(tǒng)后臺(tái)接收提交的加入購(gòu)物車的商品信息；3、系統(tǒng)根據(jù)商品信息查詢商品的庫存是否已滿，如果庫存為零，系統(tǒng)提示用戶商品的庫存為零，并拒絕加入購(gòu)物車請(qǐng)求；如果庫存充足，則把商品加入購(gòu)物車；4、商品成功添加到購(gòu)物車后，用戶可以選擇直接結(jié)算商品或查看購(gòu)物車中的商品，并在管理商品后一起結(jié)算；5、購(gòu)物車需要結(jié)算的商品提交到訂單中，生成訂單；3.5

系統(tǒng)接口設(shè)計(jì)3.5.1Axios請(qǐng)求接口庫本系統(tǒng)是使用的是Axios請(qǐng)求接口庫，Axios是一個(gè)在promise函數(shù)的基礎(chǔ)上開發(fā)的HTTP庫，簡(jiǎn)單的講就是通過在瀏覽器中發(fā)送get、post請(qǐng)求。前幾年前端框架還沒有興起時(shí)，前端技術(shù)主要以JQuery為主，ajaxREF_Ref4301\r[12]能很好地適應(yīng)JQuery，但是由于Vue、ReactREF_Ref24266\r\h[15]等前端框架的興起與發(fā)展，框架的優(yōu)點(diǎn)在于不需要直接操作Dom，所以JQuery的作用越來越小，促進(jìn)了Axios輕量級(jí)庫的發(fā)展，能替代Ajax在Vue框架里高效地請(qǐng)求后臺(tái)接口，獲取數(shù)據(jù)。Axios的特點(diǎn)在于擁有Ajax所有的功能，包括阻止所有后臺(tái)請(qǐng)求和響應(yīng)，另外增加了提供了一些并發(fā)請(qǐng)求的接口、支持PromiseAPI等新特性。3.5.2Api接口設(shè)計(jì)《基于Vue框架積木網(wǎng)上商城系統(tǒng)》接口數(shù)據(jù)來源于ThinkPhp5.0后端的后臺(tái)接口，請(qǐng)求返回以JSON為格式的數(shù)據(jù)，接口文檔寫在阿里巴巴公司開發(fā)的RAP2系統(tǒng)上。1、注冊(cè)接口地址：/api/User/userInfo類型：POST狀態(tài)碼：200請(qǐng)求接口格式：├─username:String├─password:String返回格式JSON：code:String(成功)├─data:Array(數(shù)據(jù))│├─id:Number│├─username:String│├─password:String└─msg:String(注釋)數(shù)據(jù)說明:表3-3注冊(cè)接口數(shù)據(jù)說明表序號(hào)參數(shù)名稱必須說明1code是200:請(qǐng)求成功；-200：請(qǐng)求失??；2Id是用戶ID，唯一續(xù)表3-33Username是用戶賬號(hào)/用戶名4Password是賬號(hào)密碼5Msg否提示2、提交訂單接口地址：/api/Order/goodsAccounts類型：POST狀態(tài)碼：200請(qǐng)求接口格式：├─uid:String├─spec_id:String(規(guī)格id)├─gid:String(商品id)├─number:String(購(gòu)買數(shù)量)└─address_id:String(地址id)返回接口格式JSON：├─code:String├─data:Array│└─order_sn:String(訂單號(hào))└─msg:String數(shù)據(jù)說明:表3-4注冊(cè)接口數(shù)據(jù)說明表序號(hào)參數(shù)名稱必須說明1code是200:請(qǐng)求成功；-200：請(qǐng)求失敗；2Order_sn是生成的訂單號(hào)3Msg否提示3、添加或編輯商品地址：/api/Goods/addGoods類型：POST狀態(tài)碼：200請(qǐng)求接口格式：├─goods_name:String(商品名稱)├─shop_price:String(價(jià)格)├─photo:String(封面圖)├─goods_class:String(分類)├─spec:String(規(guī)格名稱)├─spec_value:String(規(guī)格值)├─spec_goods_sku:String(規(guī)格對(duì)應(yīng)sku)├─goods_sn:String(商品編號(hào))├─keywords:String(關(guān)鍵字)├─photos:String(圖片)├─spec_goods_price:String(規(guī)格對(duì)應(yīng)價(jià)格)├─spec_goods_stock:String(規(guī)格對(duì)應(yīng)庫存)├─goods_desc:String(描述)└─is_shelves:Number(是否上架1：是；2：否)返回接口格式JSON：├─code:String(code)├─data:String└─msg:String數(shù)據(jù)說明:表3-5添加或編輯商品數(shù)據(jù)說明表序號(hào)參數(shù)名稱必須說明1code是200:請(qǐng)求成功；-200：請(qǐng)求失敗；2data是添加或編輯成功后返回的商品信息3Msg否提示4、獲取商品規(guī)格地址：/api/Spec/getGoodsSpec類型：POST狀態(tài)碼：200請(qǐng)求接口格式：├─uid:String(用戶id)└─gid:String(商品id)返回接口格式JSON：├─code:String(code)├─data:Array│├─sp_id:String(規(guī)格ID)│├─sp_name:String(規(guī)格名稱)│└─spec_value:Array(規(guī)格值)│├─sp_value_id:String(規(guī)格值ID)│└─sp_value_name:String(規(guī)格值名稱)└─msg:String數(shù)據(jù)說明:表3-6獲取商品規(guī)格數(shù)據(jù)說明表序號(hào)參數(shù)名稱必須說明1code是200:請(qǐng)求成功；-200：請(qǐng)求失??；2data是獲取商品規(guī)格后返回的規(guī)格信息3Msg否提示

第4章系統(tǒng)實(shí)現(xiàn)Vue前端框架的特點(diǎn)是使用單個(gè)頁面原理來開發(fā)應(yīng)用程序，即整個(gè)項(xiàng)目只使用一個(gè)html頁面來加載和渲染頁面，這樣的好處在于減少瀏覽器在每次加載頁面時(shí)都加載http請(qǐng)求和文件，從而減少對(duì)網(wǎng)絡(luò)的依賴；因?yàn)槭菃雾撁娴脑?，頁面在跳轉(zhuǎn)時(shí)不會(huì)有切換的效果讓用戶覺得網(wǎng)絡(luò)的延遲，路由跳轉(zhuǎn)頁面的方法讓網(wǎng)頁加載更有效率。編程時(shí)html、js、css代碼放在同一個(gè)文件里，使用@import的方法引入公共樣式，這樣子做的好處在于能更有效地將每一個(gè)頁面模塊抽離出來，方便以后的維護(hù)。4.1商品瀏覽模塊實(shí)現(xiàn)1、實(shí)現(xiàn)過程各種品牌的積木玩具商品、熱門商品、導(dǎo)購(gòu)指南；首頁使用輪播圖的形式展示熱門的玩具商品，由于系統(tǒng)頁面上多處出現(xiàn)商品的展示，所以為了減少代碼的重復(fù)性，提高復(fù)用性，系統(tǒng)采用組件的形式處理商品展示的代碼，部分代碼實(shí)現(xiàn)如下：<template>

<li

class="GoodsItem">

<div

class="imgBox">

<img

:src="img"

alt="商品圖片"

@click="navTo('/mall/goods/'+id)"/>

</div>

<div

class="goodsInfo">

<span

class="goodsName

ellipsis"

@click="navTo('/mall/goods/'+id)">{{name}}</span>

<span

class="price">{{'￥'+price}}</span>

</div>

</li></template>2、界面展示圖4-1首頁界面圖4-2商品詳情界面生成商品規(guī)格代碼如下：addGuigeTableDataInput(id,

val)

{

this.addGuigeVal[0].ac_guigeVal.forEach((val,

index)

=>

{

if

(this.addGuigeVal[0].ac_guigeVal[index].val

!=

"")

{

this.addGuigeVal[1].ac_guigeVal.forEach((val1,

index1)

=>

{

if

(this.addGuigeVal[1].ac_guigeVal[index1].val

!=

"")

{

let

params

=

{

msg:

this.addGuigeVal[0].ac_guigeVal[index].val,

msg2:

this.addGuigeVal[1].ac_guigeVal[index1].val,

price:

"",

stock:

"",

allMsg:

this.addGuigeVal[0].ac_guigeVal[index].val

+

this.addGuigeVal[1].ac_guigeVal[index1].val

};

this.addGuigeTableData.push(params);

}

});

}

});

var

hash

=

{};

this.addGuigeTableData

=

this.addGuigeTableData.reduce(function(

item,

next

)

{

hash[next.allMsg]

?

""

:

(hash[next.allMsg]

=

true

&&

item.push(next));

return

item;

},

[]);

}4.2訂單支付模塊實(shí)現(xiàn)1、實(shí)現(xiàn)過程當(dāng)用戶創(chuàng)建了訂單之后，系統(tǒng)提示支付，用戶點(diǎn)擊支付之后，系統(tǒng)會(huì)請(qǐng)求第三方支付接口（支付寶或微信），第三方支付平臺(tái)會(huì)返回支付狀態(tài)和支付編號(hào)，系統(tǒng)根據(jù)第三方支付回調(diào)函數(shù)返回的數(shù)據(jù)，在頁面上生成臨時(shí)支付二維碼，用戶掃碼后，系統(tǒng)會(huì)使用setInterval函數(shù)每秒請(qǐng)求支付狀態(tài)接口，若用戶支付成功，第三方支付接口返回支付成功狀態(tài)，完成支付操作。代碼實(shí)現(xiàn)如下：

$('#recharge-model').modal('show');

timer

=

setInterval(function

()

{

$.ajax({

type:

"POST",

url:

"/index.php?ac=pay_orderCheck",

dataType:

"json",

data:

{

order_sn:

data.data.order_sn

},

success:

function

(data)

{

if

(data.code

==

'SUCCESS')

{

layer.msg(data.msg);

$('#recharge-model').modal(

'hide');

clearInterval(timer)

setTimeout(window.location

.reload,

4000);

}

},

error:

function

()

{

layer.msg('網(wǎng)絡(luò)異常');

}

});

},

1000);

2、界面展示圖4-3訂單支付界面4.3用戶信息模塊實(shí)現(xiàn)1、實(shí)現(xiàn)過程本模塊是用于收集商城用戶的個(gè)人信息，功能實(shí)現(xiàn)上是用戶登錄后填寫自己的個(gè)人信息，同時(shí)必填項(xiàng)進(jìn)行檢查，這種檢查是前端檢查，速度快一點(diǎn)，因?yàn)樗恍枰祷睾蠖藬?shù)據(jù)。同時(shí)，提示信息使用Element界面框架風(fēng)格，使整個(gè)項(xiàng)目更加美觀。個(gè)人信息模塊使用Vue框架中的v-model語法糖來雙向綁定數(shù)據(jù)，當(dāng)用戶實(shí)時(shí)輸入數(shù)據(jù)時(shí)，輸入框的值和一個(gè)數(shù)據(jù)是綁定的,輸入框的值變化,和他綁定的值也會(huì)發(fā)生變化，個(gè)人信息表單信息通過qs+axios傳輸數(shù)據(jù)到后端，qs是一個(gè)庫，它為查詢字符串解析和序列化增加了一些安全性，并且可以自動(dòng)將數(shù)據(jù)轉(zhuǎn)換成序列化格式。2、界面展示圖4-4用戶信息界面圖4-5收貨地址界面設(shè)置默認(rèn)收貨地址代碼：setPrime(id)

{

var

that

=

this;

this.$confirm("是否設(shè)置為默認(rèn)地址?",

"提示",

{

confirmButtonText:

"確定",

cancelButtonText:

"取消",

type:

"warning"

})

.then(()

=>

{

let

postData

=

this.$qs.stringify({

uid:

this.uid,

token:

this.token,

id:

id

});

const

res

=

setPrime(postData);

res

.then(res

=>

{

that.getAddressList();

console.log(res.data);

})

.catch(e

=>

{

that.$message({

duration:

3000,

showClose:

true,

message:

e,

center:

true,

type:

"error"

});

});

})

.catch(()

=>

{

this.$message({

type:

"info",

message:

"已取消刪除"

});

});

},圖4-6設(shè)置收貨地址界面4.4訂單管理模塊實(shí)現(xiàn)1、實(shí)現(xiàn)過程在我的訂單頁面，用戶可以通過滑動(dòng)或者點(diǎn)擊選項(xiàng)卡的方式來查詢自己訂單的狀態(tài)。除了顯示訂單的基本信息，用戶還可以根據(jù)訂單的不同狀態(tài)進(jìn)行不同的操作。2、界面展示圖4-7訂單管理界面圖4-8提交訂單界面4.5購(gòu)物車管理模塊實(shí)現(xiàn)1、實(shí)現(xiàn)過程購(gòu)物車功能使主要是使用getCarList、updateCar、deleteCar等方法實(shí)現(xiàn)，請(qǐng)求數(shù)據(jù)接口訪問購(gòu)物車列表，當(dāng)列表數(shù)據(jù)中的iskucun字段為0時(shí)，頁面顯示該商品為不能購(gòu)買，用戶可以通過deleteCar方法傳入該商品id以刪除失效的商品；2、界面展示圖4-9購(gòu)物車管理界面

第5章系統(tǒng)測(cè)試5.1測(cè)試的目的項(xiàng)目的開發(fā)過程中，往往會(huì)出現(xiàn)數(shù)據(jù)或樣式的漏洞，而只觀察代碼是不可能全部找出的，所以在項(xiàng)目開發(fā)完成后，需要不斷地進(jìn)行測(cè)試找出項(xiàng)目之中的漏洞，通過黑盒測(cè)試及白盒測(cè)試REF_Ref5049\r[13]等測(cè)試方式來達(dá)到盡量減少漏洞的存在，讓項(xiàng)目能正常的運(yùn)行，一般這個(gè)測(cè)試的過程需要進(jìn)行多遍，過程時(shí)間要比開發(fā)時(shí)間更長(zhǎng)，來使項(xiàng)目完成度更高。5.2功能測(cè)試5.2.1商品瀏覽模塊測(cè)試表5-1商品瀏覽模塊測(cè)試表測(cè)試編號(hào)測(cè)試功能測(cè)試操作測(cè)試結(jié)果測(cè)試人員測(cè)試時(shí)間1檢查頁面是否響應(yīng)式處理多次由電腦端到移動(dòng)端分辨率切換多端樣式自適應(yīng)改變江兆堯2020-03-182模糊搜索模糊輸入商品標(biāo)題搜索沒有商品，提示結(jié)果為空；能正常顯示有模糊字段的商品江兆堯2020-03-183分類搜索分別點(diǎn)擊品牌、適用性別、適用年齡分類搜索商品能正常搜索和顯示不同分類的商品江兆堯2020-03-184查看商品詳情點(diǎn)擊商品圖片，后臺(tái)傳入商品ID頁面跳轉(zhuǎn)到商品詳情頁，并正常顯示商品詳情江兆堯2020-03-185.2.2用戶信息模塊測(cè)試表5-2用戶信息模塊測(cè)試表測(cè)試編號(hào)測(cè)試功能測(cè)試操作測(cè)試結(jié)果測(cè)試人員測(cè)試時(shí)間1用戶上傳頭像點(diǎn)擊上傳頭像成功上傳頭像，并返回上傳結(jié)果江兆堯2020-03-182檢查郵箱格式輸入錯(cuò)誤的郵件格式提示郵箱格式錯(cuò)誤江兆堯2020-03-183從中國(guó)地區(qū)數(shù)據(jù)庫中獲取地區(qū)信息