基于vue的在線(xiàn)商城管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)_第1頁(yè)
基于vue的在線(xiàn)商城管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)_第2頁(yè)
基于vue的在線(xiàn)商城管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)_第3頁(yè)
基于vue的在線(xiàn)商城管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)_第4頁(yè)
基于vue的在線(xiàn)商城管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)_第5頁(yè)
已閱讀5頁(yè),還剩39頁(yè)未讀, 繼續(xù)免費(fèi)閱讀

付費(fèi)下載

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶(hù)提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

[6]。(3)硬件可行性分析本系統(tǒng)對(duì)只需一臺(tái)普通的電腦,可以正常的下載編譯軟件和使用進(jìn)行代碼的編寫(xiě)和編譯運(yùn)行即可,要帶有運(yùn)行系統(tǒng)的瀏覽器,打開(kāi)系統(tǒng)時(shí)需要流暢,響應(yīng)快,不能停頓太長(zhǎng)時(shí)間。(4)經(jīng)濟(jì)可行性分析投資成本:評(píng)估在線(xiàn)商城的投資成本,包括開(kāi)發(fā)成本和運(yùn)營(yíng)成本。開(kāi)發(fā)成本包括網(wǎng)站或應(yīng)用程序的開(kāi)發(fā)、設(shè)計(jì)、測(cè)試等費(fèi)用;運(yùn)營(yíng)成本包括服務(wù)器租用、域名注冊(cè)、維護(hù)和更新等費(fèi)用。同時(shí)還需要考慮到人力資源成本,如開(kāi)發(fā)人員、客服人員等。預(yù)期收益:評(píng)估在線(xiàn)商城的預(yù)期收益,包括銷(xiāo)售額和利潤(rùn)。通過(guò)市場(chǎng)調(diào)研和分析,了解潛在用戶(hù)數(shù)量和購(gòu)買(mǎi)力,預(yù)測(cè)銷(xiāo)售額。同時(shí)還需要考慮到產(chǎn)品定價(jià)策略、促銷(xiāo)活動(dòng)和市場(chǎng)份額等因素。3.需求分析與總體設(shè)計(jì)3.1需求分析3.1.1概述在線(xiàn)商城管理系統(tǒng),是一個(gè)操作簡(jiǎn)單,完善的系統(tǒng),主要有三部分,第一部分面向用戶(hù),有登錄注冊(cè),添加購(gòu)物車(chē),收藏,管理地址和下單等功能,第二部分是面向商家有商品管理,訂單管理等功能,最后一部分是面向管理員,可以管理用戶(hù),商家,公告,分類(lèi)以及管理員的信息等。3.1.2功能需求(1)功能性需求主要包括三大模塊。管理員管理,商家管理,用戶(hù)管理功能模塊管理員管理:管理員注冊(cè)登錄的信息錄入及修改密碼,登錄后管理員對(duì)個(gè)人信息,商家,用戶(hù),商品分類(lèi),公告信息等的管理商家管理:商家注冊(cè)登錄的信息錄入,登錄后商家對(duì)商品詳情,訂單信息,發(fā)貨等的管理用戶(hù)管理:用戶(hù)注冊(cè)登錄的信息錄入及修改密碼,登錄后對(duì)個(gè)人信息,瀏覽收藏商品,瀏覽購(gòu)物車(chē),查看自己訂單信息的管理3.1.3非功能需求(1)性能需求高可用性:系統(tǒng)穩(wěn)定。穩(wěn)定持續(xù)時(shí)間長(zhǎng),保證使用當(dāng)前單個(gè)服務(wù)提供商故障時(shí),將用戶(hù)的請(qǐng)求轉(zhuǎn)移到另一個(gè)服務(wù),提高服務(wù)可用性高性能性:有較快的響應(yīng)時(shí)間,迅速巨大的數(shù)據(jù)處理能力3.1.4數(shù)據(jù)庫(kù)需求分析數(shù)據(jù)庫(kù)的設(shè)計(jì)是否合理直接影響到系統(tǒng)性能和后期開(kāi)發(fā)的難易程度,良好的數(shù)據(jù)庫(kù)邏輯設(shè)計(jì)首先需要對(duì)應(yīng)用系統(tǒng)進(jìn)行合理的需求分析[2]。根據(jù)系統(tǒng)的需要,本人運(yùn)用較為科學(xué)合理的數(shù)據(jù)庫(kù)設(shè)計(jì)方法,首先對(duì)本系統(tǒng)的數(shù)據(jù)庫(kù)進(jìn)行需求分析,充分了解商城的運(yùn)作原理和業(yè)務(wù)活動(dòng)情況,明確前臺(tái)用戶(hù)和后臺(tái)商家的各種需求,然后才能確定商城系統(tǒng)前后臺(tái)的功能,最后得出需求說(shuō)明書(shū)。數(shù)據(jù)庫(kù)需求分析包括:首先,分析系統(tǒng)的功能,分析各個(gè)功能之間的關(guān)系,然后分析系統(tǒng)功能的數(shù)據(jù)需要的數(shù)據(jù)類(lèi)型,數(shù)據(jù)格式,最后,根據(jù)要開(kāi)發(fā)的商城特點(diǎn),確定功能。3.1.5安全保密需求該系統(tǒng)有嚴(yán)格的權(quán)限與密碼設(shè)置,數(shù)據(jù)庫(kù)密碼以加密處理,系統(tǒng)會(huì)記錄用戶(hù)的個(gè)人賬號(hào)密碼,這些都是需要保密的,需保障用戶(hù)數(shù)據(jù)的安全性和保密性。3.1.6穩(wěn)定性需求在網(wǎng)絡(luò)狀況和硬件環(huán)境良好時(shí),如果服務(wù)器故障時(shí),都不會(huì)對(duì)系統(tǒng)數(shù)據(jù)產(chǎn)生影響或丟失;系統(tǒng)響應(yīng)時(shí)間不能太長(zhǎng),不出現(xiàn)卡殼現(xiàn)象,所以需要適配的硬件,良好的操作系統(tǒng)和數(shù)據(jù)庫(kù)。3.1.7界面需求界面應(yīng)該簡(jiǎn)約容易看,經(jīng)常用的按鈕顯示需顯眼,讓商家和用戶(hù)可以更快更方便地使用3.1.8可行性分析(1)政策可行性分析當(dāng)今互聯(lián)網(wǎng)已遍布全球并迅速發(fā)展,我國(guó)對(duì)電子商務(wù)也十分重視,國(guó)家大力發(fā)展經(jīng)濟(jì),用經(jīng)濟(jì)帶動(dòng)國(guó)家全面發(fā)展。經(jīng)濟(jì)離不開(kāi)電子商務(wù)的發(fā)展,所以在線(xiàn)商城管理系統(tǒng)將是經(jīng)濟(jì)發(fā)展的重要組成部分。(2)技術(shù)可行性分析本系統(tǒng)開(kāi)發(fā)語(yǔ)言是Java,選擇Idea作為開(kāi)發(fā)工具,使用vue和springboot為開(kāi)發(fā)框架。Java是一種簡(jiǎn)潔、易讀的編程語(yǔ)言,與其他語(yǔ)言相比,學(xué)習(xí)曲線(xiàn)較低,上手相對(duì)容易。Vue作為Java的Web框架,上手也比較容易,適合我們開(kāi)發(fā),vue可以快速構(gòu)建應(yīng)用程序,提高開(kāi)發(fā)效率。還有springboot內(nèi)置快速開(kāi)發(fā)的功能和工具,簡(jiǎn)化配置,使開(kāi)發(fā)者更容易理解和使用。(3)硬件可行性分析本系統(tǒng)對(duì)所使用的電腦沒(méi)什么硬性要求,只需一臺(tái)普通的電腦,可以正常的下載編譯軟件和使用進(jìn)行代碼的編寫(xiě)和編譯運(yùn)行即可,要帶有運(yùn)行系統(tǒng)的瀏覽器,打開(kāi)系統(tǒng)時(shí)需要流暢,響應(yīng)快,不能停頓太長(zhǎng)時(shí)間。(4)經(jīng)濟(jì)可行性分析投資成本:網(wǎng)絡(luò)發(fā)達(dá)的今天,網(wǎng)絡(luò)提供了巨大的便利,開(kāi)發(fā)投資的資金可以說(shuō)是幾乎等0。3.2系統(tǒng)架構(gòu)系統(tǒng)應(yīng)提供首頁(yè)界面和后端管理系統(tǒng),有商品管理,商品分類(lèi)管理,商品發(fā)貨管理,訂單管理,前臺(tái)有首頁(yè)界面,商品界面,商品詳情界面,購(gòu)物車(chē)界面。3..2.1系統(tǒng)功能流程圖(1)核心流程圖3-1核心流程圖(2)購(gòu)物流程圖3-2購(gòu)物流程圖(3)發(fā)貨流程圖3-3發(fā)貨流程圖(4)添加商品流程圖3-4添加商品流程圖(5)結(jié)構(gòu)圖圖3-5結(jié)構(gòu)圖3.3前臺(tái)購(gòu)物系統(tǒng)(1)用戶(hù)登錄注冊(cè)模塊描述和功能:游客可以瀏覽網(wǎng)站,注冊(cè)登錄成為商城用戶(hù),可以購(gòu)買(mǎi)商品圖3-6登錄流程圖(2)商品的搜索模塊描述和功能:用戶(hù)可以通過(guò)搜索欄,輸入文字搜索自己需要的商品圖3-7搜索流程圖(3)購(gòu)物車(chē)模塊描述和功能:可以同時(shí)將購(gòu)物車(chē)的多個(gè)商品合并付款圖3-8添加購(gòu)物車(chē)流程圖3.4后臺(tái)管理系統(tǒng)(1)商品管理模塊描述和功能:商家可以添加修改刪除商品圖3-9商品管理圖(2)訂單管理模塊描述和功能:商家可以查看,編輯,查詢(xún),刪除訂單圖3-10訂單管理圖(3)用戶(hù)管理模塊描述和功能:網(wǎng)站管理員對(duì)已注冊(cè)用戶(hù)相關(guān)信息的管理圖3-11用戶(hù)管理圖3.5數(shù)據(jù)庫(kù)設(shè)計(jì)3.5.1數(shù)據(jù)庫(kù)概念設(shè)計(jì)在線(xiàn)刪除實(shí)體有:登錄注冊(cè)信息實(shí)體如圖3-13所示,商品信息實(shí)體如圖3-14所示,管理員信息實(shí)體如圖3-15所示,購(gòu)物車(chē)信息實(shí)體如圖3-16所示,訂單信息實(shí)體如圖3-17所示。管理員一權(quán)限信息實(shí)體如圖3-18所示.(1)系統(tǒng)E-R圖圖3-12系統(tǒng)E-R圖(2)注冊(cè)登錄信息實(shí)體E-R圖:圖3-13注冊(cè)登錄信息實(shí)體E-R圖(3)商品信息實(shí)體E-R圖:圖3-14商品信息實(shí)體E-R圖(4)管理員信息實(shí)體E-R圖:圖3-15管理員信息實(shí)體E-R圖(5)購(gòu)物車(chē)信息實(shí)體E-R圖:圖3-16購(gòu)物車(chē)信息實(shí)體E-R圖(6)訂單信息實(shí)體E-R圖圖3-17訂單信息實(shí)體E-R圖(7)管理員權(quán)限信息實(shí)體E-R圖:圖3-18管理員權(quán)限信息實(shí)體E-R圖3.5.2數(shù)據(jù)庫(kù)邏輯設(shè)計(jì)用戶(hù)表如表3-1所示訂單表如表3-2所示商家信息表如表3-3所示商品表表3-4所示收藏表如表3-5所示購(gòu)物車(chē)表如表3-6所示管理員信息表如表3-7所示地址表如表3-8所示3.5.3數(shù)據(jù)庫(kù)物理設(shè)計(jì)用戶(hù)表(User)名稱(chēng)數(shù)據(jù)類(lèi)型長(zhǎng)度備注是否為主鍵idint255IDYusemanevarchar255用戶(hù)名passwordvarchar255密碼namevarchar255用戶(hù)昵稱(chēng)rolevarchar255角色標(biāo)識(shí)phonevarchar255電話(huà)emailvarchar255郵箱表3-1用戶(hù)表建表語(yǔ)句為:CREATETABLE`user`(`id`int(10)NOTNULLAUTO_INCREMENTCOMMENT'ID',`username`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'用戶(hù)名',`password`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'密碼',`name`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'用戶(hù)昵稱(chēng)',`avatar`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'頭像',`role`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'角色標(biāo)識(shí)',`phone`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'電話(huà)',`email`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'郵箱',PRIMARYKEY(`id`)USINGBTREE)ENGINE=InnoDBAUTO_INCREMENT=5DEFAULTCHARSET=utf8mb4COLLATE=utf8mb4_unicode_ciROW_FORMAT=DYNAMICCOMMENT='用戶(hù)信息表';訂單表(orders)名稱(chēng)數(shù)據(jù)類(lèi)型長(zhǎng)度備注是否為主鍵idintIDYorder_idvarchar255訂單IDgoods_idint商品IDbusiness_idint商家IDnumint商品數(shù)量user_idint用戶(hù)IDpricedouble10訂單價(jià)格address_idint地址IDstatusvarchar255訂單狀態(tài)表3-2訂單表建表語(yǔ)句為:CREATETABLE`orders`(`id`int(10)NOTNULLAUTO_INCREMENTCOMMENT'ID',`order_id`varchar(255)COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'訂單ID',`goods_id`int(10)DEFAULTNULLCOMMENT'商品ID',`business_id`int(10)DEFAULTNULLCOMMENT'商家ID',`num`int(10)DEFAULTNULLCOMMENT'商品數(shù)量',`user_id`int(10)DEFAULTNULLCOMMENT'用戶(hù)ID',`price`double(10,2)DEFAULTNULLCOMMENT'訂單價(jià)格',`address_id`int(10)DEFAULTNULLCOMMENT'地址ID',`status`varchar(255)COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'訂單狀態(tài)',PRIMARYKEY(`id`))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4COLLATE=utf8mb4_unicode_ciCOMMENT='訂單信息表';商品表(goods)名稱(chēng)數(shù)據(jù)類(lèi)型長(zhǎng)度備注是否為主鍵IdIntIDYnamevarchar255商品名稱(chēng)imgvarchar255商品主圖descriptionlongtext商品介紹pricedouble10商品價(jià)格unitvarchar計(jì)件單位countint商品銷(xiāo)量type_idint分類(lèi)IDbusiness_idint商家ID表3-3商品表建表語(yǔ)句為:CREATETABLE`goods`(`id`intNOTNULLAUTO_INCREMENTCOMMENT'ID',`name`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'商品名稱(chēng)',`img`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'商品主圖',`description`longtextCHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciCOMMENT'商品介紹',`price`double(10,2)DEFAULTNULLCOMMENT'商品價(jià)格',`unit`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'計(jì)件單位',`count`intDEFAULT'0'COMMENT'商品銷(xiāo)量',`type_id`intDEFAULTNULLCOMMENT'分類(lèi)ID',`business_id`intDEFAULTNULLCOMMENT'商家ID',PRIMARYKEY(`id`)USINGBTREE)ENGINE=InnoDBAUTO_INCREMENT=12DEFAULTCHARSET=utf8mb4COLLATE=utf8mb4_unicode_ciROW_FORMAT=DYNAMICCOMMENT='商品信息表';收藏表(cart)名稱(chēng)數(shù)據(jù)類(lèi)型長(zhǎng)度備注是否為主鍵IdIntIDYuser_idInt用戶(hù)idgoods_idInt商品idbusiness_idInt店鋪ID表3-4收藏表建表語(yǔ)句為:CREATETABLE`collect`(`id`int(10)NOTNULLAUTO_INCREMENTCOMMENT'ID',`user_id`int(10)DEFAULTNULLCOMMENT'用戶(hù)ID',`goods_id`int(10)DEFAULTNULLCOMMENT'商品ID',`business_id`int(10)DEFAULTNULLCOMMENT'店鋪ID',PRIMARYKEY(`id`))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4COLLATE=utf8mb4_unicode_ciCOMMENT='收藏信息表';購(gòu)物車(chē)表(cart)名稱(chēng)數(shù)據(jù)類(lèi)型長(zhǎng)度備注是否為主鍵IdIntIDYuser_idInt用戶(hù)idgoods_idInt商品idbusiness_idInt店鋪IDnumint數(shù)量表3-5購(gòu)物車(chē)表建表語(yǔ)句為:CREATETABLE`cart`(`id`int(10)NOTNULLAUTO_INCREMENTCOMMENT'ID',`user_id`int(10)DEFAULTNULLCOMMENT'用戶(hù)ID',`goods_id`int(10)DEFAULTNULLCOMMENT'商品ID',`business_id`int(10)DEFAULTNULLCOMMENT'店鋪ID',`num`int(10)DEFAULTNULLCOMMENT'數(shù)量',PRIMARYKEY(`id`))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4COLLATE=utf8mb4_unicode_ciCOMMENT='購(gòu)物車(chē)表';管理員信息表(admin)名稱(chēng)數(shù)據(jù)類(lèi)型長(zhǎng)度備注是否為主鍵idIntIDYusernamevarchar255用戶(hù)名passwordvarchar255密碼namevarchar255姓名avatarvarchar255頭像rolevarchar255角色標(biāo)識(shí)phonevarchar255電話(huà)emailvarchar255郵箱表3-6管理員信息表建表語(yǔ)句為:CREATETABLE`admin`(`id`intNOTNULLAUTO_INCREMENTCOMMENT'ID',`username`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'用戶(hù)名',`password`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'密碼',`name`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'姓名',`avatar`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'頭像',`role`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'角色標(biāo)識(shí)',`phone`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'電話(huà)',`email`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'郵箱',PRIMARYKEY(`id`)USINGBTREE)ENGINE=InnoDBAUTO_INCREMENT=2DEFAULTCHARSET=utf8mb4COLLATE=utf8mb4_unicode_ciROW_FORMAT=DYNAMICCOMMENT='管理員';商家信息表(business)名稱(chēng)數(shù)據(jù)類(lèi)型長(zhǎng)度備注是否為主鍵idIntIDYusernamevarchar255用戶(hù)名passwordvarchar255密碼namevarchar255店鋪名avatarvarchar255頭像rolevarchar255角色標(biāo)識(shí)phonevarchar255電話(huà)emailvarchar255郵箱表3-7商家信息表建表語(yǔ)句為:CREATETABLE`business`(`id`int(10)NOTNULLAUTO_INCREMENTCOMMENT'ID',`username`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'用戶(hù)名',`password`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'密碼',`name`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'店鋪名',`avatar`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'頭像',`role`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'角色標(biāo)識(shí)',`phone`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'電話(huà)',`email`varchar(255)CHARACTERSETutf8mb4COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'郵箱',`description`varchar(255)COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'商家介紹',`status`varchar(255)COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'審核狀態(tài)',PRIMARYKEY(`id`)USINGBTREE)ENGINE=InnoDBAUTO_INCREMENT=2DEFAULTCHARSET=utf8mb4COLLATE=utf8mb4_unicode_ciROW_FORMAT=DYNAMICCOMMENT='商家信息表';地址表(address)名稱(chēng)數(shù)據(jù)類(lèi)型長(zhǎng)度備注是否為主鍵IdIntIDYuser_idInt用戶(hù)idusernamevarchar255收貨人useraddressvarchar255收貨地址phonevarchar255電話(huà)表3-8地址表建表語(yǔ)句為:CREATETABLE`address`(`id`int(10)NOTNULLAUTO_INCREMENTCOMMENT'ID',`user_id`int(10)DEFAULTNULLCOMMENT'用戶(hù)ID',`username`varchar(255)COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'收貨人',`useraddress`varchar(255)COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'收貨地址',`phone`varchar(255)COLLATEutf8mb4_unicode_ciDEFAULTNULLCOMMENT'聯(lián)系電話(huà)',PRIMARYKEY(`id`))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4COLLATE=utf8mb4_unicode_ciCOMMENT='地址信息表';4.系統(tǒng)的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)4.1前臺(tái)頁(yè)面4.1.1用戶(hù)登錄頁(yè)面輸入用戶(hù)名密碼可登錄商城,如圖4-1所示圖4-1用戶(hù)登錄頁(yè)面圖登錄可以選擇下拉框角色,代碼如下:<el-selectv-model="form.role"placeholder="請(qǐng)選擇角色"style="width:100%"><el-optionlabel="管理員"value="ADMIN"></el-option><el-optionlabel="商家"value="BUSINESS"></el-option><el-optionlabel="用戶(hù)"value="USER"></el-option></el-select>4.1.2商城首頁(yè)商城首頁(yè),主要有商品輪播圖和搜索框,如圖4-2所示圖4-2商城首頁(yè)算法:分類(lèi)的類(lèi)型圖標(biāo)通過(guò)調(diào)用this.$request.get('/type/selectAll')動(dòng)態(tài)渲染直接到入首頁(yè)頁(yè)面中<divstyle="display:flex;color:#666666FF;margin:14px0"v-for="itemintypeData">loadType(){this.$request.get('/type/selectAll').then(res=>{if(res.code==='200'){this.typeData=res.data}else{this.$message.error(res.msg)}})},關(guān)鍵算法:如果是用戶(hù)登錄會(huì)跳轉(zhuǎn)這個(gè)頁(yè)面,Login.vue代碼如下:if(user.role==='USER'){location.href='/front/home'}else{location.href='/home'4.1.3我的收藏可以收藏商品,如圖4-3所示圖4-3收藏圖關(guān)鍵算法:點(diǎn)擊收藏事件調(diào)用post方法Detail.vue中<el-buttontype="warning"@click="collect">收藏</el-button>collect(){letdata={userId:this.user.id,businessId:this.goodsData.businessId,goodsId:this.goodsId}this.$request.post('/collect/add',data).then(res=>{if(res.code==='200'){this.$message.success('收藏成功')}else{this.$message.error(res.msg)}})},4.1.4我的地址可以增加,刪除,修改地址,如圖4-4所示圖4-4地址圖4.1.5我的購(gòu)物車(chē)可以添加購(gòu)物車(chē),刪除購(gòu)物車(chē),如圖4-5所示圖4-5購(gòu)物車(chē)圖關(guān)鍵算法:點(diǎn)擊收藏事件調(diào)用post方法Detail.vue中<el-buttontype="warning"@click="addCart">加入購(gòu)物車(chē)</el-button>addCart(){letdata={num:1,userId:this.user.id,goodsId:this.goodsId,businessId:this.goodsData.businessId}this.$request.post('/cart/add',data).then(res=>{if(res.code==='200'){this.$message.success('操作成功')}else{this.$message.error(res.msg)}})},4.1.6我的訂單可以查看訂單,如圖4-6所示圖4-6我的訂單圖4.1.7商品頁(yè)面可以查看熱賣(mài)商品,如圖4-7所示圖4-7商品頁(yè)面圖4.1.8商品信息頁(yè)面可以參考商品詳情,如圖4-8所示圖4-8商品信息頁(yè)面4.2后臺(tái)管理商家管理4.2.1商品管理可以添加商品,刪除商品,修改商品,如圖4-9圖4-10所示圖4-9商品管理圖關(guān)鍵算法:在JwtInterceptor中添加驗(yàn)證商家角色登錄,代碼如下@ResourceprivateBusinessServicebusinessService;if(RoleEnum.BUSINESS.name().equals(role)){account=businessService.selectById(Integer.valueOf(userId));}圖4-10編輯商品信息圖關(guān)鍵算法:在顯示商家介紹過(guò)長(zhǎng)時(shí)在business.vue中加入show-overflow-tooltip="true"隱藏后段字在Goods.vue運(yùn)用循環(huán)遍歷,與商品分類(lèi)關(guān)聯(lián)<el-selectv-model="form.typeId"placeholder="請(qǐng)選擇分類(lèi)"style="width:100%"><el-optionv-for="itemintypeData":label="":value="item.id":key="item.id"></el-option>顯示所屬商家,Goods.Service中加入代碼,獲取當(dāng)前登錄用戶(hù)信息:publicvoidadd(Goodsgoods){AccountcurrentUser=TokenUtils.getCurrentUser();if(RoleEnum.BUSINESS.name().equals(currentUser.getRole())){goods.setBusinessId(currentUser.getId());}goodsMapper.insert(goods);}在Goods.vue初始化富文本編輯器leteditorfunctioninitWangEditor(content){setTimeout(()=>{if(!editor){editor=newE('#editor')editor.config.placeholder='請(qǐng)輸入內(nèi)容'editor.config.uploadFileName='file'editor.config.uploadImgServer='http://localhost:9090/files/wang/upload'editor.create()}editor.txt.html(content)},0)}4.2.2訂單管理可以添加訂單,刪除訂單,如圖4-11所示圖4-11訂單管理圖4.2.3商品分類(lèi)管理可以添加商品分類(lèi),刪除商品分類(lèi),修改商品分類(lèi),如圖4-12所示圖4-12商品分類(lèi)管理圖關(guān)鍵算法:在Type.vue圖像上傳運(yùn)用鉤子函數(shù)handleAvatarSuccess傳參,把圖標(biāo)url保存起來(lái),存到form,實(shí)現(xiàn)圖片上傳功能,具體代碼如下:<el-form-itemlabel="分類(lèi)圖標(biāo)"><el-uploadclass="avatar-uploader":action="$baseUrl+'/files/upload'":headers="{token:user.token}"list-type="picture":on-success="handleAvatarSuccess"><el-buttontype="primary">上傳圖標(biāo)</el-button></el-upload></el-form-item>4.2.4管理員信息管理可以添加,刪除,修改管理員信息,如圖4-13所示圖4-13管理員信息管理圖關(guān)鍵算法:在JwtInterceptor中添加驗(yàn)證管理員角色登錄,代碼如下@ResourceprivateAdminServiceadminService;if(RoleEnum.ADMIN.name().equals(role)){account=adminService.selectById(Integer.valueOf(userId));}4.2.5商家信息管理可以添加,刪除,修改,查詢(xún)商家信息,如圖4-14所示圖4-14商家信息管理圖4.2.6用戶(hù)信息管理可以添加,刪除,修改,查詢(xún)用戶(hù)信息,如圖4-15所示圖4-15用戶(hù)信息管理圖關(guān)鍵算法:在JwtInterceptor中添加驗(yàn)證用戶(hù)角色登錄,代碼如下@ResourceprivateUserServiceuserService;if(RoleEnum.USER.name().equals(role)){account=userService.sele4.2.7公告信息管理可以添加,刪除,修改,查詢(xún)公告信息,如圖4-16所示圖4-16公告信息圖關(guān)鍵算法:因?yàn)楣芾韱T才可以對(duì)公告信息進(jìn)行的,使用v-if="user.role==='ADMIN'"設(shè)置管理員可以看到,代碼如下:<el-menu-itemv-if="user.role==='ADMIN'"index="/notice">公告信息</el-menu-item>5系統(tǒng)測(cè)試5.1功能測(cè)試及結(jié)果測(cè)試用例測(cè)試目的操作操作反饋操作結(jié)果操作是否成功一登錄1登錄錯(cuò)誤的用戶(hù)名和密碼輸入錯(cuò)誤的賬號(hào)或錯(cuò)誤的密碼登錄失敗,顯示錯(cuò)誤提示登錄失敗二商品分類(lèi)2新增商品分類(lèi)添加商品的分類(lèi)點(diǎn)擊分類(lèi)信息頁(yè)面的新增按鈕,填入信息顯示添加商品的分類(lèi)的彈窗顯示商品分類(lèi)信息添加成功3修改商品分類(lèi)修改商品的分類(lèi)點(diǎn)擊分類(lèi)信息頁(yè)面的編輯按鈕,修改信息顯示商品的分類(lèi)的修改彈窗顯示商品分類(lèi)修改成功OK4刪除商品分類(lèi)刪除商品的分類(lèi)點(diǎn)擊商品分類(lèi)行的刪除按鈕顯示是否刪除彈窗顯示商品分類(lèi)刪除成功OK三商品管理5發(fā)布商品發(fā)布商品信息點(diǎn)擊商品管理頁(yè)面的發(fā)布商品按鈕,填入信息顯示到發(fā)布商品的添加彈窗顯示商品信息發(fā)布成功OK6修改商品修改商品信息點(diǎn)擊商品管理頁(yè)面的編輯按鈕,修改信息顯示到商品的編輯彈窗顯示商品信息修改成功7刪除商品刪除商品點(diǎn)擊商品管理的刪除按鈕顯示是否刪除彈窗顯示商品刪除成功四管理員信息8添加管理員信息添加管理員信息點(diǎn)擊管理員信息頁(yè)面的新增按鈕,填入信息顯示管理員信息新增彈窗顯示新增成功OK10修改管理員信息修改管理員信息點(diǎn)擊管理員信息頁(yè)面的編輯按鈕,修改信息顯示管理員信息編輯窗口顯示修改成功OK11刪除管理員信息刪除管理員信息點(diǎn)擊管理員信息頁(yè)面的刪除按鈕顯示是否刪除彈窗示刪除成功OK五商家信息13添加商家信息添加商家信息點(diǎn)擊商家信息頁(yè)面的新增按鈕,填入信息顯示

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論