II摘要隨著我國(guó)科技的快速發(fā)展與鄉(xiāng)村振興戰(zhàn)略的實(shí)施，農(nóng)業(yè)產(chǎn)業(yè)的發(fā)展已經(jīng)成為我國(guó)高質(zhì)量發(fā)展的重中之重，其中電商作為一種新商業(yè)模式，通過(guò)網(wǎng)絡(luò)平臺(tái)為農(nóng)產(chǎn)品提供銷售渠道、提高農(nóng)產(chǎn)品質(zhì)量與優(yōu)化人才培養(yǎng)，推動(dòng)電商助力農(nóng)業(yè)振興發(fā)展，是我國(guó)農(nóng)業(yè)產(chǎn)業(yè)與數(shù)字經(jīng)濟(jì)融合轉(zhuǎn)型的機(jī)遇。本論文旨在設(shè)計(jì)一個(gè)簡(jiǎn)易農(nóng)副產(chǎn)品直銷系統(tǒng)模擬電商平臺(tái)銷售。本系統(tǒng)先以日常電商平臺(tái)用戶及商戶部分需求進(jìn)行分析，然后逐步設(shè)計(jì)前端各網(wǎng)頁(yè)界面，編寫(xiě)前后端數(shù)據(jù)交互邏輯，后端數(shù)據(jù)存儲(chǔ)與處理，逐步實(shí)現(xiàn)各項(xiàng)功能編碼，最后進(jìn)行測(cè)試與修改錯(cuò)誤。設(shè)計(jì)主要工作內(nèi)容為前端中編寫(xiě)主頁(yè)購(gòu)物頁(yè)面以及商戶用戶管理頁(yè)與后端中編寫(xiě)基礎(chǔ)數(shù)據(jù)交互及存儲(chǔ)。在測(cè)試中基本完成預(yù)期設(shè)計(jì)功能，實(shí)現(xiàn)商戶管理、用戶管理及購(gòu)買等基本操作。本系統(tǒng)主要使用VScode工具編碼，前端主要使用Vue以及ElementPlus進(jìn)行開(kāi)發(fā)，在前后端數(shù)據(jù)，后端使用Express框架以及Nodejs，系統(tǒng)圖片資源使用Nginx技術(shù)存儲(chǔ)圖片靜態(tài)資源，設(shè)計(jì)主要使用JavaScript以及Html作為編程語(yǔ)言，在界面美化上使用CSS樣式表進(jìn)行各組件的美化，數(shù)據(jù)管理中使用MySQL數(shù)據(jù)庫(kù)存儲(chǔ)編輯數(shù)據(jù)，在設(shè)計(jì)時(shí)以現(xiàn)有電商平臺(tái)為參照，將角色分為消費(fèi)者用戶端以及商戶端，分別進(jìn)行對(duì)消費(fèi)者以及商戶進(jìn)行需求分析后進(jìn)行編碼，最后進(jìn)行功能測(cè)試。因此，本系統(tǒng)為實(shí)現(xiàn)現(xiàn)代農(nóng)產(chǎn)品在電商平臺(tái)上銷售的基本操作，以此直接連農(nóng)產(chǎn)品生產(chǎn)者與消費(fèi)者，使得生產(chǎn)者在能獲得較多利潤(rùn)的同時(shí)消費(fèi)者也能買到優(yōu)質(zhì)低價(jià)產(chǎn)品，為農(nóng)副產(chǎn)品開(kāi)辟新的銷售渠道提高產(chǎn)品經(jīng)濟(jì)價(jià)值同時(shí)推動(dòng)農(nóng)業(yè)現(xiàn)代化提高社會(huì)價(jià)值。關(guān)鍵詞：農(nóng)副產(chǎn)品電商平臺(tái)JavaScriptVueMySQL

DesignofAgriculturalandSidelineProductDirectSellingPlatformSystemAbstract:WiththerapiddevelopmentofscienceandtechnologyandtheimplementationoftheruralrevitalizationstrategyinChina,thedevelopmentofagriculturalindustryhasbecomethetoppriorityofhigh-qualitydevelopmentinChina.Asanewbusinessmodel,e-commerceprovidessaleschannelsforagriculturalproducts,andpromotesthedevelopmentofe-commercetohelpagriculturalrevitalizationanddevelopment.Thispaperaimstodesignasimpledirectsalessystemofagriculturalandsidelineproductstosimulatethesalesofe-commerceplatform.Thesystemfirstanalyzestheneedsofdailye-commerceplatformusersandmerchants,andthendesignsandcodesvariousfunctions,andfinallytestsandmodifieserrors.Themaincontentsofthedesignaretowritethehomepageshoppingpageandmerchantusermanagementpageinthefrontend,andtowritethebasicdatainteractionandstorageinthebackend.Inthetest,theexpecteddesignfunctionsarebasicallycompleted,andthebasicoperationssuchasmerchantmanagement,usermanagementandpurchasearerealized.ThisdesignusesVScodetoolcoding,thefrontendmainlyusesVueandElementPlusfordevelopment,thebackendusesExpressframeworkandNginxfordatainteractionandprocessing,thedesignmainlyusesJavaScriptandHtmlasprogramminglanguage,usesMySQLdatabasetostoreandeditdata,inthedesignoftheexistinge-commerceplatformasareference,theroleisdividedintoconsumersandmerchants,afterdemandanalysisforcoding,andfinallytest.Therefore,thisdesignistorealizethebasicoperationofmodernagriculturalproductsonthee-commerceplatform,soastodirectlyconnecttheproducersandconsumersofagriculturalproducts,sothattheproducerscanobtainmoreprofitswhiletheconsumerscanalsobuyhigh-qualityandlow-priceproducts.Keywords:AgriculturalandsidelineproductsE-commerceplatformJavaScriptVue

