農(nóng)資商城設(shè)計(jì)

AbstractAgriculturalcapitalstoreshaveindependentwarehousesinprovincialcapitalcitiesinmajorprovinces,andtherearenoindependentwarehousesinremotevillagesandthird-tiercities,whichwillincreasetransportationcosts.Theresearchisdedicatedtoprovidingthird-tierruraluserswithaffordableandaffordableagriculturalproductpurchaseplatforms,providingconvenientshoppingmethodsforruralusers.Accordingtotheanalysisofsystemrequirements,thispaperusesVuetechnologytocreateafarmer'sshoppingmall,Vuebuildsthefrontpage,thebackgroundmanagementsystemisbuiltusingVue+ElementUI,theserverusesNodeandexpress,thedatabaseusesMongoDB,andthefrontandbackofficeinteractswithVueofficially.RecommendedAxios.Thiswebsiteisaimedatlarge-scalefarmersinthethird-andfifth-tiercities,aswellasindividualfarmers,whichcanhelpfarmerstopurchaseproductsonthewebsiteconvenientlyandquickly,andincreasetheoverallsalesvolumeofagriculturalvendors.Throughthedesignandimplementationoftheagriculturalcapitalmall,localagriculturalassetdealerscanbeassistedtoaggregateagriculturalproductsintowebsitesanddisplaythem,changingthelimitationsoftraditionalsales,andmarchingintoanetworked,technologicalandintelligentinformationmanagementmodel.Amongthem,realizingthemanagementofthegoodsbythemerchantandusingthedynamicwebpagetechnologytorealizethedynamiccontentupdateisthecorecontentofthewebsitedevelopment.KeyWords:Vue;Mongoose;ElementUI;Node;Agriculturalcapitalmall目錄TOC\o"1-2"\h\u1緒論 41.1研究背景 41.2研究現(xiàn)狀 41.3研究意義 62技術(shù)介紹 72.1開(kāi)發(fā)環(huán)境 72.2Nodejs 72.3MongoDB 72.4Express 73需求分析 93.1系統(tǒng)需求分析 93.2網(wǎng)站項(xiàng)目范圍 93.3功能需求 103.4功能結(jié)構(gòu)圖 104系統(tǒng)設(shè)計(jì) 114.1數(shù)據(jù)庫(kù)設(shè)計(jì) 115系統(tǒng)實(shí)現(xiàn) 165.1前臺(tái)界面 165.2后臺(tái)管理系統(tǒng)界面 195系統(tǒng)測(cè)試 225.1測(cè)試目的 225.2測(cè)試內(nèi)容 225.3測(cè)試結(jié)果 22結(jié)論 23參考文獻(xiàn) 241緒論1.1研究背景數(shù)據(jù)顯示，僅2017年在阿里平臺(tái)上的農(nóng)資銷(xiāo)售額就超過(guò)50億元，同比增長(zhǎng)超80%。次年3月舉辦的農(nóng)村淘寶春耕大促中，近300個(gè)縣的1萬(wàn)4千多個(gè)村，購(gòu)買(mǎi)了超千萬(wàn)份的農(nóng)資，光化肥就賣(mài)出了12萬(wàn)噸。另一家農(nóng)資電商平臺(tái)大豐收農(nóng)資商城透露，深耕近兩年，平臺(tái)農(nóng)資累計(jì)交易量已突破8億元……當(dāng)今中國(guó)已經(jīng)成為世界數(shù)一數(shù)二的農(nóng)業(yè)大國(guó)，說(shuō)到農(nóng)業(yè)，自然離不開(kāi)農(nóng)資?！叭司划€三分，戶(hù)均不過(guò)十畝”的小農(nóng)經(jīng)濟(jì)，是國(guó)內(nèi)農(nóng)業(yè)在現(xiàn)在及未來(lái)很長(zhǎng)一段時(shí)間需要面對(duì)的現(xiàn)實(shí)。基于國(guó)內(nèi)農(nóng)業(yè)的發(fā)展情況，農(nóng)資產(chǎn)品的流通渠道及其臃腫，產(chǎn)品從廠家最終到農(nóng)戶(hù)手中時(shí)，需要經(jīng)過(guò)層層的流通——區(qū)域、市級(jí)、縣級(jí)、鄉(xiāng)鎮(zhèn)級(jí)代理商、村里零售店等，流通環(huán)節(jié)的層層加價(jià)，最終導(dǎo)致農(nóng)戶(hù)成為高價(jià)的承受者。臃腫的渠道瓜分了毛利，無(wú)論廠家還是經(jīng)銷(xiāo)商，都感覺(jué)賣(mài)力卻掙不了大錢(qián)。如今，進(jìn)一步明確綠色發(fā)展的大背景下。農(nóng)民和農(nóng)資店主也必須加強(qiáng)對(duì)農(nóng)資信息的了解和掌握，才能適應(yīng)新時(shí)代的三農(nóng)發(fā)展需要。在政策和社會(huì)大環(huán)境的推動(dòng)下，打造中國(guó)農(nóng)資商城，利用互聯(lián)網(wǎng)新技術(shù)，成為一種趨勢(shì)。1.2研究現(xiàn)狀互聯(lián)網(wǎng)和計(jì)算機(jī)技術(shù)以及移動(dòng)設(shè)備經(jīng)過(guò)多年的發(fā)展,尤其是近幾年來(lái)科技與互聯(lián)網(wǎng)的飛速發(fā)展，目前規(guī)模比較大的電子商務(wù)平臺(tái)都開(kāi)始構(gòu)建自己的生態(tài)系統(tǒng)，電子商務(wù)的發(fā)展也借由此次機(jī)會(huì)駛上了快車(chē)道。從2012年到2016年，經(jīng)過(guò)這四年的發(fā)展,中國(guó)網(wǎng)購(gòu)用戶(hù)人數(shù)從2.42億人增長(zhǎng)到了4.67億人次，增長(zhǎng)了將近1倍。電子商務(wù)的交易額更是芝麻開(kāi)花節(jié)節(jié)高，交易額從8.1萬(wàn)億元增長(zhǎng)到了26.1萬(wàn)億元，年均增長(zhǎng)了百分之34。當(dāng)中增長(zhǎng)最迅速的網(wǎng)絡(luò)零售行業(yè)，從1.31萬(wàn)元的交易額增長(zhǎng)到了5.16萬(wàn)億元，百分之40的年均增長(zhǎng)率，不容小噓。2016年10月至次年9月，十二個(gè)月期間，國(guó)內(nèi)零售銷(xiāo)售額達(dá)到近6.6萬(wàn)億元，同比周期增長(zhǎng)了百分之38，同時(shí)創(chuàng)下了國(guó)內(nèi)電商零售額的最高紀(jì)錄。同時(shí)我國(guó)的電子商務(wù)交易額近幾年來(lái)還在不斷增長(zhǎng)，具體增長(zhǎng)趨勢(shì)見(jiàn)下圖1-1圖1-1中國(guó)電商交易額增長(zhǎng)趨勢(shì)電子商務(wù)的產(chǎn)業(yè)包括很多,具體有跨境電商(比較成熟的有天貓全球購(gòu)),社區(qū)電商(為特定的社區(qū)居民提供餐飲和便利店以及租房等等生活服務(wù)),行業(yè)電商,農(nóng)村電商(通過(guò)網(wǎng)絡(luò)嫁接各種服務(wù)于農(nóng)村的資源,打造三農(nóng)信息服務(wù)站),大宗商品(廠家直銷(xiāo),倉(cāng)儲(chǔ)物流)和返利導(dǎo)航(于其他電商平臺(tái)合作,讓顧客得到返利的同時(shí),又提高了商家的流量)。圖1-2國(guó)內(nèi)電子商務(wù)產(chǎn)業(yè)生態(tài)從圖1-2可以看出,和本研究同類(lèi)型的農(nóng)村電商,只有匯通達(dá)和淘實(shí)惠,所以這個(gè)惠農(nóng)電商的研究還是很有意義的。1.3研究意義如今的電商發(fā)展快速，導(dǎo)致線(xiàn)下生意很難做，無(wú)論是線(xiàn)上線(xiàn)下的生意其本質(zhì)都受供需關(guān)系影響。很多復(fù)雜的邏輯關(guān)系，都能在供需關(guān)系上進(jìn)行推演。從而得知民眾們真正需要的是什么。得益于互聯(lián)網(wǎng)的特性，農(nóng)技不僅局限在線(xiàn)下，該農(nóng)資商城還提供了各種新聞資訊和技術(shù)交流服務(wù)，基本滿(mǎn)足用戶(hù)對(duì)基礎(chǔ)農(nóng)技服務(wù)的需求，滿(mǎn)足用戶(hù)購(gòu)物需求以及利用碎片化時(shí)間以事半功倍。同時(shí)也為商家提供多一個(gè)的銷(xiāo)售渠道，吸引更多的客戶(hù)，并且降低銷(xiāo)售成本。本研究具有很大的商業(yè)價(jià)值，在現(xiàn)如今生活中，用戶(hù)在購(gòu)物時(shí)間上會(huì)越來(lái)越碎片化，花在手機(jī)的時(shí)間越來(lái)越多。用戶(hù)通過(guò)互聯(lián)網(wǎng)可以找到更多的農(nóng)資購(gòu)買(mǎi)渠道，可以選擇到更加優(yōu)質(zhì)并且價(jià)格便宜的商品。同時(shí)又為商家提供了網(wǎng)絡(luò)上的銷(xiāo)售渠道，擴(kuò)大了商家的銷(xiāo)售渠道。建立農(nóng)資銷(xiāo)售網(wǎng)站的基本過(guò)程可以分為以下環(huán)節(jié)：了解網(wǎng)站的研究背景與發(fā)展現(xiàn)狀。以及系統(tǒng)需求分析與總體設(shè)計(jì)。了解并熟悉網(wǎng)站開(kāi)發(fā)的模式、工具及環(huán)境。把想要展示的內(nèi)容制作成網(wǎng)頁(yè)。2技術(shù)介紹2.1開(kāi)發(fā)環(huán)境Vue農(nóng)資商城的開(kāi)發(fā)環(huán)境，用戶(hù)界面使用Vue實(shí)現(xiàn)單頁(yè)面的應(yīng)用,它的本質(zhì)還是用HTML+CSS完成頁(yè)面的布局,Vue的雙向綁定機(jī)制（MVVM）可以實(shí)現(xiàn)快速的數(shù)據(jù)渲染和視圖更新.使用axios實(shí)現(xiàn)前后端的數(shù)據(jù)異步請(qǐng)求.數(shù)據(jù)庫(kù)采用的是MongoDB數(shù)據(jù)庫(kù),服務(wù)器環(huán)境在本地使用Node搭建，在本地使用Node模擬服務(wù)器環(huán)境。2.2NodejsNode讓JavaScript擁有操作系統(tǒng)底層的能力,例如監(jiān)聽(tīng)某個(gè)端口,操作某些文件,操作數(shù)據(jù)庫(kù)。傳統(tǒng)的Apache服務(wù)器,每個(gè)請(qǐng)求都會(huì)讓服務(wù)器創(chuàng)建新的進(jìn)程來(lái)處理該請(qǐng)求,每個(gè)連接都會(huì)占用一個(gè)進(jìn)程。用戶(hù)過(guò)多會(huì)對(duì)服務(wù)器造成很大壓力。Nodejs擁有非阻塞事件驅(qū)動(dòng)I/O等特性，讓高并發(fā)在的輪詢(xún)和comet構(gòu)建的應(yīng)用中成為可能。前后臺(tái)編程語(yǔ)言統(tǒng)一使用JavaScript進(jìn)行開(kāi)發(fā),在將來(lái)項(xiàng)目迭代過(guò)程中,可以很方便的將原本后臺(tái)處理的邏輯照搬到前臺(tái)來(lái)進(jìn)行處理。PC性能的大幅度提升，更為前臺(tái)處理數(shù)據(jù)邏輯提供了強(qiáng)有力的硬件支持。2.3MongoDB在數(shù)據(jù)庫(kù)使用流行度排行榜上，Oracle,MySQL,SQLServer,PostgreSql和MongoDB位居前五,從上圖數(shù)據(jù)可以看出MongoDB和PostgreSql的流行度正在上升,用它的人在逐漸增多,新入門(mén)的人多,相對(duì)的社區(qū)就活躍,遇到問(wèn)題發(fā)帖會(huì)有更多論壇活躍用戶(hù)對(duì)其進(jìn)行快速的解答。Oracle數(shù)據(jù)庫(kù)采用收費(fèi)策略，因成本原因暫不考慮。MongoDB它所能處理的數(shù)據(jù)是json格式，和前后端JavaScript腳本的數(shù)據(jù)格式非常的接近,這樣避免了需要在“行”和”數(shù)據(jù)對(duì)象“之間的來(lái)回轉(zhuǎn)換它具有非關(guān)系型的特性,使得后期維護(hù)起來(lái)方便,適合于本研究的要求。

