農(nóng)資商城設計

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

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

username:String,

password:String

});

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

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