目錄1緒論 11.1課題的研究背景 11.2課題的研究目的和意義 21.3國(guó)內(nèi)研究現(xiàn)狀 21.4論文結(jié)構(gòu)安排 32系統(tǒng)相關(guān)技術(shù) 42.1Vue前端框架 42.2JavaScript語(yǔ)言 42.3express后端框架 42.4CSS樣式表 42.5Node.js 52.6Axios 52.7ElementUI框架 52.8MySQL 63需求分析 73.1系統(tǒng)總體需求分析 73.2系統(tǒng)功能性需求分析 83.2.1消費(fèi)者用戶需求 83.2.2商戶用戶需求 93.3系統(tǒng)非功能性需求分析 93.3.1易用性 93.3.2安全性 103.3.3美觀性 104系統(tǒng)概要設(shè)計(jì) 114.1系統(tǒng)功能模塊 114.1.1消費(fèi)者用戶模塊 114.1.2商戶功能模塊 114.2系統(tǒng)用例圖 124.2.1系統(tǒng)總體模塊概述 124.3業(yè)務(wù)流程設(shè)計(jì) 134.3.1消費(fèi)者用戶流程 134.3.2商戶用戶流程 164.4數(shù)據(jù)庫(kù)設(shè)計(jì) 184.4.1E-R圖 184.4.2數(shù)據(jù)庫(kù)表設(shè)計(jì) 195系統(tǒng)關(guān)鍵設(shè)計(jì)與實(shí)現(xiàn) 245.1系統(tǒng)架構(gòu)圖 245.2系統(tǒng)詳細(xì)模塊設(shè)計(jì) 255.2.1用戶注冊(cè)登錄功能 255.2.2用戶修改個(gè)人信息功能 265.2.3用戶購(gòu)買商品功能 265.2.4用戶查詢訂單功能 275.2.5用戶確認(rèn)收貨功能 275.2.6用戶評(píng)論功能 285.2.7用戶售后功能 285.2.8商戶添加商品功能 295.2.9商戶修改商品功能 305.2.10商戶訂單發(fā)貨功能 306系統(tǒng)運(yùn)行截圖與說(shuō)明 316.1消費(fèi)者頁(yè)面 316.1.1消費(fèi)者注冊(cè)頁(yè)面 316.1.2消費(fèi)者登錄頁(yè)面 326.1.3消費(fèi)者購(gòu)買頁(yè)面 326.1.4消費(fèi)者個(gè)人信息頁(yè)面 336.2消費(fèi)者訂單頁(yè)面 336.2.1消費(fèi)者訂單列表 336.2.2消費(fèi)者確認(rèn)收貨 346.2.3消費(fèi)者評(píng)價(jià) 346.3商戶頁(yè)面 356.3.1商戶注冊(cè)登錄頁(yè)面 356.3.2商戶商品管理 366.3.3商戶訂單發(fā)貨 376.3.4商戶售后處理 387總結(jié)與展望 397.1對(duì)工作內(nèi)容總結(jié) 397.3對(duì)工作不足之處與反思 397.2對(duì)未來(lái)工作展望 40參考文獻(xiàn) 41致謝 421緒論1.1課題的研究背景中國(guó)是農(nóng)業(yè)大國(guó)，糧食、蔬菜、水果、水產(chǎn)品等物產(chǎn)豐富，在國(guó)際國(guó)內(nèi)農(nóng)產(chǎn)品市場(chǎng)中占有非常重要的地位（唐雙，2018）。但目前的農(nóng)業(yè)市場(chǎng)中供需關(guān)系卻存在不平衡的現(xiàn)象。在農(nóng)副產(chǎn)品供給方面，大部分農(nóng)村依然還是受傳統(tǒng)小農(nóng)經(jīng)濟(jì)的影響，這也使得農(nóng)戶生產(chǎn)的農(nóng)副產(chǎn)品很難走出本地市場(chǎng)范圍并進(jìn)入全國(guó)市場(chǎng)流通鏈，并且農(nóng)副產(chǎn)品在本地市場(chǎng)中也由于地域與季節(jié)性的特點(diǎn)大多存在同種競(jìng)品，使得農(nóng)戶也因此需要降低產(chǎn)品價(jià)格以獲取產(chǎn)品優(yōu)勢(shì)，因此使得農(nóng)戶難以獲得較好的產(chǎn)品收益。在消費(fèi)者需求方面，消費(fèi)者在依賴傳統(tǒng)的市場(chǎng)經(jīng)濟(jì)時(shí)可供選擇的農(nóng)副產(chǎn)品存在有限性且產(chǎn)品同質(zhì)化問(wèn)題，消費(fèi)者想購(gòu)買優(yōu)質(zhì)農(nóng)副產(chǎn)品又不得不面臨購(gòu)買價(jià)格高且難以找到優(yōu)質(zhì)渠道的問(wèn)題。以當(dāng)前農(nóng)業(yè)產(chǎn)業(yè)的發(fā)展態(tài)勢(shì)的角度來(lái)看，部分貧困地區(qū)農(nóng)副產(chǎn)品在供求方面的問(wèn)題則尤為突出。因?yàn)檗r(nóng)戶個(gè)體信息接收等問(wèn)題，部分農(nóng)戶生產(chǎn)的優(yōu)質(zhì)農(nóng)副產(chǎn)品難以找到良好的銷售渠道，大多數(shù)只能選擇將農(nóng)副產(chǎn)品在本地市場(chǎng)流通銷售，然而同時(shí)市場(chǎng)上消費(fèi)者也難以尋找到優(yōu)質(zhì)且便利的農(nóng)副產(chǎn)品銷售渠道，此外，傳統(tǒng)銷售渠道難以確保農(nóng)副產(chǎn)品所帶給農(nóng)戶的利潤(rùn)，許多特色農(nóng)副產(chǎn)品受限于銷售環(huán)節(jié)經(jīng)常會(huì)有滯銷問(wèn)題，現(xiàn)有的銷售渠道難以滿足日益擴(kuò)大的農(nóng)產(chǎn)品消費(fèi)市場(chǎng)與日益增長(zhǎng)的消費(fèi)者需求，這些問(wèn)題都亟待解決。而隨著互聯(lián)網(wǎng)電商時(shí)代的到來(lái)與農(nóng)村振興戰(zhàn)略實(shí)施背景下農(nóng)村經(jīng)濟(jì)的快速發(fā)展，農(nóng)村電商市場(chǎng)處于發(fā)展的快速路上。在最近幾年，各大電商平臺(tái)紛紛布局農(nóng)村市場(chǎng)，推出一系列面向農(nóng)村農(nóng)戶的銷售優(yōu)惠政策以及加大對(duì)全國(guó)優(yōu)質(zhì)農(nóng)副產(chǎn)品的宣傳，借此吸引了大批的農(nóng)村用戶，加速了農(nóng)業(yè)電商的發(fā)展。據(jù)《中國(guó)農(nóng)村電子商務(wù)發(fā)展報(bào)告（2021-2022）》顯示，2021年全國(guó)農(nóng)村網(wǎng)絡(luò)零售額為2.05萬(wàn)億元，占全國(guó)網(wǎng)絡(luò)零售額的15.66%，同比增長(zhǎng)11.3%。2022年上半年，全國(guó)農(nóng)村網(wǎng)絡(luò)零售額為9759.3億元，同比增長(zhǎng)2.5%。其中，農(nóng)村實(shí)物商品網(wǎng)絡(luò)零售額為8904.4億元，同比增長(zhǎng)3.6%（韓劍義，2023）。農(nóng)村電商市場(chǎng)已成為中國(guó)在電商市場(chǎng)的不可或缺的一部分，具有十分廣闊的發(fā)展前景。農(nóng)村農(nóng)副產(chǎn)品不僅有傳統(tǒng)銷售渠道的作用，更有著宣傳產(chǎn)品，讓產(chǎn)品走出一方土地的功能，而這正是以往傳統(tǒng)銷售渠道難以做到的。由此可見(jiàn),在如今互聯(lián)網(wǎng)高速發(fā)展與農(nóng)業(yè)產(chǎn)業(yè)急需轉(zhuǎn)型的大背景下，一個(gè)能將消費(fèi)者與生產(chǎn)者連接起來(lái)的平臺(tái)十分重要。1.2課題的研究目的和意義本系統(tǒng)主要目的為：提高農(nóng)產(chǎn)品在供應(yīng)鏈流通的效率。在傳統(tǒng)農(nóng)產(chǎn)品市場(chǎng)中，農(nóng)產(chǎn)品在流通過(guò)程中受市場(chǎng)價(jià)格波動(dòng)影響，而穩(wěn)定的農(nóng)產(chǎn)品供應(yīng)鏈?zhǔn)寝r(nóng)產(chǎn)品市場(chǎng)穩(wěn)定的基礎(chǔ)，因此一個(gè)優(yōu)秀的農(nóng)產(chǎn)品直銷平臺(tái)有利于提高供應(yīng)鏈各個(gè)環(huán)節(jié)的流通效率，減少因?yàn)闀r(shí)間帶來(lái)的損失；推動(dòng)農(nóng)產(chǎn)品生產(chǎn)、加工、物流、銷售等環(huán)節(jié)整合。提供互聯(lián)網(wǎng)基礎(chǔ)設(shè)施支持,減少因農(nóng)產(chǎn)品各環(huán)節(jié)不協(xié)調(diào)所造成的農(nóng)戶利潤(rùn)損失以及產(chǎn)品不必要的成本上漲，從而讓農(nóng)戶利潤(rùn)最大化，同時(shí)減少消費(fèi)者購(gòu)買成本。拓寬優(yōu)質(zhì)農(nóng)產(chǎn)品的宣傳、銷售渠道，通過(guò)設(shè)計(jì)農(nóng)戶產(chǎn)品直銷平臺(tái)宣傳銷售農(nóng)產(chǎn)品，為消費(fèi)者提供一個(gè)全面且優(yōu)質(zhì)的農(nóng)副產(chǎn)品直銷平臺(tái)，讓消費(fèi)者能更方便快捷的購(gòu)買到自己喜歡的農(nóng)副產(chǎn)品，同時(shí)為農(nóng)戶尤其是部分貧困地方農(nóng)戶拓寬銷售渠道，解決地方農(nóng)副產(chǎn)品賣出難，賣出少的問(wèn)題，同時(shí)通過(guò)平臺(tái)降低宣傳以及銷售成本。1.3國(guó)內(nèi)研究現(xiàn)狀當(dāng)前農(nóng)業(yè)與市場(chǎng)環(huán)境問(wèn)題突出，國(guó)內(nèi)各家企業(yè)也致力于探索新時(shí)代中農(nóng)業(yè)經(jīng)濟(jì)發(fā)展的最優(yōu)解，其中研究最多的則是電商平臺(tái)系統(tǒng)?；ヂ?lián)網(wǎng)時(shí)代電商平臺(tái)興起，其中以京東、淘寶、拼多多等為代表的電商都已形成了一點(diǎn)的網(wǎng)絡(luò)商業(yè)規(guī)模并且也拓寬銷售渠道至傳統(tǒng)農(nóng)業(yè)，為農(nóng)業(yè)電商發(fā)展提供平臺(tái)與技術(shù)支持。隨著電商平臺(tái)中技術(shù)的更迭與銷售模式的創(chuàng)新，我國(guó)相對(duì)成熟的農(nóng)業(yè)電商平臺(tái)可以大致分為以下三類：自建交易平臺(tái)，此類平臺(tái)一般為某個(gè)品牌自建電商平臺(tái)并根據(jù)自己的產(chǎn)品風(fēng)格與定位設(shè)計(jì)系統(tǒng)界面，且與第三方平臺(tái)相比品牌方自建平臺(tái)可以降低支付高額的平臺(tái)服務(wù)費(fèi)用，從而降低成本。同時(shí)，由于平臺(tái)為自主創(chuàng)建，企業(yè)也能更好掌控產(chǎn)品數(shù)據(jù)。然而由于農(nóng)副產(chǎn)品銷售中商戶大多小而散，無(wú)法擁有自建交易平臺(tái)的技術(shù)與資本，因此只適合商家對(duì)商家的模式，導(dǎo)致農(nóng)副產(chǎn)品自建交易平臺(tái)在電商中的應(yīng)用較少；第三方平臺(tái)，此類平臺(tái)的特點(diǎn)為商家并不主動(dòng)經(jīng)營(yíng)平臺(tái)，而是由第三方作為中間代理，在第三方建立的平臺(tái)上銷售產(chǎn)品，此類平臺(tái)以京東、天貓為主。此類平臺(tái)降低了商戶銷售產(chǎn)品的門檻，是如今電商平臺(tái)的主要模式。然而由于此類平臺(tái)幾乎不以農(nóng)產(chǎn)品為主要賣點(diǎn)，因此農(nóng)產(chǎn)品的特殊性大大降低，一些特色農(nóng)副產(chǎn)品難以真正得到宣傳。所以國(guó)內(nèi)雖有大型電商平臺(tái)，卻大多不以農(nóng)副產(chǎn)品為主要對(duì)象，而多以綜合性商品為特點(diǎn)。自建移動(dòng)服務(wù)類，此類平臺(tái)則為我國(guó)農(nóng)副產(chǎn)品電商將來(lái)的主要研究路徑之一，平臺(tái)以農(nóng)業(yè)產(chǎn)品特色為主要開(kāi)發(fā)方向，建立了區(qū)域化農(nóng)業(yè)綜合服務(wù)平臺(tái)。自建移動(dòng)服務(wù)類農(nóng)業(yè)電商平臺(tái)在互聯(lián)網(wǎng)技術(shù)的基礎(chǔ)上，結(jié)合了電商平臺(tái)的優(yōu)勢(shì)，為有農(nóng)產(chǎn)品需求的客戶提供綜合服務(wù)平臺(tái)（張馨予，2021）。1.4論文結(jié)構(gòu)安排本小節(jié)將展示論文的結(jié)構(gòu)層次安排：，闡述了課題的農(nóng)副產(chǎn)品系統(tǒng)的研究背景、研究農(nóng)副產(chǎn)品直銷系統(tǒng)的目的和意義以及國(guó)內(nèi)研究現(xiàn)狀。，闡述本系統(tǒng)所使用的技術(shù)以及相關(guān)使用技術(shù)的背景。，闡述系統(tǒng)總體思路對(duì)需求進(jìn)行分析，從用戶身份展開(kāi)對(duì)系統(tǒng)進(jìn)行需求分析。，闡述系統(tǒng)概要設(shè)計(jì)，包括功能和模塊設(shè)計(jì)，功能流程圖，以及數(shù)據(jù)庫(kù)關(guān)系以及具體有關(guān)設(shè)計(jì)。，系統(tǒng)關(guān)鍵功能詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)。包括系統(tǒng)架構(gòu)圖以及部分功能實(shí)現(xiàn)代碼，具體展示農(nóng)副產(chǎn)品直銷系統(tǒng)運(yùn)行截圖，并簡(jiǎn)要說(shuō)明相關(guān)功能。，總結(jié)了論文工作中的主要研究?jī)?nèi)容，總結(jié)了在設(shè)計(jì)農(nóng)副產(chǎn)品直銷系統(tǒng)所存在的問(wèn)題與不足，并提出對(duì)未來(lái)學(xué)習(xí)軟件開(kāi)發(fā)設(shè)計(jì)的展望。

