基于HTML5的電商后臺(tái)管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)摘要近些年隨著互聯(lián)網(wǎng)的爆發(fā)，網(wǎng)絡(luò)購物也走入了千家萬戶，不僅如此，網(wǎng)絡(luò)購物已經(jīng)成為主流購物方式。在此背景下，各電子商務(wù)公司全面提高后臺(tái)管理水平，包括倉庫、物流直至最終向用戶發(fā)送商品等各環(huán)節(jié)，電子商務(wù)后臺(tái)管理系統(tǒng)可以方便地管理和控制商品訂單的整體流程。本說明書介紹電子商務(wù)后臺(tái)管理系統(tǒng)相關(guān)的業(yè)務(wù)及技術(shù)。本系統(tǒng)以Windows為操作系統(tǒng)，VSCODE為前臺(tái)開發(fā)環(huán)境，MYSQL為后臺(tái)數(shù)據(jù)庫，HTML5，Css3，Java腳本，Node.js為開發(fā)技術(shù)，Sqlyog利用MYSQL數(shù)據(jù)庫可視化工具完成了電商后臺(tái)管理系統(tǒng)的設(shè)計(jì)。系統(tǒng)由用戶管理、訂單管理等5個(gè)模塊構(gòu)成。后臺(tái)管理者在訂購商品的整個(gè)過程中，應(yīng)該充分掌握訂單的狀態(tài)。一旦訂單存在問題，應(yīng)該第一時(shí)間關(guān)閉，避免造成更嚴(yán)重的后果。本系統(tǒng)接口相互友好，操作方便。關(guān)鍵詞：用戶管理，MYSQL，數(shù)據(jù)庫，權(quán)限管理，訂單管理，商品管理，1緒論課題的研究目的及意義隨著電子商務(wù)在我國乃至世界的流行，日益增長的數(shù)據(jù)顯示越來越多的人接觸到網(wǎng)絡(luò)購物。那么對于電商系統(tǒng)來說，毫無疑問電子商務(wù)的核心之一是電商后臺(tái)管理系統(tǒng)。但對于日訪問量超過上千萬的網(wǎng)站，常見的同步方式通常對于這種服務(wù)器流量過大的情況束手無策，從而導(dǎo)致網(wǎng)站無法正常運(yùn)行的情況等等。因此架構(gòu)一個(gè)高可用，可擴(kuò)展的框架是非常的重要。在這個(gè)背景下，開發(fā)出適合電商后臺(tái)工作人員使用的電商后臺(tái)管理系統(tǒng)可以極大的提高相關(guān)人員的工作效率。而本系統(tǒng)的設(shè)計(jì)目標(biāo)即為通過構(gòu)建電商后臺(tái)管理系統(tǒng)來進(jìn)行分析統(tǒng)計(jì)信息，使系統(tǒng)操作方便，易于查找和管理，更降低了訂單信息統(tǒng)計(jì)、分析及處理時(shí)的錯(cuò)誤。1.2本文組織結(jié)構(gòu)及研究內(nèi)容1.2.1本文的組織結(jié)構(gòu)第一章：緒論。主要介紹了本文的組織結(jié)構(gòu)以及本系統(tǒng)的研究內(nèi)容。第二章：系統(tǒng)分析。通過對市場、技術(shù)等調(diào)查，提出了本系統(tǒng)的可行性分析與需求分析[2]。第三章：系統(tǒng)設(shè)計(jì)。本章包括HTML5的電商后臺(tái)管理系統(tǒng)的總體設(shè)計(jì)，使用的技術(shù)簡介，包括在系統(tǒng)功能設(shè)計(jì)上Node.js、Vue.js、Mysql等技術(shù)的使用等。第四章：系統(tǒng)實(shí)現(xiàn)。本章對HTML5的電商后臺(tái)管理系統(tǒng)詳細(xì)設(shè)計(jì)和編碼實(shí)現(xiàn)[5]，本章主要說明了設(shè)計(jì)系統(tǒng)的思路，并展示了相關(guān)頁面。第五章：系統(tǒng)測試。在功能測試方面主要涉及到數(shù)據(jù)交換、系統(tǒng)登錄等方面。結(jié)論：具體總結(jié)本文研究成果、主要工作內(nèi)容。1.2.2研究內(nèi)容實(shí)現(xiàn)系統(tǒng)的功能特點(diǎn)以及需求分析等：本系統(tǒng)以VsCode為前臺(tái)開發(fā)環(huán)境，MYSQL為后臺(tái)數(shù)據(jù)庫[1]，Windows為操作系統(tǒng)，HIML5，Css3，JavaScript，Node.js為主要開發(fā)技術(shù)，Sqlyog為MYSQL數(shù)據(jù)庫可視化工具,在此基礎(chǔ)上具體設(shè)計(jì)并建立電商后臺(tái)管理系統(tǒng)。結(jié)合功能分析與系統(tǒng)需求分析，完成HTML5的電子商務(wù)背景管理系統(tǒng)的設(shè)計(jì)和實(shí)現(xiàn)。整體的電子商務(wù)背景管理系統(tǒng)全部由用戶管理、權(quán)限管理、商品管理、訂單管理以及數(shù)據(jù)統(tǒng)計(jì)5個(gè)模塊構(gòu)成。其中，用戶管理模塊可以在用戶列表中分配現(xiàn)有用戶的角色等操作。在權(quán)限管理中的角色列表中執(zhí)行編輯刪除分配權(quán)限的工作；然后查詢權(quán)限列表的權(quán)限名稱、路徑和權(quán)限等級。商品管理板是商品清單分類參數(shù)?？梢苑譃樯唐贩诸惾N，其中商品列表中可以找到商品，分類參數(shù)可以編輯和刪除商品，可以在商品分類中添加分類，可以刪除和編輯分類。在訂單管理板塊中可對訂單信息進(jìn)行修改操作。在此背景下開發(fā)HTML5的電商后臺(tái)管理系統(tǒng)。