2.4ExpressVisualStudioCode(簡(jiǎn)稱(chēng)VSCode/VSC)是一款免費(fèi)開(kāi)源的現(xiàn)代化輕量級(jí)代Express簡(jiǎn)單靈活,每個(gè)功能都可以根據(jù)需要選擇不同的組件搭建,并且有腳手架的幫助,可以實(shí)現(xiàn)快速開(kāi)發(fā),并且學(xué)習(xí)成本不高,優(yōu)點(diǎn):插件眾多,豐簡(jiǎn)由人,自由,簡(jiǎn)單,適合簡(jiǎn)單業(yè)務(wù)邏輯的開(kāi)發(fā)缺點(diǎn):缺少規(guī)范,不適合復(fù)雜應(yīng)用的復(fù)雜業(yè)務(wù)Koa框架,基于Express基于es6的升級(jí)版優(yōu)點(diǎn):邏輯易懂,ES6語(yǔ)法缺點(diǎn):社區(qū)沒(méi)有Express完善,插件擴(kuò)展的不豐富,不夠成熟Meteor完全統(tǒng)一前后臺(tái)開(kāi)發(fā)的一站式框架,適用于重度依賴(lài)websocket的單頁(yè)面應(yīng)用。本設(shè)計(jì)重點(diǎn)在于網(wǎng)上購(gòu)物和交易，meteor不適用,koa學(xué)習(xí)成本過(guò)大,所以選擇Express，學(xué)習(xí)成本低，根據(jù)功能需要可以快速搭建。3需求分析產(chǎn)品的需求分析是軟件開(kāi)發(fā)期間的第一階段，也涉及到在軟件開(kāi)發(fā)中的關(guān)鍵步驟的成敗，分析用戶(hù)的需求并且深入了解用戶(hù)的需求讓開(kāi)發(fā)者了解開(kāi)發(fā)一個(gè)具備什么樣功能的系統(tǒng)，產(chǎn)品開(kāi)發(fā)的成敗一半以上的關(guān)鍵在于前期的分析，綜上，系統(tǒng)開(kāi)發(fā)的關(guān)鍵在于分析用戶(hù)需求階段。3.1系統(tǒng)需求分析該農(nóng)資銷(xiāo)售系統(tǒng)制作設(shè)計(jì)初期，首先對(duì)用戶(hù)的迫切功能需求和基本的功能需求做出分析,并提出項(xiàng)目的設(shè)計(jì)以及實(shí)現(xiàn)方法。進(jìn)行了需求分析后得出原型，深度考慮用戶(hù)的核心需求，使本產(chǎn)品成為農(nóng)戶(hù)購(gòu)買(mǎi)農(nóng)資產(chǎn)品時(shí)候的首選。從目前市場(chǎng)上網(wǎng)上農(nóng)資商城系統(tǒng)的項(xiàng)目實(shí)施經(jīng)驗(yàn)看，失敗的主要風(fēng)險(xiǎn)是在于對(duì)市場(chǎng)的情況缺乏了解，對(duì)受眾群體的實(shí)際需求不清楚，沒(méi)有從用戶(hù)調(diào)研結(jié)果中分析出用戶(hù)的迫切需求，只有從中核心需求中得到結(jié)論，才能開(kāi)發(fā)出一個(gè)穩(wěn)健的系統(tǒng)。3.1.1需求管理的方法在本次項(xiàng)目中，需求管理的主要步驟和方法是：（1）進(jìn)行市場(chǎng)調(diào)查，對(duì)比同類(lèi)商品，競(jìng)品的分析，深入用戶(hù)需求，最終確定本系統(tǒng)的范圍。（2）規(guī)定統(tǒng)一的系統(tǒng)制作流程，對(duì)系統(tǒng)設(shè)計(jì)的步驟進(jìn)行拆分，檢查每個(gè)環(huán)節(jié)之間相關(guān)聯(lián)并校驗(yàn)各個(gè)階段是否符合規(guī)定。（3）對(duì)調(diào)研的內(nèi)容進(jìn)行分析總結(jié)以書(shū)面形式直觀展示，對(duì)優(yōu)缺點(diǎn)進(jìn)行分析。3.1.2任務(wù)概述本系統(tǒng)最終實(shí)現(xiàn)對(duì)農(nóng)資產(chǎn)品的交易管理，需要解決的問(wèn)題主要有：用戶(hù)與管理員的登錄注冊(cè)、管理員對(duì)商品的發(fā)布、物品信息和用戶(hù)信息的修改、信息列表的實(shí)現(xiàn)等。3.2網(wǎng)站項(xiàng)目范圍與網(wǎng)絡(luò)安全相關(guān)的法法律咨詢(xún)網(wǎng)站從兩種用戶(hù)角度進(jìn)行功能劃分。（1）用戶(hù)部分：購(gòu)物車(chē)；產(chǎn)品展示；注冊(cè)登錄；訂單管理（2）管理員部分：系統(tǒng)設(shè)置；訂單管理；會(huì)員管理；商品管理3.3功能需求3.3.1用戶(hù)部分（1）注冊(cè)登錄：給用戶(hù)提供注冊(cè)和登錄的窗口。（2）產(chǎn)品展示：用戶(hù)可查看商品的詳細(xì)信息。（3）購(gòu)物車(chē)：用戶(hù)對(duì)已經(jīng)選擇的產(chǎn)品進(jìn)行管理既增刪改查。（4）訂單管理：用戶(hù)可以對(duì)已下單的訂單進(jìn)行查看,以及訂單最新的進(jìn)展。3.3.2管理員部分（1）系統(tǒng)設(shè)置：最高權(quán)限的管理員可以對(duì)其他普通的管理員賬號(hào)進(jìn)行查看、添加、刪除和編輯的操作。（2）會(huì)員管理：對(duì)商城的用戶(hù)進(jìn)行管理，包括查看、添加、修改、刪除。（3）商品管理：對(duì)商城展示的商品進(jìn)行管理，包括查看、添加、修改、刪除。（4）訂單管理：對(duì)用戶(hù)的訂單進(jìn)行管理，包括瀏覽，修改物流狀態(tài)。（5）商品分類(lèi)管理：對(duì)商品所屬的大類(lèi)別進(jìn)行編輯，包括新增,刪除。3.4功能結(jié)構(gòu)圖通過(guò)以上需求分析的調(diào)查與研究，將系統(tǒng)的大體功能定義如圖2-1所示。農(nóng)資產(chǎn)品售賣(mài)系統(tǒng)農(nóng)資產(chǎn)品售賣(mài)系統(tǒng)用戶(hù)管理員注冊(cè)登錄產(chǎn)品展示購(gòu)物車(chē)管理訂單管理系統(tǒng)設(shè)置會(huì)員管理商品管理商品類(lèi)別管理訂單管理圖3-1系統(tǒng)功能結(jié)構(gòu)圖4系統(tǒng)設(shè)計(jì)4.1數(shù)據(jù)庫(kù)設(shè)計(jì)4.1.1概述在開(kāi)發(fā)系統(tǒng)的前期，網(wǎng)頁(yè)的美工設(shè)計(jì)是需要?jiǎng)?chuàng)意的階段。在數(shù)據(jù)庫(kù)設(shè)計(jì)方面就需要緊密的邏輯和詳細(xì)的架構(gòu)設(shè)計(jì)，這些都是需要考慮的。該農(nóng)資商城的設(shè)計(jì)方法就是把分析得出的用戶(hù)需求演化成系統(tǒng)的設(shè)計(jì)基礎(chǔ)。4.1.2數(shù)據(jù)庫(kù)設(shè)計(jì)圖4-1數(shù)據(jù)庫(kù)的E-R圖系統(tǒng)設(shè)計(jì)的關(guān)鍵是對(duì)市場(chǎng)的分析，并且按照順序要求完成系統(tǒng)，系統(tǒng)制作開(kāi)始時(shí)先分析數(shù)據(jù)，并完成數(shù)據(jù)庫(kù)。主要數(shù)據(jù)表如下：用戶(hù)信息表,用來(lái)存儲(chǔ)商城注冊(cè)用戶(hù)的個(gè)人信息,結(jié)構(gòu)如下:圖4-2用戶(hù)信息實(shí)體圖根據(jù)實(shí)體圖設(shè)計(jì)出的表結(jié)構(gòu)如下圖所示：表4-1用戶(hù)信息表“user”的結(jié)構(gòu)字段名稱(chēng)數(shù)據(jù)類(lèi)型說(shuō)明_id自動(dòng)編號(hào)編號(hào)(用戶(hù)唯一表示)UsernameString用戶(hù)名PasswordString用戶(hù)密碼AddressString地址EmailString郵箱地址phoneNumber手機(jī)號(hào)商品管理信息表圖4-3商品信息表的實(shí)體圖表4-2商品表“goods”的結(jié)構(gòu)字段名稱(chēng)數(shù)據(jù)類(lèi)型說(shuō)明_Id自動(dòng)編號(hào)編號(hào)Name文本商品名稱(chēng)Author文本生產(chǎn)廠商Desc文本描述信息Details文本詳細(xì)信息Price數(shù)字產(chǎn)品原價(jià)nowPrice數(shù)字產(chǎn)品現(xiàn)價(jià)Img文本產(chǎn)品縮略圖Type文本所屬分類(lèi)Time時(shí)間/日期添加日期管理員表圖4-4管理員表的實(shí)體圖表4-3管理員表“admin”的結(jié)構(gòu)字段名稱(chēng)數(shù)據(jù)類(lèi)型說(shuō)明_id自動(dòng)編號(hào)編號(hào)(用戶(hù)唯一表示)UsernameString管理員用戶(hù)名PasswordString管理員密碼Rank數(shù)字管理員權(quán)限商品類(lèi)別信息表圖4-5商品類(lèi)別表的實(shí)體圖表4-4商品類(lèi)別表“type”的結(jié)構(gòu)字段名稱(chēng)數(shù)據(jù)類(lèi)型說(shuō)明_id自動(dòng)編號(hào)編號(hào)(分類(lèi)唯一標(biāo)識(shí))Tabnamestring分類(lèi)類(lèi)名FtitString排序(樓層)IsShowBoolean是否在首頁(yè)顯示訂單管理信息表,用來(lái)記錄商城中所有的訂單圖4-6訂單表的實(shí)體圖表4-5訂單表“order”的結(jié)構(gòu)字段名稱(chēng)數(shù)據(jù)類(lèi)型說(shuō)明_id自動(dòng)編號(hào)編號(hào)(訂單唯一標(biāo)識(shí))Order_snstring交易單號(hào)Member_idstring付款人idamount數(shù)字交易金額Integer數(shù)字使用的積分Pay_stateNumber付款方式StatusNumber支付狀態(tài)Completion_timeString交易完成時(shí)間noteString備注信息Update_atString更新時(shí)間4.3.3數(shù)據(jù)表Mongoose中所有事物（不是關(guān)系型數(shù)據(jù)庫(kù)中的事務(wù)）都是從schema開(kāi)始的。每一個(gè)schema對(duì)應(yīng)數(shù)據(jù)庫(kù)中的一個(gè)集合（collection）。Schema規(guī)定了集合中每個(gè)數(shù)據(jù)的基礎(chǔ)樣式。比如admin表中，每條數(shù)據(jù)的樣式varadminSchema=mongoose.Schema({

username:String,

password:String

});