2系統(tǒng)相關(guān)技術(shù)2.1Vue前端框架Vue由EvanYou創(chuàng)建，于2014年發(fā)布。Vue使用model-view-viewmodel（MVVM）體系結(jié)構(gòu)。Vue是一款構(gòu)建用戶界面的漸進(jìn)式框架。它旨在通過(guò)簡(jiǎn)潔的API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。Vue之所以特殊，是因?yàn)樗c大多數(shù)其他JavaScript框架和庫(kù)有所不同。與其他大而全的框架不同，Vue從基礎(chǔ)開(kāi)始就被設(shè)計(jì)為一個(gè)可逐步適應(yīng)的框架（SufyanbinUzayr，2022）。Vue的核心庫(kù)只關(guān)注視圖層，不僅易于上手，也便于與第三方庫(kù)或已有項(xiàng)目整合Vue的創(chuàng)建意在幫助開(kāi)發(fā)人員去構(gòu)建用戶界面。Vue因?yàn)槠潴w積小且性能高效使其具有輕量化的特點(diǎn)，同時(shí)其雙向數(shù)據(jù)綁定的特性讓其能實(shí)現(xiàn)視圖與數(shù)據(jù)之間的實(shí)時(shí)同步。另外，其還具有豐富的開(kāi)發(fā)生態(tài)，眾多的開(kāi)發(fā)插件擴(kuò)展了Vue的功能使其可以實(shí)現(xiàn)各種復(fù)雜的需求。2.2JavaScript語(yǔ)言JavaScript作為一種直譯式的腳本語(yǔ)言，它是動(dòng)態(tài)的、弱類型并且基于原型的一種語(yǔ)言，它的代碼不需要再通過(guò)編譯，而是通過(guò)瀏覽器就可以直接給客戶端發(fā)送。目前，JavaScript技術(shù)是一種較為流行的腳本語(yǔ)言，因?yàn)樗谝欢ǔ潭壬蠌浹a(bǔ)了Html所具有的缺陷（王艷梅，2022）。JavaScript腳本語(yǔ)言可以應(yīng)用到很多網(wǎng)站建設(shè)的熱門技術(shù)中,其中包括圖像處理、CSS技術(shù)、Ajax技術(shù)等。在開(kāi)發(fā)和設(shè)計(jì)網(wǎng)頁(yè)時(shí),使用JavaScript腳本語(yǔ)言可以使頁(yè)面的交互效果加強(qiáng),可以使網(wǎng)頁(yè)界面更加美觀,增強(qiáng)用戶視覺(jué)效果,同時(shí)還可以使用特效處理使用戶的使用操作更加簡(jiǎn)單和網(wǎng)頁(yè)功能更加強(qiáng)大（陳少暉，2017）。2.3express后端框架express是一個(gè)簡(jiǎn)潔而靈活的node.jsWeb應(yīng)用框架,其提供一系列強(qiáng)大特性幫助開(kāi)發(fā)者創(chuàng)建各種Web應(yīng)用（高霞，2023）。Express不對(duì)node.js已有的特性進(jìn)行二次抽象，只是在它之上擴(kuò)展了Web應(yīng)用所需的功能，其借用了現(xiàn)有技術(shù)中的許多特性，在多種特性之間達(dá)到了更理想的平衡。Express具有許多十分強(qiáng)大的特性表現(xiàn)為：快速進(jìn)行開(kāi)發(fā)，擁有靈活的擴(kuò)展機(jī)制，使用簡(jiǎn)單方便，路由、多模塊支持等（王伶俐，2017）。2.4CSS樣式表層疊樣式表(英文全稱：CascadingStyleSheets)，是一種用來(lái)表現(xiàn)Html或Xml等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。CSS為Html標(biāo)記語(yǔ)言提供了一種樣式描述，定義了其中元素的顯示方式，CSS在Web設(shè)計(jì)領(lǐng)域是一個(gè)突破，利用它可以實(shí)現(xiàn)修改一個(gè)小的樣式更新與之相關(guān)的所有頁(yè)面元素（姜博，2019）。CSS是分層的風(fēng)格,也是一種不需要編輯就能從瀏覽器中直接運(yùn)行的選項(xiàng)，可以管理網(wǎng)頁(yè)的界面（何雪鋒，2017）。CSS可以對(duì)網(wǎng)頁(yè)中的對(duì)象進(jìn)行排版像層一樣,它能一系列的規(guī)則來(lái)形式化的對(duì)開(kāi)發(fā)網(wǎng)頁(yè)的元素進(jìn)行渲染，并且CSS可以對(duì)前端網(wǎng)頁(yè)元素中實(shí)現(xiàn)更多的樣式控制,使得開(kāi)發(fā)者可以更加靈活的控制頁(yè)面布局。因此，為了本系統(tǒng)的美觀化以及更加方便進(jìn)行樣式控制，本系統(tǒng)使用CSS樣式表進(jìn)行前端頁(yè)面中元素的修飾美化并實(shí)現(xiàn)樣式控制。2.5Node.js隨著Node.js的不斷發(fā)展，Node.js漸漸演變成一種構(gòu)建網(wǎng)絡(luò)應(yīng)用的基礎(chǔ)框架，并發(fā)展為一個(gè)不共享任何資源的單線程、單進(jìn)程系統(tǒng)（單振華，2016）。Node.js是RyanDahl于2009年發(fā)起的開(kāi)源項(xiàng)目,是一個(gè)基于ChromeV8引擎,能夠快速構(gòu)建網(wǎng)絡(luò)服務(wù)與應(yīng)用的JavaScript執(zhí)行平臺(tái)。Node.js對(duì)V8引擎做了二次封裝,針對(duì)服務(wù)環(huán)境重新編寫(xiě)了后端的API,并優(yōu)化了一部分代碼,構(gòu)成了一個(gè)高效的JavaScript運(yùn)行環(huán)境。它同時(shí)采用了模塊化管理,開(kāi)發(fā)者可以將程序分解成不同的模塊,然后通過(guò)導(dǎo)入模塊的方式實(shí)現(xiàn)程序功能的復(fù)用,從而大大減少了開(kāi)發(fā)者的工作量，Node.js是一個(gè)JavaScript運(yùn)行平臺(tái)，其顯著特征是它的異步和事件驅(qū)動(dòng)機(jī)制，以及小巧精悍的標(biāo)準(zhǔn)庫(kù)（SufyanbinUzayr，2023）。Node.js對(duì)一些特殊用例進(jìn)行優(yōu)化，使其在執(zhí)行JavaScript的響應(yīng)速度非常快，基于ChromeJavaScript運(yùn)行時(shí)建立的平臺(tái)，使其可以用于方便地搭建響應(yīng)速度快、易于擴(kuò)展的網(wǎng)絡(luò)應(yīng)用。2.6AxiosAxios是基于promise的HTTP庫(kù)，用在瀏覽器和node.js中。主要介紹Axios在瀏覽器中的應(yīng)用。在Web開(kāi)發(fā)框架中，Vue技術(shù)棧請(qǐng)求服務(wù)器數(shù)據(jù)主要是通過(guò)vue-resource和Axiios兩種技術(shù)與服務(wù)器通信并獲取數(shù)據(jù)，由于Vue的升級(jí)，vue-resource提供的價(jià)值和其維護(hù)成本相比并不劃算，尤雨溪決定在以后取消對(duì)vue-resource的官方推薦，不再對(duì)vue-resource進(jìn)行升級(jí)，所以越來(lái)越多的開(kāi)發(fā)者用Axios插件進(jìn)行服務(wù)器數(shù)據(jù)的請(qǐng)求（綦慧，2021）。2.7ElementUI框架ElementUI是一套為開(kāi)發(fā)者們準(zhǔn)備的一款設(shè)計(jì)和交互非常優(yōu)秀的前端UI框架，它可以采用Vue2.0進(jìn)行實(shí)現(xiàn)，也可以采用Angular和React進(jìn)行實(shí)現(xiàn)，它包含了一套設(shè)計(jì)原則和組件，同時(shí)具有非常多的設(shè)計(jì)資源，如Sketch模板、Axure組件等。ElementUI是一個(gè)不依賴于Vue的UI庫(kù)，但是它是當(dāng)前和Vue框架一起開(kāi)發(fā)項(xiàng)目的一個(gè)比較好的UI框架。由于ElementUI具備極其豐富的UI組件庫(kù)，使用它可以非?？焖僦谱鞒雒烙^大方的前端網(wǎng)頁(yè)，可以為前端程序員減輕了工作量、提高了開(kāi)發(fā)效率，讓程序員把更多的精力放到業(yè)務(wù)的功能實(shí)現(xiàn)上。ElementUI框架也有其不足的地方，目前為止只支持Vue2.0,不支持Vue3.0,在Vue3.0環(huán)境下使用Element-plus框架，Element-plus框架是ElementUI框架的升級(jí)版，Element-plus框架在支持面向?qū)ο蟮木幊谭矫娓佑押煤捅憷ㄍ觚堒姡?023）。2.8MySQLMySQL是應(yīng)用最為廣泛數(shù)據(jù)庫(kù)管理系統(tǒng)之一，它是在1995年由瑞迪的MySQLAB公司研發(fā)的一款開(kāi)源的數(shù)據(jù)庫(kù)，目前是由Oracle公司擁有。它的設(shè)計(jì)目的是提供一種簡(jiǎn)單的、可靠的、快速的數(shù)據(jù)存儲(chǔ)和管理方式（MichaelKofler，2001）。MySQL在系統(tǒng)數(shù)據(jù)處理設(shè)計(jì)中具有高性能的特點(diǎn)，它的高性能能處理大量的并發(fā)請(qǐng)求，同時(shí)MySQL可以支持多線程處理，能夠更好的使用多核處理器的性能,因此本系統(tǒng)選擇使用MySQL數(shù)據(jù)庫(kù)作為數(shù)據(jù)管理工具，其次MySQL在安全性方面也十分出色,它有多種安全機(jī)制，通過(guò)使用用戶權(quán)限管理，授權(quán)和限制用戶的訪問(wèn)權(quán)限，確保只有特定用戶才能訪問(wèn)特定數(shù)據(jù)庫(kù)與表，因此本系統(tǒng)使用MySQL數(shù)據(jù)庫(kù)對(duì)數(shù)據(jù)來(lái)保證數(shù)據(jù)的安全性。此外，由于MySQL具有良好的可擴(kuò)展性，開(kāi)發(fā)者可以根據(jù)團(tuán)隊(duì)需求進(jìn)行靈活擴(kuò)展，同時(shí)還由于支持多種操作系統(tǒng)，為開(kāi)發(fā)者提供極大靈活性，因此為本系統(tǒng)擴(kuò)展與平臺(tái)靈活性考慮，選擇MySQL作為數(shù)據(jù)庫(kù)工具。

