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

PAGE 基于Vue框架積木網(wǎng)上商城的設(shè)計(jì)與實(shí)現(xiàn)摘要：隨著物資生活逐漸完善的今天，許多家庭越來(lái)越重視兒童的教育問(wèn)題，兒童的智力發(fā)育問(wèn)題漸漸受到大家的關(guān)注和重視，如何讓兒童身心得到健康發(fā)展是很重要的社會(huì)問(wèn)題?？茖W(xué)研究認(rèn)為5-8歲是少兒的智力發(fā)展的重要階段，在這個(gè)階段之中益智玩具是兒童智力開(kāi)發(fā)的手段之一，把游戲當(dāng)做一種教育，將教育跟娛樂(lè)結(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ì)兒童的智商能力開(kāi)發(fā)上能起到很大的幫助作用，同時(shí)能增強(qiáng)家長(zhǎng)或者少兒教育機(jī)構(gòu)與兒童之間的互動(dòng)。所以開(kāi)發(fā)一個(gè)積木網(wǎng)上商城發(fā)展前景巨大，能讓社會(huì)上有需要的人帶來(lái)很好的平臺(tái)。使用2016年5月份發(fā)布的Vue.js2.0前端漸進(jìn)式Javascript框架REF_Ref1009\r[1]加上elementUI框架來(lái)作為項(xiàng)目的開(kāi)發(fā)平臺(tái)。Vue框架針對(duì)如今多屏分辨率不統(tǒng)一的趨勢(shì)下，能更有效率地響應(yīng)不同設(shè)備之間分辨率的差異化適應(yīng)，同時(shí)實(shí)現(xiàn)前端與后端的代碼分離，大大地提高了前后端的開(kāi)發(fā)速度和分清開(kāi)發(fā)職責(zé)；elementUI框架是如今在Vue平臺(tái)上支持度較高的UI框架，組件顯示美觀，同時(shí)使用方便。使用vscode作為本項(xiàng)目的開(kāi)發(fā)工具，它的優(yōu)點(diǎn)在于開(kāi)發(fā)界面非常簡(jiǎn)潔、使用方便并且具有代碼糾錯(cuò)提示。對(duì)本系統(tǒng)進(jìn)行需求分析和詳細(xì)設(shè)計(jì)，通過(guò)技術(shù)開(kāi)發(fā)系統(tǒng)的功能和界面完成本項(xiàng)目的開(kāi)發(fā)，最后對(duì)各個(gè)功能模塊進(jìn)行測(cè)試和優(yōu)化?；赩ue框架積木網(wǎng)上商城是針對(duì)兒童開(kāi)發(fā)智力，方便家長(zhǎng)和少兒教育機(jī)構(gòu)挑選和購(gòu)買(mǎi)積木玩具所開(kāi)發(fā)的一套網(wǎng)上商城系統(tǒng)，本商城與現(xiàn)在網(wǎng)絡(luò)上的商城具有特色的地方在于，積木網(wǎng)上商城專營(yíng)各種積木類益智玩具，面對(duì)市面上參差不齊的積木商品，材質(zhì)和安全性得不到保障的情況下，本商城專營(yíng)積木玩具商品，最大的特點(diǎn)就是保障其商品安全性，經(jīng)過(guò)人工篩選才會(huì)上架，提供適合不同年齡段的兒童的積木玩具商品。關(guān)鍵詞：Vue框架，積木網(wǎng)上商城，開(kāi)發(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開(kāi)發(fā)技術(shù)與開(kāi)發(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)物車(chē)管理模塊用例圖 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ù)庫(kù)設(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)物車(chē)管理流程圖 283.5

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

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

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

系統(tǒng)接口設(shè)計(jì)3.5.1Axios請(qǐng)求接口庫(kù)本系統(tǒng)是使用的是Axios請(qǐng)求接口庫(kù)，Axios是一個(gè)在promise函數(shù)的基礎(chǔ)上開(kāi)發(fā)的HTTP庫(kù)，簡(jiǎn)單的講就是通過(guò)在瀏覽器中發(fā)送get、post請(qǐng)求。前幾年前端框架還沒(méi)有興起時(shí)，前端技術(shù)主要以JQuery為主，ajaxREF_Ref4301\r[12]能很好地適應(yīng)JQuery，但是由于Vue、ReactREF_Ref24266\r\h[15]等前端框架的興起與發(fā)展，框架的優(yōu)點(diǎn)在于不需要直接操作Dom，所以JQuery的作用越來(lái)越小，促進(jìn)了Axios輕量級(jí)庫(kù)的發(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ù)來(lái)源于ThinkPhp5.0后端的后臺(tái)接口，請(qǐng)求返回以JSON為格式的數(shù)據(jù)，接口文檔寫(xiě)在阿里巴巴公司開(kāi)發(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ù)說(shuō)明:表3-3注冊(cè)接口數(shù)據(jù)說(shuō)明表序號(hào)參數(shù)名稱必須說(shuō)明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)買(mǎi)數(shù)量)└─address_id:String(地址id)返回接口格式JSON：├─code:String├─data:Array│└─order_sn:String(訂單號(hào))└─msg:String數(shù)據(jù)說(shuō)明:表3-4注冊(cè)接口數(shù)據(jù)說(shuō)明表序號(hào)參數(shù)名稱必須說(shuō)明1code是200:請(qǐng)求成功；-200：請(qǐng)求失?。?Order_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)庫(kù)存)├─goods_desc:String(描述)└─is_shelves:Number(是否上架1：是；2：否)返回接口格式JSON：├─code:String(code)├─data:String└─msg:String數(shù)據(jù)說(shuō)明:表3-5添加或編輯商品數(shù)據(jù)說(shuō)明表序號(hào)參數(shù)名稱必須說(shuō)明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ù)說(shuō)明:表3-6獲取商品規(guī)格數(shù)據(jù)說(shuō)明表序號(hào)參數(shù)名稱必須說(shuō)明1code是200:請(qǐng)求成功；-200：請(qǐng)求失??；2data是獲取商品規(guī)格后返回的規(guī)格信息3Msg否提示