letadminModel=mongoose.model('admin',adminSchema);這個(gè)schema表示，集合中所有的admin有且僅有username和password兩個(gè)字段名，并且是string格式的數(shù)據(jù)。為了使用schema定義，需要轉(zhuǎn)換Schema為一個(gè)Model。4.3.4建立數(shù)據(jù)庫(kù)連接后臺(tái)進(jìn)行數(shù)據(jù)庫(kù)的配置。本研究采用從本地模擬接口返回?cái)?shù)據(jù)的方式,數(shù)據(jù)庫(kù)服務(wù)運(yùn)行在27017端口。前臺(tái)頁(yè)面通過(guò)axios異步獲取數(shù)據(jù)，處理后顯示到頁(yè)面。5系統(tǒng)實(shí)現(xiàn)5.1前臺(tái)界面前臺(tái)界面其功能是為了讓用戶(hù)進(jìn)行對(duì)商品的瀏覽和其他操作。系統(tǒng)設(shè)計(jì)流程如圖5-1所示：圖5-1系統(tǒng)設(shè)計(jì)流程圖5.1.1首頁(yè)在主頁(yè)上，只需點(diǎn)擊導(dǎo)航欄的“首頁(yè)”、“套餐”、“農(nóng)藥”、“化肥”、“購(gòu)物車(chē)”就可以跳轉(zhuǎn)到對(duì)應(yīng)的產(chǎn)品展示界面，當(dāng)單擊單個(gè)產(chǎn)品就可以看到當(dāng)前的產(chǎn)品細(xì)節(jié)。首頁(yè)如圖5-2所展示。圖5-2首界面5.1.2購(gòu)物車(chē)頁(yè)面購(gòu)物車(chē)中可以實(shí)現(xiàn)對(duì)產(chǎn)品的加減，以及直接修改到指定數(shù)量的操作，可以隨時(shí)去結(jié)算。購(gòu)物車(chē)如圖5-3圖5-3購(gòu)物車(chē)頁(yè)面5.1.3產(chǎn)品詳情頁(yè)面產(chǎn)品展示頁(yè)面可以查看商品的詳細(xì)信息，以及商家對(duì)該產(chǎn)品的描述文件，可以點(diǎn)擊購(gòu)買(mǎi)來(lái)放置訂單。產(chǎn)品詳情頁(yè)面如圖5-4所示：圖5-4產(chǎn)品展示頁(yè)面5.1.4注冊(cè)頁(yè)用戶(hù)的注冊(cè)頁(yè)通過(guò)填寫(xiě)信息完成新賬號(hào)的注冊(cè)，新用戶(hù)的信息入庫(kù)。用戶(hù)注冊(cè)頁(yè)如圖5-5所示：圖5-5用戶(hù)注冊(cè)頁(yè)5.1.5用戶(hù)登錄界面用戶(hù)登錄界面，只有在用戶(hù)輸入符合規(guī)范并且用戶(hù)名和密碼正確才可以登錄。密碼或賬戶(hù)不正確會(huì)提示錯(cuò)誤，攔截登錄，當(dāng)匹配到正確的信息才可登錄。用戶(hù)登錄界面如圖5-6所示。圖5-6用戶(hù)登錄界面5.1.6訂單管理頁(yè)此頁(yè)面可實(shí)現(xiàn)用戶(hù)對(duì)歷史訂單的信息進(jìn)行查看。點(diǎn)擊詳情，可以的跳轉(zhuǎn)到訂單的詳情頁(yè)面，訂單管理頁(yè)如圖5-7所示：圖5-7訂單管理界面5.2后臺(tái)管理系統(tǒng)界面農(nóng)資商城的后臺(tái)管理系統(tǒng)，主要是為了實(shí)現(xiàn)管理員對(duì)前端商城展示的信息進(jìn)行超級(jí)管理，以及對(duì)用戶(hù)的訂單進(jìn)行（發(fā)貨，退款）操作。5.2.1管理員登錄頁(yè)輸入用戶(hù)設(shè)置的賬號(hào)密碼后登錄。管理員登錄頁(yè)如圖5-8所示：圖5-8管理員登錄界面5.2.2商品類(lèi)別管理頁(yè)面商品分類(lèi)管理頁(yè)，展示當(dāng)前已有分類(lèi)，并且可以對(duì)當(dāng)前分類(lèi)進(jìn)行編輯操作，也可以刪除當(dāng)前分類(lèi)。商品類(lèi)別管理頁(yè)面如圖5-9所示：圖5-9商品類(lèi)別管理頁(yè)面5.2.3商品管理頁(yè)面將已有商品已列表形式展現(xiàn)，可以對(duì)商品進(jìn)行修改，刪除操作。如圖5-10所示：圖5-10商品管理頁(yè)面5.2.4新增商品頁(yè)在當(dāng)前頁(yè)面可以通過(guò)編輯富文本，編輯出新的商品信息。商品添加頁(yè)如圖5-11所示：圖5-11商品添加頁(yè)面5.2.5訂單管理頁(yè)面訂單管理界面，可以對(duì)這些訂單進(jìn)行管理。訂單管理頁(yè)面如圖5-12所示：圖5-12訂單管理頁(yè)面