3需求分析需求分析也稱為軟件需求分析，它是軟件開(kāi)發(fā)過(guò)程中的一個(gè)十分關(guān)鍵的階段，在這個(gè)過(guò)程中開(kāi)發(fā)者對(duì)軟件的應(yīng)滿足的需求進(jìn)行深入的調(diào)查與分析。本系統(tǒng)將需求分析分為系統(tǒng)總體性需求分析、功能性需求分析以及非功能性需求分析進(jìn)行闡述。3.1系統(tǒng)總體需求分析本系統(tǒng)為使用Vue與ElementUi作為開(kāi)發(fā)工具開(kāi)發(fā)前端，以Axios做前后端數(shù)據(jù)交互，在進(jìn)行圖片資源存儲(chǔ)時(shí)，使用Nginx存儲(chǔ)圖片靜態(tài)資源，并采用express為后端框架開(kāi)發(fā)的農(nóng)副產(chǎn)品直銷平臺(tái)。本系統(tǒng)主要包括消費(fèi)者，商戶兩種用戶身份的功能性需求，此外還包括用戶界面，數(shù)據(jù)合法檢測(cè)、系統(tǒng)可靠性和系統(tǒng)性能等非功能性需求。本系統(tǒng)核心理念為讓優(yōu)質(zhì)農(nóng)產(chǎn)品更好在人們心中發(fā)芽，減少農(nóng)戶在新時(shí)代銷售農(nóng)副產(chǎn)品的門檻以及負(fù)擔(dān)。商戶層面，用戶中以商戶身份使用系統(tǒng)需要在進(jìn)行商戶的注冊(cè)功能中完成相關(guān)信息填寫(xiě)后可進(jìn)行登錄，登錄后可以填寫(xiě)相關(guān)信息以添加想銷售的商品，與此同時(shí)，還可以查看并編輯以上架的商品信息，在消費(fèi)者購(gòu)買商戶已上架商品時(shí)，還可以查看有關(guān)訂單信息，之后可選擇發(fā)貨并填寫(xiě)快遞訂單號(hào)，最后還可以對(duì)有關(guān)消費(fèi)者的售后請(qǐng)求選擇是否退款處理。消費(fèi)者層面，首次進(jìn)入主頁(yè)面時(shí)默認(rèn)為未注冊(cè)狀態(tài)，可以進(jìn)行瀏覽商品操作，只有在完成注冊(cè)登錄后才可進(jìn)行購(gòu)買，注冊(cè)時(shí)同樣需填寫(xiě)用戶的賬號(hào)密碼以及個(gè)人郵箱等基本信息，在登錄后瀏覽并選擇自己想要的商品后，選擇數(shù)量并填寫(xiě)快遞目的地后點(diǎn)擊購(gòu)買即可。在用戶管理方面，可以通過(guò)進(jìn)入用戶管理中心修改自己相關(guān)信息。此外，可以查看相關(guān)訂單狀態(tài)，對(duì)于訂單方面，可以添加對(duì)物品的評(píng)論，搜索有關(guān)訂單，確認(rèn)商品是否到貨。一個(gè)良好的系統(tǒng)需要有一個(gè)簡(jiǎn)潔且易懂的界面，這樣可以讓用戶在使用系統(tǒng)時(shí)才能有更好的使用體驗(yàn)，與此同時(shí)，由于有關(guān)數(shù)據(jù)的特殊性，系統(tǒng)對(duì)于數(shù)據(jù)的檢測(cè)也必不可少，以此減少非法數(shù)據(jù)的產(chǎn)生并減少系統(tǒng)的故障。同時(shí)也由于對(duì)用戶個(gè)人數(shù)據(jù)的保護(hù)，也要做到使用時(shí)隱藏部分用戶數(shù)據(jù)，例如用戶的密碼，防止用戶數(shù)據(jù)泄露。而判斷系統(tǒng)是否真正可行，除了基本的功能外也需要保障系統(tǒng)的可靠性，減少系統(tǒng)在使用過(guò)程中出現(xiàn)故障卡頓甚至崩潰的意外情況，因此在進(jìn)行需求分析時(shí)也需考慮提高系統(tǒng)的可靠性與性能，以防出現(xiàn)意外情況影響用戶體驗(yàn)。3.2系統(tǒng)功能性需求分析系統(tǒng)功能性需求分析將拆分為兩部分，其中根據(jù)系統(tǒng)面向用戶身份可以分為消費(fèi)者功能需求、商戶功能需求。圖1為系統(tǒng)功能性需求分析圖。3.2.1消費(fèi)者用戶需求消費(fèi)者用戶需求包括用戶信息管理的功能模塊、瀏覽以及購(gòu)買商品的功能模塊、用戶訂單管理以及用戶訂單售后模塊。具體如下：（1）消費(fèi)者用戶功能模塊本模塊用于消費(fèi)者賬號(hào)相關(guān)的基本功能，在這之中包括消費(fèi)者的注冊(cè)與登錄功能，消費(fèi)者個(gè)人信息的修改功能。用戶在執(zhí)行購(gòu)買操作前必須登錄，而登錄前必須完成注冊(cè)，注冊(cè)時(shí)需填寫(xiě)個(gè)人用戶名、個(gè)人郵箱以及密碼，其中個(gè)人用戶名不得與已用用戶名重合，且用戶名長(zhǎng)度最多為二十位，個(gè)人郵箱填寫(xiě)需符合正確郵箱格式，個(gè)人密碼則要求長(zhǎng)度為八至二十位。完成注冊(cè)后系統(tǒng)自動(dòng)跳轉(zhuǎn)至登錄頁(yè)面，用戶需填寫(xiě)已注冊(cè)用戶名與正確密碼方可登錄。進(jìn)入主頁(yè)后可以通過(guò)用戶中心修改與完善個(gè)人相關(guān)信息，其中包括個(gè)人頭像、個(gè)人郵箱、個(gè)人地址以及自我簡(jiǎn)介，其中用戶id與用戶名為不可修改項(xiàng)。完成相關(guān)信息填寫(xiě)后方可進(jìn)行購(gòu)買操作。（2）消費(fèi)者商品模塊商品模塊是農(nóng)副產(chǎn)品直銷平臺(tái)的核心組成部分，對(duì)應(yīng)相關(guān)功能如下：在用戶完成注冊(cè)登錄后，進(jìn)入到主頁(yè)即可瀏覽商品，其中首頁(yè)包含種類列表、輪播圖、以及推薦欄和各個(gè)種類的部分商品。在確定購(gòu)買商品后點(diǎn)擊對(duì)應(yīng)商品可進(jìn)入商品詳情頁(yè)面，進(jìn)入后可選擇購(gòu)買對(duì)應(yīng)商品數(shù)量以及商品送達(dá)目的地然后點(diǎn)擊購(gòu)買即可。（3）訂單模塊訂單模塊則是與用戶購(gòu)買商品的訂單有關(guān)功能集合，主要功能如下：在用戶完成購(gòu)買時(shí)可以點(diǎn)擊用戶中心進(jìn)行用戶訂單的有關(guān)查詢，訂單包含訂單創(chuàng)建時(shí)間、商戶名稱、購(gòu)買數(shù)量、訂單狀態(tài)等信息。用戶訂單列表除總覽外還按商品訂單狀態(tài)分為待發(fā)貨、等待確認(rèn)、待評(píng)論、已完成四種狀態(tài)。用戶可以在確保商品送達(dá)后點(diǎn)擊確認(rèn)收貨完成訂單，之后用戶可以在待評(píng)論欄進(jìn)行商品評(píng)價(jià)操作，其中當(dāng)商品較多時(shí)用戶可以通過(guò)搜索查詢對(duì)應(yīng)商品訂單。3.2.2商戶用戶需求商戶用戶需求分析可以分為用戶功能模塊、商品管理模塊、訂單管理模塊、售后處理模塊，具體如下：（1）用戶功能模塊商戶在上架商品前需進(jìn)行注冊(cè)操作，其中注冊(cè)需填寫(xiě)個(gè)人用戶名、郵箱、賬戶密碼。用戶名不得與已有商戶名重合，且同樣最多為二十位，個(gè)人郵箱填寫(xiě)需符合正確郵箱格式，個(gè)人密碼則要求長(zhǎng)度為八至二十位。注冊(cè)后進(jìn)入登錄頁(yè)面，在填寫(xiě)完用戶名與密碼登錄后可進(jìn)入商戶中心，進(jìn)入后可對(duì)商戶信息進(jìn)行修改完善。（2）商品管理模塊商家在商品管理模塊中可以通過(guò)進(jìn)入商品管理頁(yè)面對(duì)商品進(jìn)行添加管理等操作，例如商家可以選擇進(jìn)入商品管理頁(yè)面查看已上架商品信息，同時(shí)還可以根據(jù)商品信息選擇添加商戶個(gè)人需要上架的商品，在添加商品時(shí)商戶需填寫(xiě)商品名稱等商品在售賣時(shí)的必要信息。商家如果想要更改信息時(shí)，可以對(duì)于已上架商品進(jìn)行編輯操作來(lái)修改有關(guān)商品信息。（3）訂單管理模塊在商戶中心可以通過(guò)發(fā)貨等待查詢有關(guān)待發(fā)貨訂單并可進(jìn)行發(fā)貨操作，其中發(fā)貨時(shí)需輸入快遞單號(hào)，在訂單列表可查詢訂單總覽，了解有關(guān)訂單狀態(tài)。（4）售后處理模塊商戶可以對(duì)部分問(wèn)題訂單進(jìn)行售后處理，其中售后列表為售后訂單總覽，商戶可在售后列表中查詢有關(guān)售后訂單，而售后處理列表則為待處理售后訂單，商戶可以對(duì)相關(guān)售后訂單選擇是否進(jìn)行售后服務(wù)，其中包括是否退款。3.3系統(tǒng)非功能性需求分析非功能性需求為除功能性需求以外的一些需求與約束，但開(kāi)發(fā)時(shí)卻需要重視這些需求，將其作為設(shè)計(jì)系統(tǒng)時(shí)的一部分，這樣的系統(tǒng)才能認(rèn)為是完整的系統(tǒng)。非功能性需求一般包括系統(tǒng)的安全性、易用性、美觀性。3.3.1易用性簡(jiǎn)潔明了的界面能減少用戶使用時(shí)的臃腫感，讓用戶更易上手，減少用戶使用系統(tǒng)的門檻，拓寬系統(tǒng)的受眾。系統(tǒng)具備良好的易用性能夠顯著提升產(chǎn)品與用戶習(xí)慣的契合度，并滿足用戶的使用期望。這種系統(tǒng)中具有的易用性對(duì)用戶的生產(chǎn)效率有著積極的影響，能有效降低錯(cuò)誤率，同時(shí)也有助于用戶更快速地接受新系統(tǒng)。3.3.2安全性安全性主要指本平臺(tái)應(yīng)具備一系列安全保障措施，保護(hù)用戶隱私和數(shù)據(jù)安全。系統(tǒng)在設(shè)計(jì)中應(yīng)對(duì)用戶一些敏感信息進(jìn)行加密，例如本系統(tǒng)在用戶進(jìn)行注冊(cè)登錄時(shí)對(duì)用戶密碼進(jìn)行屏蔽，從而保證用戶賬戶安全防止用戶隱私泄露。3.3.3美觀性美觀性則要求系統(tǒng)設(shè)計(jì)符合大眾審美，各元素設(shè)計(jì)美觀大方。美觀性主要由系統(tǒng)使用顏色、字體、圖標(biāo)等設(shè)計(jì)組成，一個(gè)設(shè)計(jì)凌亂的頁(yè)面不僅會(huì)讓人使用體驗(yàn)下降，也會(huì)降低系統(tǒng)的易用性，而是否美觀也是決定大眾對(duì)于系統(tǒng)第一印象的好壞。所以，在設(shè)計(jì)系統(tǒng)時(shí)也應(yīng)考慮如何設(shè)計(jì)一個(gè)美觀的界面。

