1目錄 1 2 2 21.2課題研究意義 3 31.前言 32.需求分析 33.系統(tǒng)分析 34.界面功能設計 3 36.系統(tǒng)測試 32需求分析 4 4 42.3平臺可行性分析 4 43系統(tǒng)分析 53.1功能需求 53.2系統(tǒng)結(jié)構(gòu) 6 6 6 7 73.3.2數(shù)據(jù)庫的概要結(jié)構(gòu)設計 84界面功能設計 4.1主窗體界面 4.2商品分類界面設計 4.3商品出庫界面設計 4.4商品入庫界面設計 5.1前臺設計 5.2后臺系統(tǒng)設計 19 6.1測試用例 6.2測試運行結(jié)果 2隨著計算機和通信技術(shù)的信息系統(tǒng)正在積極發(fā)展。在當今的商品經(jīng)濟和社會中，隨著產(chǎn)品信息的類型和數(shù)量的增加，管理人員越來越難以管理大量的產(chǎn)品信息，如何優(yōu)化管理方法成為熱議話題。國外大型超市的進銷存管理系統(tǒng)非常完善。無論是前臺界面的設計，還是后臺管理系統(tǒng)的構(gòu)建，都有很多值得借鑒的經(jīng)驗。近年來，由于國內(nèi)計算機和互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，中小型超市的庫存管理系統(tǒng)也取得了很大的進步。中小型超市管理系統(tǒng)是對中小型超市內(nèi)商品的購銷存進行管理的系統(tǒng)。該系統(tǒng)的開發(fā)可以使中小型超市的工作人員減少工作流程，對商品的采購、銷售和倉儲進行系統(tǒng)的管理。同時可以減少采購、銷售、倉儲等部門的勞動強度，方便各部門之間的管理和信息交流。加快各部門信息化步伐，使管理更加規(guī)范。中小型超市管理中，由于商品數(shù)量龐大，采購、銷售和庫存管理工作復雜繁重。利用計算機數(shù)據(jù)庫技術(shù)和網(wǎng)絡技術(shù)實現(xiàn)小型超市的自動采購、銷售和庫存管理已迫在眉睫。為了提高工作效率，它帶來了一種新的現(xiàn)代化、規(guī)范化、標準化的管理模式。關(guān)鍵字：企業(yè)資源計劃；存貨；數(shù)據(jù)庫；面向?qū)ο螅籮avaScript隨著計算機和通信技術(shù)的信息系統(tǒng)正在積極發(fā)展。在當今的商品經(jīng)濟和社會中，隨著產(chǎn)品信息的類型和數(shù)量的增加，管理人員越來越難以管理大量的產(chǎn)品信息，如何優(yōu)化管理方法成為該系統(tǒng)的熱議話題。國外大型超市的進銷存儲管理系統(tǒng)非常完善。無論是前臺界面的設計，還是后臺管3理系統(tǒng)的構(gòu)建，都有很多值得借鑒之處。近年來，由于國內(nèi)計算機和互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，中小型超市的進銷存管理系統(tǒng)也取得了很大的進步。1.2課題研究意義目前，國內(nèi)中小超市信息技術(shù)匱乏，計算機利用率低，日常工作處理量大，因此工作效率很低，內(nèi)部溝通不暢等問題，導致倉庫無法及時給采購、生產(chǎn)商及管理人員提供準確的參考數(shù)據(jù)。解決物流管理中物料統(tǒng)一編碼管理、信息流、積壓、物料匹配等問題，提高倉庫管理效率，整合商品，整合供應信息做出快速合理的經(jīng)營決策。1.3課題章節(jié)安排說明書共分七個章節(jié)。第一章詳細的分析了課題的研究現(xiàn)狀和意義；第二章介紹了相關(guān)技術(shù)的可行性、項目的調(diào)研及可行性的評價；第三章介紹了系統(tǒng)框架的需求、頁面的設計和數(shù)據(jù)庫的設計；第四章解釋了主頁的具體細節(jié)；第五章解釋了詳細代碼實現(xiàn)之后的系統(tǒng)；第六部分介紹了系統(tǒng)的每個模塊的測試。測試每個模塊的功能是否完善，是否有各種隱藏的漏洞。1.前言本章主要介紹了系統(tǒng)設計的背景環(huán)境和必要性，分析了系統(tǒng)研究的現(xiàn)實情況及本說明的大體結(jié)構(gòu)。2.需求分析本章對網(wǎng)站的相關(guān)技術(shù)及其他可行性進行了詳細的分析和闡述。3.系統(tǒng)分析本章從架構(gòu)層次構(gòu)思了系統(tǒng)的功能，簡化用戶操作的流程，以及系統(tǒng)后臺及數(shù)據(jù)庫結(jié)構(gòu)、邏輯設計到物理數(shù)據(jù)庫表的設計，并對其進行了闡述。4.界面功能設計本章對前臺的功能模塊詳細的說明，并介紹了圖形界面。5.系統(tǒng)詳細設計與實現(xiàn)本章對系統(tǒng)的功能模塊進行了說明，描述了相關(guān)接口的調(diào)用。介紹了相關(guān)圖形界面6.系統(tǒng)測試42需求分析本系統(tǒng)使用JavaScript語言開發(fā)，使用普遍的MVVM設計模式7,既節(jié)約了開發(fā)的成本，又降低了后期維護的難度。Web頁面使用VUE+Elementui,使用V2.2項目調(diào)研2.3平臺可行性分析(2)軟件：Window10,javaScript,nodejs,Mysql,vscode。2.4其他可行性分析在實現(xiàn)過程中，可以連接到數(shù)據(jù)庫，并且可以使用SQL語句進行增刪查改等操作，所支持。53系統(tǒng)分析對于超市來說商品信息不可或缺。通過對系統(tǒng)的分析，前臺系統(tǒng)主要分為商品分類模塊、商品出庫模塊、商品入庫模塊。后臺管理系統(tǒng)主要分為商品信息管理系統(tǒng)、進貨管理系統(tǒng)、出庫管理系統(tǒng)和庫存管理系統(tǒng)。前臺系統(tǒng)主要分為商品分類模塊、商品出庫模塊、商品入庫模塊。具體描述如下：(1)商品分類模塊：商品分類模塊分為所有模塊和新建分類模塊。所有分類模塊可以查看當前分類數(shù)、分類ID、分類名稱和刪除分類。新建分類模塊可以新建分類，設置分類名稱、貨架區(qū)域、創(chuàng)建時間、分類性質(zhì)等。(2)商品出庫模塊：商品出庫模塊用于處理商品的銷售操作，包括商品ID、數(shù)量、價格、時間、當(3)商品入庫模塊：商品入庫模塊分為商品入庫模塊和查詢當前分類模塊。商品存儲模塊包括商品的ID、名稱、數(shù)量、價格、存儲時間和代碼。查詢當前分類模塊的標識，用于查詢該分類下的所有商品。3.1.2后臺管理系統(tǒng)后臺管理系統(tǒng)主要是對商品的進貨、信息、銷售、庫存進行分類。具體描述如下：(1)商品進貨的管理：主要分為進貨和出貨兩個模塊，用來對進出貨的數(shù)據(jù)進行處理，并實時更新到Web界面，幫助管理人員把握存量。(2)商品信息的管理：商品信息管理系統(tǒng)分為商品類別和信息兩個模塊，用于歸類商品形成商品集合，規(guī)定存貨區(qū)域等。(3)商品銷售的管理：6商品銷售管理系統(tǒng)分為銷售信息和退貨信息的錄入，檢索。形成責任到個人的體系，也可對不守誠信的供貨商進行備注，有助于超市人員管理制度的優(yōu)化，提高超市所售商品的質(zhì)量，為客戶帶去更好的購物體驗。(4)商品庫存的管理：主要是用來查詢指定商品的信息，庫存，銷售額等。3.2系統(tǒng)結(jié)構(gòu)前臺系統(tǒng)模塊是商場系統(tǒng)中用戶的操作平臺。用戶使用瀏覽器操作系統(tǒng)對商品進行添加、刪除、檢查和修改；后臺系統(tǒng)模塊是系統(tǒng)的功能結(jié)構(gòu)，如下圖3.1所示：商品庫存管理系統(tǒng)商品庫存管理系統(tǒng)商品銷售管理系統(tǒng)商品信息管理系統(tǒng)進貨管理系統(tǒng)商品入庫模塊商品出庫模塊商品分類模塊超市進銷存管理系統(tǒng)前臺管理系統(tǒng)后臺管理系統(tǒng)圖3.1系統(tǒng)結(jié)構(gòu)圖3.3數(shù)據(jù)庫的分析與設計3.3.1數(shù)據(jù)庫的邏輯結(jié)構(gòu)設計在這個系統(tǒng)的開發(fā)中使用的數(shù)據(jù)庫系統(tǒng)是mysql。數(shù)據(jù)庫中有三個表。商品庫存表、商品分類表以及出庫表。該表包含字段名、類型、長度、主鍵、描述和允許的空值。1.庫存表“entegoods”如下表3.1庫存表“entegoods”列名數(shù)據(jù)類型長度允許空是否主鍵說明7否是否否否否進貨商品生產(chǎn)日期否否否否否否外鍵碼2.分類表“goods”如下表所示：表3.2分類表“goods”表名數(shù)據(jù)類型長度說明否是商品id號否否商品名字否否商品數(shù)量10(小數(shù)點后兩位)否否商品價格否否商品創(chuàng)建時間否否商品編碼否否外鍵碼表3.3出庫表“outgoods”表名出庫商品id號出庫商品名字出庫商品數(shù)量出庫商品價格8否否否否是(1)商品實體屬性圖包括記錄采購商品或供應商的商品信息，收貨編號、產(chǎn)品編號、產(chǎn)品類型和商品名稱。如下圖3.2所示：進貨量商品圖3.2商品實體屬性圖(2)商品庫存實體屬性圖剩余的貨物數(shù)量。當購買相同的商品時，存貨中與商品編如下圖3.3所示：商品類型商品名稱9已上架商品信息是指從庫存到柜臺銷售的商品信息。屬性商品編號是商品的唯一標識。貨架上的商品數(shù)量是指柜臺上銷售的商品數(shù)量。銷售價格是所售商品的價格，存貨是剩余存貨圖。如下圖3.4所示：上架數(shù)上架數(shù)商品編號銷售價圖3.4已上架商品實體屬性圖(4)新增上架商品實體屬性圖新增上架商品信息是指柜臺上有庫存但尚未售出的商品信息。它包含五個屬性：商品編號、商品名稱、商品類型、貨架上的商品編號和價格。其中，上架數(shù)和售價分別代表新產(chǎn)品在柜臺銷售的數(shù)量和價格。如下圖3.5所示：圖3.5新增商品上架實體屬性圖4界面功能設計能模塊，右側(cè)顯示各功能的操作界面，主要使用Elementui庫實現(xiàn)。如下圖4.1所示：⑦幅市進銷存管理系統(tǒng)⑦☆N庫圖4.1主窗體界面4.2商品分類界面設計量、分類ID、分類名稱和刪除分類。新建分類模塊可以創(chuàng)建新的分類，并設置分類名稱貨架區(qū)域、創(chuàng)建時間和分類性質(zhì)。商品分類—一所有8品分類出庫☆幅N商品分類—一新建分類界面如下圖4.3所示：超市進銷存管理系統(tǒng)超市進銷存管理系統(tǒng)m分“分類性質(zhì)□食家因其地□ma圖4.3商品分類--新建分類圖4.3商品出庫界面設計當前所在的分類。商品出庫界面如下圖4.4所高品出庫d出庫價格所在分類i圖4.4商品出庫界面圖ID、名稱、數(shù)量、售價、入庫時間和代碼代碼。于查詢分類下的所有商品。商品入庫一一商品入庫界面如下圖4.5所示：超市進銷存管理系統(tǒng)詢分類下品⑦品數(shù)量圖4.5商品入庫--商品入庫界面圖商品入庫一一查詢分類界面如下圖4.6所示：圖4.6商品入庫--查詢分類下商品圖5系統(tǒng)詳細設計與實現(xiàn)本系統(tǒng)設計的主要功能分為前臺系統(tǒng)和后臺兩個模塊，前臺系統(tǒng)主要是對某商品的入庫、出庫、價格、分類等進行處理并形成相應的數(shù)據(jù)表格，系統(tǒng)后臺主要根據(jù)前臺通過特定的網(wǎng)絡接口發(fā)送請求，對相應的數(shù)據(jù)庫進行添加和刪除，整理數(shù)據(jù)并返回到前臺。5.1前臺設計在前端頁面開發(fā)中，我使用了流行的Vue+element后端前臺解決方案，它基于Vue和elementui。本項目前端開發(fā)屬于單頁開發(fā)，能夠適應當前市場主流顯示器。本系統(tǒng)的主頁設計主要由兩部分組成。下方分為左側(cè)導航欄和右側(cè)功能區(qū)。其功能如下：上層主要使用嵌套的<div></div>標簽，使用彈性盒布局來顯示系統(tǒng)相關(guān)信息。在左下方，元素界面的導航欄組用來展示此項目的功能。展開時，其子節(jié)點是項目的路由導航。右下角是空的<div></div>標簽，用于在單擊左側(cè)導航欄時呈現(xiàn)基于路由變化的功能性視圖。如下圖5.1所示：NN圖5.1系統(tǒng)首頁面5.1.2商品分類商品分類功能是使用ElementUI的表格組件和Vue的V-for指令在一個循環(huán)中呈現(xiàn)，每行分類后的刪除按鈕都可以將其刪除。網(wǎng)絡請求在vue的生命周期created中在面頁第一次加載時就請求數(shù)據(jù)，點擊刪除時會調(diào)用handleClick方法。具體實現(xiàn)方法如下圖5.2this.$axios.post("http://localhost:8088/allSort").thenthis.data=res.data.da//別除詩城confirmButtonText:"確定",}圖5.2商品數(shù)據(jù)請求與刪除請求代碼截圖商品所有分類界面如下圖5.3所示：①①圖5.3商品分類頁面圖5.1.3新建分類新建分類功能是使用ElementUI的表單表單組件獲取用戶通過Vue的雙向綁定輸入的數(shù)據(jù)。當點擊“立即創(chuàng)建”時，會將用戶輸入的信息進行打包，調(diào)用SubmitForm上傳到服務器，當點擊“重置”時，會調(diào)用ResetForm方法清除當前用戶輸入的信息。新建商品分類界面如下圖5.4所示：☆NW⑦圖5.4新建商品分類頁面新建商品頁面的代碼實現(xiàn)如下圖5.5所示：//console.Log();});圖5.5新建商品分類代碼截圖5.1.4商品出庫商品出庫功能是使用Elementui的表格表單組件，通過vue的雙向綁定取到用戶輸入的數(shù)據(jù)，點擊“立即出庫”時會調(diào)用out方法，將商品出庫。商品出庫界面如下圖5.6所示：超市進銷存管理系統(tǒng)圖分類圖分類品出庫N品N圖5.6商品出庫頁面商品出庫界面實現(xiàn)如圖5.7所示：consoLe.Log(this.formLabeoutgoods_price:this.formLabelAlign.price,outgoods_time:this.商8分類圖5.9圖5.9商品入庫代碼截圖5.1.5查詢分類下商品查詢商品分類功能是使用Elementui的表格組件，配合vue的v-for指令循環(huán)渲染完成的。在vue的生命周期created中在面頁第一次加載時請求到數(shù)據(jù)并渲染到頁面，點擊“查詢”時會調(diào)用onSubmit方法將用戶輸入的關(guān)鍵字打包提交到服務器。點擊“刪除此分類下所有商品”時，會調(diào)用deleteAll方法將用戶輸入的分類id提交到服務器，并刪除所有此分類下的商品。查詢商品分類界面如下圖5.10所示：超市進銷存管理系統(tǒng)品入庫下圖5.10查詢商品分類頁面查詢商品分類界面實現(xiàn)如下圖5.11所示：});圖5.11查詢商品分類代碼截圖刪除商品分類界面實現(xiàn)如下圖5.12所示：console.log(this);console.log(infor);進行網(wǎng)終造。})圖5.12刪除商品分類下商品代碼截圖5.2后臺系統(tǒng)設計后臺管理系統(tǒng)主要分為進貨、商品信息、商品銷售、商品庫存管理系統(tǒng)。進貨管理系統(tǒng)通過路由函數(shù)處理數(shù)據(jù)并返回前端。如下圖5.13所示：app.post("/enterGoods",function(req,res)日cot.query("select*fromgoodswheregoods_id=?",[reg.body.goods_id],function(err,result)《cot.query("updategoodssetgoods_num=?wheregoods_id=?",[num,req.body.goods_id],fuif(result)(for(leti=0;i<req.body.entergoods_time.length;ientegoods_time:req.body.entergoif(result){圖5.13商品進貨管理代碼截圖商品信息管理系統(tǒng)是用于對商品的類別分類，形成商品集合，對商品信息進行增刪改查等操作。如下圖5.14所示：//添加分類sort_name:req.body.msg:“分類已存在”}))7}))}//根族分指添加商R5.2.3商品銷售管理系統(tǒng)商品銷售管理系統(tǒng)是處理商品銷售信息和退貨信息的錄入，檢索。其本質(zhì)還是商品的入庫操作。如上圖5.13所示。商品庫存管理系統(tǒng)主要是用來查詢指定分類商品的信息。如下圖5.15所示：//松分頁查遍入榨記錄//松分頁查遍入榨記錄app.post("/sltEtGoodscot.query("select*fromentecot.query("select*fromoutgoods",function(err,reapp.post("/sltEtGoodsN",functioncot.query("select*fromentegoodswheresort_id=?",圖5.15商品庫存管理代碼截圖6系統(tǒng)測試6.1測試用例本次測試主要對商品的進貨管理、商品的銷售管理、商品的存貨管理進行了測試。見表3.5:表3.5系統(tǒng)功能測試操作預測結(jié)構(gòu)實際輸出結(jié)果銷存管理系統(tǒng)”首頁點擊搜索商品信息可以查看所選商品的信息得到預期結(jié)果銷存管理系統(tǒng)”首頁點擊商品進貨管理可以查看到添加、刪除商品進貨信息等功能得到預期結(jié)果銷存管理系統(tǒng)”首頁點擊商品分類增加可以增加商品的分類，備注等得到預期結(jié)果銷存管理系統(tǒng)”首頁點擊商品分類查詢可以查詢到所有的商品的分類，備注等得到預期結(jié)果6.2測試運行結(jié)果商品的新增成功頁面如下圖6.1所示：8品分類1飲料分3服裝分45分圖6.1商品的新增頁面新增分類成功的頁面如下圖6.2所示：分類名稱5測試用例1