計算機(jī)科學(xué)與技術(shù)-基于vue的惠家購物商城app的設(shè)計與實(shí)現(xiàn)

基于vue的惠家購物商城app的設(shè)計與實(shí)現(xiàn)摘要：21世紀(jì)進(jìn)入了互聯(lián)網(wǎng)的時代，是信息化的時代，隨著互聯(lián)網(wǎng)技術(shù)發(fā)展和普及,無處不在的網(wǎng)絡(luò)時刻影響著我們的生活，為了人們在快節(jié)奏的生活中，能夠更加方便和快捷進(jìn)行購物，網(wǎng)上商城隨之誕生。由于幾乎每個人手中都有一部或幾部智能手機(jī)，這為我們解決傳統(tǒng)購物方式成為了可能。采用MVVM的開發(fā)模式，開發(fā)一個移動端購物商城app具有非常重要的意義。JavaScript語言將被作為購物商城app的開發(fā)語言，開發(fā)工具使用的是VSCode；用當(dāng)前流行的Vue框架來搭建項(xiàng)目，采用基于node.js平臺上的express后端框架來搭建簡單的服務(wù)器，而數(shù)據(jù)庫采用的是分布式文件存儲的MongoDB數(shù)據(jù)庫，使用Axios.js技術(shù)來實(shí)現(xiàn)前后端的數(shù)據(jù)交互，以及VantUI組件和Swiper組件等來完成項(xiàng)目的設(shè)計與開發(fā)，實(shí)現(xiàn)了用戶注冊、用戶登錄、商品展示、商品搜索、購買商品、收藏商品、管理收貨地址等功能?；趘ue的惠家購物商城項(xiàng)目的實(shí)現(xiàn)將會多一個購物商城app，對用戶來說，可以不需要踏出門口便能買到自己所需的物品，能夠有效的節(jié)省用戶時間，讓用戶更好的安排和利用自己的時間；對于商家來說，經(jīng)營成本能夠大幅的節(jié)省，經(jīng)營的規(guī)模頁不用受到場地的限制，銷售范圍變廣，利益有巨大的提高，對商家的經(jīng)營帶來巨大影響。關(guān)鍵詞：商城；網(wǎng)上購物；電子商務(wù)