4系統(tǒng)概要設(shè)計(jì)本章將從系統(tǒng)功能模塊圖、系統(tǒng)用例圖、業(yè)務(wù)流程設(shè)計(jì)、數(shù)據(jù)庫(kù)設(shè)計(jì)幾方面來(lái)闡述系統(tǒng)的概要設(shè)計(jì)。4.1系統(tǒng)功能模塊圖1系統(tǒng)功能性需求分析圖4.1.1消費(fèi)者用戶模塊消費(fèi)者用戶模塊可以劃分為三個(gè)子模塊，其中用戶功能模塊用以處理用戶的個(gè)人信息，例如用戶的注冊(cè)以及登錄功能；商品模塊則為用戶對(duì)商品的相關(guān)操作，例如瀏覽有關(guān)商品，選擇購(gòu)買商品；用戶訂單管理則是處理用戶有關(guān)商品訂單的操作，例如搜索相關(guān)訂單，確認(rèn)訂單收貨，以及對(duì)訂單進(jìn)行評(píng)價(jià)。4.1.2商戶功能模塊商戶功能可以分為四個(gè)子模塊，其中用戶功能模塊為商戶的個(gè)人信息相關(guān)功能，其中包含商戶的注冊(cè)與登錄功能；商品管理模塊則為商戶負(fù)責(zé)對(duì)商品的管理操作，例如上架新商品、搜索已上架商品、以及修改已上架商品信息；訂單管理則是商戶對(duì)商品產(chǎn)生訂單進(jìn)行相關(guān)處理的操作，例如查詢訂單信息、對(duì)待發(fā)貨商品進(jìn)行發(fā)貨處理；售后處理則為商戶對(duì)售后訂單進(jìn)行售后處理的功能。4.2系統(tǒng)用例圖本系統(tǒng)以用戶角色出發(fā)點(diǎn)分析，將系統(tǒng)劃分為消費(fèi)者子系統(tǒng)和商戶子系統(tǒng)，并根據(jù)不同用戶的功能化差異設(shè)計(jì)系統(tǒng)用例圖，如圖2所示。圖2系統(tǒng)用例圖4.2.1系統(tǒng)總體模塊概述由第三章需求分析與圖二分析可得，整個(gè)系統(tǒng)模塊共由消費(fèi)者身份子模塊與商戶子系統(tǒng)組成，這兩個(gè)子系統(tǒng)對(duì)應(yīng)消費(fèi)者用戶以及商戶用戶身份，每個(gè)子系統(tǒng)各實(shí)現(xiàn)各自用戶功能，進(jìn)而組成整個(gè)系統(tǒng)，簡(jiǎn)單概述即消費(fèi)者瀏覽購(gòu)買商品，商戶處理訂單并發(fā)貨，消費(fèi)者從而確認(rèn)訂單完成收貨，實(shí)現(xiàn)商品的買與賣。消費(fèi)者模塊子模塊負(fù)責(zé)消費(fèi)者有關(guān)頁(yè)面以及功能支持，其中功能有消費(fèi)者用戶的注冊(cè)以及登錄功能、修改編輯個(gè)人信息功能；瀏覽并購(gòu)買商品功能；訂單功能，其中包含訂單的查詢功能、訂單搜索功能、確認(rèn)訂單收貨、對(duì)訂單進(jìn)行評(píng)價(jià)功能。商戶模塊則負(fù)責(zé)商戶有關(guān)頁(yè)面以及功能支持，其中功能有商戶的注冊(cè)以及登錄功能、修改編輯個(gè)人信息功能；商品管理功能，其中有上架商品、修改商品信息、搜索商品功能；訂單管理，其中有查詢訂單功能、訂單發(fā)貨功能；售后處理功能：對(duì)有關(guān)訂單選擇相應(yīng)售后處理操作。4.3業(yè)務(wù)流程設(shè)計(jì)本系統(tǒng)基于不同用戶使用模式，設(shè)計(jì)不同用戶在使用過(guò)程中對(duì)應(yīng)的本系統(tǒng)時(shí)的業(yè)務(wù)流程。本節(jié)將根據(jù)不同用戶身份，展示不同用戶在使用本系統(tǒng)時(shí)的流程圖，進(jìn)行業(yè)務(wù)流程詳解。4.3.1消費(fèi)者用戶流程用戶注冊(cè)登錄新消費(fèi)者用戶注冊(cè)登錄的流程如圖3所示。新的消費(fèi)者用戶在注冊(cè)登錄時(shí)需要填寫(xiě)個(gè)人用戶名與密碼以及個(gè)人郵箱，其中個(gè)人用戶名與密碼為登錄必要信息，個(gè)人用戶名不得超過(guò)二十位，輸入密碼長(zhǎng)度應(yīng)為八至二十位，且郵箱需進(jìn)行合法性驗(yàn)證。在注冊(cè)成功后，將跳轉(zhuǎn)至登錄頁(yè)，用戶在輸入正確用戶名與密碼后才可進(jìn)入系統(tǒng)首頁(yè)。圖3用戶注冊(cè)登錄流程圖用戶修改個(gè)人信息用戶在完成注冊(cè)登錄后，可以通過(guò)進(jìn)入用戶中心頁(yè)面點(diǎn)擊用戶信息編輯修改來(lái)選擇對(duì)個(gè)人信息進(jìn)行修改操作，用戶個(gè)人信息的編輯包括用戶個(gè)人頭像，用戶通過(guò)上傳圖片文件來(lái)更改個(gè)人頭像信息；在用戶編輯個(gè)人郵箱時(shí)，需要按照正確郵箱格式輸入郵箱，否則信息修改將不會(huì)予以用戶通過(guò)；另外還有個(gè)人地址以及簡(jiǎn)介信息。用戶點(diǎn)擊對(duì)應(yīng)信息即可進(jìn)行修改，其中用戶名與id為不可修改項(xiàng)。具體流程如圖4所示。圖4用戶修改個(gè)人信息流程圖用戶購(gòu)買商品用戶在完成注冊(cè)登錄后方可進(jìn)行購(gòu)買商品操作，進(jìn)入頁(yè)面后，系統(tǒng)將會(huì)展示部分可購(gòu)買的商品，用戶可直接點(diǎn)擊對(duì)應(yīng)商品進(jìn)入購(gòu)買頁(yè)面，在購(gòu)買商品時(shí)需要填寫(xiě)商品數(shù)量以及發(fā)貨目的地等訂單信息，在填寫(xiě)完信息后用戶點(diǎn)擊購(gòu)買方可購(gòu)買成功。具體業(yè)務(wù)流程如圖5所示。圖5用戶購(gòu)買商品流程圖用戶訂單查詢?cè)谟脩糇?cè)登錄后，可以進(jìn)入用戶中心對(duì)用戶個(gè)人訂單進(jìn)行總查詢，可以通過(guò)查詢獲得訂單狀態(tài)，訂單狀態(tài)共分為待發(fā)貨、待確認(rèn)、待評(píng)論、已完成，用戶可通過(guò)不同列表查看不同狀態(tài)訂單，同時(shí)也可通過(guò)搜索查看特定訂單。訂單列表中含有訂單各基礎(chǔ)的信息，例如用戶購(gòu)買的商品名、訂單創(chuàng)建的時(shí)間、以及用戶在訂單中所要支付的金額等。具體流程如圖6所示。圖6用戶訂單查詢流程圖用戶確認(rèn)商品收貨用戶已下單且商家已發(fā)貨的訂單可以進(jìn)行確定收貨操作。如圖7所示。圖7用戶確認(rèn)收貨流程圖用戶進(jìn)行商品評(píng)價(jià)用戶在進(jìn)行登錄后，在用戶中心頁(yè)面點(diǎn)擊訂單列表可以獲得用戶商品訂單的狀態(tài)，用戶此時(shí)可以選擇相應(yīng)訂單對(duì)對(duì)應(yīng)的商品進(jìn)行評(píng)價(jià)操作，流程如圖8所示。圖8用戶商品評(píng)價(jià)流程圖4.3.2商戶用戶流程（1）商戶注冊(cè)登錄與修改個(gè)人信息商戶注冊(cè)登錄與消費(fèi)者用戶登錄基本一致，商戶需輸入不重合且合法的用戶名，然后輸入個(gè)人郵箱與密碼實(shí)現(xiàn)商戶注冊(cè)，注冊(cè)后商戶需要通過(guò)在登錄頁(yè)面正確填寫(xiě)注冊(cè)時(shí)的用戶名密碼然后點(diǎn)擊登錄，即可通過(guò)登錄進(jìn)入商戶中心，具體流程如圖9所示。圖９商戶注冊(cè)登錄流程圖在商戶注冊(cè)登錄后可以在商戶中心進(jìn)行修改操作，其中含有商戶個(gè)人頭像、郵箱、地址以及個(gè)人簡(jiǎn)介等，商戶的用戶名與ID為不可修改項(xiàng)，修改完點(diǎn)擊提交修改即可完成信息編輯。（2）商戶上架商品商戶在注冊(cè)登錄后可以在商戶中心可以選擇對(duì)商品進(jìn)行添加的操作，首先商戶在商品管理頁(yè)點(diǎn)擊添加商品，然后系統(tǒng)將跳轉(zhuǎn)添加商品時(shí)的信息填寫(xiě)頁(yè)面，此時(shí)商戶填寫(xiě)必要的信息后即可添加商品，添加時(shí)需上傳商品圖片等信息，如圖10所示。圖10商戶添加商品流程圖（3）商戶編輯商品信息商戶在注冊(cè)登錄后可以在商戶中心對(duì)已有商品進(jìn)行編輯操作,修改商品簡(jiǎn)介、價(jià)格、發(fā)貨地等信息，具體流程如圖11所示。圖11商戶修改商品信息流程圖（4）商戶搜索已有商品商戶在注冊(cè)登錄后，如果想搜索已上架商品，需在商戶中心中商品管理中填寫(xiě)對(duì)應(yīng)商品信息，具體流程如圖12所示。圖12商戶搜索商品信息流程圖（5）商戶訂單發(fā)貨商戶在用戶購(gòu)買商品后可以在訂單管理頁(yè)面查看待發(fā)貨訂單，訂單狀態(tài)有待發(fā)貨、已完成等訂單狀態(tài)，商戶選擇對(duì)應(yīng)訂單確認(rèn)發(fā)貨，然后輸入對(duì)應(yīng)快遞單號(hào)點(diǎn)擊發(fā)貨，即可完成商品發(fā)貨操作，具體流程如圖13所示。圖13商戶訂單發(fā)貨流程圖（6）商戶售后處理商戶可在商戶中心頁(yè)面查看有售后需求的訂單，并可以對(duì)訂單選擇是否進(jìn)行售后處理，具體流程如圖14所示。圖14商戶售后處理流程圖4.4數(shù)據(jù)庫(kù)設(shè)計(jì)一個(gè)好的系統(tǒng)設(shè)計(jì)需要有數(shù)據(jù)持久化的要求，而數(shù)據(jù)持久化則需要保證數(shù)據(jù)結(jié)構(gòu)清晰合理、易于維護(hù)、數(shù)據(jù)關(guān)系良好等，本節(jié)將從E-R圖與表設(shè)計(jì)兩方面闡述數(shù)據(jù)庫(kù)設(shè)計(jì)。4.4.1E-R圖本節(jié)將通過(guò)數(shù)據(jù)庫(kù)E-R圖體現(xiàn)數(shù)據(jù)庫(kù)之間關(guān)系，本數(shù)據(jù)庫(kù)核心實(shí)體為消費(fèi)者（user）、商戶（merchant）、商品（goods）、評(píng)論（comment）、訂單（orders）、售后（request）。圖15中所列實(shí)體屬性為部分主要屬性。其中消費(fèi)者購(gòu)買商品，商戶編輯商品，購(gòu)買商品后產(chǎn)生訂單，通過(guò)訂單用戶可進(jìn)行評(píng)論與售后操作，具體如圖15所示。圖15數(shù)據(jù)庫(kù)E-R圖其中消費(fèi)者與商品為多對(duì)多的關(guān)系，一個(gè)消費(fèi)者可購(gòu)買多個(gè)商品，而一個(gè)商品可有多個(gè)消費(fèi)者購(gòu)買。而商品與訂單則為一對(duì)多關(guān)系，一個(gè)商品可有多個(gè)訂單，而一個(gè)訂單對(duì)應(yīng)一個(gè)商品，其中訂單表中引用消費(fèi)者id與商品id，一個(gè)訂單產(chǎn)生一個(gè)售后數(shù)據(jù)與一個(gè)評(píng)論數(shù)據(jù)。商戶和商品則為一對(duì)多的關(guān)系，商戶可上架多個(gè)商品，而一個(gè)商品只可對(duì)應(yīng)一個(gè)商戶數(shù)據(jù)，商戶的主鍵id字段作為商品的外鍵。訂單表除主鍵訂單id外，還引用消費(fèi)者id與商品id以及商戶id為外鍵。4.4.2數(shù)據(jù)庫(kù)表設(shè)計(jì)本小節(jié)將具體說(shuō)明數(shù)據(jù)庫(kù)中各表的設(shè)計(jì)，并列出消費(fèi)者表、商戶表、商品表、訂單信息表等表設(shè)計(jì)詳情。（1）消費(fèi)者數(shù)據(jù)庫(kù)表設(shè)計(jì)消費(fèi)者表用于表示一個(gè)消費(fèi)者，其中需要的數(shù)據(jù)有個(gè)人用戶名、密碼、郵箱、地址、簡(jiǎn)介等。其中用戶名被限制為不超過(guò)二十位，而密碼長(zhǎng)度為最少八位，最多二十位。郵箱則通過(guò)正則表達(dá)式檢驗(yàn)來(lái)確保數(shù)據(jù)合法。簡(jiǎn)介bio用于消費(fèi)者完善個(gè)人詳細(xì)信息。創(chuàng)建日期為記錄賬戶創(chuàng)建日期。具體如表1所示。表1消費(fèi)者用戶表user_data列名數(shù)據(jù)類型主鍵描述idint是主碼idnamevarchar否用戶名passwordvarchar否密碼biovarchar否消費(fèi)者簡(jiǎn)介emailvarchar否電子郵箱create_datetimestamp否賬戶創(chuàng)建日期addressvarchar否個(gè)人地址figurevarchar否個(gè)人頭像（2）商戶用戶表設(shè)計(jì)商戶表用以于表示一個(gè)商戶單位，其中需要的數(shù)據(jù)有個(gè)人用戶名、密碼、郵箱、、簡(jiǎn)介等。其中用戶名被限制為不超過(guò)二十位，而密碼長(zhǎng)度為最少八位，最多二十位。郵箱則通過(guò)正則表達(dá)式檢驗(yàn)來(lái)確保數(shù)據(jù)合法。簡(jiǎn)介bio用于消費(fèi)者完善個(gè)人詳細(xì)信息。創(chuàng)建日期為記錄賬戶創(chuàng)建日期。figure為用戶頭像數(shù)據(jù)存儲(chǔ)，使用varchar數(shù)據(jù)類型，具體如表2所示。表2商戶用戶表merchant_data列名數(shù)據(jù)類型主鍵描述idint是主碼idnamevarchar否用戶名passwordvarchar否密碼biovarchar否商戶簡(jiǎn)介emailvarchar否電子郵箱create_datetimestamp否賬戶創(chuàng)建日期figurevarchar否商戶頭像（3）商品數(shù)據(jù)庫(kù)表設(shè)計(jì)商品表則代表商戶上架的商品,其中id為商品id，merchant_id則代表了該商品上架時(shí)的商戶id屬性，并作為外鍵引用商戶信息表中的id屬性；表中的name字段則為商戶的商品名稱；type使用varchar字段來(lái)表示商品的類型，其中商品的類型為給定選擇的多種種類，商戶在選擇添加或編輯商品時(shí)可以進(jìn)行修改；price則為商品價(jià)格，使用decimal數(shù)據(jù)類型，保留價(jià)格小數(shù)點(diǎn)后兩位；shipping_adddress則為商品的發(fā)貨地址。其中在添加或修改商品信息時(shí)商品名稱、地址、價(jià)格均不得為null，否則提示操作失敗。figure字段則時(shí)對(duì)商品的圖片文件信息進(jìn)行存儲(chǔ)。在商戶上傳圖片時(shí)，系統(tǒng)會(huì)將圖片轉(zhuǎn)為Webp格式并生成唯一id方便后續(xù)使用，同時(shí)對(duì)圖片文件名進(jìn)行裁剪操作，將圖片的文件名信息存儲(chǔ)在數(shù)據(jù)庫(kù)的figure字段中。具體如表3所示。表3商品數(shù)據(jù)表goods_data列名數(shù)據(jù)類型主鍵描述idint是主碼idmerchant_idint否商品對(duì)應(yīng)商戶idnamevarchar否商品名typevarchar否商品類型pricedecimal否商品價(jià)格descriptionvarchar否商品描述create_datedatatime否商品上架日期shipping_addressvarchar否發(fā)貨地址figurevarchar否商品頭像（4）商品訂單表設(shè)計(jì)訂單表在本系統(tǒng)的數(shù)據(jù)庫(kù)中用來(lái)進(jìn)行訂單數(shù)據(jù)的存儲(chǔ)，其中id為訂單主鍵。express_number代表商家輸入的對(duì)應(yīng)訂單的快遞單號(hào)，數(shù)據(jù)類型為int類型，商家需于訂單發(fā)貨時(shí)填寫(xiě)；訂單表還包含物品收貨以及發(fā)貨地址，其中stage表示訂單狀態(tài)，使用enum數(shù)據(jù)類型，分別為＂待發(fā)貨＂，＂待確認(rèn)＂，＂已完成＂，＂待評(píng)論＂，商戶可通過(guò)確認(rèn)發(fā)貨將狀態(tài)變?yōu)榇_認(rèn)，消費(fèi)者可通過(guò)確認(rèn)發(fā)貨將狀態(tài)變?yōu)橐淹瓿?，其中還可通過(guò)待評(píng)論列表評(píng)價(jià)商品，create_date為訂單創(chuàng)建日期。具體表設(shè)計(jì)如表4所示。其中，表中的消費(fèi)者id作為外鍵指向消費(fèi)者表中id主鍵，商戶id作為外鍵指向商戶表中id主鍵，商品id則作為外鍵指向商品表中id主鍵。表4訂單表order_data列名數(shù)據(jù)類型主鍵描述idint是主碼iduser_idint否消費(fèi)者idmerchant_idint否商戶idgoods_idint否商品idshipping_addressvarchar否發(fā)貨地址addressvarchar否收貨地址express_numberint否快遞單號(hào)buy_countint否商品數(shù)量priceint否訂單價(jià)格create_datedatetime否創(chuàng)建日期stageenum否訂單狀態(tài)（5）商品評(píng)論表設(shè)計(jì)評(píng)論表用于存儲(chǔ)用戶對(duì)于訂單的評(píng)論信息，order_id為對(duì)應(yīng)訂單id，其引用為訂單表中中的主鍵id，create_date為評(píng)論時(shí)間，使用datetime數(shù)據(jù)類型，content則為對(duì)商品訂單的評(píng)論，其中評(píng)論使用varchar數(shù)據(jù)類型，具體設(shè)計(jì)如表5所示。表5商品評(píng)論處理表goods_comment列名數(shù)據(jù)類型主鍵描述idint是主碼idorder_idint否訂單idcreate_datedatetime否創(chuàng)建日期contentvarchar否評(píng)論內(nèi)容（6）售后處理表設(shè)計(jì)售后處理表設(shè)計(jì)用來(lái)存儲(chǔ)售后請(qǐng)求狀態(tài)情況信息，其中order_id為對(duì)應(yīng)訂單id，type則為售后種類，數(shù)據(jù)類型為enum，其中包含＂退款且退貨操作＂＂僅退貨操作＂＂維修操作＂＂商品換貨操作＂，create_date為訂單創(chuàng)建日期，stage則為當(dāng)前售后狀態(tài)，分別為＂拒絕＂＂接受＂＂商家待處理＂，商家通過(guò)商戶頁(yè)面可對(duì)售后訂單進(jìn)行處理改變售后狀態(tài)，售后處理表設(shè)計(jì)具體如表6所示。表6售后處理表request_data列名數(shù)據(jù)類型主鍵描述idint是主碼idorder_idint否訂單idtypeenum否售后類型create_datedatetime否創(chuàng)建日期stageenum否售后狀態(tài)綜上，本系統(tǒng)主要使用消費(fèi)者表以及商戶表存儲(chǔ)用戶數(shù)據(jù)，使用商品表存儲(chǔ)商品的有關(guān)數(shù)據(jù)。評(píng)論表以及售后表主要使用訂單表為依賴完成商品各項(xiàng)數(shù)據(jù)的存儲(chǔ)。

