I基于vue的移動(dòng)端購物商城系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)研究首先從國內(nèi)的背景出發(fā)，并結(jié)合現(xiàn)實(shí)應(yīng)用場(chǎng)景，闡述開發(fā)本系統(tǒng)背后的 3 3 4 4 5 5 5 6第3章系統(tǒng)分析 7 73.1.1系統(tǒng)經(jīng)濟(jì)可行性分析 73.1.2系統(tǒng)實(shí)用性可行性分析 7 8第4章系統(tǒng)設(shè)計(jì) 94.1系統(tǒng)功能結(jié)構(gòu)圖 94.2系統(tǒng)流程圖 4.3數(shù)據(jù)庫設(shè)計(jì) 14.3.1系統(tǒng)實(shí)體圖 4.3.2數(shù)據(jù)庫信息表 第5章系統(tǒng)測(cè)試 5.1系統(tǒng)測(cè)試目的 215.2系統(tǒng)測(cè)試過程 5.3系統(tǒng)測(cè)試結(jié)果 第6章系統(tǒng)功能展示 6.1登錄功能 6.2首頁功能 6.3分類功能 6.4購物車功能 6.5總結(jié) 參考文獻(xiàn) 3隨著互聯(lián)網(wǎng)的不斷進(jìn)步與發(fā)展，網(wǎng)購已經(jīng)變成人們生活不可或缺的一部分。網(wǎng)購具有方便，簡(jiǎn)單，物美價(jià)廉的特點(diǎn)，導(dǎo)致它一出生，就受到了人們的追捧。網(wǎng)購與傳統(tǒng)實(shí)體店相比，具有很大的優(yōu)勢(shì)：第一個(gè)就是價(jià)格相對(duì)于實(shí)體店來說比較低，因?yàn)椴恍枰倮U納房租、水電等額外費(fèi)用，使得成本大大降低；第二點(diǎn)是然后去下一個(gè)店，費(fèi)時(shí)費(fèi)力，而反觀網(wǎng)購，只需要打開手機(jī)，把自己要買的商品加入購物車，然后付款，在家等著收貨就可以了；第三點(diǎn)也是最為重要的一點(diǎn)就是這種網(wǎng)購操作提供查看商品評(píng)價(jià)的功能，用戶通過查看評(píng)價(jià)就能知道商品的好壞，但是在實(shí)體店用不會(huì)讓你提前知道商品的好壞，只有買完才知道：第四點(diǎn)很多實(shí)體店，都會(huì)有商品離店，概不負(fù)責(zé)的字樣，買到不好的商品，就只能怪自己倒霉了，但是網(wǎng)購不會(huì)出現(xiàn)這樣的情況，對(duì)商品不滿意7天之內(nèi)是可以免費(fèi)退換的。具有如此多的優(yōu)點(diǎn)，網(wǎng)購成為購物首選是必然的結(jié)果。研究網(wǎng)購系統(tǒng)是非常購物街購物系統(tǒng)使用Java作為后端開發(fā)語言，前端使用Html,Vue等開發(fā)，具有購物車功能，可以添加、刪除商品，方便付款；還有對(duì)商品評(píng)價(jià)功能，為了中國電子商務(wù)在20世紀(jì)90年代開始出現(xiàn)，這個(gè)時(shí)候電子商務(wù)只是一種概念。同時(shí)這一階段出現(xiàn)了一些比較典型的電子商務(wù)企業(yè)，如8848,易趣等。隨著人們對(duì)電子商務(wù)的逐漸認(rèn)識(shí)，在新世紀(jì)產(chǎn)生了若干電子商務(wù)企業(yè)，涉及范圍也變得越來越廣泛。隨著網(wǎng)絡(luò)產(chǎn)業(yè)向縱深層次的不斷發(fā)展，更多的人參與到網(wǎng)絡(luò)產(chǎn)業(yè)中。往往是利益的驅(qū)使使得人們行為過于盲目，從03年開始中國互聯(lián)部分人放棄互聯(lián)網(wǎng)，一部分企業(yè)不得不采取一定的收縮策略甚至轉(zhuǎn)變業(yè)務(wù)。這些使得他們不得不從新定位和思考如何發(fā)展新一代的電子商務(wù)。直到網(wǎng)購方式的出4具有無法預(yù)測(cè)的增長(zhǎng)前景。電子商務(wù)還將構(gòu)筑二十一世紀(jì)新型的經(jīng)濟(jì)貿(mào)易框架。大力發(fā)展電子商務(wù)，對(duì)于國家以信息化帶動(dòng)工業(yè)化的戰(zhàn)略，實(shí)現(xiàn)跨越式發(fā)展，增1.2國內(nèi)外研究現(xiàn)狀也要發(fā)現(xiàn)其他人的優(yōu)點(diǎn)，取長(zhǎng)補(bǔ)短，努力讓自己的購物系統(tǒng)更加完善。我收集了國外的一些出名的購物平臺(tái)有亞馬遜，易趣網(wǎng)，沃爾瑪?shù)?。亞馬遜，1995年成立，最早是做圖書起家，現(xiàn)在則把范圍擴(kuò)大了許多，目前已成為全球商品品種最多的網(wǎng)上零售商和全球第二大互聯(lián)網(wǎng)企業(yè)。易趣網(wǎng)，易趣是第一個(gè)提出將市場(chǎng)概念引入電子商務(wù)購物車的網(wǎng)站。1995年底在美國成立成立，現(xiàn)在分公司遍布全球范圍。沃爾瑪，沃爾瑪作為全球最大連鎖超市集團(tuán)，其電子商務(wù)的發(fā)展也不可小視，基于全球龐大的線下用戶基礎(chǔ)，其平臺(tái)一上線流量就爆棚，雖然近幾年增長(zhǎng)趨勢(shì)有所減緩，但是依然能排在電商平臺(tái)排名第7。國內(nèi)最出名的購物網(wǎng)站就是淘寶了。淘寶是中國最大的網(wǎng)購平臺(tái)，擁有近5億的注冊(cè)用戶數(shù)，每天有超過6000萬的固定訪客，同時(shí)每天的在線商品數(shù)已經(jīng)超過了8億件，平均每分鐘售出4.8萬件商品，排名僅次于亞馬遜。在中國，淘寶的知名度很高，去大街上隨便問一個(gè)人，基本都知道。我覺得淘寶做得很成功的原因在于對(duì)商戶的管理很嚴(yán)格，所以在淘寶上面基本沒有假貨，并且優(yōu)惠活動(dòng)也是有很多的，例如雙11,雙12等等。通過調(diào)查我發(fā)現(xiàn)在全球10大購物網(wǎng)站中外國的網(wǎng)站數(shù)量是遠(yuǎn)超我們中國的，也就說明我們還有可以通過努力做到更好的地方。當(dāng)然這還因?yàn)槲覀儼殉宋覀儑抑獾膰医y(tǒng)稱為外國，所以在數(shù)量上我們很吃虧。這同時(shí)也是一種更大的壓力，俗話說的好，沒有壓力哪來的動(dòng)力，壓力可以讓人迅速進(jìn)步，在壓力的鞭1.3研究?jī)?nèi)容53.系統(tǒng)設(shè)計(jì)。第四章系統(tǒng)設(shè)計(jì)，從功能結(jié)構(gòu)、流程以第2章系統(tǒng)技術(shù)簡(jiǎn)介被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，Vue也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。核心是一個(gè)響Mybatis-plus(MP)是Mybatis的增強(qiáng)工具。在Mybatis的基礎(chǔ)上進(jìn)行增強(qiáng)。63.支持自動(dòng)生成主鍵：最多支持四種主鍵策略(包括分布式唯一ID生成器序列),可自由配置，完美解決主鍵問題。3.連接和安全。其安全機(jī)制一般包括兩個(gè)方面，一是用戶機(jī)制，二是權(quán)限機(jī)名7第3章系統(tǒng)分析在現(xiàn)在這個(gè)全民網(wǎng)購時(shí)代，基本上每個(gè)人都會(huì)有或多或少的網(wǎng)購。中國是一個(gè)人口大國，有14億的人口，所以說網(wǎng)民基數(shù)還是很大的。就按理想狀態(tài)來說，如果每人在網(wǎng)上花1元錢，那就有14億的銷售額，如果每人愿意花10元錢，那就有140億的銷售額。當(dāng)然了這只是理想的狀態(tài)來說，事實(shí)上網(wǎng)民的群體數(shù)量也沒有達(dá)到14億這么多，據(jù)統(tǒng)計(jì)，截止到2020年底，網(wǎng)民數(shù)量大約9.89億人，但這依舊是一個(gè)驚人的數(shù)字。當(dāng)然由于網(wǎng)民數(shù)量的增多，人們的需求也越來越多，這樣就導(dǎo)致了一個(gè)一個(gè)網(wǎng)購平臺(tái)的出現(xiàn)，這樣人們的選擇也多了，如果這個(gè)平臺(tái)做的不好，那么就會(huì)選擇別的平臺(tái)，所以說這也是對(duì)技術(shù)的考驗(yàn)。歸根結(jié)底來說，只要網(wǎng)購平臺(tái)做得足夠好，就不用擔(dān)心有沒有客戶，能不能賺到錢。由此來看，網(wǎng)購的好處有很多，例如方便，快捷，實(shí)惠等等。先從方便來說，人們通常買東西需要到實(shí)體店里面去買，不管離得遠(yuǎn)近都需要花費(fèi)一些時(shí)間。特別是在買衣服的時(shí)候，需要先進(jìn)店里面，然后挑選自己喜歡的衣服，接著就是進(jìn)行試穿，買衣服喜歡逛來逛去，由于是實(shí)體店，這樣需要花費(fèi)更多的時(shí)間。但是網(wǎng)購就不一樣了，打開手機(jī)里面的網(wǎng)購平臺(tái)，在首頁里面挑選看有沒有喜歡的，有的話點(diǎn)開詳情頁面對(duì)衣服有一個(gè)更詳細(xì)了解，如果不合適換一個(gè)繼續(xù)看。這就比在實(shí)體店方便的多，不用一個(gè)一個(gè)地方來回奔波。人們?cè)趯?shí)體店買一件衣服的話，快一點(diǎn)1個(gè)小時(shí)，慢一點(diǎn)可能就要10幾個(gè)小時(shí)了。如果通過網(wǎng)購這種方式的話，可能也就幾分鐘，慢的話最多一個(gè)小時(shí)吧。每一年都會(huì)發(fā)生錢包丟失事件，金錢的損失以及證件的丟失，會(huì)讓我們?cè)愀獾男那檠┥霞铀?，但是網(wǎng)購的話就能避免這樣的事情發(fā)生，我們網(wǎng)購是在網(wǎng)上支付，這樣也避免了一些不必要的糾紛。其次，網(wǎng)購的價(jià)格要比實(shí)體店優(yōu)惠很多。實(shí)體店的價(jià)格他需要考慮到房子，人工，水電等等因素，這些加在一起就導(dǎo)致它的價(jià)格無法與網(wǎng)購的價(jià)格相提并論。當(dāng)然網(wǎng)購的話就不需要考慮這么多因素，所以說網(wǎng)購的價(jià)格普遍比實(shí)體店低了很多。在加上現(xiàn)在好多的網(wǎng)購平臺(tái)為了吸引到更多的客戶，他們會(huì)發(fā)放許多優(yōu)惠券，既能達(dá)到吸引客戶的目的，又能幫客戶省錢，這豈不是一件兩全其美的事?？紤]一下，8100塊錢可以買到的東西，為什么要花200,甚至更多那，還有什么理由不網(wǎng)購那?綜上所述，做一個(gè)網(wǎng)購平臺(tái)在實(shí)用性可行性方面來說也是不用擔(dān)心的。在現(xiàn)如今社會(huì)，網(wǎng)購已然成為了生活中不可缺少的一部分。因此，網(wǎng)購平臺(tái)的競(jìng)爭(zhēng)也是越來越激烈，為了能讓購物街購物平臺(tái)在眾多平臺(tái)中脫穎而出，提出了以下幾個(gè)功能要求：1.登錄功能。每一個(gè)客戶都有不同的身份信息，為了更方便管理這些信息，每個(gè)人擁有屬于自己的賬戶密碼，這樣就不會(huì)出現(xiàn)信息混亂。2.首頁功能。首頁具有廣告，一些銷量好的商品，客戶可能會(huì)喜歡的商品等等。3.分類功能。分類可以讓客戶快速找到自己需要購買的商品，也是為了更方便的管理商品。4.購物車添加功能?？梢苑奖愕陌芽蛻粜枰徺I的所有商品放在一起，省時(shí)省5.購物車刪除功能。方便客戶把曾經(jīng)喜歡的商品丟掉，不要占用過多的購物車6.我的功能。方便客戶把自己的基本信息錄入系統(tǒng)里面，并且也方便客戶對(duì)自己的信息進(jìn)行修改、完善。9第4章系統(tǒng)設(shè)計(jì)用戶模塊購物車模塊用戶修改個(gè)人信息用戶注冊(cè)登錄制除購物車加入購物草口看商品購民商品銷量愉格詳價(jià)庫存如圖4-1,就是系統(tǒng)的功能結(jié)構(gòu)圖，從圖中我們可以清楚的看到分為三個(gè)模塊，一個(gè)是用戶模塊，一個(gè)是商品模塊，還有一個(gè)購物車模塊。用戶模塊中，用戶可以登錄，注冊(cè)，修改自己的個(gè)人信息，可以查看所有商品的信息，也可以把商品添加進(jìn)購物車，同時(shí)也可以把商品從購物車之中刪除。商品模塊，就主要是商品的屬性，商品的價(jià)格，它在系統(tǒng)中的庫存，不會(huì)出現(xiàn)客戶要買，卻沒有商品的情況；商品的銷售量；商品的詳細(xì)情況，方便客戶了解商品，方便更好的賣出商品；最后就是客戶對(duì)商品的評(píng)價(jià)，這也是客戶給商家的一個(gè)反饋。購物車模塊中，可以把商品添加帶購物車?yán)锩妫瑯拥囊部梢园焉唐窂馁徫镘囍袆h除，購物車的設(shè)計(jì)極大的方便了客戶，讓購物變得更簡(jiǎn)單。腔腔注班忘出特情改售息情溫空按視圖4-2系統(tǒng)流程圖如圖4-2,是系統(tǒng)流程圖。從中可以看出，用戶需要先注冊(cè)，擁有自己的賬戶名和密碼，然后進(jìn)行登錄，登陸成功就可以進(jìn)入系統(tǒng)的首頁了。用戶還可以在我的頁面對(duì)自己的個(gè)人信息進(jìn)行修改，當(dāng)忘記自己密碼的時(shí)候，還可以通過點(diǎn)擊忘客戶在瀏覽商品時(shí)，也可以點(diǎn)擊商品，進(jìn)入詳情頁面，對(duì)商品有一個(gè)更充分的了解?？蛻粲龅阶约合矚g的商品可以把它添加到購物車?yán)锩?，購物車可以讓客戶更方便管理要買的商品；當(dāng)客戶覺得購物車?yán)锏纳唐凡恍枰臅r(shí)候，還可以通過刪除鍵刪除商品?？蛻粼跒g覽商品時(shí)，也可以點(diǎn)擊商品，進(jìn)入詳情頁面，對(duì)商品有一個(gè)更充分的了解?？蛻糍徫锿瓿珊螅ㄟ^點(diǎn)擊付款按鈕，就可以對(duì)商品進(jìn)商家可以把客戶喜歡的商品多上架幾種，把客戶不感興趣的商品進(jìn)行下架處理。把商品的基本信息錄入到系統(tǒng)中，或者對(duì)商品的信息進(jìn)行修改，這些商家自己就可以做到。但是客戶對(duì)商品的評(píng)價(jià)，這是需要管理員親自管理的，這也是系統(tǒng)對(duì)自身的□碑一個(gè)保障。防止有些商家自欺欺人，把好的評(píng)價(jià)留下來，不好的評(píng)價(jià)都刪除了，來給客戶一個(gè)虛假的信息，讓客戶上當(dāng)受騙。一個(gè)好的網(wǎng)購平臺(tái)4.3.1系統(tǒng)實(shí)體圖傾戶密磷注時(shí)間新箱用戶信息實(shí)體圖，如圖4-3.。其中用戶是個(gè)體，用戶編號(hào)、用戶名、密碼、注冊(cè)時(shí)間、郵箱、這些都是個(gè)體的屬性。管理員實(shí)體圖，如圖4-4.,其中管理員是個(gè)體，他的屬性有管理員編號(hào)、名稱、票票商品實(shí)體圖，如4-5。從圖中可以看出個(gè)體是商品，并且商品的屬性還是不少的。編號(hào)可以更容易的找到它；價(jià)格、顏色、尺寸、類型、數(shù)量可以讓客戶更加了解商品；生場(chǎng)商、生產(chǎn)地是商品是正品的保障，這些屬性可以讓客戶對(duì)商品放4.3.2數(shù)據(jù)庫信息表管理員是購物系統(tǒng)的重要組成部分。若購物系統(tǒng)出現(xiàn)問題的話管理員可以第一時(shí)間查看問題，然后做出相應(yīng)的反應(yīng)。管理員還是用戶的管理者，沒有管理員的授權(quán)，用戶無法登錄系統(tǒng)，無法完成購物，同時(shí)也是監(jiān)察員，監(jiān)察商戶是否有違規(guī)行為。管理員賬號(hào)表如表4-1。管理員賬號(hào)密碼0-普通管理員1-超級(jí)管理員創(chuàng)建時(shí)間修改時(shí)間用戶可以說是購物系統(tǒng)最重要的部分了。對(duì)購物系統(tǒng)來說，沒有了用戶，就像缺少了靈魂一樣。系統(tǒng)做的再好，沒有用戶，就是一個(gè)失敗品。缺少了用戶，系統(tǒng)就失去了它的實(shí)用性，也就沒有了價(jià)值。用戶對(duì)于系統(tǒng)來說，就好比魚兒對(duì)水的渴望，人類對(duì)于空氣的執(zhí)著。用戶信息表如表4-2。用戶賬號(hào)0-女，1-男郵箱頭像1-禁用，0-正常1-刪除，0-正常創(chuàng)建時(shí)間修改時(shí)間商品也是購物系統(tǒng)不可或缺的一部分。系統(tǒng)缺少商品，它就是一個(gè)空殼子，基本上沒有作用，也就不會(huì)吸引客戶來購物。商品能滿足客戶的需求，同時(shí)也是購物的系統(tǒng)核心，購物系統(tǒng)沒有商品這不就是欺騙消費(fèi)者么,所以說商品是購物系統(tǒng)的核心。商品信息表如表4-3。表4-3t_type(商品信息表)商品名字生產(chǎn)商類型第5章系統(tǒng)功能實(shí)現(xiàn)在圖5-1中是點(diǎn)擊登錄頁面，進(jìn)入用戶登錄頁面如圖所示并且在登錄頁面，客戶如果輸進(jìn)了錯(cuò)誤的密碼，系統(tǒng)會(huì)提示客戶，這時(shí)客戶可以重新輸入密碼來進(jìn)行登錄。如果客戶忘記了密碼，還可以通過點(diǎn)擊旁邊的忘記密碼按鈕，來對(duì)密碼進(jìn)行修改。密碼設(shè)置的同時(shí)，也是給賬戶提供一層保障，用來保護(hù)客戶信息。具體實(shí)現(xiàn)思路為，當(dāng)用戶點(diǎn)擊登陸時(shí)，調(diào)用后臺(tái)接口，后臺(tái)會(huì)驗(yàn)證是否存在該用戶以及密碼是否正確，如果正確返回狀態(tài)碼200,并攜帶token,溫用戶名admin①密碼在圖5-2中是登錄成功后的頁面，顯示的是用戶的基本信可以看出，在我的頁面可以顯示的有用戶的頭像，用戶的網(wǎng)名，我的余額，優(yōu)惠券個(gè)數(shù)，積分，消息，積分商城等等?？蛻艨梢栽谠谶@個(gè)頁面對(duì)自己的頭像以及網(wǎng)名進(jìn)行修改，只需要點(diǎn)擊想要修改的地方就可以。優(yōu)惠卷是系統(tǒng)發(fā)放給所有用系統(tǒng)會(huì)根據(jù)用戶消費(fèi)的金額數(shù)來給對(duì)應(yīng)的積分?jǐn)?shù)，積分可以用來在積分商城里面免費(fèi)換商品。積分商城里面也是一些商品，只不過這些商品不用來出售，只能通過積分來兌換，這也是系統(tǒng)給廣大用戶群眾的第二個(gè)福利。只要福利不少。用戶就永遠(yuǎn)不會(huì)少。我的消息積分商城會(huì)員卡我的購物車下載購物APP在圖5-3中是系統(tǒng)首頁功能，首頁可以根據(jù)你的個(gè)人愛好給你推送你可能喜歡的商品，其中還有流行頁面如圖所示。首頁上面的是一些廣告，這也是盈利的一種手段，這也是根據(jù)購物平臺(tái)本身的勢(shì)力所決定的，用戶多，實(shí)力就強(qiáng)，廣告就會(huì)越多。具體實(shí)現(xiàn)思路為：頁面可滾動(dòng)區(qū)域主要使用到了better-scroll組件，這個(gè)組件使用的時(shí)候首先要?jiǎng)?chuàng)建一個(gè)實(shí)例，然后開啟上拉加載更多，還可以在組建實(shí)例內(nèi)部封裝一些基本方法，如：返回頂部，監(jiān)聽頁面的滾動(dòng)。首頁的標(biāo)題欄使用vue的具名插槽封裝，左側(cè)為返回的按鈕，中間為標(biāo)題名稱，右側(cè)為可替換區(qū)域。標(biāo)題欄下方為一個(gè)輪播圖，這個(gè)輪播圖為封裝的獨(dú)立組件。￥59.00★49￥田分類購物車我的在圖5-4中是系統(tǒng)首頁功能，其中新款頁面如圖所示。具體實(shí)現(xiàn)思路為：封裝一個(gè)tab欄組件，這個(gè)組件接受父組件傳過來的一個(gè)數(shù)組，再通過vue的v-for指令遍歷出來這三個(gè)tab的具體名稱，然后再為其添加點(diǎn)擊事件同故宮子向父?jìng)饕粋€(gè)函數(shù)，攜帶參數(shù)，父組件通過參數(shù)的變化，來決定三個(gè)tab頁具體顯示哪一頁的內(nèi)敬酒服新娘2018新款春秋…2018秋季￥98.00★0￥69.00★0出分類購物車我的A在圖5-5中是系統(tǒng)首頁功能，其中精選頁面內(nèi)容如圖所示個(gè)單獨(dú)封裝的組件，父組件向其傳商品列表的具體數(shù)據(jù)。底部的導(dǎo)航欄使用了兩個(gè)封裝的組件，較為重要的是item組件，具體實(shí)現(xiàn)思路為，利用vue的具名插槽用到了keep-alive保存組件的狀態(tài)，主要是用來當(dāng)頁面切換的時(shí)候，使頁面保持當(dāng)￥88.90★179A首頁分類購物車我的在圖5-6中是系統(tǒng)首頁功能，其中商品詳情內(nèi)容如圖所示。在商品詳情之中，首先是對(duì)商品的大概介紹，讓用戶對(duì)此商品有一個(gè)初步了解。接著就是商品的價(jià)格了，這也是所有用戶最關(guān)心的問題，同時(shí)你也能發(fā)現(xiàn)商品的價(jià)格普遍比實(shí)體店的便宜了好多，這也是為什么網(wǎng)上購物很火的原因。再往下就是一些用戶對(duì)商品的評(píng)價(jià)，用戶收到商品時(shí)候，會(huì)先對(duì)商品做一個(gè)檢查，看是否在運(yùn)輸過程之中損壞了，檢查完成之后，會(huì)對(duì)商品進(jìn)行試穿。試穿結(jié)束后，會(huì)給出一個(gè)評(píng)價(jià)，感覺效果很好就會(huì)給一個(gè)商品的好評(píng)，如果感覺一般甚至與圖片嚴(yán)重不符，則會(huì)給一個(gè)差評(píng)。用戶的評(píng)價(jià)就代表了這件商品的好壞，同時(shí)也能幫助用戶對(duì)商品進(jìn)行更這能讓你更快的進(jìn)入店鋪?？头褪强蛻舴?wù)，客戶購買商品有更想了解的，或者不是很懂的地方，都可以找他們，他們會(huì)給你解答，在你成功購買商品之后，他們會(huì)讓你對(duì)自己的信息進(jìn)行確認(rèn)，防止物流出現(xiàn)錯(cuò)誤，導(dǎo)致客戶收不到商品。還有收藏功能，用戶覺得商品很好，就會(huì)收藏，收藏會(huì)讓你更快的找到商品，為用戶購買以及回購提供了極大的便利。還有就是加入購物車按鈕，你點(diǎn)擊之后，系統(tǒng)會(huì)判斷購物車?yán)锩媸欠裼羞@個(gè)商品，如果沒有就會(huì)添加進(jìn)去，若是已經(jīng)存在購物車之中，就會(huì)改變商品的數(shù)量，而不是點(diǎn)擊一下，就會(huì)在購物車之中添加一個(gè)，這個(gè)設(shè)計(jì)也會(huì)收到廣大用戶的好評(píng)。同時(shí)在這個(gè)頁面也會(huì)告訴用戶，這個(gè)商品的購買人數(shù)，收藏人數(shù)。具體實(shí)現(xiàn)思路為，詳情頁里的具體信息都為封裝的組件，頂部電梯導(dǎo)航實(shí)現(xiàn)的原理是，當(dāng)點(diǎn)擊某一項(xiàng)時(shí)，獲取到這一項(xiàng)對(duì)用的組件具體當(dāng)前頁面頂部的距離，然后通過改變頁面滾動(dòng)位置等于組件距離頁面頂部的距離來實(shí)現(xiàn)。2018秋季新款韓版百搭格子長(zhǎng)袖襯衫+前短后長(zhǎng)針織氣質(zhì)開衫外套+高腰直筒九分牛仔褲三件套裝￥84-297折銷量5013收藏49人72小時(shí)發(fā)貨延誤必退貨補(bǔ)運(yùn)全國包延誤必退貨補(bǔ)運(yùn)加入購物車購買在圖5-7中是系統(tǒng)分類功能，其中有很多分類，其中上衣的頁面如圖所示。在這個(gè)頁面有上衣、褲子、裙子、鞋子、包包化妝品等等，左側(cè)類似于書的目錄，讓我們更方便的挑選商品：右側(cè)就是每個(gè)分類里面具體的商品。分類頁面頂部nav欄使用的是之前封裝好的nav欄組件，將中間的具名插槽的名字改為分類。當(dāng)頁面調(diào)用的時(shí)候，調(diào)用接口分別獲得分類列表和商品數(shù)據(jù)列表的數(shù)據(jù)，然后渲染到頁正在流行A我的特賣T恤連帽衛(wèi)衣十時(shí)尚衛(wèi)衣品衣紋顯瘦V領(lǐng)在圖5-8中是系統(tǒng)分類功能，其中褲子的頁面如圖所示。當(dāng)分類列表具體的某一項(xiàng)被選中的時(shí)候來動(dòng)態(tài)切換右側(cè)的詳細(xì)內(nèi)容。這里左右分別為兩個(gè)同級(jí)組件，他們連個(gè)之間的傳值使用的中央事件總線$bus,創(chuàng)建一個(gè)新的vue實(shí)列，掛在到vue的原型上，然后通過$emit和$on進(jìn)行事件的派發(fā)和接收。正在流行紋運(yùn)動(dòng)褲褲購物車休閑褲我的在圖5-9中是系統(tǒng)購物車功能，用戶可以把喜歡的商品添加進(jìn)購物車?yán)锩?，方便完成購物，購物車不僅要具有把商品添加進(jìn)去的功能，還應(yīng)該具有把曾經(jīng)喜歡的商品刪除的功能，購物車的添加功能如圖所示。具體實(shí)現(xiàn)思路為，使用vuex狀態(tài)管理，當(dāng)點(diǎn)擊加入購物車時(shí)，首先判斷state里面的商品列表中是否有該商品，如果有的話就讓這個(gè)商品的數(shù)量加一，如果沒有的話就將這個(gè)商品加入到購物車?yán)铩Ｙ徫镘?3)商品描述：2018秋季新.….刪除￥178.00【2件69元】【新…全選合計(jì)：￥325.00去計(jì)算(3)在圖5-10中是系統(tǒng)購物車的功能，購物車的刪除功能如圖所示。具體實(shí)現(xiàn)思路為，點(diǎn)擊刪除按鈕時(shí)，遍歷state中商品列表數(shù)組，通過es6新增的方法findIndex獲取到當(dāng)前點(diǎn)擊刪除按鈕對(duì)應(yīng)的商品的索引，然后通過splice方法刪除該商品。C全選合計(jì)：￥0.00去計(jì)算(0)5.5總結(jié)在這一章中，具體介紹的都是購物系統(tǒng)的功能。購物平臺(tái)具有四個(gè)頁面，分別是首頁，分類，購物車，以及我的。在首頁界面上面是一些廣告，接下來是一些銷量最好的把他們排在最前面，同時(shí)也有一些是系統(tǒng)根據(jù)顧客愛好推薦的一些顧客可能會(huì)喜愛的商品。在分類頁面就是把所有的商品分類，方便顧客更快的找到自己所需要的商品，同時(shí)每個(gè)商品都有詳細(xì)的介紹，同時(shí)也是方便顧客把自己所喜愛的商品添加到購物車?yán)锩?。購物車頁面就是顧客把自己喜歡想買的商品添加進(jìn)去，以及把不想要的商品刪除。我的頁面就是客戶自己的一些基本信息。第6章系統(tǒng)測(cè)試測(cè)試的目的是為了發(fā)現(xiàn)產(chǎn)品的瑕疵，任何產(chǎn)品不可能保證剛研發(fā)出來就沒有任何的小問題，正是因?yàn)樵跍y(cè)試中將這些小問題一一解決才能將成品打造的更加完美。系統(tǒng)的各項(xiàng)功能測(cè)試是十分重要的，它的測(cè)試結(jié)果直接表示了詳細(xì)設(shè)計(jì)和程序編碼的成果，要通過黑盒測(cè)試與白盒測(cè)試進(jìn)行成果功能的后期檢查，確定信息功能是否能夠正確實(shí)行。經(jīng)過反復(fù)的錘煉和修改最后的成品才能成為一塊“好在本次系統(tǒng)測(cè)試之中，我選擇使用是黑盒測(cè)試。黑盒測(cè)試也稱功能測(cè)試，它是通過測(cè)試來檢測(cè)每個(gè)功能是否都能正常使用。在測(cè)試中，把程序看作一個(gè)不能打開的黑盒子，在完全不考慮程序內(nèi)部結(jié)構(gòu)和內(nèi)部特性的情況下，在程序接口進(jìn)行測(cè)試，檢查程序功能是否按照需求規(guī)格說明書的規(guī)定正常使用，程序是否能適當(dāng)?shù)亟邮蛰斎霐?shù)據(jù)而產(chǎn)生正確的輸出信息。黑盒測(cè)試著眼于程序外部結(jié)構(gòu)，不考慮內(nèi)部邏輯結(jié)構(gòu)，主要針對(duì)軟件界面和軟件功能進(jìn)行測(cè)試。如表6-1就是我本次黑盒測(cè)試的過程。序號(hào)測(cè)試內(nèi)容預(yù)期效果測(cè)試結(jié)果1用戶登錄用戶是否能登錄可以登錄到前端頁面正確2用戶進(jìn)入首頁頁面首頁頁面用戶可以正確3用戶進(jìn)入分類頁面分類頁面用戶可以正確4頁面用戶可以進(jìn)入購物車頁面正確5用戶進(jìn)入我的頁面用戶可以正確6商品添加進(jìn)購物車用戶可以正確7商品用戶可以正確8分類頁面的商品分類頁面里面的商品用戶可以點(diǎn)開分類頁面的商品正確根據(jù)測(cè)試的結(jié)果我們得出結(jié)論：該系統(tǒng)基本可以滿足用戶的日常購物需求，并且也符合當(dāng)下全民網(wǎng)購時(shí)代的情況。雖然有一些基本功能滿足了正常需求，但是還有許多功能沒有添加，還需要對(duì)本系統(tǒng)的功能進(jìn)行補(bǔ)充才能使系統(tǒng)的功能變得更加完善。移動(dòng)端頁面可視化構(gòu)建平臺(tái)允許開發(fā)者開發(fā)移動(dòng)端vue商業(yè)組件，并將其上傳到服務(wù)器端，組織定制Vue組件。開發(fā)者上傳的組件在服務(wù)器端進(jìn)行渲染、封裝和存儲(chǔ)，為前端可視化提供基礎(chǔ)。對(duì)前端視覺動(dòng)作后，形成了移動(dòng)方面的頁的預(yù)覽，后衛(wèi)終端移動(dòng)方面對(duì)應(yīng)的頁的構(gòu)建要求，根據(jù)參數(shù)服務(wù)器方面要求一系列的輔助組件處理，并最終構(gòu)建移動(dòng)方面對(duì)應(yīng)的頁。這里的主要工作如下所示：首先就是理論研究。先對(duì)移動(dòng)端開發(fā)的現(xiàn)狀進(jìn)行了研究和分析總結(jié)，然后提出了基于定制組織結(jié)構(gòu)的vue組件，提出了通過可視化操作來動(dòng)態(tài)生成移動(dòng)端頁面的思路。然后，根據(jù)需要研究并介紹了系統(tǒng)所依賴的技術(shù)。