DesignandimplementationofHuijiashoppingmallappbasedonVueAbstract：The21stcenturyhasenteredtheeraoftheInternet,istheeraofinformationtechnology,withthedevelopmentandpopularizationofInternettechnology,theubiquitousnetworkalwaysaffectsourlife,inordertopeopleinthefast-pacedlife,canbemoreconvenientandfastshopping,onlineshoppingmallisborn.Sincealmosteveryonehasoneorseveralsmartphonesintheirhands,itispossibleforustosolvetheproblemoftraditionalshopping.ItisveryimportanttodevelopamobileshoppingmallappwithMVVMdevelopmentmode.JavaScriptlanguagewillbeusedasthedevelopmentlanguageofshoppingmallapp,andvscodeisusedasthedevelopmenttool;thecurrentpopularVueframeworkisusedtobuildtheproject,andtheexpressback-endframeworkbasedonnode.jsplatformisusedtobuildasimpleserver,whilethedatabaseusesmongodbdatabaseofdistributedfilestorage,axios.jstechnologyisusedtorealizethedatainteractionbetweenthefrontandbackends,andVantUIcomponentandSwipercomponentareusedtocompletethedesignanddevelopmentoftheproject,andrealizethefunctionsofuserregistration,userlogin,commoditydisplay,commoditysearch,purchaseofcommodities,collectionofcommodities,managementofreceivingaddress,etc.TherealizationofHuijiashoppingmallprojectbasedonVuewillhaveonemoreshoppingmallapp.Forusers,theycanbuywhattheyneedwithoutsteppingoutofthedoor,whichcaneffectivelysaveusers'timeandmakeusersbetterarrangeandusetheirtime.Forbusinesses,theoperatingcostcanbegreatlysaved,andtheoperatingscalepageisnotlimitedbythesite,thescopeofsaleshasbecomewider,theinterestshavebeengreatlyimproved,andthebusinessoperationhasbeengreatlyaffected.Keywords:ShoppingMall;Onlineshopping;ElectronicCommerce。目錄第1章緒論 第1章緒論1.1系統(tǒng)的開發(fā)背景及意義簡單來說，電子商務(wù)就是在\t"/item/%E7%94%B5%E5%AD%90%E5%95%86%E5%8A%A1/_blank"互聯(lián)網(wǎng)上以\t"/item/%E7%94%B5%E5%AD%90%E5%95%86%E5%8A%A1/_blank"電子交易的方式進(jìn)行交易活動和相關(guān)服務(wù)的活動。電子商務(wù)時代的到來，讓人們能夠在網(wǎng)上轉(zhuǎn)賬交易，讓交易更加方便。無處不在的網(wǎng)絡(luò)時刻影響著我們的生活，改變了我們的學(xué)習(xí)方式，生活方式，娛樂方式等方方面面，人們也意識到基于互聯(lián)網(wǎng)技術(shù)的電子商務(wù)重要性，它對國家，社會和個人生活等方面都帶來了巨大的影響。電子商務(wù)是以電腦為主要頁面；移動電子商務(wù)是通過智能\t"/item/%E7%A7%BB%E5%8A%A8%E7%94%B5%E5%AD%90%E5%95%86%E5%8A%A1/_blank"手機(jī)、平板為主要頁面，是無線的電子商務(wù)。因?yàn)橛脩舨豢赡茈S時隨地帶著一臺聯(lián)網(wǎng)的電腦，所以人們平時上網(wǎng)的主要工具是使用智能手機(jī)，正是智能手機(jī)用戶的巨大市場需求量吸引了京東，淘寶等電子商務(wù)企業(yè)，紛紛進(jìn)軍到移動電子商務(wù)的行列中，這樣更加促進(jìn)了移動電子商務(wù)的發(fā)展。對于智能手機(jī)用戶來說，人們每天和手機(jī)在一起的時間和使用手機(jī)的時間超過了平板，電腦等任何設(shè)備。智能手機(jī)用戶比PC端有更大的優(yōu)勢，如手機(jī)比電腦小，可以隨身攜帶，可以隨時上網(wǎng)查看信息，比PC端更為方便快捷。在信息化的大環(huán)境下，手機(jī)移動端購物商城的開發(fā)非常符合了人們追求便攜舒適的購物要求，因此，手機(jī)移動端購物商城的開發(fā)是非常有必要。手機(jī)移動端購物商城的這種網(wǎng)上購物方式，突破了傳統(tǒng)的上街購物方式，這對消費(fèi)者、商家和市場都造成了巨大的影響。對用戶來說，可以不用踏出門口便能夠選擇購買自己喜歡的物品，如喜歡的食品，喜歡的手機(jī)，喜歡的電腦等等，有效的節(jié)省用戶的時間，讓用戶能更好的利用自己的時間；對于商家來說，經(jīng)營成本變低了，經(jīng)營規(guī)模也不用受到場地的限制，銷售范圍廣，可以遍布全國，對商家的成本有了大幅的節(jié)省，對商家利益也有巨大的提高，為每個商家的經(jīng)營方式帶來非同的影響。1.2國內(nèi)外研究現(xiàn)狀雖然不同國家的政治、經(jīng)濟(jì)、文化等方面的基本情況有所不同，但是各個國家的政府機(jī)構(gòu)都很重視并積極地發(fā)展移動電子商務(wù)，因此移動電子商務(wù)得到了充分的發(fā)展。跨入到21世紀(jì)，由于互聯(lián)網(wǎng)技術(shù)和手機(jī)普及率提高，現(xiàn)在幾乎每個人都能夠擁有一部智能手機(jī)，人們能夠通過移動互聯(lián)網(wǎng)進(jìn)行網(wǎng)上交易。在歐洲、美國、日本等比較發(fā)達(dá)的國家和地區(qū)，在移動電子商務(wù)的發(fā)展上一直都是處于國際領(lǐng)先地位，在網(wǎng)絡(luò)上開商店的發(fā)展速度迅猛，世界超一流的零售商，如沃爾瑪、亞馬遜、家樂福、樂購等零售商大佬都紛紛加入網(wǎng)絡(luò)經(jīng)商的行列。在國內(nèi)，網(wǎng)上商城起步相對于發(fā)達(dá)國家來說比較晚，但是發(fā)展速度非常迅速，獲得的成果也遠(yuǎn)超國外。國內(nèi)著名的網(wǎng)上商城有京東商城、淘寶網(wǎng)、拼多多、當(dāng)當(dāng)網(wǎng)、拍拍網(wǎng)、小米之家、華為商城等都加入到移動電子商務(wù)，這無疑都證明了移動電子商務(wù)擁有非常大發(fā)展優(yōu)勢和發(fā)展?jié)撃堋?.3研究的目的當(dāng)今社會，隨著互聯(lián)網(wǎng)的普及，互聯(lián)網(wǎng)已經(jīng)遍布全國，乃至全球，網(wǎng)上購物已經(jīng)成為一種常態(tài)，網(wǎng)上購物已經(jīng)成為了普遍的購物方式?；趘ue的移動購物商城，用戶不需要被限制在電腦端才能登錄商城進(jìn)行購物，用戶可以通過智能手機(jī)，能夠進(jìn)行登錄商城，也能夠進(jìn)行對商品的瀏覽，查詢，購買等功能，同時用戶也不需要特意找時間去上網(wǎng)查詢商品，用戶只需要擁有一臺智能手機(jī)，就能夠隨時隨地的購買增加所喜愛和所需要的商品，這樣不僅節(jié)省了用戶的時間，更打破了空間的限制，用戶可以隨時隨地使用智能手機(jī)或平板來購物。總之，網(wǎng)上購物商城是大勢所趨，是根據(jù)社會發(fā)展應(yīng)運(yùn)而生的，隨著生活節(jié)奏的日益加快，對于用戶來說時間就是金錢，網(wǎng)上購物能夠?yàn)槊β档娜藗児?jié)省時間。網(wǎng)上購物商城恰好為忙碌的人們節(jié)約了去線下商城購物的時間，讓人們能夠不必去逛大街就可以進(jìn)行購物，讓人們過足不出戶就可以買盡天下物，讓人們能夠不用出去逛街也能夠進(jìn)行購物，同時，用戶也能夠通過移動端購物商城，在第一時間獲取線下商城相關(guān)的優(yōu)惠活動，讓有空閑時間的用戶可以跟好友出去逛街。網(wǎng)上購物商城使得購物這件事變得更加方便，更加快捷，更加人性化了。1.4系統(tǒng)開發(fā)相關(guān)技術(shù)概述基于vue的惠家購物商城app的設(shè)計與實(shí)現(xiàn)采用的Javascript編程語言，前端部分是選用當(dāng)前比較流行的、輕量級的Vue.js框架和Vant和Swiper等前端組件來搭建的，采用的開發(fā)模式是MVVM，通過MVVM架構(gòu)來實(shí)現(xiàn)數(shù)據(jù)與視圖的分離,客戶端的開發(fā)工具采用的是VisualStudioCode，服務(wù)端采用基于node.js和express框架來搭建簡單的服務(wù)器；數(shù)據(jù)庫采用的是MongoDB，前后端的數(shù)據(jù)交互采用Axios.js技術(shù)來實(shí)現(xiàn)，開發(fā)環(huán)境是8GB的win10x64操作系統(tǒng)。以下主要針對其中的幾個比較重要的前端開發(fā)技術(shù)進(jìn)行詳細(xì)介紹。1.4.1Vue.js的介紹Vue是基于MVVM模型實(shí)現(xiàn)的一套用于構(gòu)建用戶頁面框架。一方面，Vue框架讓開發(fā)人員只需要關(guān)注視圖層即可，這樣方便開發(fā)的項(xiàng)目和第三方庫或已有的項(xiàng)目進(jìn)行整合；另一方面，Vue還支持各種類庫結(jié)合來使用,給相對復(fù)雜的單頁應(yīng)用程序提供驅(qū)動。Vue.js的顯著特性有:輕量級的框架、雙向數(shù)據(jù)綁定、組件化、指令系統(tǒng)。1.4.2MVVM開發(fā)模式的介紹MVVM是模型-視圖-視圖模型的簡寫，英文翻譯為Model-View-ViewModel，主要作用是將其中的視圖層和模型層分開。視圖(View)是展示給用戶觀看的內(nèi)容，它與ViewModel的數(shù)據(jù)是雙向綁定，也就是ViewModel提供的數(shù)據(jù)能夠插入View中；模型(Model)指的是后臺傳遞過來給View的數(shù)據(jù)，視圖模型(ViewModel)是MVVM模式的核心部分，是實(shí)現(xiàn)連接View和Model相互通訊的橋梁。MVVM開發(fā)模式的核心是數(shù)據(jù)綁定：當(dāng)數(shù)據(jù)發(fā)生變化時，ViewModel能夠?qū)崟r監(jiān)聽到數(shù)據(jù)發(fā)生變化，然后告訴與之相對應(yīng)的視圖數(shù)據(jù)發(fā)生了變化，視圖就會自動進(jìn)行更新，當(dāng)用戶操作視圖時，ViewModel也能夠?qū)崟r監(jiān)聽到視圖發(fā)生的變化，然后告訴模型數(shù)據(jù)發(fā)生了變化，模型里的數(shù)據(jù)就會方式改變，這樣就成功實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定。1.4.3MongoDB的介紹MongoDB是一個由C++語言編寫的開源數(shù)據(jù)庫，是分布式文件存儲的數(shù)據(jù)庫。它的出現(xiàn)是為了解決高性能數(shù)據(jù)存儲的問題。MongoDB主要優(yōu)點(diǎn)有：在程序高負(fù)荷運(yùn)行時，能夠?yàn)槌绦蛱砑痈喙?jié)點(diǎn)來確保服務(wù)器保持高性能；支持對數(shù)據(jù)建立索引；支持強(qiáng)大的查詢，能夠與關(guān)系型數(shù)據(jù)庫一樣，實(shí)現(xiàn)單表查詢的大部分功能；1.4.4Axios的介紹Axios是一個基于promise的易用、簡潔且高效的HTTP庫。它具備如下優(yōu)點(diǎn)：同樣的API能夠流暢運(yùn)用在瀏覽器和Node.js中，且能夠無壓力的在平臺之間進(jìn)行切換；支持ES6語法中Promise來管理異步；能夠支持?jǐn)r截器等多種配置；封裝了Ajax技術(shù)，寫法更加簡潔等。

