第PAGE基于Web的電子設備產品網銷系統(tǒng)設計與實現目錄TOC\o"1-3"\h\u23592一、緒論 224191（一）開發(fā)背景與意義 228707（二）開發(fā)技術介紹 217778二、系統(tǒng)分析 227206（一）可行性分析 28201.經濟可行性 2282（二）需求分析 3206171.功能需求分析 3238772.性能需求分析 4682三、系統(tǒng)設計 514750（一）系統(tǒng)的總體結構設計 516778（二）系統(tǒng)的詳細設計 5319681.游客模塊詳細設計 513462.用戶模塊詳細設計 6250533.管理員模塊詳細設計 915349四、系統(tǒng)的實現 1110852（一）首頁頁面的實現 1117315（二）游客功能模塊的實現 1131285（三）用戶功能模塊的實現 1332708（四）管理員功能模塊的實現 158887五、總結 1920652參考文獻 19緒論開發(fā)背景與意義電子產品已經成為了現代日常生活的基本必需品，并且更新速度也相當快，所以銷量非常巨大。將傳統(tǒng)電子銷售業(yè)務系統(tǒng)和網上商店相結合的電子網絡產品銷售管理系統(tǒng)，不但能夠便于消費者選擇，同時也能夠進一步擴大產品銷售份額，從而獲取更大的經營利潤，達到了電子銷售商和消費者雙方收益雙贏的效果。所以，基于網絡的電子銷售業(yè)務系統(tǒng)的實現，有著十分關鍵的現實意義。開發(fā)技術介紹VisualStudioCodeVisualStudioCode(現在中文通常簡稱“VSCode”[1])，它是一個代碼編輯器。它具有一個對應于新的javascript，typescript和以及node.js的多個軟件內置應用軟件編程支持，并且還具有豐富的其他軟件編程應用語言的一個可相互擴展的軟件生態(tài)系統(tǒng)。[2]Vue.jsVue(讀音/vju:/,相似于英語view)，它是一個專門負責設計建立基于用戶的視圖漸進式的javascript軟件架構[4]。和其它大型軟件架構語言有所明顯不同的地方是,vue被架構設定成作為用戶能夠從底向上逐層進行使用。vue架構的內部實核庫只是最關心于用戶視圖的一層,不但很容易便于用戶上手,還會很便于與第三方軟件庫或者其他已有軟件項目進行整合。[3]系統(tǒng)分析可行性分析系統(tǒng)的可能性分析方法一般包含了經濟效益工作方面的可能性、技術的可能性，以及用戶操作方面的可能性。經濟可行性基于網絡的個人電子設備銷售管理系統(tǒng)研發(fā)時可以利用實驗室的軟件環(huán)境，本管理系統(tǒng)并沒有非常的復雜，而且相對來說研發(fā)時間也不會很長，在經濟效益領域方面的費用也并不大，所形成的經濟效益遠大于研發(fā)管理系統(tǒng)的成本費用，所以從經濟效益領域方面分析此管理系統(tǒng)的研發(fā)也是比較合理的。技術可行性VisualStudioCode，是目前應用開發(fā)領域最主流的編程技術之一。Vue腳本廣泛運用于服務器端，用戶即可產生交互式應用，也能夠自行定義控件，這就極大降低了代碼編制的時間負擔和復用效率問題，是傳統(tǒng)的頁面編程腳本所無法做到的。VisualStudioCode和Vue結合使用，能夠很好的完成網上電子設備銷售系統(tǒng)所要求的所有功能，所以從技術可行性方面分析此系統(tǒng)的發(fā)展是比較合理的。操作可行性本系統(tǒng)的具體運行工作原理其實非常簡單。系統(tǒng)使用者能夠直接使用瀏覽器從網頁進行訪問；系統(tǒng)管理人員也可以通過使用網絡瀏覽器管理系統(tǒng)中的各種最新內容，例如：更新產品營銷資訊，更新行業(yè)新聞，以及把過時的資訊移除等等。所以從這個操作系統(tǒng)方面上來分析，開發(fā)此操作系統(tǒng)也是很合理的。需求分析功能需求分析基于網絡的電子商品銷售系統(tǒng)用戶可分成三種:游客、使用者、管理者。游客可查看本系統(tǒng)的所有資訊，還可在注冊成為用戶。用戶的主要操作包括選擇商品和查看產品信息。而管理員則能夠對應用實施管理，同時還可以進行新聞信息管理、商品管理、進貨信息管理、訂貨管理等[5]?；赪eb的電子設備營銷系統(tǒng)的頂層數據流圖如圖1所顯示。圖1頂層數據流圖下面對三類用戶的功能進行詳細分析。游客互聯網上的游客能夠查閱到行業(yè)資訊、相關專業(yè)知識、商品資訊，但不能夠選購商品，如要購物就應該先注冊成為用戶。用戶用戶擁有游客的所有權利，并且還能購買商品。用戶登錄之后可在更改個人基本信息，還可以查詢購物車，可在購物車內支付，但付費之后才能從訂單中查詢已訂購商品。管理員管理者具有新聞報道管理、商品管理、入庫管理工作、訂貨管理工作、使用者信息管理系統(tǒng)等各種功用。在新聞報道管理中管理員能夠進行新增或者刪減；在商品管理中能夠新增商品或者產品的類別，甚至取消某一個商品；在入庫管理工作中能夠增加入庫量,其數量也會添加到商品倉庫中，從而改變商品倉庫的數量；在訂貨管理工作中能夠查詢訂貨狀況，如產品已經發(fā)貨也要做出相關的編輯。在使用者管理中如果使用者長期都未登陸時,管理者也有權將其移除。結合對頂層數據分析流圖和上述功能要求的解釋,就能夠得出進行分析后的層次數據分析流圖。如圖2所示。圖2第一層數據流圖性能需求分析在傳統(tǒng)電商快速蓬勃發(fā)展的這個時代，網絡營銷系統(tǒng)具有很大的性能優(yōu)越性，為充分發(fā)揮傳統(tǒng)網上商店的最大優(yōu)點，提升網絡銷售活動效果和提升服務產品質量，必須同時提供以上如下幾種性能需求。界面友好網頁要美觀、使用要簡單，增加使用者對系統(tǒng)的趣味性,盡可能達到瀏覽者再次瀏覽的效果。安全性和保密性系統(tǒng)設計要注意保證數據的使用安全性，系統(tǒng)使用者的權限設置要集成有嚴密的分明，以便于防止越權造成重要用戶資料機密信息的非法泄露等。穩(wěn)定性和健壯性網站系統(tǒng)要求具有足夠的穩(wěn)定性和健壯性,不會由于網站用戶的多次錯誤網頁瀏覽或錯誤文字輸入而直接產生系統(tǒng)報錯，同時網站要求盡量降低系統(tǒng)故障率。易維護性和擴展性信息系統(tǒng)的技術設計與研究，要確保有較強的易維護性和擴展度，各種功能模塊系統(tǒng)與各種數據架構都應該便于拓展，以便于將信息系統(tǒng)繼續(xù)擴充。實用性和方便性軟件系統(tǒng)建設時要充分考慮使用者感受，并力求滿足用戶的不同要求與習慣方式，使系統(tǒng)軟件的功能更加強大而且簡單使用。系統(tǒng)設計系統(tǒng)的總體結構設計本系統(tǒng)主要內容包括管理者模塊、用戶模板、游客模塊三個部分。管理者模塊完成的主要有:資訊信息、產品分銷信息、供貨資料管理、訂單信息管理、用戶信息管理等。用戶模塊可以實現的主要有:更改自己的信息、查詢訂單、選擇商品、查看系統(tǒng)的所有資訊等。游客模塊可以實現的主要有:查看系統(tǒng)的所有物品的信息、完成注冊等。系統(tǒng)結構圖如圖3所示。圖3結構系統(tǒng)圖系統(tǒng)的詳細設計游客模塊詳細設計游客查看信息詳細設計游客能夠按照自己所需和感興趣商品，看到相關的商品說明。但是游客無法選購商品，只能登錄之后才能購物。查看系統(tǒng)的數據信息處理流程示意圖如圖4所示。圖4查看系統(tǒng)信息流程游客注冊詳細設計游客進行注冊時需要填寫帳號、注冊名和密碼、使用者真實名稱、電話、住址、郵編。在提交時候需要對帳號信息加以安全校驗,一旦確認該注冊帳號被使用，這時就需要更換最新的注冊帳號進行注冊。游客注冊操作流程如下圖5所示。圖5用戶注冊流程圖用戶模塊詳細設計用戶登錄詳細設計已注冊的用戶，可以在進入系統(tǒng)后立即登錄；也可在需要訂購商品時再進行登錄。登錄時會要求用戶填寫賬號、密碼。用戶在登錄的時候輸入的賬號或密碼有誤，系統(tǒng)會有提醒。用戶注冊流程圖如圖6顯示。圖6用戶登錄流程圖個人信息管理詳細設計已登錄的用戶可更改自身的個人信息。但在更改前必須確認用戶登錄密碼,帳戶正確無誤，則在更改頁面中可改變個人信息；帳戶密碼不對,則不可以更改個人信息，以提高用戶個人信息的可靠性。用戶更改信息流程圖如圖7顯示。圖7用戶修改注冊信息流程圖購物車管理詳細設計用戶能夠把自已感興趣的產品加入到購買車，再次登錄的時候也能夠在購買車里查詢,因為支付都是在購買車里完成的。支付之后，就能夠從購物訂單里找到當前購買的這個產品。要是自己不想把這個產品在購物車內放著，可將其從您的購物資料車里進行移除。產品購買詳細設計用戶如要選擇商品，先可以看到是不是有庫存，接著進入到商品的詳情說明界面，在其中的購買按鈕，就可將感興趣的商品和所需要數量進入購物車，然后在購物車里。支付完成之后，就會產生訂單。根據用戶所訂購的商品流程圖,如圖8所顯示。圖8用戶購買產品流程圖用戶查看訂單詳細設計用戶可直接查看自己訂單信息記錄，其中包含有自己購物訂單。用戶只能查看訂單中的詳細信息，不能修改。管理員模塊詳細設計管理員登錄詳細設計管理者從網頁的最下方“管理員用戶入口”處進入到網站后臺管理。在后臺,可以管理企業(yè)資訊、用戶、商品、訂單、進貨信息等。在登錄的時候需要填寫賬號和密碼。新聞管理詳細設計新聞管理主要管理是，負責收集專業(yè)知識和最新行業(yè)新聞，并有效的發(fā)表這些資訊。管理員也可以清除過舊的新聞，把后臺數據庫中該條過舊的新聞自動刪掉。如圖9所示。圖9刪除新聞流程圖產品管理詳細設計管理員能夠對所有商品的信息分類以及信息內容進行及時更新，分類信息更新之后管理員可在后臺進貨庫存管理處及時更新新的商品以及庫存。進貨管理詳細設計管理員要對新進的機型產品數量數據進行更新，先選定需要進行更換的機型產品名稱，之后錄入所需要進行更換的機型產品數量，提交時數據會更新到后臺數據庫中，而其中的存貨商品總量則會在前臺進行展示，以便于前臺用戶可以隨時查詢某一產品是否有商品存貨。而當用戶在前臺選擇了某產品后，對應的產品庫存量也隨之有一個相應的下降。訂單管理詳細設計管理員可以對單一用戶每個訂單管理，一旦發(fā)現訂單信息中的某個商品信息開始發(fā)送，就可以對用戶訂單信息進行編輯，并更換為發(fā)送標簽。用戶在登錄后就可以從購物訂單中查看“是否發(fā)貨”的訂單信息。整個訂單信息發(fā)送后的過程如圖10所示的顯示。圖10訂單發(fā)貨流程圖用戶管理詳細設計用戶管理模塊中，管理者必須定時對用戶信息進行整理，假如某一用戶長期未能登陸過，又或是在選擇產品時觸犯了有關條款，那么管理者就會將其移除，在剔除之后該用戶名將永遠無法登陸。系統(tǒng)的實現首頁頁面的實現打開系統(tǒng)主頁，最上面呈現的是操作系統(tǒng)新功能指引條。游客可在網頁注冊作為本系統(tǒng)的用戶，已注冊用戶即可進行登錄和訂購商品。而管理員也可在管理員入口處登陸系統(tǒng),并完成管理系統(tǒng)后臺的各項管理等。游客功能模塊的實現游客查看信息功能的實現游客能夠看到產品最新資訊，但無法購買。在產品導航欄中的具體相關產品頁下面只要單擊具體產品名稱，就可以進入并看到具體的相關產品信息說明頁。如圖11所示。圖11產品介紹頁面游客注冊功能的實現如果是游客此時需要訂購此類商品，必須注冊成為系統(tǒng)網站注冊用戶。在注冊界面,必須正確填寫登錄用戶名、帳號密碼、實際帳戶名字、來電、住址、郵編，提交后可進行帳戶登錄,并且登錄用戶名、帳號密碼和實際帳戶名字都一樣是必須正確的。如果之前登錄的賬號已被其他用戶所進行注冊，那么在填寫提交的信息時候，系統(tǒng)就可能會自動顯示“用戶名已經被使用”，而這時就只能更改賬號進行重新登錄。如圖12所示。圖12用戶名已使用提示游客們在輸入登錄的密碼時候必須先在最后的第一行輸入確認您的密碼然后在該行輸入一次密碼,如果二個密碼最后輸入的不一樣,那么系統(tǒng)就可能會自動顯示“密碼不一致”。這時,重新再次輸入密碼即可。如圖13所示。圖13注冊密碼不一致提示用戶功能模塊的實現用戶登錄功能的實現用戶可在系統(tǒng)首頁登錄并選擇商品,如未登錄,則在單擊“訂購”之后,將會出現登錄界面。如圖14所示。圖14用戶登錄頁面用戶在登錄時,一旦帳號不能登陸或是帳戶密碼填寫有誤,那么操作系統(tǒng)將會顯示“帳號不存在或帳戶密碼出錯,您確定后再登錄!”。如圖15所示。圖15用戶名不存在或密碼錯誤提示用戶注冊信息管理功能的實現已經成功注冊的系統(tǒng)用戶能隨時登陸，而且在完成驗證后才能更改你的個人信息，包括你的登陸密碼和基本身份信息。在系統(tǒng)更改用戶個人信息的整個流程中密碼是必須一定要正確填寫的,通過單擊“提交”,就可以進行更改工作。在需要修改已登錄注冊用戶個人信息的文件時候修改密碼和用戶確認密碼項目也是一定都需要正確填寫的,如不能進行,會顯示新密碼項需要重新填寫。如圖16所示。圖16用戶修改信息頁面用戶購物車管理功能的實現登錄后用戶即可將所瀏覽的商品放入購物車里,在購物車里用戶還能夠查看商品名稱、數量、以及如何支付。單擊支付按鈕跳到支付界面,付款完成之后在我的訂單中將會產生對應的訂單。用戶還能把購物車里的商品移除。如圖17所示。圖17購物車頁面用戶產品購買功能的實現具體的過程是首先將選購的產品加入到購買車里，在產品的詳情說明網頁中有“購買”按鍵,單擊此按鍵即可將產品加入到購買車。在“我的購買車”里有關于如何支付的信息,在此處即可支付，支付完成則購買成功?！拔业挠唵巍敝锌梢圆榭从唵?此時購買過程完成。如圖18所示。圖18我的訂單頁面用戶查看訂單功能的實現用戶在登錄后可以查看自己的訂單商品以及訂單,訂單的相關信息內容一般上都包含了商品名、訂單商品數量、訂貨截止時間、有無成功發(fā)貨等相關信息內容。如圖19所示。圖19用戶歷史訂單頁面管理員功能模塊的實現管理員登錄功能的實現在本系統(tǒng)主頁的最下方有管理者進入入口，點擊這里管理者才能登錄管理系統(tǒng)，并進行后臺操作管理工作。管理員在登錄時，如沒有填寫密碼，則會顯示“必需填寫密碼”，密碼填寫有誤則會清空密碼框，直至填寫正確。如用戶名、密碼均沒有填寫，則會提示用戶名和秘密登記的必填提示。如圖20，圖21所示。圖20密碼必填提示圖21用戶名、密碼必填提示新聞管理功能的實現選擇了系統(tǒng)后臺功能管理菜單“新聞管理工作”菜單后，在右邊系統(tǒng)會按照有關新聞資訊發(fā)布的時間日期依次自動展示您的有關新聞資訊。單擊后臺媒體新聞管理員主界面菜單中的“刪除”，會自動提示“確定要刪除嗎?”，點擊“確定”，會自動提示“新聞刪除成功!”如圖22所示。圖22新聞刪除提示頁面選擇了系統(tǒng)后臺功能管理菜單“新聞管理工作”菜單后，在右邊就看到會自動產生一個媒體文章發(fā)布頁面，包含了所有媒體發(fā)布文章中的標題、分類和文章內容，需要在適當的位置地方手動輸入文章內容。您的發(fā)布信息已經填寫好，之后只要單擊“發(fā)布”按鈕，會自動提示“我的新聞媒體發(fā)布成功!”。如圖23所示。圖23新聞發(fā)布提示頁面產品管理功能的實現商品信息管理系統(tǒng)主要分為商品信息、商品增加、商品分類增加等三種主要功能。選擇在系統(tǒng)功能菜單“產品管理”中的“產品信息管理”子菜單，在右邊展示出每個商品的基礎信息，包含名稱、產品類別、價格、庫存、刪除等。單擊“刪除”按鈕，會自動提示“確定要刪除嗎?”，點擊“確定”，就表示會把該網店產品的所有相關信息全部自動刪掉，而網店數據庫中關于該網店商品的所有相關信息也將全部被自動刪掉。如圖24所示。圖24產品刪除提示選中系統(tǒng)功能菜單“商品信息管理”中的“商品增加”子菜單，右邊展示出商品增加界面，該網頁內包含商品品名、報價、照片、商品的分類、介紹。在“商品增加”功能菜單中，產品類別要求確定，產品圖片要求查看自己計算機上的相應照片，填寫商品的名字、價錢、說明。個人信息都填好之后，單擊“提交”按鍵，就會提醒“商品增加成功!”。如圖25所示。圖25產品添加提示選中系統(tǒng)功能菜單“商品信息管理”的“商品分類增加”子菜單，右邊展示出產品種類增加界面，在該界面中只須進入所要增加的產品種類命名。相應的商品信息填報好后，再單擊“增加”按鍵，即可完成產品類別增加。這時會提示“產品種類增加成功!”。如圖26所示。圖26產品類別添加提示進貨管理功能的實現進貨數量管理一般來說是由倉庫管理者負責用來變更一個倉庫進貨數量的。如果選中了系統(tǒng)管理功能欄的菜單視窗中的“進貨信息”，在右邊將來就會自動發(fā)現一個供貨商對信息進行填報的菜單視窗，根據需求填報信息即可。在自動更改該商品數據的時候同時也可能會自動改變您在商品信息記錄中的前臺倉庫，同時也可能會自動改變您在前臺倉庫商品信息記錄中的后臺倉庫商品數量。選定產品名稱，并錄入產品數量，然后單擊“提交”按鍵，就可以實現產品庫存量的提高，該數據將會改變在數據庫中的產品數量。完成后顯示“按進貨數量添加成功!”。如圖27所示。圖27進貨數量提示訂單管理功能的實現選擇了系統(tǒng)功能菜單中的“訂貨信息管理”操作功能，在右邊就會開啟了用戶的訂貨，訂貨信息內容中包含了賬號、姓名、訂貨時間、訂貨總量。管理者也能夠對任何一位使用者的訂貨加以編輯，一旦該訂貨中的商品都已發(fā)送，那么管理者將能夠使用此動作來標識已發(fā)送的訂貨。該動作結束之后，使用者登陸自己的賬戶時將會提示是否發(fā)送。訂單管理界面中“是不是發(fā)貨”消息是不允許編寫的，只能選擇“編寫”按鍵,才會發(fā)現“是不是發(fā)貨”的可編寫狀況，在“是不是發(fā)貨”前邊打對勾，選擇“更新”。只能進行對該訂單的編寫。一旦單擊“撤消”即可退回編輯狀態(tài)。在“訂貨信息管理”開始菜單這個選項中的您還有“清除”這個選擇，管理者必須定時地對您的數據庫系統(tǒng)實施一次維修，并把之前的部分下單訂貨全部進行刪掉，完成所有該維修操作之后的您即可直接再次點擊并將訂單中最后一排的訂貨清除。如果提示“確定要取消嗎?”，點擊“確定”，會自動提示“您的訂單已經取消成功!”；點擊“取消”則不會取消。如圖28所示。圖28訂單刪除提示用戶管理功能的實現選擇操作系統(tǒng)后臺功能點擊菜單一欄中的“用戶管理”這個功能，右側就可以會自動出現所有在此操作系統(tǒng)后臺登錄的所有用戶及其個人信息，包含了注冊賬號、實際用戶名稱、手機號、家庭成員住址、郵編。系統(tǒng)管理員也同時可根據整個操作系統(tǒng)和用戶數據庫的實際工作負載，將已在選擇過程中長一段時間沒有成功購買相關商品的所有用戶進行刪除，從而可以保證整個操作系統(tǒng)和用戶后臺中的數據庫系統(tǒng)正常運轉良好。如有要求清除的用戶，可以單擊列表的最后一排“刪除”，會提示“