基于vue技術的電商系統(tǒng)的設計與實現(xiàn)摘要隨著網(wǎng)絡技術飛速發(fā)展，計算機應用遍布各種各樣的領域，互聯(lián)網(wǎng)與傳統(tǒng)實體店相結合的電商系統(tǒng)也隨即形成。它的出現(xiàn)不僅緩解了商家因行業(yè)競爭帶來的壓力，也降低了顧客的購物成本。電商系統(tǒng)主要采用VSCode開發(fā)平臺，開發(fā)技術是現(xiàn)在流行的Vue.js、Node.js和Java，后臺數(shù)據(jù)庫選擇用MySQL存放和管理數(shù)據(jù)信息。系統(tǒng)可以實現(xiàn)注冊登錄、瀏覽商品并下單、用戶管理、商品管理、評論管理、系統(tǒng)管理和訂單管理等功能。通過網(wǎng)上購物系統(tǒng)，人們能迅速的購買到自己喜愛的商品，讓購物過程變得方便、快捷、有趣，滿足了現(xiàn)代人快節(jié)奏的生活。關鍵詞：電商系統(tǒng)；Vue.js技術；Java語言；MySQL數(shù)據(jù)庫目錄TOC\o"1-3"\h\u30501緒論 IV1緒論1.1選題背景隨著移動互聯(lián)網(wǎng)的快速發(fā)展，網(wǎng)絡技術不斷融入人們的生活，不僅使得生活更為便捷，也進一步影響了人們的生活習慣。其中,電子商務的興起不僅減少了購物的信息差，也降低了產(chǎn)品價格?，F(xiàn)在社會作業(yè)和生活越來越依靠網(wǎng)絡技術的發(fā)展，社會運行也越來越智能化、數(shù)字化、電子化、虛擬化。結合電子商務目前的運用狀況和發(fā)展趨勢，大數(shù)據(jù)技術正在大大改變社會生活和工作的方式，甚至轉變?nèi)藗兊膬r值觀念。隨著互聯(lián)網(wǎng)技術發(fā)展及互聯(lián)網(wǎng)用戶的日益增多，人們認為電子商務發(fā)展前景廣闊。一方面，七天無理由退貨保障了消費者的權利，為電子商務的發(fā)展打下了基礎；另一方面，迅猛發(fā)展的物流為電子商務的發(fā)展提供了通路。日益興盛的電子商務網(wǎng)站和網(wǎng)絡交易平臺正是電子商務蓬勃發(fā)展的具體表現(xiàn)。當今信息社會，通過信息的注冊、交換獲取有用信息并運用網(wǎng)絡技術開展電子商務已經(jīng)成為企業(yè)發(fā)展的主流趨勢，越來越多公司搭建自己的網(wǎng)站，利用電子平臺來進行產(chǎn)品的銷售。目前國內(nèi)不少大型公司已經(jīng)建立了自己的網(wǎng)站，并通過網(wǎng)絡營銷來拓展自己的銷售渠道。隨著抖音、快手的高速發(fā)展出現(xiàn)了一大批的直播帶貨使得電子商務更加繁榮，小到個人、大到企業(yè)都通過直播帶貨開啟了電子商務銷售模式。即使是小體量的公司也能良好適應電子商務的營銷方式，這在一定程度上促進了公司的發(fā)展。無論現(xiàn)在還是將來，電子商務都展現(xiàn)出巨大的活力，其發(fā)展前景十分廣闊。1.2國內(nèi)外發(fā)展現(xiàn)狀1.2.1國內(nèi)研究現(xiàn)狀王慶剛（2016）為了解決現(xiàn)有農(nóng)業(yè)電商平臺的移動性不足以滿足區(qū)域和時間需求的問題，使移動互聯(lián)網(wǎng)技術在農(nóng)業(yè)領域得到更好的應用，分析了當前的三種移動應用開發(fā)模式并進行了選擇。該系統(tǒng)基于Cordova開發(fā)框架，同時兼容iOS，Android等多種移動系統(tǒng)，可以在裝有不同系統(tǒng)的移動智能終端上運行。該系統(tǒng)是一個專注于優(yōu)質農(nóng)產(chǎn)品的垂直電商平臺。它采用了新的經(jīng)營模式，即集團化管理+批量管理，充分考慮了農(nóng)產(chǎn)品的獨特性，促進了農(nóng)產(chǎn)品的電子商務。于紅巖（2016）基于Hadoop平臺的電子商務推薦系統(tǒng)，建議在大數(shù)據(jù)下構建，計算速度慢，不能根據(jù)用戶的實時行為提供建議。為了解決以上問題，請設計并實現(xiàn)一個基于Spark平臺的實時電子商務推薦系統(tǒng)。與基于HadOop平臺的推薦系統(tǒng)相比，該系統(tǒng)首先構建了Spark平臺的分布式日志提取模塊和分布式日志數(shù)據(jù)傳輸模塊，解決電子商務系統(tǒng)之間的數(shù)據(jù)源問題:二是基于統(tǒng)一的數(shù)據(jù)源。利用基于Spark的矩陣分解模型進行離線學習，提高離線推薦訓練的效率。然后，我們建議您使用spark實時流媒體技術，根據(jù)離線建議實時篩選電商記錄，讓用戶獲得所需產(chǎn)品。通過統(tǒng)一媒體將線下推薦結果與實時推薦結果結合，獲得用戶隱式行為的實時建議反饋。最后對這一點進行了驗證。與基于hadoop的電子商務推薦系統(tǒng)傳輸大量數(shù)據(jù)相比，基于Spark平臺的實時電子商務推薦系統(tǒng)更加可靠。離線推薦訓練速度是Hadoop平臺的10倍，還可以提供實時的用戶行為反饋。將交易轉化率提高5%。提高電子商務網(wǎng)站的使用體驗。1.2.2國外研究現(xiàn)狀近年來，隨著網(wǎng)絡信息的快速增長，來自世界各地的專家都開始研究獨特的推薦系統(tǒng)，并取得了可能影響實際應用的研究成果。例如A(2000)的推薦系統(tǒng)是由著名學者Gergelinden、JeremyYork等設計的，可以將研究與應用程序、項目協(xié)作過濾算法相結合的系統(tǒng);H.Yang（2008）根據(jù)用戶評分和網(wǎng)站上的購買信息進行適當?shù)挠嬎?，得到準確的同類產(chǎn)品，將與自己非常相似的產(chǎn)品納入系統(tǒng)推薦列表，以便有效使用。為了科學地獲取與某一特定商品最相似的商品，該算法將使用顧客同時購買的商品，分析并創(chuàng)建相似商品列表，利用余弦相似度科學計算不同商品的相似度。這一環(huán)節(jié)需要充分考慮時間和空間的使用。H.Ma（2009）對于用戶在網(wǎng)站上選擇的商品和評級，這種方法在尋找相似商品時非常準確和快速，但它只在網(wǎng)絡上執(zhí)行，取決于用戶在網(wǎng)站上選擇和評級的商品數(shù)量。MovieLens是由美國學者GroupLensResearch（2010）歷經(jīng)長期的實踐研究，采取專業(yè)性的技術理論實現(xiàn)電影推薦網(wǎng)站的設計開發(fā)。D.Zhou（2011）建議用戶對網(wǎng)站提供的影片進行綜合評價。根據(jù)每個用戶的分類，網(wǎng)站會得到用戶感興趣的目標和愛好，從而有效地生成個性化的推薦結果，展示高質量的結果。1.3課題開發(fā)意義互聯(lián)網(wǎng)發(fā)展使網(wǎng)上購物成為一種生活主流，網(wǎng)上購物使生活更為便捷。電子商務系統(tǒng)軟件實現(xiàn)了網(wǎng)上購物的設想，將傳統(tǒng)式購物步驟數(shù)字電子化、智能化，大幅度降低人力、人力物力，減少了成本。電子商務系統(tǒng)軟件的應用改變了傳統(tǒng)式的分銷方式，減少了多級分銷商環(huán)節(jié)，建立直營直銷的現(xiàn)代化銷售體系。電子商務系統(tǒng)打破傳統(tǒng)模式，使消費者和消費者之間的直買直賣成為了可能，在一定程度上改變了傳統(tǒng)購物的運作方式。一方面，電子商務減少了信息壁壘，使我們對產(chǎn)品有清楚的了解，通過貨比三家選購，比一般門店實惠的類似產(chǎn)品；另一方面，電商系統(tǒng)打破了空間壁壘，提供商品的種類眾多，挑選覆蓋面廣，人們得以隨時隨意購物，省時省力省心，購物成本降低。電子商務的發(fā)展也促進了貨運物流產(chǎn)業(yè)鏈的發(fā)展趨勢。2相關技術介紹電商系統(tǒng)，主要采用VSCode開發(fā)平臺，開發(fā)技術是現(xiàn)在流行的Vue.js、Node.js和Java。后臺數(shù)據(jù)庫選擇用MySQL存放和管理數(shù)據(jù)信息。2.1Vue.js技術本系統(tǒng)使用Vue.js開發(fā)前景。Vue.js是最流行的前端框架之一，可以用來開發(fā)組件，大大減少了編寫的代碼量，使讀者更容易理解;在開發(fā)時，Vue.js專注于視圖層的呈現(xiàn)，而不是考慮數(shù)據(jù)更改引起的交互呈現(xiàn)。2.2MySQL數(shù)據(jù)庫MySQL該數(shù)據(jù)庫與php、Java等主流編程語言緊密結合，是一個安全、跨平臺、高效的數(shù)據(jù)庫系統(tǒng)。本系統(tǒng)主要采用MySQL數(shù)據(jù)庫，可以將數(shù)據(jù)存儲在不同的表中，靈活快捷。2.3Node.js技術本系統(tǒng)采用Node.js作為后端開發(fā)環(huán)境，它是一個用于構建用戶界面的高級框架。Node.js將從下到上應用開發(fā)設計格式。Node.js的核心庫只關注視圖層，很容易使用。它可以很容易地與其他庫或現(xiàn)有項目結合。3系統(tǒng)需求分析3.1電商系統(tǒng)的可行性分析3.1.1技術可行性在系統(tǒng)開發(fā)上，在互聯(lián)網(wǎng)蓬勃發(fā)展的今天，軟件和硬件技術也越發(fā)成熟，為開發(fā)電商系統(tǒng)提供了堅實的基礎，主要技術Vue具有輕量級框架、上手容易、運行速度快的優(yōu)點，而且Vue刷新部分頁面不用每次跳轉頁面都要請求所有數(shù)據(jù)，這樣加快了訪問速度和提升用戶體驗系統(tǒng)的開發(fā)設計所設計到的硬件和軟件兩個方面進行詳細的分析。3.1.2經(jīng)濟可行性經(jīng)濟可行性:電子商務系統(tǒng)的開發(fā)實施，以及整個系統(tǒng)的運維是否能夠持續(xù)到未來的發(fā)展階段。電子商務系統(tǒng)可以降低業(yè)務成本。傳統(tǒng)企業(yè)是以資金為基礎，需要支付各種費用，如零售租金、裝修費用、水電、人力、倉儲等。電子商務不需要太多的實物?，F(xiàn)在，有很多有經(jīng)驗的軟件開發(fā)人員，軟件開發(fā)周期更短。他們中的許多人正在合作以提高軟件開發(fā)的效率。對開發(fā)人員的需求較低，云開發(fā)還可以大大降低服務器的租賃成本和開發(fā)成本。因此，開發(fā)電子商務系統(tǒng)在經(jīng)濟上是可行的。3.1.3操作可行性該功能的可行性主要考慮系統(tǒng)的目的。隨著計算機技術的發(fā)展，計算機基礎已經(jīng)成為每個家庭必備的基本技能之一。此外，我們的界面設計簡潔大方，可以將復雜的處理邏輯放在后臺，使用戶可以直接操作簡單的操作步驟。3.2系統(tǒng)功能需求分析為了滿足用戶、商家和管理員三方面的信息化需求及系統(tǒng)的維護與運營，系統(tǒng)在用戶角色上可分為，買家用戶、商家用戶和管理員用戶。每個用戶在使用電商系統(tǒng)時，都只完成其權限范圍內(nèi)的操作。3.2.1買家用戶功能需求分析買家用戶能夠通過電商系統(tǒng)實時地了解個人的購物狀況以及商品清單，在登錄系統(tǒng)后，可以查看買家用戶的個人信息，查看商品詳情以及個人訂單信息。1、個人中心管理：買家通過個人中心模塊可查看個人的詳細信息，包括用戶名、頭像、姓名、性別、個人聯(lián)系電話和查看賬戶余額。還可以查看訂單、收藏以及對收貨地址進行編輯。2、商品信息管理：買家完成登陸后可以進入商品信息模塊查看全部商品，包括商品分類、商品價格和商品詳情，還可以進行商品咨詢。3、在線留言管理：買家可以在留言模塊分享自己的購物經(jīng)驗和商品圖片。4、購物車管理：買家可以在購物車增刪商品，清空購物車，還可以在購物車結算商品。5、后臺管理：買家進入后臺個人中心能修改賬號密碼和個人信息，并對在線咨詢、我的收藏和訂單進行管理。經(jīng)過上述分析，繪制了買家用戶功能用例圖，如圖3-1所示。圖3-1買家用戶用例圖3.2.2商家用例分析商家用戶能夠通過電商系統(tǒng)進行商品管理、在線咨詢管理和訂單管理等操作在登錄系統(tǒng)后，可以查看商家用戶的個人信息，查看商品詳情。個人中心管理：商家可對自己賬號進行密碼修，查看并修改個人信息。商品信息管理：您可以添加和編輯資產(chǎn)名稱、評級、商標、差異、屬性、價格、數(shù)量和資產(chǎn)信息。在線咨詢管理:經(jīng)銷商對客戶所要求的產(chǎn)品進行核對或回復。訂單管理:銷售人員查看或修改買方的訂單。通過以上分析，繪制出企業(yè)用戶活動用例圖，如圖3-2所示。圖3-2商家用例圖3.2.3管理員用例分析作為電子商務系統(tǒng)的管理員，除了保證系統(tǒng)的正常運行外，還需要對系統(tǒng)進行維護，以確保更好地為買家、交易商和管理者提供系統(tǒng)服務。登錄系統(tǒng)后，主要管理功能包括用戶管理、交易者管理、資產(chǎn)分類管理、資產(chǎn)信息管理、在線咨詢管理、在線留言管理、系統(tǒng)管理、訂單管理等。1、用戶管理：管理員在用戶管理模塊可以查看用戶的個人信息列表，如用戶用戶名、頭像、姓名、性別、手機號碼等。可以通過用戶的用戶名、姓名或者是手機號碼進行一個用戶的檢索查詢，通過檢索就能查看到用戶的基本成員信息，還可對用戶信息進行添加、修改、批量刪除等操作。2、商家管理：管理員在商家管理模塊可以查看系統(tǒng)所有的商家信息列表，如商家賬號、頭像、姓名、個人聯(lián)系電話等?？梢酝ㄟ^商家賬號進行一個商家的檢索查詢，通過檢索就能查看到商家的基本成員信息，還可對商家信息進行添加、修改、批量刪除等操作。3、商品分類管理：管理員在商品分類管理模塊能夠對全部商品進行分類，并對分類進行編輯。4、商品信息管理：管理員在商品信息管理模塊能查看全部商品，管理員就可根據(jù)商品名稱或品牌對全部商品進行檢索操作，就能快速的檢索該商品的具體信息，還可對該商品進行增刪、修改的操作。5.網(wǎng)絡咨詢管理:管理員可以查看、回復、修改、刪除買方的網(wǎng)絡咨詢內(nèi)容。6.在線郵件管理:管理員可以在郵件模塊中查看、回復、編輯和刪除買家的內(nèi)容和圖片。7.系統(tǒng)管理:系統(tǒng)管理模塊分為系統(tǒng)通知和轉盤程序管理兩個功能。通知系統(tǒng)可以幫助用戶了解購物中心的最新趨勢。8.訂單管理:管理員可以查看或編輯交易者和買家的訂單。訂單管理不僅可以協(xié)調交易雙方的交易，而且可以保證交易雙方的財務安全。經(jīng)過上述分析，繪制了管理員用戶功能用例圖，如圖3-3所示。圖3-3管理員用例圖4系統(tǒng)設計4.1系統(tǒng)功能結構設計電子商務系統(tǒng)的誕生，不僅緩解了行業(yè)競爭帶來的壓力，而且降低了客戶的購買成本。在初步調查和分析業(yè)務需求后，系統(tǒng)可以做以下工作:系統(tǒng)功能圖如圖4-1所示。電商系統(tǒng)結構圖電商系統(tǒng)結構圖系統(tǒng)前臺系統(tǒng)后臺系統(tǒng)首頁商品信息管理用戶管理評論管理系統(tǒng)管理訂單管理圖4-1系統(tǒng)功能結構圖系統(tǒng)公告商品管理在線留言購物車管理進入系統(tǒng)后，用戶可以瀏覽主頁和所有商品，下達訂單，查看和編輯個人信息和訂單。管理員進入后臺系統(tǒng)后，可以對用戶管理、資產(chǎn)管理、評論管理、系統(tǒng)管理和訂單管理進行修改、添加、刪除和修改。4.2功能模塊設計4.2.1用戶登錄模塊設計1、買家、交易者和管理員登錄計劃:登錄系統(tǒng)時，必須輸入用戶名和密碼。如果登錄失敗，系統(tǒng)會提示輸入錯誤的用戶名和密碼，然后返回登錄界面重新登錄。用戶登錄流程圖如圖4-2所示。密碼是否正正確用戶是否正確？密碼是否正正確用戶是否正確？開始輸入用戶名密碼結束是否登錄成功否是圖4-2用戶登錄流程圖4.2.2購物車模塊設計購物車是網(wǎng)上商店的基本模塊之一。用戶在沒有登錄的情況下只能瀏覽商品，不能訪問商品。用戶登錄后，可以將商品列表中的商品添加到購物車中。商品被添加到購物車后，他可以下訂單并支付費用。用戶可以根據(jù)自己的需要增加或減少購物車中的商品數(shù)量，也可以從所選產(chǎn)品中刪除全部或部分商品;此外，購物車將自動計算所有選定產(chǎn)品的總數(shù)和總擁有成本REF_Ref28617\w\h[5]。購物車購物流程圖如圖4-3所示。圖4-3購物車購物流程圖4.2.3用戶管理模塊設計管理員登錄系統(tǒng)后查看買家用戶和商家用戶的信息，可以依據(jù)系統(tǒng)給出的用戶名單檢索相對應用戶信息，同時還能根據(jù)用戶賬號的變動，在系統(tǒng)中對用戶的信息進行一個修改、添加、刪除操作。進入系統(tǒng)用戶管理界面，對用戶信息查詢時，輸入查詢條件并點擊查詢按鈕后，后臺程序會根據(jù)數(shù)據(jù)庫數(shù)據(jù)返回結果，當查詢滿足條件的數(shù)據(jù)時用戶存在，則把滿足條件的用戶信息傳輸?shù)娇蛻舳耍駝t，客戶端顯示空列表。用戶檢索流程圖如圖4-4所示。開始開始輸入查詢條件滿足查詢顯示查詢結果結束否是圖4-4用戶檢索流程圖4.2.4商品管理模塊設計資產(chǎn)管理模塊分為兩個子模塊，分別提供資產(chǎn)分類管理和資產(chǎn)標簽管理。一旦進入系統(tǒng)，管理員就可以對其進行分類、查詢、添加、編輯和刪除。您可以根據(jù)您的品牌和名稱執(zhí)行資產(chǎn)查詢，并在滿足條件時返回結果。管理員必須填寫并提供更改信息以更改和添加項目。在獲得批準后，更改將會成功。只有管理員確認后，才能進行刪除操作。商品管理流程如圖4-5所示。圖4-5商品管理流程圖4.2.5評論管理模塊設計評論管理分為2個模塊，分別是在線咨詢管理和在線留言。管理員對買家在線咨詢和在線留言的內(nèi)容進行查看、回復修改和刪除等操作。評論管理修改流程圖如圖4-6所示。開始開始查找修改內(nèi)容是否修改？顯示修改成功結束否是圖4-6評論管理修改流程圖4.2.6系統(tǒng)管理模塊設計系統(tǒng)管理有2個功能模塊，分別是系統(tǒng)公告管理和輪播圖管理，系統(tǒng)公告能方便買家用戶了解商城的實時動態(tài)，用戶可以通過前臺首頁的公告欄進行瀏覽。管理員進入系統(tǒng)公告管理后可以進行公告瀏覽、修改、刪除等操作。輪播圖管理著首頁圖片的左右滑動。系統(tǒng)公告管理流程圖如圖4-7所示。圖4-7系統(tǒng)公告管理流程圖4.2.7訂單管理模塊設計訂單管理模塊是電商系統(tǒng)的核心之一，也是整個交易過程中最重要的一環(huán)，管理員可以根據(jù)訂單信息將其修改為已取消、已支付、已退款、已完成、已發(fā)貨或未支付狀態(tài)。進入系統(tǒng)訂單管理頁面后管理員需要先查詢訂單，了解訂單當前狀況，確認是否已經(jīng)發(fā)貨，如果已經(jīng)發(fā)貨則修改訂單狀態(tài)。訂單管理功能模塊圖如圖4-8所示。開始開始開始查詢訂單訂單管理設置訂單確定發(fā)貨？否是圖4-8訂單管理流程圖4.3數(shù)據(jù)庫設計4.3.1概念模式設計E-R圖是對數(shù)據(jù)庫實體之間關系的一種抽象，繪制E-R圖能夠進一步分析數(shù)據(jù)，便于系統(tǒng)的設計與實現(xiàn)。通過對客戶管理信息的深入了解，電商系統(tǒng)中所涉及到的主要有八個數(shù)據(jù)表，分別是商品信息實體圖、用戶信息實體圖、商家信息實體圖、留言信息實體圖、訂單信息實體圖、訂單商品實體圖、管理員信息實體圖、公告信息實體圖。部分實體E-R圖繪制如下：1、用戶信息實體的E-R圖如圖4-9所示：用戶用戶用戶名密碼時間ID圖4-9用戶信息實體E-R圖2、訂單商品實體的E-R圖如圖4-10所示：訂單生成信息訂單生成信息收貨地址姓名定購日期訂單編號電話用戶名圖4-10訂單商品實體E-R圖3、商品信息實體的E-R圖如圖4-11所示：商品商品商品名價格商品內(nèi)容日期ID圖4-11商品信息實體E-R圖4、系統(tǒng)E-R如圖4-12所示：管理員管理員查看訂單信息數(shù)據(jù)分析發(fā)布商品用戶信息信息評論查看查看發(fā)布NNMNIIIMMI圖4-12系統(tǒng)的E-R模型圖4.3.2數(shù)據(jù)庫邏輯模式設計數(shù)據(jù)庫設計是對給定的應用環(huán)境進行構造優(yōu)化的數(shù)據(jù)庫物理模式。好的數(shù)據(jù)庫處理速度會影響系統(tǒng)響應速度，數(shù)據(jù)庫設計的全過程包括概念模型設計，邏輯結構設計和物理結構設計。依據(jù)概念模型行程數(shù)據(jù)邏輯結構，設計數(shù)據(jù)表，根據(jù)電商系統(tǒng)所涉及到的功能以及各個功能的實體信息實行數(shù)據(jù)表信息的匹配的基礎上設計得到系統(tǒng)數(shù)據(jù)庫邏輯結構，包含8個數(shù)據(jù)表。1、收貨地址信息表：此表主要用于存放用戶收貨地址的數(shù)據(jù)信息，包括id、用戶名稱、創(chuàng)建時間、地址、收貨人和電話及是否默認地址等。表4-1收貨地址信息表字段名數(shù)據(jù)類型長度主鍵與否能否為空說明idBIGINT(19)11是否主鍵addtimeTIMESTAMP(19)3否否創(chuàng)建時間useridBIGINT(19)11否否用戶idaddressVARCHAR(200)255否否地址nameVARCHAR(200)255是否收貨人phoneVARCHAR(200)255否否電話isdefaultVARCHAR(200)255是否是否默認地址[是/否]2、用戶信息表：該表主要用于存放買家用戶的基本信息，包括id、創(chuàng)建時間、賬號、密碼、姓名、頭像和性別，同時還包含了不同的字段類型、字段名。表4-2用戶信息表字段名數(shù)據(jù)類型長度主鍵與否能否為空說明idBIGINT(19)11是否主鍵addtimeTIMESTAMP(19)3否否創(chuàng)建時間yonghumingVARCHAR(200)255否否用戶名mimaVARCHAR(200)255是否密碼xingmingVARCHAR(200)255否是姓名touxiangVARCHAR(200)255否是頭像xingbieVARCHAR(200)255是是性別3、商家信息表：此表主要用于存放商家的數(shù)據(jù)信息，包括商家賬號、密碼、商家姓名、頭像、聯(lián)系電話和余額，同時還包含了不同的字段名、數(shù)據(jù)類型。表4-3商家信息表字段名數(shù)據(jù)類型長度主鍵與否能否為空說明idBIGINT(19)11是否主鍵addtimeTIMESTAMP(19)3否否創(chuàng)建時間shangjiazhanghaoVARCHAR(200)11否否商家賬號mimaVARCHAR(200)255是否密碼shangjiaxingmingVARCHAR(200)255是是商家姓名touxiangVARCHAR(200)255是頭像lianxidianhuaVARCHAR(200)255是聯(lián)系電話moneyFLOAT(12)32是余額4、訂單信息表：訂單信息表主要用于存放買家用戶購買商品訂單的數(shù)據(jù)信息，包括訂單編號、商品表名、商品名稱、商品id、用戶id、商品圖片、購買數(shù)量等。表4-4訂單信息表字段名數(shù)據(jù)類型長度主鍵與否能否為空說明idBIGINT(19)11是否主鍵addtimeTIMESTAMP(19)3否否創(chuàng)建時間orderidVARCHAR(200)255否否訂單編號tablenameVARCHAR(200)255否是商品表名useridBIGINT(19)11否否用戶idgoodidBIGINT(19)11否否商品idgoodnameVARCHAR(200)255否是商品名稱pictureVARCHAR(200)255否是商品圖片buynumberINT(10)11否否購買數(shù)量priceFLOAT(12)32否否價格/積分discountpriceFLOAT(12)32否是折扣價格totalFLOAT(12)32否否總價格/總積分discounttotalFLOAT(12)32否是折扣總價格typeINT(10)11否是支付類型statusVARCHAR(200)255否是狀態(tài)addressVARCHAR(200)255否是地址telVARCHAR(200)255否是電話consigneeVARCHAR(200)255否是收貨人logisticsLONGTEXT(2147483647)113否是物流shangjiazhanghaoVARCHAR(200)127否是商戶名稱5、購物車信息表：主要用于存放買購物車中商品的數(shù)據(jù)信息，包含字段、數(shù)據(jù)類型、長度。包括用戶id、用戶名、商品名稱、圖片等。表4-5購物車信息表字段名數(shù)據(jù)類型長度主鍵與否能否為空說明idBIGINT(19)11是否主鍵addtimeTIMESTAMP(19)3否否創(chuàng)建時間tablenameVARCHAR(200)255否是商品表名useridBIGINT(19)11否否用戶idgoodidBIGINT(19)11否否商品idgoodnameVARCHAR(200)255否是商品名稱pictureVARCHAR(200)255否是圖片buynumberINT(10)11否否購買數(shù)量priceFLOAT(12)11否是單價discountpriceFLOAT(12)32否是會員價shangjiazhanghaoVARCHAR(200)255否是商戶名稱6、在線留言信息表：主要用于存放買家用戶在線留言的數(shù)據(jù)信息，包含字段、數(shù)據(jù)類型、長度。包括用戶id、用戶名、留言內(nèi)容、留言圖片等。表4-6在線留言信息表字段名數(shù)據(jù)類型長度主鍵與否能否為空說明idBIGINT(19)11是否主鍵addtimeTIMESTAMP(19)3否否創(chuàng)建時間useridBIGINT(19)11否否留言人idusernameVARCHAR(200)255否是用戶名contentLONGTEXT(2147483647)127否否留言內(nèi)容cpictureVARCHAR(200)255是是留言圖片replyLONGTEXT(2147483647)127否是回復內(nèi)容rpictureVARCHAR(200)255否是回復圖片7、商品分類表：此表主要用于存放商品分類的數(shù)據(jù)信息，包括id、創(chuàng)建時間、商品分類，不同的字段類型、字段名。表4-7商品分類表字段名數(shù)據(jù)類型長度主鍵與否能否為空說明idBIGINT(19)11是否主鍵addtimeTIMESTAMP(19)3否否創(chuàng)建時間shangpinfenleiVARCHAR(200)255否否商品分類8、商品信息表：該表主要用于存放所有商品的數(shù)據(jù)信息。包含商品名稱、圖片、品牌、規(guī)格、成色、商品詳情、商家賬號、價格、單限和庫存等。還包含不同的字段名、數(shù)據(jù)類型、長度。表4-8商品信息表字段名數(shù)據(jù)類型長度主鍵與否能否為空說明idBIGINT(19)11是否主鍵addtimeTIMESTAMP(19)3否否創(chuàng)建時間shangpinmingchengVARCHAR(200)255否否商品名稱shangpinfenleiVARCHAR(200)255否否商品分類tupianVARCHAR(200)255否否圖片pinpaiVARCHAR(200)255否是品牌guigeVARCHAR(200)255否是規(guī)格chengseVARCHAR(200)255否是成色shangpinxiangqingLONGTEXT(2147483647)128否是商品詳情shangjiazhanghaoVARCHAR(200)255否是商家賬號priceFLOAT(12)32否是價格onelimittimesINT(10)11否是單限alllimittimesINT(10)11否是庫存5系統(tǒng)實現(xiàn)5.1系統(tǒng)登錄的實現(xiàn)系統(tǒng)登錄模塊主要分三種角色登錄界面，分別為用戶登錄、商家和管理員登錄。如圖5-1所示圖5-1用戶登錄界面其實現(xiàn)系統(tǒng)登陸的關鍵代碼如下：login(){if(!this.rulesForm.username){this.$message.error("請輸入用戶名");return;}if(!this.rulesForm.password){this.$message.error("請輸入密碼");return;}if(!this.rulesForm.role){this.$message.error("請選擇角色");return;}letmenus=this.menus;for(leti=0;i<menus.length;i++){if(menus[i].roleName==this.rulesForm.role){this.tableName=menus[i].tableName;}}this.$http({url:`${this.tableName}/login?username=${this.rulesForm.username}&password=${this.rulesForm.password}`,method:"post"}).then(({data})=>{if(data&&data.code===0){this.$storage.set("Token",data.token);this.$storage.set("role",this.rulesForm.role);this.$storage.set("sessionTable",this.tableName);this.$storage.set("adminName",this.rulesForm.username);this.$router.replace({path:"/index/"});}else{this.$message.error(data.msg);}});},5.2商品分類功能的實現(xiàn)商品分類能是商家在線發(fā)布團購商品信息，讓用戶能獲得和了解更多的商品分類信息。其實現(xiàn)分類的效果如圖5-2所示。圖5-2分類運行效果其實現(xiàn)系統(tǒng)登陸的關鍵代碼如下：<el-row><el-col:span="12"><el-form-itemclass="input"v-if="type!='info'"label="商品名稱"prop="shangpinmingcheng"><el-inputv-model="ruleForm.shangpinmingcheng"placeholder="商品名稱"clearable:readonly="ro.shangpinmingcheng"></el-input></el-form-item><divv-else><el-form-itemclass="input"label="商品名稱"prop="shangpinmingcheng"><el-inputv-model="ruleForm.shangpinmingcheng"placeholder="商品名稱"readonly></el-input></el-form-item></div></el-col><el-col:span="12"><el-form-itemclass="select"v-if="type!='info'"label="商品分類"prop="shangpinfenlei"><el-select:disabled="ro.shangpinfenlei"v-model="ruleForm.shangpinfenlei"placeholder="請選擇商品分類"><el-optionv-for="(item,index)inshangpinfenleiOptions"v-bind:key="index":label="item":value="item"></el-option></el-select></el-form-item><divv-else><el-form-itemclass="input"label="商品分類"prop="shangpinfenlei"> <el-inputv-model="ruleForm.shangpinfenlei"placeholder="商品分類"readonly></el-input></el-form-item></div></el-col><el-col:span="24"><el-form-itemclass="upload"v-if="type!='info'&&!ro.tupian"label="圖片"prop="tupian"><file-uploadtip="點擊上傳圖片"action="file/upload":limit="3":multiple="true":fileUrls="ruleForm.tupian?ruleForm.tupian:''"@change="tupianUploadChange"5.3用戶注冊功能的實現(xiàn)本功能主要實現(xiàn)用戶進行注冊，用戶注冊后可以發(fā)布商品，也可以查詢商品，然后訂購物商品。用戶注冊的效果如圖5-3所示。圖5-3用戶注冊運行效果5.4訂購功能實現(xiàn)本功能主要實現(xiàn)用戶查詢商品信息，然后進行在線購物商品，用戶也可以發(fā)布自己的信息。其實現(xiàn)訂購的效果如圖5-4所示。圖5-4訂購運行效果5.5商品發(fā)布功能實現(xiàn)本功能主要實現(xiàn)用戶登錄后可以通過本功能發(fā)布自己的信息，信息發(fā)布后前臺所有用戶可以查看到商品。其實現(xiàn)發(fā)布的效果如圖5-5所示。圖5-5發(fā)布商品運行效果5.6管理員模塊功能實現(xiàn)5.6.1后臺管理