2系統(tǒng)分析本系統(tǒng)可以使電商后臺(tái)管理員的操作更為簡便，而且開發(fā)出一個(gè)適合電商后臺(tái)管理員使用的電商后臺(tái)管理系統(tǒng)，可以大大提高相關(guān)人員的工作效率[6]。而本系統(tǒng)的設(shè)計(jì)目標(biāo)即為通過構(gòu)建電商后臺(tái)管理系統(tǒng)來進(jìn)行分析統(tǒng)計(jì)信息，使系統(tǒng)操作方便，易于查找和管理，更降低了訂單信息統(tǒng)計(jì)、分析及處理時(shí)的錯(cuò)誤。當(dāng)用戶在購買商品之后，系統(tǒng)自動(dòng)生成訂單，后臺(tái)管理員可以在用戶列表對已有用戶進(jìn)行編輯信息的操作[7]；在權(quán)限管理中的角色列表中，可以對用戶進(jìn)行編輯、刪除權(quán)限分配操作；在商品清單中可檢索商品，添加商品以及可以對商品信息進(jìn)行編輯等操作；可在訂單管理板塊中的訂單列表檢索訂單以查看訂單價(jià)格、查看是否付款、是否發(fā)貨、訂單時(shí)間、以及對訂單地址進(jìn)行修改操作，在數(shù)據(jù)統(tǒng)計(jì)板塊中的數(shù)據(jù)報(bào)表上通過圖的形式呈現(xiàn)出來[8]。2.1系統(tǒng)可行性分析2.1.1經(jīng)濟(jì)可行性本系統(tǒng)以MYSQL為后臺(tái)數(shù)據(jù)庫，VsCode為前臺(tái)開發(fā)環(huán)境，JavaScript，Node.js等開發(fā)技術(shù)[4]，Sqlyog等工具包均為官方免費(fèi)開源，沒有花銷成本，經(jīng)濟(jì)可行。HTML5的電子商務(wù)背景管理系統(tǒng)的開發(fā)成本主要在于人事費(fèi)和服務(wù)器成本。人事費(fèi)是開發(fā)與設(shè)計(jì)的成本。服務(wù)器成本可以理解為開發(fā)項(xiàng)目后在購買配置服務(wù)器方面所形成的成本。通過檢測分析認(rèn)為本系統(tǒng)對電商企業(yè)的發(fā)展有較大的裨益，可實(shí)現(xiàn)動(dòng)態(tài)管理追蹤商品，這能夠促進(jìn)企業(yè)實(shí)現(xiàn)最小化人力成本、管理成本。2.1.2技術(shù)可行性系統(tǒng)主要采用VsCode為前臺(tái)開發(fā)環(huán)境，MYSQL為后臺(tái)數(shù)據(jù)庫，熟練使用HTML5，Css3，JavaScript，Node.js為后端編程語言編程[3]，Vue為前端框架，Sqlyog為MYSQL數(shù)據(jù)庫可視化工具，了解并使用引用各種工具包。本系統(tǒng)以現(xiàn)有主流技術(shù)為主，所以完全不用擔(dān)心是否存在技術(shù)被淘汰的問題。技術(shù)方面完全不存在問題。系統(tǒng)主要使用Vue框架、后端Express框架和ElementUI庫。這些技術(shù)框架，社區(qū)活躍，經(jīng)歷了大量實(shí)際商業(yè)項(xiàng)目的考驗(yàn)。2.1.3操作可行性開篇就已經(jīng)說明了設(shè)計(jì)本系統(tǒng)的目的，該系統(tǒng)處理商品的流程基本符合要求，實(shí)際操作能力強(qiáng)，UI設(shè)計(jì)界面友好，能夠?qū)崿F(xiàn)正常的交互數(shù)據(jù)。后臺(tái)接收數(shù)據(jù)正常，頁面可直觀的呈現(xiàn)出數(shù)據(jù)圖表，能夠充分滿足用戶進(jìn)行操作的實(shí)際需求。2.1.4市場可行性一個(gè)系統(tǒng)是否有價(jià)值取決于市場。互聯(lián)網(wǎng)時(shí)代，市場上涌現(xiàn)出各類購物平臺(tái)。無論是針對一般普通消費(fèi)者還是特定行業(yè)的專業(yè)購物平臺(tái)，其客觀都需要運(yùn)用到后臺(tái)管理系統(tǒng)[9]。本次市場調(diào)查結(jié)果顯示至少有數(shù)千家電子商務(wù)平臺(tái)大量的需要后臺(tái)管理系統(tǒng)[10]。綜上所述，從市場應(yīng)用層面分析，HTML5的電本商后臺(tái)管理系統(tǒng)未來可期，此類系統(tǒng)未來發(fā)展前景良好。2.2系統(tǒng)需求分析2.2.1功能需求分析圖2.1為本系統(tǒng)針對管理員所設(shè)置的模塊，管理員按照系統(tǒng)要求正常注冊并登錄就可完成相關(guān)操作了。圖2.1管理員功能圖 通過分析電商后臺(tái)管理系統(tǒng)，主要得出如下功能。用戶管理：主要體現(xiàn)在管理員對用戶信息的更新與維護(hù)方面。例如，您可以在用戶列表中添加新的用戶[11]，對現(xiàn)有用戶進(jìn)行編輯信息的工作，例如，修改郵箱和電話信息，分配現(xiàn)有用戶的作用，改變用戶狀態(tài)，移交郵箱的功能等；可在權(quán)限管理中的角色列表中進(jìn)行添加用戶的角色名稱和角色描述，并對用戶進(jìn)行編輯刪除分配權(quán)限的操作；以及對權(quán)限列表進(jìn)行查看權(quán)限名稱、路徑與權(quán)限等級。權(quán)限管理：管理員可操作、管理用戶的權(quán)限。操作者可通過權(quán)限管理的角色列表中添加用戶的角色名稱和角色說明，編輯用戶或刪除權(quán)限操作的分配；以及對權(quán)限列表進(jìn)行查看權(quán)限名稱、路徑與權(quán)限等級[13]。商品管理：即操作商品信息。這是系統(tǒng)針對管理員所設(shè)置的主要功能。主要可分為商品清單、分類參數(shù)、商品分類三個(gè)項(xiàng)目。在其中可以從商品清單中查找商品，添加商品和商品的參數(shù)，編輯和刪除商品；分類參數(shù)可以選擇商品的種類，管理員可進(jìn)行編輯或刪除商品種類的操作等。4、訂單管理：管理員可以檢索訂單并進(jìn)行相應(yīng)操作。確認(rèn)訂單號(hào)碼，確認(rèn)訂單價(jià)格，確認(rèn)是否支付，確認(rèn)是否發(fā)送，并修改訂購時(shí)間和訂購地址。5、系統(tǒng)管理：管理員依托本模塊可維護(hù)系統(tǒng)，包括落實(shí)菜單、角色以及用戶管理等方面。6、統(tǒng)一分析電商后臺(tái)：通過工具包在數(shù)據(jù)統(tǒng)計(jì)板塊中的數(shù)據(jù)報(bào)表上把后臺(tái)數(shù)據(jù)處理后通過圖的形式進(jìn)行表現(xiàn)出來。2.2.2非功能需求分析（1）性能需求：系統(tǒng)使用過程中結(jié)果精度和系統(tǒng)響應(yīng)速度等均滿足要求。（2）安全性需求：對比預(yù)期對系統(tǒng)認(rèn)證、登錄以及用戶使用需求等方面來看，整體符合要求。（3）運(yùn)行環(huán)境約束：具有自行打包，進(jìn)行運(yùn)行環(huán)境的配置、向服務(wù)器上傳信息，正常運(yùn)行、訪問頁面，不存在控制臺(tái)報(bào)錯(cuò)的情況。（4）易用性需求：從美觀性方面來看，界面完全符合使用需求，其交互性良好。就算用戶是第一次操作也完全不用擔(dān)心有任何問題，其完全可實(shí)現(xiàn)無障礙操作。（5）高并發(fā)需求：系統(tǒng)供自己學(xué)習(xí)研究使用，暫不存在由于同時(shí)有很多人登錄系統(tǒng)，而堵塞線程的情況。3系統(tǒng)設(shè)計(jì)3.1系統(tǒng)總體結(jié)構(gòu)設(shè)計(jì)本次僅設(shè)計(jì)電商后臺(tái)管理人員、負(fù)責(zé)人員可依據(jù)權(quán)限要求對系統(tǒng)進(jìn)行管理。進(jìn)入該系統(tǒng)后，管理員可見左側(cè)將顯示所有模塊，可以對用戶管理、權(quán)限管理、商品管理、訂單管理及數(shù)據(jù)統(tǒng)計(jì)五個(gè)模塊進(jìn)行操作。其中，管理器登錄系統(tǒng)啟動(dòng)所有模塊。用戶管理主要是在用戶列表中搜索用戶，添加新用戶，編輯現(xiàn)有用戶信息的工作。權(quán)限管理是在角色列表中追加用戶的角色名稱和角色說明，對用戶刪除編輯、刪除、分配權(quán)限的操作。商品管理和訂單管理可以分別在相應(yīng)的清單中尋找商品或訂單，并進(jìn)行編輯操作。另外，管理員可以選擇商品分類進(jìn)行編輯和刪除操作；可以在訂單管理板上搜索訂單，也可以查詢訂單號(hào)碼進(jìn)行編輯和刪除。在數(shù)據(jù)統(tǒng)計(jì)板塊中的數(shù)據(jù)報(bào)表上通過圖的形式進(jìn)行數(shù)據(jù)UI頁面。如圖3.1所示管理員憑借其用戶名、信息就可進(jìn)入系統(tǒng)，并具體操作本模塊所涉及到的功能。圖3.1管理員功能模塊圖3.2功能設(shè)計(jì)該系統(tǒng)可對用戶的身份進(jìn)行驗(yàn)證，讓電商后臺(tái)管理員加載菜單欄，電商后臺(tái)管理員可以對用戶管理、權(quán)限管理、商品管理、訂單管理及數(shù)據(jù)統(tǒng)計(jì)五個(gè)模塊進(jìn)行執(zhí)行，同時(shí)這里扼要分析了訂單信息的管理流程。深入調(diào)研各個(gè)部分，以詳細(xì)的功能模塊具體化三大部分。該系統(tǒng)中所使用的Vue、Mysql等都是當(dāng)前較為成熟的技術(shù)。這些技術(shù)框架有活躍的社區(qū)，能夠充分滿足實(shí)際商用項(xiàng)目的使用需求。易言之，通過這一技術(shù)框架能夠?qū)崿F(xiàn)較為高效的開發(fā)系統(tǒng)。3.3數(shù)據(jù)庫設(shè)計(jì)電商后臺(tái)管理系統(tǒng)能否順利的推進(jìn)各項(xiàng)業(yè)務(wù)流程，能否正常運(yùn)行依賴于MySQL數(shù)據(jù)庫。這一數(shù)據(jù)庫的作用主要體現(xiàn)設(shè)計(jì)基于系統(tǒng)業(yè)務(wù)需求相關(guān)表方面[12]，下文將重點(diǎn)介紹各表結(jié)構(gòu)功能要求。用戶表主要涉及到的信息有電話、姓名、身份等。表3.1shopping_user(用戶表)表字段名稱字段類型是否為主鍵表字段的注釋備注idVarchar（20）是身份主鍵usernameVarchar（255）否賬戶Password密碼phoneVarchar(32)電話號(hào)碼statusVarchar(2)狀態(tài)modifytimedatetime最近修改時(shí)間operatorVarchar（255）操作人maketimedatetime創(chuàng)建時(shí)間在本次所設(shè)計(jì)的系統(tǒng)中商品表是最為重要的一部分，其主要涉及商品名稱、價(jià)格、數(shù)量、類型等參數(shù)。管理員可以對該表進(jìn)行維護(hù)更新。表3.2shopping_goods(商品表)表字段名稱字段類型是否為主鍵表字段的注釋備注idVarchar（20）是身份唯一標(biāo)識(shí)goodsnameVarchar（255）否名稱goodspriceFloat價(jià)格goodstypeVarchar(255)類型maketimedatetime最近修改時(shí)間modifytime類型idgoodstypeidVarchar(20)創(chuàng)建時(shí)間goodsamountInt數(shù)量字母代碼表是為了使用代碼來區(qū)分信息用的，用戶登錄后將數(shù)據(jù)緩存到本地,從數(shù)據(jù)庫獲取其他信息后可能需要進(jìn)行數(shù)據(jù)處理，此時(shí)可以通過對比該表中的數(shù)據(jù)，將代碼轉(zhuǎn)換成前端可展示的字符。表3.3shopping_code(字典代碼表)字段名字段說明類型是否主鍵唯一標(biāo)識(shí)id身份Varchar（20）是是codetype代碼類型Varchar（255）否否codename代碼名稱Varchar（255）否否codevlaue代碼值datetime否否用戶接口設(shè)計(jì)表是我們通過了解用戶需求之后，為了保持交互的一致性并且提供了有效的反饋，設(shè)計(jì)了登錄接口、更新用戶接口、新增用戶接口、刪除用戶接口等，更加便于用戶進(jìn)行操作。表3.4用戶接口設(shè)計(jì)表接口名稱（接口）接口說明URL登錄用戶登錄接口，并對用戶名、密碼進(jìn)行校驗(yàn)獲取用戶列表獲取該接口對應(yīng)的信息更新用戶以id為依據(jù)進(jìn)行信息更新新增用戶對應(yīng)接口名稱刪除用戶依據(jù)id刪除進(jìn)行操作查詢用戶獲取用戶信息獲取用戶詳細(xì)信息以id為依據(jù)，獲得用戶信息菜單接口設(shè)計(jì)表可便于我們獲取菜單列表中的菜單信息。表3.5菜單接口設(shè)計(jì)表接口名稱URL接口說明獲取菜單列表接口即獲取相應(yīng)的窗口商品界面設(shè)計(jì)表可供管理員及時(shí)獲取商品信息、根據(jù)商品id查詢商品的詳細(xì)信息、新增商品的種類、并可根據(jù)id更新商品信息以及刪除商品、也有利于管理員及時(shí)獲取商品種類信息列表等。表3.6商品接口設(shè)計(jì)表接口名稱（接口）接口說明URL商品列表查詢獲得商品信息，同時(shí)可返回（列表形式）商品詳細(xì)信息查詢以商品id為基礎(chǔ)，獲取與商品有關(guān)的詳細(xì)信息新增商品新增商品種類更新商品信息以id為基礎(chǔ)，進(jìn)行商品信息的更新刪除商品以id為基礎(chǔ)，進(jìn)行刪除商品查詢商品種類信息列表獲取相關(guān)信息新增商品種類新增新商品種類刪除商品種類按照id，將相應(yīng)的商品種類刪除更新商品種類按照id，進(jìn)行商品種類列表的更新訂單接口設(shè)計(jì)表可獲取當(dāng)前訂單列表、根據(jù)訂單號(hào)獲取訂單詳細(xì)信息、并且可根據(jù)訂單號(hào)改變訂單的當(dāng)前狀態(tài)。表3.7訂單接口設(shè)計(jì)表接口名稱（接口）接口說明URL獲取訂單列表通過該接口可獲得并展示當(dāng)前的訂單列表。/o獲取訂單詳細(xì)信息獲得訂單詳細(xì)信息（獲取的依據(jù)是訂單號(hào)）更新訂單狀態(tài)調(diào)整當(dāng)前訂單的狀態(tài)（以訂單號(hào)為基礎(chǔ)）。4系統(tǒng)實(shí)現(xiàn)只有充分了解開發(fā)網(wǎng)站的流程，能夠熟練的運(yùn)用Node才能進(jìn)行本系統(tǒng)開發(fā)。事實(shí)上，系統(tǒng)開發(fā)涉及到各個(gè)方面的要求，在開發(fā)前需要充分掌握主流技術(shù)，主要有前端Vue框架、前端ElementUI框架、后端Express框架等。從結(jié)構(gòu)方面來看本系統(tǒng)主要細(xì)分為如下五大模塊：一是用戶管理；二是權(quán)限管理；三是商品管理；四是數(shù)據(jù)統(tǒng)計(jì)；五是訂單管理。在確定各劃塊后，具體開發(fā)、擴(kuò)展系統(tǒng)。本系統(tǒng)采用前端Vue框架以及后端Express框架，通過這一特殊的體系可實(shí)現(xiàn)分離前后端，從而達(dá)到降低系統(tǒng)耦合度的目的。此類系統(tǒng)不僅方便讀寫后臺(tái)數(shù)據(jù)庫（主要運(yùn)用了sql語句），同時(shí)可為后期進(jìn)行運(yùn)營維護(hù)奠定基礎(chǔ)。ORM與對象有關(guān)系映射，能夠明確思路。另外，為了確保系統(tǒng)能夠讓用戶形成較好的交互體驗(yàn)，形成友好的效果，本系統(tǒng)設(shè)計(jì)中專門運(yùn)用了Element-UI模板。4.1登錄界面該界面主要運(yùn)用到了登錄按鈕，向后臺(tái)提交相關(guān)表單信息后，主了包括用戶名、密碼外還包括驗(yàn)證碼生成Token，同時(shí)調(diào)用工具類，將生成的Token信息寫入SessionStorage，后判斷是否存在Token，如果存在則進(jìn)入系統(tǒng)，如果不存在，則使用路由重定向即可進(jìn)入本次所設(shè)計(jì)系統(tǒng)的首頁，如未能成功匹配，則系統(tǒng)會(huì)彈出提示聲音讓用戶重新輸入信息。在反復(fù)多次篩選設(shè)計(jì)UI頁面后，最終打造出圖4.1富有科技感的系統(tǒng)。圖4.1登錄界面4.2系統(tǒng)首頁用戶通過操作成功登錄后首先進(jìn)入的是首頁。此時(shí)系統(tǒng)可自動(dòng)以用戶的權(quán)限為依據(jù)，為其加載符合權(quán)限的菜單。這一期間用戶可看到系統(tǒng)歡迎自身進(jìn)入的標(biāo)語。該控制臺(tái)充分呈現(xiàn)了Welcome的歡迎語，也可以由后臺(tái)管理員編輯公告并顯示，這里實(shí)現(xiàn)的原理是通過后臺(tái)從數(shù)據(jù)庫獲取相關(guān)數(shù)據(jù)并在系統(tǒng)首頁中呈現(xiàn)出來。如圖4.2所示由系統(tǒng)管理員統(tǒng)一維護(hù)系統(tǒng)公告。圖4.2系統(tǒng)首頁4.3電商后臺(tái)-用戶管理4.3.1用戶列表主要涉及到查詢用戶信息、刪除、導(dǎo)出等方面的內(nèi)容，通過Sql語句查詢數(shù)據(jù)庫中的信息,寫成接口的形式暴露出去,前端調(diào)用此接口即可完成數(shù)據(jù)的查詢，在Vue框架中,將通過接口獲得的數(shù)據(jù)賦值給數(shù)據(jù)源Dete，從而渲染到頁面中，在后臺(tái)配置代碼方面，對系統(tǒng)業(yè)務(wù)進(jìn)行配置。用戶列表為圖4.3。圖4.3用戶列表當(dāng)用戶進(jìn)入用戶管理下的用戶列表菜單欄之后，點(diǎn)擊搜索框右側(cè)的添加用戶的button按鍵就可以添加新用戶的信息，其中用戶名、密碼、電子郵件地址和電話號(hào)碼是必需的。確認(rèn)信息無誤后單擊“確定”，信息將被上傳到后臺(tái)。圖4.4用戶列表管理員可在用戶列表內(nèi)的狀態(tài)欄更改用戶的狀態(tài)，點(diǎn)擊操作欄下的藍(lán)色button可根據(jù)提示更改用戶的郵箱以及電話號(hào)碼，當(dāng)手機(jī)號(hào)碼不符合要求時(shí)填寫框的邊框會(huì)標(biāo)紅，并且會(huì)在下方用一行紅色的字提醒管理員請?zhí)顚懞戏ㄊ謾C(jī)號(hào)。在用戶名這一欄標(biāo)成灰色代表我們不可以更改用戶名的信息，當(dāng)我們確認(rèn)更改信息無誤之后可以點(diǎn)擊確定，系統(tǒng)會(huì)自動(dòng)將所更改信息自動(dòng)上傳至后臺(tái)數(shù)據(jù)庫。圖4.5用戶列表管理員在用戶列表下的操作欄里，可點(diǎn)擊黃色button來進(jìn)行重新分配當(dāng)前用戶的新角色，確認(rèn)信息無誤之后可點(diǎn)擊確認(rèn)按鍵，將所更改信息上傳到數(shù)據(jù)庫中。圖4.6用戶列表4.4電商后臺(tái)-權(quán)限管理4.4.1角色列表打開權(quán)限列表中的角色列表可以看到角色權(quán)限信息、角色名稱、角色描述，以及操作欄。角色列表實(shí)現(xiàn)的基本邏輯如下：通過發(fā)送axios調(diào)用接口發(fā)送請求獲取后端數(shù)據(jù)，將結(jié)果賦值給通過發(fā)送axios調(diào)用相關(guān)接口發(fā)送請求獲取后端數(shù)據(jù)，將結(jié)果賦值給Vue框架中的數(shù)據(jù)源Vue框架中的數(shù)據(jù)源，并通過前端頁面進(jìn)行顯示出來。在此界面可進(jìn)行添加用戶的角色名稱和角色描述，并對用戶進(jìn)行編輯刪除分配權(quán)限的操作，具體實(shí)現(xiàn)功能如圖4.7角色列表所示。圖4.7角色列表管理員可點(diǎn)擊頁面左上方添加用戶的藍(lán)色button來進(jìn)行相應(yīng)的操作，輸入正確合法的角色名稱以及描述之后點(diǎn)擊確定，系統(tǒng)會(huì)將前端輸入的信息存入后臺(tái)的數(shù)據(jù)庫中，其中添加用戶欄中的角色名稱屬于必填項(xiàng)，如果管理員沒有輸入正確的角色名稱，系統(tǒng)會(huì)將輸入框的邊框標(biāo)紅，并且在下面會(huì)有一行紅色字提示請輸入角色名稱。如圖4.8角色列表所示。圖4.8角色列表管理員可點(diǎn)擊編輯按鍵，對已分配的角色重新分配角色并且添加角色描述，當(dāng)確認(rèn)信息無誤之后點(diǎn)擊確定按鍵，可即時(shí)將信息保存至后臺(tái)數(shù)據(jù)庫。圖4.9角色列表當(dāng)管理員點(diǎn)擊展開權(quán)限的小箭頭之后，即可顯示該用戶所具有的權(quán)限比如商品修改、創(chuàng)建商品參數(shù)等等，權(quán)限根據(jù)權(quán)限高低設(shè)置了不同的顏色框進(jìn)行展示，并且管理員也可以在展開權(quán)限欄中刪除該用戶所具有的權(quán)限。圖4.10角色列表管理員可以在角色列表中對于單個(gè)角色進(jìn)行刪除操作，在點(diǎn)擊分配權(quán)限之后可進(jìn)行分配該用戶的具體權(quán)限，比如添加商品、商品修改、商品刪除、更改商品照片、更新商品狀態(tài)、獲取商品詳情等，若需要給用戶增添權(quán)限可以在相應(yīng)的權(quán)限前面勾中即可，如果需要給用戶限制權(quán)限，可把已經(jīng)選中的權(quán)限前方取消選中即可，內(nèi)容如圖4.11分配權(quán)限所示。圖4.11分配權(quán)限4.4.2權(quán)限列表管理員在權(quán)限管理內(nèi)的權(quán)限列表中可清楚的看到權(quán)限名稱、相關(guān)路徑以及權(quán)限等級，前端從后臺(tái)根據(jù)id拿到相應(yīng)的權(quán)限名稱、路徑和權(quán)限等級的相關(guān)信息并進(jìn)行顯示。圖4.12權(quán)限列表4.5電商后臺(tái)-商品管理4.5.1商品列表管理員可以在商品管理下輸入商品列表，并輸入關(guān)鍵字在頁面上檢索和添加商品，可以看到該商品的商品價(jià)格、商品的創(chuàng)建時(shí)間并且可以在操作欄進(jìn)行編輯以及刪除的操作，在這里我們先簡單的把所有商品的重量設(shè)置為100，具體內(nèi)容如圖4.13商品列表所示。圖4.13商品列表當(dāng)管理員點(diǎn)擊添加商品之后即可進(jìn)入添加商品的頁面，可按照流程先進(jìn)行第一步填寫基本信息的操作，填寫商品名稱、商品價(jià)格、商品重量、商品數(shù)量以及選擇商品分類，其中商品分類如果不進(jìn)行選擇的話沒辦法進(jìn)行接下來的操作，當(dāng)我們把信息填寫完畢即可進(jìn)入下一步操作，在商品圖片欄可進(jìn)行上傳500kb以內(nèi)的本地圖片，最后一步商品內(nèi)容可根據(jù)商品進(jìn)行添加商品的描述，填寫完商品信息之后即可點(diǎn)擊添加商品，將所輸入的商品信息傳入后臺(tái)數(shù)據(jù)庫中，并同步在前端進(jìn)行顯示，如圖4.14商品列表4.15商品內(nèi)容所示。圖4.14商品列表圖4.15商品內(nèi)容管理員在有相對應(yīng)的權(quán)限下，可以在商品列表中對于已有的商品信息進(jìn)行修改，進(jìn)行更改商品的分類名稱、商品價(jià)格、商品數(shù)量以及商品的數(shù)量信息，點(diǎn)擊確定后與數(shù)據(jù)庫中的值交互，頁面拿到后臺(tái)回調(diào)的值，最終顯示在系統(tǒng)頁面中，內(nèi)容如圖4.16修改商品信息所示。圖4.16修改商品信息4.5.2分類參數(shù)分類參數(shù)我們通過freamset標(biāo)簽來組織兩個(gè)窗口，左側(cè)我們使用dtree，對樹的節(jié)點(diǎn)事件進(jìn)行監(jiān)聽，并返回一個(gè)對象。當(dāng)用戶在操作中點(diǎn)擊該節(jié)點(diǎn)后，就相當(dāng)于讓頁面重新刷新了。分類參數(shù)提供給管理員進(jìn)行篩查商品，管理員可以通過級聯(lián)選擇器選擇不同級別下面的所以的商品屬性，通過觸發(fā)級聯(lián)選擇器變化的函數(shù)，調(diào)用Find接口，將選中的級聯(lián)選擇器內(nèi)容作為參數(shù)，向數(shù)據(jù)庫發(fā)送請求，然后展示到前端頁面，如圖4.17分類參數(shù)所示。圖4.17分類參數(shù)管理員進(jìn)入商品管理下的參數(shù)列表中，首先需要進(jìn)行的是選擇商品分類的操作，選擇好商品分類之后可添加該商品的動(dòng)態(tài)參數(shù)以及靜態(tài)屬性，可以看到該商品的參數(shù)名稱，當(dāng)管理員點(diǎn)擊左側(cè)小箭頭之后可以看到商品的各種參數(shù)并且可以添加NewTag，可以對動(dòng)態(tài)參數(shù)進(jìn)行編輯以及刪除的操作，內(nèi)容如圖4.18分類參數(shù)所示。圖4.18分類參數(shù)管理員可在動(dòng)態(tài)參數(shù)欄下方的添加參數(shù)button進(jìn)行添加動(dòng)態(tài)參數(shù)的操作，當(dāng)信息確認(rèn)無誤之后點(diǎn)擊確定即可添加動(dòng)態(tài)參數(shù)，實(shí)現(xiàn)賽事的代碼邏輯同時(shí)可與數(shù)據(jù)庫中的值相互交互，后臺(tái)回調(diào)的值可進(jìn)入頁面，并在系統(tǒng)頁面中呈現(xiàn)出來，內(nèi)容如圖4.19添加動(dòng)態(tài)參數(shù)所示。圖4.19添加動(dòng)態(tài)參數(shù)管理員點(diǎn)擊靜態(tài)屬性欄進(jìn)行添加屬性的操作，可以在此頁面看到商品的屬性并且可以添加NewTag，單擊在操作欄下的編輯按鍵可以重新對商品的靜態(tài)屬性進(jìn)行編輯，如圖4.20所示。圖4.20添加靜態(tài)參數(shù)4.5.3商品分類商品分類界面顯示了分類名稱、是否有效、以及根據(jù)商品的屬性進(jìn)行排序并在操作欄進(jìn)行編輯和刪除的操作，這些是對shopping_goods_type數(shù)據(jù)表操作，如有需要更新信息，在獲得前臺(tái)轉(zhuǎn)入的id后后臺(tái)可發(fā)揮作用，前臺(tái)獲得數(shù)據(jù)渲染彈出層，如圖4.20商品分類所示。圖4.20商品分類管理員在商品分類下的添加分類界面可添加分類名稱以及父級分類，當(dāng)輸入內(nèi)容為空時(shí)輸入框的邊框會(huì)標(biāo)紅提醒管理員輸入分類名稱，確認(rèn)添加的該分類信息無誤之后點(diǎn)擊確定，即可傳入數(shù)據(jù)庫中，如圖4.21添加分類所示。圖4.21添加分類當(dāng)管理員點(diǎn)擊商品分類下操作欄下的編輯按鍵，可重新對已經(jīng)定義的分類進(jìn)行更改分類名稱的操作，這些是對shopping_goods_type數(shù)據(jù)表的相關(guān)數(shù)據(jù)操作，并且可進(jìn)行刪除已有分類的操作，如圖4.22編輯分類所示。圖4.22編輯分類4.6電商后臺(tái)-訂單管理管理員進(jìn)入訂單管理中的訂單列表界面可根據(jù)訂單編號(hào)進(jìn)行檢索訂單信息，可查看相關(guān)訂單狀態(tài)比如訂單價(jià)格、是否付款、是否發(fā)貨、下單時(shí)間以及進(jìn)行相關(guān)操作并將信息上傳到數(shù)據(jù)庫，相關(guān)內(nèi)容如圖4.23訂單列表所示。圖4.23訂單列表管理員進(jìn)入訂單管理頁面之后，如果遇到客戶、電商平臺(tái)或者商家的原因，需要更改訂單地址，管理員可進(jìn)行相應(yīng)操作輸入正確的省市區(qū)/縣及訂單更改的詳細(xì)地址，兩項(xiàng)均屬于必填項(xiàng)，當(dāng)確認(rèn)無誤后將其信息上傳至后臺(tái)數(shù)據(jù)庫，具體內(nèi)容如圖4.24所示。圖4.24訂單列表4.6電商后臺(tái)-數(shù)據(jù)統(tǒng)計(jì)4.6.1數(shù)據(jù)報(bào)表數(shù)據(jù)報(bào)表中，管理員可以清晰地看到用戶來源，時(shí)間等信息，當(dāng)鼠標(biāo)懸浮在折線圖內(nèi)，可清楚的看到各個(gè)地方的用戶來源。本質(zhì)上說，可將數(shù)據(jù)統(tǒng)計(jì)模塊歸屬于可視化數(shù)據(jù)操作的范疇。這里需要運(yùn)用到Echarts插件，通過前臺(tái)調(diào)用數(shù)據(jù)接口，由頁面具體組裝數(shù)據(jù)，并在頁面中展示出來。通過這一操作能夠直觀的說明用戶的信息來源，了解各個(gè)地區(qū)的占比情況，以方便開發(fā)人員完成該圖表的開發(fā)工作，各地區(qū)消費(fèi)者的占比情況就會(huì)直觀的呈現(xiàn)出來。本文運(yùn)用折線圖進(jìn)行分析，能夠直觀的說明客戶分布情況，這能夠?yàn)楣绢I(lǐng)導(dǎo)管理工作提供可行性建議與較大的參考價(jià)值。此外，還可以根據(jù)地區(qū)來做一些相關(guān)的調(diào)整。如圖4.25數(shù)據(jù)報(bào)表所示。圖4.25數(shù)據(jù)報(bào)表5系統(tǒng)測試眾所周知任何一個(gè)系統(tǒng)都需要經(jīng)過測試才可上線運(yùn)行。系統(tǒng)測試是決定系統(tǒng)可靠性、質(zhì)量的關(guān)鍵元素，只有通過測試才能了解系統(tǒng)各方面是否符合預(yù)期效果，其表現(xiàn)是否正常。只有通過各方面的測試，表征系統(tǒng)能夠達(dá)到預(yù)期要求，可交付用戶使用才可。測試的目的旨在對已經(jīng)開發(fā)完成的系統(tǒng)進(jìn)行分析，判斷是否存在bug如果有要進(jìn)行解決、修復(fù)、完善。雖說本環(huán)節(jié)較為費(fèi)時(shí)費(fèi)力，做是做好本環(huán)節(jié)的工作卻十分重要。下文主要就如下三個(gè)方面進(jìn)行測試：1、登錄測試場景條件用戶登錄用戶登錄用戶登錄用戶登錄操作（輸入信息）賬號(hào)、密碼、驗(yàn)證碼（要保證所輸入的信息是正確的）除了密碼是錯(cuò)的，其他兩項(xiàng)了輸入都是正確的驗(yàn)證碼輸入失誤URL路徑訪問主頁（正確的）預(yù)期結(jié)果成功登錄登錄密碼不正確驗(yàn)證碼不正確不能進(jìn)入，并回到登錄頁面實(shí)際結(jié)果均符合預(yù)期結(jié)果表5.1系統(tǒng)登錄測試結(jié)果2、測試數(shù)據(jù)交互場景條件添加數(shù)據(jù)登錄(user1)預(yù)期結(jié)果成功錄入成功登錄操作基于參數(shù)管理頁面，由管理員進(jìn)行user1的添加。所輸入的信號(hào)都是正確的。默認(rèn)12345為密碼。實(shí)際結(jié)果符合預(yù)期符合預(yù)期表5.2數(shù)據(jù)交互測試結(jié)果3、測試表單提交場景條件錄入商品信息預(yù)期結(jié)果頁面得到刷新，并可看到商品的列表操作錄入并提交信息實(shí)際結(jié)果符合預(yù)期情況表5.3表單提交測試結(jié)果 本次通登錄模塊進(jìn)行測試，結(jié)果顯示其功能完全符合要求，配置文件能夠發(fā)揮作用攔截不符合要求的申請，并由后臺(tái)處理放行，能夠正常的添加圖片，新用戶可正常錄入，可在指定的路徑中下載圖片，數(shù)據(jù)庫能夠正常的存儲(chǔ)用戶數(shù)據(jù)，提交表單方面也正常，最后通過頁面刷新后能夠返回?cái)?shù)據(jù)，頁面所顯示的數(shù)據(jù)表格符合要求。結(jié)論近些年隨著互聯(lián)網(wǎng)的爆發(fā)，網(wǎng)絡(luò)購物已經(jīng)被越來越多的人所接受