系統(tǒng)需求分析2.1可行性分析2.1.1經(jīng)濟(jì)可行性基于vue的惠家購物商城app的設(shè)計與實(shí)現(xiàn)從整個系統(tǒng)的設(shè)計到開發(fā)都由本人自己完成，在開發(fā)的過程使用的開發(fā)工具VSCode是免費(fèi)的，數(shù)據(jù)庫使用的是免費(fèi)開源的MongoDB，實(shí)現(xiàn)零經(jīng)費(fèi)。2.1.2技術(shù)可行性本人在校期間已修完所有在校課程，已經(jīng)具備開發(fā)項(xiàng)目的基本技術(shù)。開發(fā)項(xiàng)目僅需要一臺計算機(jī)，對計算機(jī)的配置要求不高，個人電腦能夠滿足開發(fā)項(xiàng)目的要求。對于軟件技術(shù)也要求不高，會使用簡單的ps技術(shù)對圖形圖像進(jìn)行制作，有HTML+CSS+JS基礎(chǔ)，會運(yùn)用Node.js，Axios.js,MongoDB等技術(shù)即可。2.1.3操作可行性基于vue的惠家購物商城app的設(shè)計與實(shí)現(xiàn)擁有簡明的頁面UI、簡單操作的方式，只要用戶可以使用過網(wǎng)上購物商城或?qū)W(wǎng)上購物商城有所了解，都能夠行云流水地操作惠家購物商城。由此可見，操作方式和操作過程不會受到限制。2.2系統(tǒng)的業(yè)務(wù)需求分析以下是對惠家購物商城app的業(yè)務(wù)需求分析。用戶在打開App之后有三個模塊：首頁、分類，購物車和我的。初始時選中是首頁，首頁顯示是商品信息，點(diǎn)擊商品，跳轉(zhuǎn)到與之相對應(yīng)的商品詳情頁面，該頁面會顯示相對應(yīng)商品的詳細(xì)信息，點(diǎn)擊添加購物車按鈕實(shí)現(xiàn)添加商品進(jìn)購物車操作，點(diǎn)擊購物車按鈕，跳轉(zhuǎn)到購物車頁面，在此頁面有加減號用來增加和減少商品數(shù)量，有刪除按鈕可以刪除商品，有全選按鈕可以全選商品；點(diǎn)擊結(jié)算時，如果用戶已經(jīng)進(jìn)行過登錄，則能夠進(jìn)行下一步的結(jié)算功能操作，否則會先跳轉(zhuǎn)到登錄頁面，讓用戶先進(jìn)行登錄操作。點(diǎn)擊底部導(dǎo)航欄的分類按鈕，進(jìn)入分類頁面，在分類頁面中商品按照不同種類劃分，如手機(jī)數(shù)碼，家用電器，男裝，女裝等；點(diǎn)擊商品可以進(jìn)行購物操作。點(diǎn)擊底部導(dǎo)航欄的購物車按鈕，進(jìn)入購物車頁面，在購物車頁面中能夠查看添加進(jìn)購物車的所有商品，用戶可以增加或減少商品數(shù)量，刪除商品，全選商品等操作。點(diǎn)擊底部導(dǎo)航欄的我的按鈕，進(jìn)入個人中心頁面，用戶能夠查看收貨地址，查看訂單信息，查看我的收藏，并且能夠管理用戶的收貨地址等操作?；菁屹徫锷坛莂pp的業(yè)務(wù)流程圖如圖2.1所示。圖2.1惠家購物商城app的業(yè)務(wù)流程圖2.3系統(tǒng)功能的需求分析惠家購物商城主要分為前端和后端兩大模塊：在前端模塊中主要包括：首頁，分類，購物車，個人中心；而在后端模塊中主要包括：登錄注冊、商品管理。惠家購物商城功能模塊圖如圖2.2。圖2.2惠家購物商城功能模塊圖首頁：是展示商品第一個頁面。主要用于商品的展示，商品的介紹，廣告的展示，商品的推薦，搜索欄，以及導(dǎo)航欄(首頁，分類，購物車，個人中心)，一個簡潔，美觀的使用能夠吸引用戶。分類頁面：是商品的分類展示部分。用戶可以可以根據(jù)自己商品的類型來快速尋找商品，能夠幫助用戶快速定位自己所需的商品。購物車頁面：用戶可以添加商品到購物車。用戶在挑選商品時，對商品的信息進(jìn)行查看對比，覺得滿意后可以添加商品進(jìn)購物車，主要方便用戶對添加進(jìn)購物車的商品進(jìn)行整理，如刪除商品，添加商品，增加商品數(shù)量，減少商品數(shù)量，全選商品，以及計算勾選商品的總價格等操作。個人中心：是登錄者的詳細(xì)信息。是用戶的用戶名，昵稱，地址管理，商品收藏，用戶積分，優(yōu)惠券，推薦，設(shè)置等重要信息集中地，用戶可以查看商品收藏，收貨地址等信息，方便用戶查看資料，財產(chǎn)余額等信息。搜索頁面：用于商品的搜索，用戶可以輸入框輸入商品的名字進(jìn)行搜索操作。商品詳情頁：提供給用戶詳細(xì)的商品信息，主要是在用戶選擇商品時，了解商品。用戶通過圖文信息，商品介紹，商品價格，用戶購買建議等詳情介紹來了解商品詳情。收藏夾：是用來收藏商品。用來收藏自己心怡的商品，用戶能夠在個人中心頁面中的商品收藏中查看自己收藏的商品。收貨地址：是用來管理我的收貨地址。用戶能夠管理收貨地址，能夠?qū)κ肇浀刂愤M(jìn)行增刪改操作。2.4UML系統(tǒng)建模2.4.1用例圖用例模型的基本組成部分有用例、角色（或參與者）和系統(tǒng)。用戶業(yè)務(wù)如圖2.3基于vue的惠家購物商城app用例圖所示。圖2.3基于vue的惠家購物商城app用例圖所示2.4.2用例圖規(guī)約表表2-1登錄注冊用例規(guī)約表用例編號2-1用例名稱登錄注冊功能描述當(dāng)游客注冊或登錄之后，身份變?yōu)橛脩簟?zhí)行者游客前置條件惠家購物商城app正常運(yùn)行。后置條件如果是游客，游客身份變?yōu)橛脩?。涉眾利益游客登錄注冊之后，可以進(jìn)行下單、管理收貨地址和修改個人信息等操作?；韭窂接慰停?.如果用戶未注冊，選擇注冊；2.把注冊信息按規(guī)則填寫；3.注冊成功并轉(zhuǎn)為用戶身份；4.如果用戶已注冊，則輸入登錄信息；5.角色變?yōu)橛脩舨⒊晒M(jìn)入系統(tǒng)。擴(kuò)展無字段列表用戶：1.賬號2.密碼3.聯(lián)系電話；業(yè)務(wù)規(guī)則無備注無表2-2下單用例規(guī)約表用例編號2-2用例名稱下單功能描述在用戶進(jìn)入某店鋪，下單之后可以確認(rèn)訂單。執(zhí)行者用戶前置條件登錄到惠家購物商城app。后置條件下單成功。涉眾利益用戶購買商品?；韭窂竭M(jìn)入某家店鋪；把商品加入購物車；確認(rèn)訂單；支付。擴(kuò)展無字段列表1.商品編號；2.商品名稱；3.商品說明；4.收貨人；5.聯(lián)系電話；6.收貨地址；7.運(yùn)費(fèi)；8.價格。業(yè)務(wù)規(guī)則需要用戶身份才能下單。備注無表2-3收貨地址管理用例規(guī)約表用例編號2-3用例名稱收貨地址管理功能描述用戶可以查看收貨地址、新增收貨地址、修改收貨地址和刪除收貨地址。執(zhí)行者用戶前置條件登錄惠家購物商城app。后置條件能對收貨地址進(jìn)行增刪查改操作。涉眾利益用戶可以對地址進(jìn)行查看、新增、修改和刪除。基本路徑查看收貨地址刪除收貨地址2.1選擇新增收貨地址；2.2把正確的地址信息錄入；2.3提交地址信息；修改收貨地址；點(diǎn)擊某條地址信息的編輯圖標(biāo)；編輯需要修改的地址信息；提交修改；刪除收貨地址；點(diǎn)擊某條地址信息的編輯圖標(biāo)；點(diǎn)擊刪除圖標(biāo)；確認(rèn)刪除某條地址信息。擴(kuò)展無字段列表1.用戶編號；2.收貨人姓名；3.聯(lián)系電話；4.詳細(xì)地址;業(yè)務(wù)規(guī)則無備注無表2-4購物車用例規(guī)約表用例編號2-4用例名稱個人信息管理功能描述用戶可以查看添加進(jìn)購物車的商品、增加商品數(shù)量，減少商品數(shù)量和刪除商品。執(zhí)行者用戶前置條件惠家購物商城app正常運(yùn)行。后置條件能對購物車?yán)锏纳唐愤M(jìn)行增刪查操作。涉眾利益用戶可以對購物車?yán)锏纳唐愤M(jìn)行查看、新增、刪除。基本路徑查看購物車?yán)锏纳唐?；增加商品?shù)量；2.1點(diǎn)擊數(shù)量右邊的”+“；減少商品數(shù)量;3.1點(diǎn)擊數(shù)量右邊的”-“;刪除商品;4.1點(diǎn)擊某條商品信息右下角的刪除按鈕；全選商品；5.1點(diǎn)擊左邊的勾選按鈕；擴(kuò)展無字段列表1.商品編號;2.商品名稱;3.商品說明;4.商品價格;5.商品數(shù)量;6店鋪名稱;業(yè)務(wù)規(guī)則無備注無2.5本章小結(jié)本章首先對惠家購物商城app各方面的可行性進(jìn)行了分析；接下來對惠家購物商城app的業(yè)務(wù)需求進(jìn)行分析，并且用業(yè)務(wù)流程圖展示；之后通過功能模塊圖展示了前端和后端的功能需求，以及對非功能性需求進(jìn)行簡單明了的說明；最后，為了更加直截了當(dāng)向用戶展示惠家購物商城app的功能，給出了用例圖并對各個用例用表格進(jìn)行簡單明了的說明。系統(tǒng)設(shè)計3.1系統(tǒng)功能設(shè)計登錄注冊功能：在主頁面(首頁)中有登錄組件，點(diǎn)擊登錄按鈕后跳轉(zhuǎn)到登錄注冊頁面，輸入有效賬號和密碼登進(jìn)行登錄，如果賬號和密碼正確，則進(jìn)入個人中心頁面；如果此前用戶從沒注冊過賬號，可以在登錄頁面中，點(diǎn)擊手機(jī)號注冊按鈕，跳轉(zhuǎn)到注冊頁面，注冊使用用戶名和密碼，如果注冊失敗，彈出注冊失敗信息，如果注冊成功，則會自動跳轉(zhuǎn)到登錄頁面。添加商品到購物車功能：用戶進(jìn)入app之后，在首頁中便可以瀏覽商品，點(diǎn)擊商品之后，將跳轉(zhuǎn)到與之相對應(yīng)的商品詳情頁，此時，用戶可以點(diǎn)擊添加購物車按鈕來選擇想購買的物品，點(diǎn)擊購物車按鈕，跳轉(zhuǎn)到購物車頁面并顯示已添加進(jìn)購物車的所有商品，用戶可以進(jìn)行刪除商品，增加和減少商品數(shù)量，全選商品操作，點(diǎn)擊結(jié)算按鈕，如果用戶還未進(jìn)行登錄的話，將會先跳轉(zhuǎn)到登錄注冊頁面，如果用戶沒有賬號，則可以進(jìn)行注冊操作；如果用戶已登錄，則進(jìn)入到確認(rèn)訂單頁面，點(diǎn)擊在線支付按鈕，跳轉(zhuǎn)到收銀臺頁面，支付后跳轉(zhuǎn)到我的訂單頁面。收貨地址功能：在我的頁面(個人中心頁面)中有收貨地址，用戶點(diǎn)擊收貨地址管理按鈕，跳轉(zhuǎn)到我的收貨地址頁面。在我的收貨地址頁面，如果沒有收貨地址，則顯示空，如果有收貨地址，則會顯示用戶所有的收貨地址。在收貨地址頁面的底部有新增地址按鈕，用戶點(diǎn)擊新增地址按鈕時，會跳轉(zhuǎn)到新增收貨地址頁面，此時，用戶可以進(jìn)行增加新的收貨地址操作。在我的收貨地址頁面，每個收貨地址列表項(xiàng)的右邊有一個編輯按鈕，用戶點(diǎn)擊編輯按鈕時，會跳轉(zhuǎn)到修改和刪除收貨地址頁面，點(diǎn)擊修改按鈕，則進(jìn)行修改該條收貨地址操作，點(diǎn)擊刪除按鈕，則進(jìn)行刪除該條收貨地址操作。收藏商品功能：點(diǎn)擊商品，會跳轉(zhuǎn)到與之相對應(yīng)的商品詳情頁面，在價格右邊有一個收藏按鈕，點(diǎn)擊收藏按鈕，可以實(shí)現(xiàn)收藏商品的操作，再一次點(diǎn)擊收藏按鈕時，則會取消收藏商品，用戶可以在個人中心的商品收藏中查看自己收藏的商品。查看訂單功能：在我的頁面中有全部訂單按鈕，點(diǎn)擊按鈕，則會進(jìn)入我的訂單頁面，如果有訂單，則會展示所有訂單，如果沒有訂單，則顯示空。3.2系統(tǒng)順序圖1.用戶注冊順序圖，如圖3.1所示。eq\o\ac(○,1)用戶點(diǎn)擊注冊按鈕，進(jìn)入注冊頁面；eq\o\ac(○,2)顯示注冊頁面給用戶；eq\o\ac(○,3)用戶在注冊界面中填寫注冊信息；eq\o\ac(○,4)用戶點(diǎn)擊提交按鈕；eq\o\ac(○,5)信息錯誤，則在注冊頁面會提示注冊失?。籩q\o\ac(○,6)重新填寫注冊信息；eq\o\ac(○,7)信息正確，則在注冊頁面會提示注冊成功；eq\o\ac(○,8)注冊成功，進(jìn)入到登錄頁面。圖3.1注冊順序圖用戶登錄順序圖，如圖3.2所示。eq\o\ac(○,1)用戶點(diǎn)擊登錄按鈕，進(jìn)入登錄頁面；eq\o\ac(○,2)顯示登錄頁面給用戶；eq\o\ac(○,3)用戶在登錄界面中填寫登錄信息；eq\o\ac(○,4)用戶點(diǎn)擊提交按鈕；eq\o\ac(○,5)如果信息錯誤，則在登錄頁面會提示登錄失??；eq\o\ac(○,6)重新填寫登錄信息；eq\o\ac(○,7)如果信息正確，則在登錄頁面會提示登錄成功；eq\o\ac(○,8)登錄成功，進(jìn)入到個人中心頁面。圖3.2登錄順序圖用戶購物順序圖，如圖3.3所示。eq\o\ac(○,1)用戶點(diǎn)擊商品，進(jìn)入商品詳情頁面；eq\o\ac(○,2)顯示商品詳情頁面給用戶；eq\o\ac(○,3)用戶點(diǎn)擊加入購物車按鈕；eq\o\ac(○,4)用戶在購物車頁面點(diǎn)擊結(jié)算按鈕；eq\o\ac(○,5)判斷用戶是否登錄；eq\o\ac(○,6)如果用戶已經(jīng)登錄成功，則結(jié)算成功；eq\o\ac(○,7)如果用戶未登錄，則跳轉(zhuǎn)到登錄頁面。圖3.3購物順序圖用戶添加收貨地址順序圖，如圖3.4所示。eq\o\ac(○,1)用戶在個人中心頁面點(diǎn)擊我的收貨地址，進(jìn)入我的收貨地址界面并點(diǎn)擊添加地址按鈕；eq\o\ac(○,2)用戶填寫收貨地址信息；eq\o\ac(○,3)用戶點(diǎn)擊提交按鈕；eq\o\ac(○,4)如果信息錯誤，則顯示添加失??；eq\o\ac(○,5)重新填寫信息提交；eq\o\ac(○,6)如果信息正確，則顯示添加成功。圖3.4添加地址順序圖用戶修改收貨地址順序圖，如圖3.5所示。eq\o\ac(○,1)用戶在個人中心頁面點(diǎn)擊我的收貨地址，進(jìn)入我的收貨地址界面并點(diǎn)擊修改地址按鈕；eq\o\ac(○,2)用戶填寫收貨地址信息；eq\o\ac(○,3)用戶點(diǎn)擊提交按鈕；eq\o\ac(○,4)如果信息錯誤，則顯示修改失??；eq\o\ac(○,5)重新填寫信息提交；eq\o\ac(○,6)如果信息正確，則顯示修改成功。圖3.5修改地址順序圖用戶刪除收貨地址順序圖，如圖3.6所示。eq\o\ac(○,1)用戶在個人中心頁面點(diǎn)擊我的收貨地址，進(jìn)入我的收貨地址界面并點(diǎn)擊編輯按鈕；eq\o\ac(○,2)顯示收貨地址頁面給用戶；eq\o\ac(○,3)用戶點(diǎn)擊刪除按鈕；eq\o\ac(○,4)刪除成功，跳轉(zhuǎn)并顯示收貨地址頁面給用戶。圖3.6刪除地址順序圖用戶收藏商品順序圖，如圖3.7所示。eq\o\ac(○,1)用戶點(diǎn)擊商品，進(jìn)入商品詳情頁面；eq\o\ac(○,2)顯示商品詳情頁面給用戶；eq\o\ac(○,3)用戶點(diǎn)擊收藏按鈕；eq\o\ac(○,4)顯示收藏商品成功；eq\o\ac(○,5)用戶再一次點(diǎn)擊收藏按鈕；eq\o\ac(○,6)顯示取消收藏商品。 圖3.7收藏商品順序圖3.3系統(tǒng)活動圖1.收貨地址管理活動圖用戶進(jìn)入我的收貨地址頁面，用戶點(diǎn)擊底部的新增收貨地址按鈕，跳轉(zhuǎn)到添加收貨地址頁面，用戶填寫并提交地址信息實(shí)現(xiàn)添加地址功能；點(diǎn)擊某條地址信息右邊的編輯按鈕，進(jìn)入編輯該條地址信息的頁面，用戶填寫并提交地址信息之后便可以更新地址信息，點(diǎn)擊刪除按鈕，則刪除該條地址信息，則如圖3.8收貨地址管理活動圖所示。圖3.8收貨地址管理活動圖2.購物活動圖用戶進(jìn)入商品詳情頁面，點(diǎn)擊加入購物車按鈕，實(shí)現(xiàn)添加商品進(jìn)購物車功能，點(diǎn)擊購物車按鈕，跳轉(zhuǎn)到購物車頁面，點(diǎn)擊結(jié)算按鈕時，如果用戶已經(jīng)登錄了，則結(jié)算成功，如果用戶還未進(jìn)行登錄，則結(jié)算失敗，則如圖3.9購物活動圖所示。圖3.9購物活動圖3.4數(shù)據(jù)庫設(shè)計一個完整的購物商城app必須有一個良好的數(shù)據(jù)庫支持作為數(shù)據(jù)來源，基于vue的惠家購物商城app所采用的是分布式文件存儲的數(shù)據(jù)庫MongoDB，以下是對用戶信息表、商品分類表、商品詳情表、購物車表、商品為你推薦表、商品秒殺表的設(shè)計。users(用戶信息表),表的詳細(xì)數(shù)據(jù)見下表3-1用戶信息表：表3-1用戶信息表列名數(shù)據(jù)類型是否為空主外鍵描述_idObjectIdNotnull主鍵用戶idusernameStringNotnull用戶名passwordvarchar(10)Notnull用戶登錄密碼iphonevarchar(256)Notnull用戶頭像wntjarr(商品為你推薦表)，表的詳細(xì)的數(shù)據(jù)見下表3-2商品為你推薦表：表3-2商品為你推薦表列名數(shù)據(jù)類型是否為空主外鍵描述_idObjectIdNotnull主鍵商品idm1StringNotnull商品名稱m2StringNotnull商品價格imgStringNotnull商品圖片msarrs（商品秒殺表），表的詳細(xì)數(shù)據(jù)見下表3-3商品秒殺表：表3-3商品秒殺表列名數(shù)據(jù)類型是否為空主外鍵描述_idObjectIdNotnull主鍵商品idm1StringNotnull商品名稱m2StringNotnull商品價格imgStringNotnull商品圖片flarrs（商品分類表），表的詳細(xì)數(shù)據(jù)見表3-4商品分類表：表3-4商品分類表列名數(shù)據(jù)類型是否為空主外鍵描述_idObjectIdNotnull主鍵商品idm1StringNotnull商品名稱imgStringNotnull商品圖片ajaxgoodslists（商品詳情表），表的詳細(xì)數(shù)據(jù)見下表3-5商品詳情表：表3-5商品詳情表列名數(shù)據(jù)類型是否為空主外鍵描述_idObjectIdNotnull主鍵商品idtitleStringNotnull商品名稱title1StringNotnull商品說明priceInt32Notnull商品價格expressStringNotnull運(yùn)費(fèi)remainInt32Notnull商品剩余數(shù)量thumbArrayNotnull商品圖片shopnameStringNotnull店鋪名稱goods（購物車表），表達(dá)詳細(xì)數(shù)據(jù)見下表3-6購物車表：表3-6購物車表列名數(shù)據(jù)類型是否為空主外鍵描述_idObjectIdNotnull主鍵商品idtitleStringNotnull商品名稱descStringNotnull商品說明priceInt32Notnull商品價格numStringNotnull商品數(shù)量thumbArrayNotnull商品圖片shopnameStringNotnull店鋪名稱3.5本章小結(jié)本章首先對惠家購物商城app的前端和后端進(jìn)行了系統(tǒng)功能的詳細(xì)設(shè)計，然后畫出了惠家購物商城app的順序圖、和部分的活動圖，更加直觀地展示了惠家購物商城app的各個功能；接下來是對惠家購物商城app的數(shù)據(jù)庫進(jìn)行設(shè)計。