5系統(tǒng)關(guān)鍵設(shè)計(jì)與實(shí)現(xiàn)本章將對(duì)第四章中部分概要設(shè)計(jì)內(nèi)容進(jìn)一步詳細(xì)說(shuō)明，給出系統(tǒng)架構(gòu)圖與系統(tǒng)設(shè)計(jì)思路,并對(duì)部分核心功能進(jìn)行分析并展示相關(guān)代碼。5.1系統(tǒng)架構(gòu)圖系統(tǒng)總體架構(gòu)分為用戶分層、前端交互、API層、數(shù)據(jù)庫(kù)，其中用戶分層分為消費(fèi)者層、商戶層；服務(wù)層則分為各個(gè)模塊，API層有消費(fèi)者API、商戶API，商品API等；服務(wù)層則是各個(gè)模塊，其中有商品模塊，消費(fèi)者模塊，商戶模塊等；數(shù)據(jù)庫(kù)采用MySQL數(shù)據(jù)庫(kù)，對(duì)數(shù)據(jù)進(jìn)行存儲(chǔ)維護(hù)。圖16展示了系統(tǒng)總架構(gòu)圖。圖16系統(tǒng)架構(gòu)圖5.2系統(tǒng)詳細(xì)模塊設(shè)計(jì)系統(tǒng)詳細(xì)模塊設(shè)計(jì)將介紹各個(gè)模塊中部分功能的設(shè)計(jì)思路以及核心代碼，內(nèi)容包括用戶注冊(cè)登錄功能、用戶修改個(gè)人信息功能、商戶添加商品功能、用戶購(gòu)買商品功能、用戶發(fā)貨功能等。5.2.1用戶注冊(cè)登錄功能商戶以及消費(fèi)者在使用系統(tǒng)時(shí)都需要登錄后才能使用，而登錄前需要已經(jīng)完成注冊(cè)操作，注冊(cè)時(shí)通過(guò)前端代碼判斷輸入數(shù)據(jù)是否合法，例如郵箱使用正則表達(dá)式判斷是否合法，密碼長(zhǎng)度是否在八至二十位。同時(shí)還會(huì)通過(guò)用戶名判斷是否存在相同用戶，如果存在則返回失敗，否則成功。下為前端簡(jiǎn)要代碼。asyncfunctionsubmitForm(){constaccountMsg=registerForm.value//獲取表單值if(!(accountM.length<=20)){//判斷用戶名長(zhǎng)度}elseif(!(accountMsg.password.length>=6&&accountMsg.password.length<=20)){//判斷密碼長(zhǎng)度}elseif(!accountMsg.email.match('^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$')){//判斷郵箱格式}else{//輸入正確則調(diào)用API中的register方法,傳入accountMsg的name、password、email}if(result){//提示注冊(cè)成功}else//提示存在相同用戶,注冊(cè)失敗同時(shí)后端添加新用戶代碼。exportconstaddUser=async(name,password,email)=>{try{constconnection=awaitpool.getConnection();//獲取數(shù)據(jù)庫(kù)連接constqueryResult=awaitconnection.query('INSERTINTOuser_data(name,password,email)VALUES(?,?,?)',[name,password,email]);//數(shù)據(jù)庫(kù)插入新用戶數(shù)據(jù)connection.release();if(queryResult[0].affectedRows===1){//成功返回True,否則返回false}catch(error){//錯(cuò)誤處理}};注冊(cè)完成后即可進(jìn)行登錄操作，用戶需使用已有注冊(cè)信息進(jìn)行登錄，消費(fèi)者用戶登錄后進(jìn)入系統(tǒng)首頁(yè)，商戶則進(jìn)入商戶中心。下為部分代碼說(shuō)明。constlogin=async()=>{constaccountMsg=loginForm.value//獲取表單信息if(accountM===''&&accountMsg.password===''){//輸入為空時(shí)提醒輸入信息}else{constresult=awaituserApi.login(accountM,accountMsg.password)//調(diào)用userApi.login方法進(jìn)行登錄并傳入用戶名和密碼。使用await等待登錄操作完成，并將結(jié)果存儲(chǔ)在result變量中if(result){//登錄成功則調(diào)用userAuthStore().setUser存儲(chǔ)用戶信息并跳轉(zhuǎn)對(duì)應(yīng)頁(yè)面}else{//登錄失敗,清空輸入框}后端處理前端post請(qǐng)求,用于用戶登錄。router.post('/user/login',async(req,res)=>{constbody=req.body;//獲取請(qǐng)求數(shù)據(jù)constuserData=awaitsqlSearch.getUserDataByName();//根據(jù)用戶名查詢用戶數(shù)據(jù)if(userData.password===body.password){//匹配成功返回狀態(tài)碼與一個(gè)json對(duì)象,其中包含用戶IDelse{//匹配不成功返回false}}catch(err){//錯(cuò)誤處理返回400狀態(tài)碼以及false的json響應(yīng)}})5.2.2用戶修改個(gè)人信息功能完成注冊(cè)登錄后，用戶可通過(guò)用戶中心進(jìn)入用戶個(gè)人信息頁(yè)面進(jìn)行頁(yè)面修改，其中有個(gè)人簡(jiǎn)介、頭像、地址等信息。下為后端部分代碼。router.post('/user/updateInfo',async(req,res)=>{try{constbody=req.body;／／獲取請(qǐng)求數(shù)據(jù)constresult=awaitsqlSearch.updateUserData(body.id,body.email,body.address,body.bio,body.figure);//調(diào)用sqlSearch.updateUserData函數(shù)更新用戶信息if(result)返回狀態(tài)碼與包含isOk:true的JSON響應(yīng);else返回狀態(tài)碼與包含isOk:false的JSON響應(yīng)}catch(err){//錯(cuò)誤處理}})5.2.3用戶購(gòu)買商品功能用戶在注冊(cè)登錄后可以進(jìn)行商品購(gòu)買等操作，購(gòu)買時(shí)需要填寫(xiě)發(fā)貨地址、購(gòu)買數(shù)量。獲取相應(yīng)參數(shù)后將會(huì)調(diào)用訂單API中創(chuàng)建訂單。用戶在購(gòu)買后前端將跳轉(zhuǎn)至支付頁(yè)面模擬用戶支付流程，用戶選擇購(gòu)買方式后點(diǎn)擊購(gòu)買即可。此時(shí)前端接收相應(yīng)參數(shù)后,發(fā)送Post請(qǐng)求至后端。constbuyGoods=async()=>{//調(diào)用orderApi.addinfo購(gòu)買商品if(result){//提示購(gòu)買成功})}else{//提示購(gòu)買失敗})}}exportconstaddInfo=async(//對(duì)應(yīng)參數(shù)):Promise<boolean>=>{//創(chuàng)建對(duì)象body則為請(qǐng)求發(fā)送給后端APItry{//發(fā)起異步請(qǐng)求到orderApi.addInfo方法，并等待其響應(yīng)//返回請(qǐng)求成功}catch(err){//返回false}后端此時(shí)會(huì)處理Post請(qǐng)求到'/order/addInfo'路徑，并進(jìn)行商品總價(jià)的計(jì)算，然后會(huì)添加訂單到數(shù)據(jù)庫(kù)，下為部分代碼。router.post('/order/addInfo',async(req,res)=>{try{constbody=req.body;獲取數(shù)據(jù)請(qǐng)求體數(shù)據(jù)constgoods=awaitsqlSearch.getGoodsData(body.goodsId);//根據(jù)id搜索對(duì)應(yīng)商品constprice=body.buyCount*goods.price;//商品價(jià)格計(jì)算constresult=awaitsqlSearch.addOrderData(//調(diào)用相應(yīng)sql查找，接受訂單有關(guān)參數(shù));if(result)//成功);else//否則返回狀態(tài)碼);}catch(err){//錯(cuò)誤打印返回}})5.2.4用戶查詢訂單功能用戶注冊(cè)登錄后可以經(jīng)由用戶中心的訂單列表查看用戶訂單詳情，部分后端代碼如下。exportconstgetBuyerOrderData=async(userId)=>{//獲取指定用戶訂單try{constconnection=awaitpool.getConnection();//獲取數(shù)據(jù)庫(kù)連接//執(zhí)行SQL查詢語(yǔ)句//釋放數(shù)據(jù)庫(kù)連接//遍歷查詢每一行,并轉(zhuǎn)換命名格式returnorderInfoArray;//返回轉(zhuǎn)換后訂單數(shù)據(jù)數(shù)組}catch(error){//錯(cuò)誤處理};5.2.5用戶確認(rèn)收貨功能用戶在訂單發(fā)貨后可以在待確認(rèn)訂單列表中查詢待確認(rèn)收貨列表，并可對(duì)訂單進(jìn)行確認(rèn)收貨操作完成收貨操作。asyncfunctionconfirm(row){//row代表訂單id屬性constresult=awaitorderApi.confirmGoods(row.id)//調(diào)用方法確認(rèn)訂單狀態(tài)if(result){//商品訂單狀態(tài)變?yōu)橐淹瓿蓕}后端路由處理Post請(qǐng)求到路由調(diào)用函數(shù)更新數(shù)據(jù)庫(kù)訂單狀態(tài)為待評(píng)論狀態(tài)。router.post('/order/confirmGoods',async(req,res)=>{//定義post處理函數(shù)try{constbody=req.body;//從req中獲取數(shù)據(jù),并存儲(chǔ)在body中constresult=awaitsqlSearch.updateOrderStage(body.id,'TO_COMMENT');if(result)res.status(200).json({isOk:true});//執(zhí)行函數(shù)更新訂單狀態(tài)為待評(píng)論else//執(zhí)行失敗返回狀態(tài)碼響應(yīng)});}catch(err){console.log(err);//打印錯(cuò)誤信息res.status(400).json({isOk:false});}})//返回狀態(tài)碼5.2.6用戶評(píng)論功能用戶可對(duì)相應(yīng)訂單進(jìn)行評(píng)論操作，部分代碼如下。asyncfunctionopen(row){//row為訂單行參數(shù)//使用ElMessageBmpt方法顯示評(píng)論欄并接受評(píng)論內(nèi)容參數(shù)//處理用戶輸入,成功則執(zhí)行回調(diào)函數(shù)解構(gòu)value屬性,顯示用戶評(píng)論內(nèi)容//否則提示評(píng)論被取消同時(shí)用戶評(píng)論后數(shù)據(jù)存儲(chǔ)在數(shù)據(jù)庫(kù)中，并發(fā)送到前端評(píng)論區(qū)頁(yè)面顯示用戶評(píng)論數(shù)據(jù)，下為部分代碼。router.post('/goods/getComments',async(req,res)=>{constgoodsCommentList=awaitsqlSearch.getGoodsComment(req.body.id);//從數(shù)據(jù)庫(kù)獲取評(píng)論if(goodsCommentList){letcommentInfoList=newArray();for(constcommentofgoodsCommentList){//遍歷評(píng)論信息constorder=awaitsqlSearch.getOrderData(comment.orderId);constuser=awaitsqlSearch.getUserDataById(order.userId);}constcommentInfo={//參數(shù)獲取}commentInfoList.push(commentInfo);//添加信息至對(duì)應(yīng)數(shù)組//錯(cuò)誤處理5.2.7用戶售后功能用戶在購(gòu)買商品后，可對(duì)訂單進(jìn)行售后功能操作，可以請(qǐng)求訂單退款，其中售后類型有退款退貨、僅退款、維修、換貨等選擇，部分實(shí)現(xiàn)代碼如下。前端用戶頁(yè)面中定義load函數(shù)加載后端數(shù)據(jù)。constload=async()=>{constresult=awaitaxiosInstance.post()//使用axios示例發(fā)送POST請(qǐng)求到后端對(duì)應(yīng)路由if(result){finishedData.value=result.data.content//如果成功則提取data中content屬性賦值value}//打印相關(guān)狀態(tài)信息}后端路由在接受請(qǐng)求后調(diào)用相應(yīng)方法查詢數(shù)據(jù)庫(kù)，獲取特定商家售后請(qǐng)求后返回。exportconstgetBuyerAfterSaleRequestList=async(merchantId)=>{//接商家id參數(shù)try{constconnection=awaitpool.getConnection();//獲取數(shù)據(jù)庫(kù)連接const[rows]=awaitconnection.query(//執(zhí)行嵌套SQL語(yǔ)句，獲取需要數(shù)據(jù));connection.release();//釋放數(shù)據(jù)庫(kù)連接constrequestDataArray=rows.map((requestData)=>{//轉(zhuǎn)換數(shù)據(jù)格式并返回}catch(error){//錯(cuò)誤處理打印;}};商家同時(shí)可以對(duì)用戶售后請(qǐng)求進(jìn)行處理，選擇是否接受用戶的售后。constrejectRequest=async(index)=>{constresult=awaitrequestApi.updateAfterSaleRequest(filterTableData.value.at(index).id,'REJECTED');//商家拒絕處理，調(diào)用更新售后頁(yè)面更新?tīng)顟B(tài)}constacceptRequest=async(index)=>{constresult=awaitrequestApi.updateAfterSaleRequest(filterTableData.value.at(index).id,'ACCEPTED');//商家同意處理，調(diào)用更新售后頁(yè)面更新?tīng)顟B(tài)}同時(shí)后端執(zhí)行對(duì)應(yīng)代碼，將數(shù)據(jù)庫(kù)中訂單售后改為對(duì)應(yīng)狀態(tài)。exportconstupdateAfterSaleRequest=async(id,stage)=>{constconnection=awaitpool.getConnection();//獲取數(shù)據(jù)庫(kù)連接constqueryResult=awaitconnection.query(//執(zhí)行對(duì)應(yīng)SQL語(yǔ)句);connection.release();//查詢完畢后釋放連接if(queryResult[0].affectedRows===1)//確認(rèn)更新5.2.8商戶添加商品功能商戶在注冊(cè)登錄后，可以僅由商戶中心進(jìn)行添加商品操作，添加商品時(shí)需要輸入商品圖片、價(jià)格、發(fā)貨地址、簡(jiǎn)介等信息。完成后商戶可在商品管理中查看已上架商品，部分前后端代碼如下。constresult=awaitgoodsApi.addInfo(data.merchantId,,data.type,data.price,data.shippingAddress,data.description,data.figure);//調(diào)用API接口接收參數(shù)if(result){//判斷添加結(jié)果ElMessage({//提示添加商品成功})goBack()//返回上個(gè)頁(yè)面}else{ElMessage({//提示新增商品失敗!}}后端對(duì)應(yīng)API添加商品代碼如下。exportconstaddGoodsData=async(//相關(guān)商品參數(shù))=>{try{//獲取數(shù)據(jù)庫(kù)連接//執(zhí)行相應(yīng)SQL語(yǔ)句,將數(shù)據(jù)插入goods_data表中//釋放數(shù)據(jù)庫(kù)連接if(queryResult[0].affectedRows===1){//檢測(cè)是否插入成功//返回true;}else{//返回false}}catch(error){//錯(cuò)誤處理}};5.2.9商戶修改商品功能商戶在上架商品后可以選擇對(duì)商品信息進(jìn)行編輯操作，可以對(duì)商品圖片、發(fā)貨地與簡(jiǎn)介等進(jìn)行編輯。exportconstupdateGoodsData=async(//商品有關(guān)參數(shù))=>{try{//獲取數(shù)據(jù)庫(kù)連接//執(zhí)行更新物品數(shù)據(jù)的SQL語(yǔ)句//釋放數(shù)據(jù)庫(kù)連接if(queryResult[0].affectedRows===1){//檢測(cè)是否更新成功//返回true;}else{//返回fasle;}}catch(error){//錯(cuò)誤處理}};5.2.10商戶訂單發(fā)貨功能商戶在處理訂單時(shí)，對(duì)于要發(fā)貨訂單可點(diǎn)擊發(fā)貨進(jìn)行操作，其中發(fā)貨需要商戶輸入快遞單號(hào)后才可完成發(fā)貨。constsendGoodsMessage=(index)=>{//輸入快遞單號(hào)})sendGoods(filterTableData.value.at(index).id,value);//處理商戶輸入constresult=awaitorderApi.sendGoods(id,expressNumber);//調(diào)用API中orderApi.sendGoods方法傳入expressNumber為參數(shù)//發(fā)貨成功返回true//否則返回false訂單被商家確認(rèn)發(fā)貨后，訂單的狀態(tài)會(huì)由后端路由調(diào)用相應(yīng)SQL語(yǔ)句將訂單狀態(tài)變更為已發(fā)貨且待評(píng)論的狀態(tài)。

6系統(tǒng)運(yùn)行截圖與說(shuō)明6.1消費(fèi)者頁(yè)面6.1.1消費(fèi)者注冊(cè)頁(yè)面消費(fèi)者在未登錄前無(wú)法進(jìn)行商品詳情查看與購(gòu)買操作，系統(tǒng)會(huì)自動(dòng)跳轉(zhuǎn)登錄頁(yè)面，若消費(fèi)者未注冊(cè)帳號(hào)需要進(jìn)行注冊(cè)操作，如圖17所示：圖17消費(fèi)者未登錄前頁(yè)面圖消費(fèi)者注冊(cè)頁(yè)面如下，其中輸入用戶數(shù)據(jù)需合法且用戶名不得重合。如圖18所示。圖18消費(fèi)者注冊(cè)頁(yè)面圖6.1.2消費(fèi)者登錄頁(yè)面用戶輸入注冊(cè)時(shí)的帳號(hào)密碼即可。如圖19所示。圖19消費(fèi)者登錄頁(yè)面圖6.1.3消費(fèi)者購(gòu)買頁(yè)面消費(fèi)者選擇相應(yīng)商品進(jìn)行購(gòu)買操作，需填寫(xiě)商品數(shù)量與商品發(fā)貨地址。如圖20所示。圖20消費(fèi)者購(gòu)買頁(yè)面圖6.1.4消費(fèi)者個(gè)人信息頁(yè)面消費(fèi)者完成注冊(cè)登錄后可對(duì)個(gè)人信息進(jìn)行修改。如圖21所示。圖21消費(fèi)者個(gè)人信息修改頁(yè)面圖6.2消費(fèi)者訂單頁(yè)面6.2.1消費(fèi)者訂單列表消費(fèi)者可以通過(guò)用戶中心查看訂單情況。如圖22所示。圖22消費(fèi)者個(gè)人訂單頁(yè)面圖6.2.2消費(fèi)者確認(rèn)收貨消費(fèi)者可以待確認(rèn)列表中完成商品收貨。如圖23所示。