5系統(tǒng)測(cè)試5.1測(cè)試目的找出系統(tǒng)中功能尚不完善的地方,加以改進(jìn),對(duì)設(shè)計(jì)不合理的地方,不足之處加以完善，保證系統(tǒng)的正常運(yùn)行及功能的完善。5.2測(cè)試內(nèi)容表5-1用戶(hù)信息的測(cè)試表序號(hào)測(cè)試用例描述操作過(guò)程及數(shù)據(jù)測(cè)試結(jié)果1輸入正確的用戶(hù)賬號(hào)與密碼在登錄頁(yè)輸入正確賬號(hào)和密碼登陸成功2輸入不存在的用戶(hù)賬號(hào)和密碼在登錄頁(yè)輸入不存在的賬號(hào)密碼用戶(hù)賬號(hào)不存在3輸入存在的用戶(hù)名和錯(cuò)誤密碼在登錄頁(yè)輸入正確賬號(hào)和錯(cuò)誤密碼用戶(hù)密碼有誤，請(qǐng)確認(rèn)后輸入4用戶(hù)賬號(hào)注冊(cè)輸入正確的信息注冊(cè)成功5用戶(hù)信息管理（添加）按要求填寫(xiě)信息操作成功輸入錯(cuò)誤信息操作失敗表5-2訂單信息的測(cè)試表序號(hào)測(cè)試用例描述操作過(guò)程及數(shù)據(jù)測(cè)試結(jié)果1沒(méi)有輸入分類(lèi)名在修改分類(lèi)頁(yè)面沒(méi)有輸入分類(lèi)的名稱(chēng)分類(lèi)名不能為空2輸入一位數(shù)的分類(lèi)名在修改分類(lèi)頁(yè)面輸入了兩位數(shù)的分類(lèi)名分類(lèi)名最小長(zhǎng)度是兩位數(shù)3輸入十位數(shù)的分類(lèi)名在修改商品頁(yè)面輸入了五位數(shù)的分類(lèi)名分類(lèi)名最大長(zhǎng)度是四位數(shù)4輸入兩位數(shù)的分類(lèi)名輸入正確的信息修改成功5.3測(cè)試結(jié)果數(shù)據(jù)庫(kù)能正常連接，測(cè)試數(shù)據(jù)能正確獲取,每個(gè)頁(yè)面可以正常跳轉(zhuǎn),用戶(hù)可以正常下單,管理員可以修改訂單的狀態(tài),功能完整。結(jié)論基于Vue的農(nóng)資商城的設(shè)的功能已經(jīng)逐步被完善,得益于MongoDB的非關(guān)系型數(shù)據(jù)庫(kù),使得項(xiàng)目在后期的迭代變得容易，后臺(tái)使用Node和前臺(tái)使用Vue,這種前后臺(tái)統(tǒng)一語(yǔ)言的做法,對(duì)項(xiàng)目維