系統(tǒng)實(shí)現(xiàn)4.1惠家購物商城頁面實(shí)現(xiàn)4.1.1基本頁面1.用戶第一次進(jìn)入惠家購物商城app之后向右滑動依次可以看到4張引導(dǎo)頁，點(diǎn)擊立即體驗(yàn)按鈕進(jìn)入到首頁。如圖4.1引導(dǎo)頁所示。圖4.1引導(dǎo)頁2.如果用戶不是第一次進(jìn)入惠家購物商城app之后會看到廣告頁，等待5秒或點(diǎn)擊跳過按鈕進(jìn)入首頁。如圖4.2廣告頁所示。圖4.2廣告頁3.用戶進(jìn)入惠家購物商城app之后，映入眼簾的是首頁，包括了搜索框，輪播圖，滑塊等。如圖4.3首頁所示。圖4.3首頁4.用戶點(diǎn)擊分類按鈕，跳轉(zhuǎn)到分類頁面，如圖4.4分類頁面所示。圖4.4分類頁面5.用戶點(diǎn)擊購物車按鈕，跳轉(zhuǎn)到購物車頁面，如圖4.5購物車頁面所示。 圖4.5購物車頁面6.用戶點(diǎn)擊我的按鈕，跳轉(zhuǎn)到用戶個人中心頁面，如圖4.6個人中心頁面所示。圖4.6個人中心頁面4.1.2功能頁面1.用戶點(diǎn)擊登錄按鈕，跳轉(zhuǎn)到登錄注冊頁面，頁面上包含了兩個文本框：用戶名和密碼，用戶輸入賬號和密碼后，點(diǎn)擊登錄按鈕進(jìn)行登陸操作；當(dāng)用戶單擊注冊按鈕后，將跳轉(zhuǎn)到用戶注冊頁面，如圖4.7登錄注冊頁面所示。圖4.7登錄注冊頁面圖4.8是用戶注冊實(shí)現(xiàn)的頁面，頁面上包含的是用戶注冊時需要填寫的基本信息，如：用戶名、密碼、確認(rèn)密碼和手機(jī)號，點(diǎn)擊注冊按鈕，將進(jìn)行注冊操作；如果用戶注冊成功，將跳轉(zhuǎn)到登陸注冊頁面進(jìn)行登錄，如果用戶注冊失敗，則不會跳轉(zhuǎn)頁面，同時會提示錯誤信息。圖4.8注冊頁面點(diǎn)擊商品時，會跳轉(zhuǎn)到與之相對應(yīng)的商品詳情頁面，點(diǎn)擊添加購物車按鈕，商品會添加進(jìn)購物車，點(diǎn)擊購物車按鈕，跳轉(zhuǎn)到購物車頁面；點(diǎn)擊數(shù)字旁邊的加號時，可以增加商品數(shù)量，點(diǎn)擊減號可以減少商品數(shù)量，點(diǎn)擊刪除按鈕可以刪除商品，點(diǎn)擊全選按鈕可以全部勾選商品，如圖4.9商品詳情頁、圖4.10全選商品頁面和圖4.11刪除商品頁面所示。圖4.9商品詳情頁圖4.10全選商品頁面 圖4.11刪除商品頁面點(diǎn)擊結(jié)算按鈕的時候，如果用戶還未進(jìn)行過登錄，會先跳轉(zhuǎn)到登錄注冊頁面，如果用戶已經(jīng)登錄，則會跳轉(zhuǎn)到確認(rèn)訂單頁面，點(diǎn)擊在線支付按鈕，跳轉(zhuǎn)到收銀臺頁面，點(diǎn)擊支付完成訂單按鈕，跳轉(zhuǎn)到我的訂單頁面。如圖4.12確認(rèn)訂單頁面，圖4.13收銀臺頁面，圖4.14我的訂單頁面所示。圖4.12確認(rèn)訂單頁面圖4.13收銀臺頁面圖4.14我的訂單頁面在已經(jīng)登錄的個人中心頁面，如圖4.15個人中心頁面所示，點(diǎn)擊我的收貨地址管理，跳轉(zhuǎn)到我的收貨地址頁面，用戶可以對我的收貨地址進(jìn)行增刪改操作。如圖4.16我的收貨地址頁面和圖4.17新增收貨地址頁面所示。圖4.15個人中心頁面圖4.16我的收貨地址頁面圖4.17新增收貨地址頁面點(diǎn)擊商品時，會跳轉(zhuǎn)到與之相對應(yīng)的商品詳情頁面，點(diǎn)擊收藏按鈕，可以對商品進(jìn)行收藏，再一次點(diǎn)擊收藏按鈕，能夠取消對該商品的收藏，在個人中心頁面，點(diǎn)擊商品收藏，跳轉(zhuǎn)到我的收藏頁面，用戶可以查看收藏的商品。如圖4.18我的收藏所示。圖4.18我的收藏頁面4.2本章小結(jié)本章主要是對惠家購物商城app的設(shè)計進(jìn)行實(shí)現(xiàn)，給出各個功能APP頁面的截圖以展現(xiàn)系統(tǒng)實(shí)現(xiàn)的效果，實(shí)現(xiàn)的效果圖有引導(dǎo)頁，廣告頁，首頁，分類頁面，購物車頁面，個人中心頁面，商品詳情頁，確認(rèn)訂單頁面，收貨地址頁面，商品收藏頁面。系統(tǒng)測試5.1系統(tǒng)測試的目的和意義測試的目的就是發(fā)現(xiàn)軟件的錯誤或漏洞。如今的軟件的質(zhì)量參差不齊，所以為了檢查軟件的質(zhì)量，系統(tǒng)測試是一個不可或缺的階段。系統(tǒng)測試可以找出系統(tǒng)中難以發(fā)現(xiàn)的錯誤或漏洞，有利于提高惠家購物商城的軟件質(zhì)量，提升用戶的體驗(yàn)。5.2測試用例及結(jié)果由于系統(tǒng)的測試用例比較多，本小節(jié)只給出了系統(tǒng)的部分測試用例以及相應(yīng)的測試結(jié)果來說明系統(tǒng)測試的情況，系統(tǒng)測試的部分用例如下表5-1所示：表5-1系統(tǒng)單元測試的部分用例用例編號用例名稱測試目的測試結(jié)果1Test1測試用戶注冊功能能否實(shí)現(xiàn)用戶能夠成功注冊2Test2測試用戶登錄功能能否實(shí)現(xiàn)用戶能夠成功登錄3Test3測試是否只有在登錄狀態(tài)下才能結(jié)算訂單用戶只有在登錄狀態(tài)下才能結(jié)算訂單4Test4測試用戶注冊成功后是否跳轉(zhuǎn)到正確的頁面用戶注冊成功后跳轉(zhuǎn)到正確的頁面5Test5測試用戶登錄成功后是否跳轉(zhuǎn)到正確的頁面用戶登錄成功后跳轉(zhuǎn)到正確的頁面6Test6測試用戶能否實(shí)現(xiàn)添加收貨地址能添加收貨地址7Test7測試用戶能否實(shí)現(xiàn)修改收貨地址能修改收貨地址8Test8測試用