第4章系統(tǒng)實(shí)現(xiàn)Vue前端框架的特點(diǎn)是使用單個(gè)頁(yè)面原理來(lái)開(kāi)發(fā)應(yīng)用程序，即整個(gè)項(xiàng)目只使用一個(gè)html頁(yè)面來(lái)加載和渲染頁(yè)面，這樣的好處在于減少瀏覽器在每次加載頁(yè)面時(shí)都加載http請(qǐng)求和文件，從而減少對(duì)網(wǎng)絡(luò)的依賴；因?yàn)槭菃雾?yè)面的原因，頁(yè)面在跳轉(zhuǎn)時(shí)不會(huì)有切換的效果讓用戶覺(jué)得網(wǎng)絡(luò)的延遲，路由跳轉(zhuǎn)頁(yè)面的方法讓網(wǎng)頁(yè)加載更有效率。編程時(shí)html、js、css代碼放在同一個(gè)文件里，使用@import的方法引入公共樣式，這樣子做的好處在于能更有效地將每一個(gè)頁(yè)面模塊抽離出來(lái)，方便以后的維護(hù)。4.1商品瀏覽模塊實(shí)現(xiàn)1、實(shí)現(xiàn)過(guò)程各種品牌的積木玩具商品、熱門(mén)商品、導(dǎo)購(gòu)指南；首頁(yè)使用輪播圖的形式展示熱門(mén)的玩具商品，由于系統(tǒng)頁(yè)面上多處出現(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首頁(yè)界面圖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)過(guò)程當(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ù)，在頁(yè)面上生成臨時(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)過(guò)程本模塊是用于收集商城用戶的個(gè)人信息，功能實(shí)現(xiàn)上是用戶登錄后填寫(xiě)自己的個(gè)人信息，同時(shí)必填項(xiàng)進(jìn)行檢查，這種檢查是前端檢查，速度快一點(diǎn)，因?yàn)樗恍枰祷睾蠖藬?shù)據(jù)。同時(shí)，提示信息使用Element界面框架風(fēng)格，使整個(gè)項(xiàng)目更加美觀。個(gè)人信息模塊使用Vue框架中的v-model語(yǔ)法糖來(lái)雙向綁定數(shù)據(jù)，當(dāng)用戶實(shí)時(shí)輸入數(shù)據(jù)時(shí)，輸入框的值和一個(gè)數(shù)據(jù)是綁定的,輸入框的值變化,和他綁定的值也會(huì)發(fā)生變化，個(gè)人信息表單信息通過(guò)qs+axios傳輸數(shù)據(jù)到后端，qs是一個(gè)庫(kù)，它為查詢字符串解析和序列化增加了一些安全性，并且可以自動(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)過(guò)程在我的訂單頁(yè)面，用戶可以通過(guò)滑動(dòng)或者點(diǎn)擊選項(xiàng)卡的方式來(lái)查詢自己訂單的狀態(tài)。除了顯示訂單的基本信息，用戶還可以根據(jù)訂單的不同狀態(tài)進(jìn)行不同的操作。2、界面展示圖4-7訂單管理界面圖4-8提交訂單界面4.5購(gòu)物車(chē)管理模塊實(shí)現(xiàn)1、實(shí)現(xiàn)過(guò)程購(gòu)物車(chē)功能使主要是使用getCarList、updateCar、deleteCar等方法實(shí)現(xiàn)，請(qǐng)求數(shù)據(jù)接口訪問(wèn)購(gòu)物車(chē)列表，當(dāng)列表數(shù)據(jù)中的iskucun字段為0時(shí)，頁(yè)面顯示該商品為不能購(gòu)買(mǎi)，用戶可以通過(guò)deleteCar方法傳入該商品id以刪除失效的商品；2、界面展示圖4-9購(gòu)物車(chē)管理界面

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