PAGE 基于Vue框架積木網上商城的設計與實現摘要：隨著物資生活逐漸完善的今天，許多家庭越來越重視兒童的教育問題，兒童的智力發育問題漸漸受到大家的關注和重視，如何讓兒童身心得到健康發展是很重要的社會問題。科學研究認為5-8歲是少兒的智力發展的重要階段，在這個階段之中益智玩具是兒童智力開發的手段之一，把游戲當做一種教育，將教育跟娛樂結合在一起，會有更好的效果。查看相關的網絡調查報告和根據2017-2019年網購數據分析，積木類益智玩具成為了家長和少兒教育機構的首要選擇對象，對兒童的智商能力開發上能起到很大的幫助作用，同時能增強家長或者少兒教育機構與兒童之間的互動。所以開發一個積木網上商城發展前景巨大，能讓社會上有需要的人帶來很好的平臺。使用2016年5月份發布的Vue.js2.0前端漸進式Javascript框架REF_Ref1009\r[1]加上elementUI框架來作為項目的開發平臺。Vue框架針對如今多屏分辨率不統一的趨勢下，能更有效率地響應不同設備之間分辨率的差異化適應，同時實現前端與后端的代碼分離，大大地提高了前后端的開發速度和分清開發職責；elementUI框架是如今在Vue平臺上支持度較高的UI框架，組件顯示美觀，同時使用方便。使用vscode作為本項目的開發工具，它的優點在于開發界面非常簡潔、使用方便并且具有代碼糾錯提示。對本系統進行需求分析和詳細設計，通過技術開發系統的功能和界面完成本項目的開發，最后對各個功能模塊進行測試和優化。基于Vue框架積木網上商城是針對兒童開發智力，方便家長和少兒教育機構挑選和購買積木玩具所開發的一套網上商城系統，本商城與現在網絡上的商城具有特色的地方在于，積木網上商城專營各種積木類益智玩具，面對市面上參差不齊的積木商品，材質和安全性得不到保障的情況下，本商城專營積木玩具商品，最大的特點就是保障其商品安全性，經過人工篩選才會上架，提供適合不同年齡段的兒童的積木玩具商品。關鍵詞：Vue框架，積木網上商城，開發智力DesignandimplementationofbuildingblockonlineshoppingmallbasedonVueframeworkAbstract：Withthegradualimprovementofmateriallifetoday,manyfamiliesarepayingmoreandmoreattentiontochildren'seducationalissues,andchildren'sintellectualdevelopmentisgraduallyreceivingeveryone'sattentionandattention.Howtoallowchildrentodevelophealthilyisanimportantsocialissue.Scientificresearchbelievesthat5-8yearsoldisanimportantstageofchildren’sintellectualdevelopment.Inthisstage,educationaltoysareoneofthemeansofchildren’sintellectualdevelopment.Takinggamesasaneducation,combiningeducationandentertainment,therewillbeBetterresults.Viewingrelevantonlinesurveyreportsandanalysisofonlineshoppingdatafrom2017to2019,buildingblockeducationaltoyshavebecometheprimarychoiceforparentsandchildren’seducationalinstitutions,whichcangreatlyhelpchildren’sIQdevelopment.Canenhancetheinteractionbetweenparentsorchildren'seducationalinstitutionsandchildren.Therefore,thedevelopmentofabuildingblockonlineshoppingmallhashugedevelopmentprospects,whichcanbringagoodplatformtothoseinneedinthesociety.TheVue.js2.0front-endprogressiveJavascriptframeworkREF_Ref1009\r[1]releasedinMay2016plustheelementUIframeworkwasusedasthedevelopmentplatformfortheproject.TheVueframeworkismoreresponsivetothedifferentresolutionsofdifferentdevicesinresponsetothetrendoftoday'smulti-screenresolutionisnotuniform,andatthesametimerealizestheseparationoffront-endandback-endcode,greatlyimprovingthedevelopmentspeedandseparationoffront-endandback-endDevelopmentresponsibilities;elementUIframeworkisaUIframeworkwithahighdegreeofsupportontheVueplatform.Thecomponentsdisplaybeautifullyandareeasytouse.Usingvscodeasthedevelopmenttoolforthisproject,itsadvantageisthatthedevelopmentinterfaceisverysimple,easytouseandhascodeerrorcorrectionprompts.Carryouttheneedsanalysisanddetaileddesignofthesystem,throughthefunctionandinterfaceofthetechnologydevelopmentsystem,andfinallytestandoptimizeeachfunctionalmoduletocompletethedevelopmentofthisproject.BuildingblocksonlinemallbasedonVueframeworkisasetofonlinemallsystemdevelopedforchildrentodevelopintelligencetofacilitateparentsandchildren’seducationalinstitutionstoselectandpurchasebuildingblockstoys.Allkindsofbuildingblockeducationaltoys,inthefaceoftheunevenbuildingblocksonthemarket,thematerialandsafetycannotbeguaranteed,themallspecializesinbuildingblocktoyproducts,thebiggestfeatureistoensurethesafetyoftheirproducts,aftermanualThescreeningwillbeputontheshelftoprovidebuildingblocktoyproductssuitableforchildrenofdifferentages.Keywords：Vueframework,Buildingblockonlineshoppingmall,Developingintelligence

目錄第1章緒論 11.1研究背景和意義 11.1.1本課題背景分析 11.1.2本課題的研究意義 11.2文獻綜述 21.2.1國內現狀 21.2.2國外現狀 21.3課題研究方法和內容 31.3.1研究方法 31.3.2研究內容 31.4開發技術與開發工具 41.4.1Vue.js2.0前端框架 41.4.2Webpack[14]構建工具 4第2章系統需求分析 52.1系統需求分析 52.1.1功能需求分析 52.1.3非功能需求分析 102.1.4技術可行性分析 112.1.5操作可行性分析 112.2系統用例圖 122.2.1商品瀏覽模塊用例圖 122.2.2用戶信息模塊用例圖 122.2.3社區談論模塊用例圖 132.2.4購物車管理模塊用例圖 132.3用例規約 132.4本章總結 21第3章系統設計 223.1系統總體功能設計 223.1.1系統總體設計 223.2系統類圖 233.3數據庫設計 233.3.1用戶表設計 233.3.2商品表設計 243.4

系統流程圖 253.4.1商品瀏覽流程圖 253.4.3訂單管理流程圖 273.4.5購物車管理流程圖 283.5

系統接口設計 283.5.1Axios請求接口庫 283.5.2Api接口設計 29第4章系統實現 334.1商品瀏覽模塊實現 334.2訂單支付模塊實現 364.3用戶信息模塊實現 374.4訂單管理模塊實現 404.5購物車管理模塊實現 42第5章系統測試 445.2測試的目的 445.3功能測試 445.3.1商品瀏覽模塊測試 445.3.2用戶信息模塊測試 455.3.3訂單管理模塊測試 455.3.5購物車管理模塊測試 46第6章結論與展望 476.1結論 476.2展望 47參考文獻 49致謝 50PAGEPAGE51第1章緒論1.1研究背景和意義1.1.1本課題背景分析自21世紀以來，青少年智力技能的發展已受到更多人的重視，對于兒童來說，在兒童年齡發展其大腦非常必要。對兒童智力調查表和玩具市場的綜合研究表明，積木類益智玩具是父母和兒童教育機構的第一個解決方案，在促進兒童智力發展方面起著重要的作用。在線購物變得越來越流行，并且已經成為一種趨勢。網絡購物是網絡發展的必然趨勢，例如在線購物商城有每個人都熟悉淘寶，卓越網，當當網，eBay，拍拍網和一些較大的在線商城。隨著這個時代的步伐，人們生活質量的提高也促進了網上購物這一新的購物方式的成熟，越來越多的消費者正從傳統購物轉向網上購物。但是對于在線購物商城來說高質量和劣質產品的結合導致缺乏一個整理、值得消費者信賴的平臺。因此，市場需要先進的直銷理念和高效完善的購物系統，以便以便宜，快速和方便的方式為客戶提供高質量的積木玩具和開發智力社區的網上商城。1.1.2本課題的研究意義這個積木網上商店旨在為兒童開發智力，方便家長和少兒教育機構挑選和購買積木玩具所開發的一套網上商城系統，區別于現在網絡上的商城，面對市面上參差不齊的積木商品，材質和安全性得不到保障的情況下，本商城專營積木玩具商品，最大的特點就是保障其商品安全性，經過人工篩選才會上架，提供適合不同年齡段的兒童的積木玩具商品。1.2文獻綜述1.2.1國內現狀根據中國心理衛生雜志2020年最新的兒童心理及智力開發的期刊REF_Ref2639\r[2]中指出，主題積木游戲對5～6歲兒童數學能力和空間技能發展的干預效果，能很好的促進兒童對于數學和空間上的大腦開發能力。從數據上看，目前，中國14歲以下的青少年、兒童和嬰兒人口接近3億，占全國人口的25%，8000萬城市兒童構成了玩具消費者的一個大群體。有資料表明,中國目前有6,000家玩具制造商，其中79％生產兒童玩具，56％生產不同類型的積木玩具。據中國玩具協會估計，2018年中國積木玩具需求將達到300億元左右。REF_Ref2792\r[3]。綜合市場分析，在中國2017年雙十一拼插積木類玩具在天貓和京東平臺的銷售額分別是17億和13億元，而2018年兩個平臺的銷售額分別增長了45.9%和34.6%；但是積木玩具本身的安全性、無毒性也引起來社會上各人士的高度重視，在沒有專業人士的推薦下，如何選擇合適的積木玩具成為一個令家長頭痛的問題。在技術上，使用前后端分離驅動的前端框架是現在IT行業和互聯網發展的趨勢，加上B/S多層體系結構REF_Ref32252\r[4]、MVVM設計模式REF_Ref2858\r[5]使開發過程變得簡單。根據網上的數據調查，如今Vue雖然市場使用率不如其他兩大框架多約占15%，但近兩年來的增長率非常高，已經成為國內互聯網市場的新寵，而且Vue非常適合中小型項目的部署與開展。1.2.2國外現狀最初的積木玩具是在國外興起的，全球最大的積木公司樂高在2011年的銷售額為185.07億丹麥克朗，比2010年增長了約17%。據樂高美國總經理稱，2011年，樂高在美國的銷售額增長了45%。樂高今年第一季度的表現同比飆升60%。預計從2030年到2050年，美國將成為樂高世界最大的市場之一。REF_Ref30805\r[6]。根據該項目的技術分析，國外對Vue框架的使用與中國不同。在國外使用React和Angular的原因更多是因為近年來開發的Vue前端框架尚未被外國開發人員使用。但是，其使用的增長速度是十分明顯的。根據《2019年JavaScript生態圈研究報告》REF_Ref2962\r[7]，未來60％的外國受訪者更愿意接受和使用Vue作為發展平臺，而94％的外國受訪者將使用官方文檔了解了Vue。1.3課題研究方法和內容1.3.1研究方法早期的網站大多數依賴于后臺服務器，例如基于java語言開發的jsp頁面、php語言的php偽靜態頁面，這種動態頁面的優點在于頁面直接在服務端運行，可以與后臺數據庫高度交互，數據更直接在頁面上處理，而缺點在于開發重心在后臺技術上，后臺開發人員在處理邏輯業務的同時也要參與到頁面開發的編程中，無疑加大了后端人員的工作分量；同時html頁面中有很多后端語言代碼，耦合性非常大，后期維護成本和難度都增大。所以這種網頁開發的技術不適合做商城網站系統等面向公眾的項目。本文研究方向是積木商城系統，面向對象的主要是父母和孩子，其界面美觀度和操作易用性是十分重要的，所以使用前后端分離REF_Ref5790\r[8]的方式把整個項目的開發權重往前移，平衡前后端模塊的職責，前端的責任是負責頁面的樣式顯示與優化并動態地處理從后端接口返回的數據，而后端只關注邏輯處理，這對項目開發是非常必要的。基于Vue框架積木網上商城的前期通過京東、淘寶等現有的大型電子商城的調查，針對積木類益智商品的銷售量、營銷手段以及用戶評價分析數據總結如何為積木商城建立可靠的數據庫。1.3.2研究內容本文研究的目的主要是使用Vue前端框架來設計和開發一套主題是積木網上商城的系統。該系統主要針對15歲以下的兒童，提供了一個安全可靠的專營積木類益智商品線上商品平臺，主要包括產品瀏覽模塊，用戶信息模塊，訂單管理模塊，社區談論模塊，購物車管理模塊，還提供了對適合不同年齡兒童的玩具進行分類的推薦，并加入社區討論功能，以便消費者能夠了解更多商品并使用商品。憑借先進的直銷理念，結合高效完善的購物系統，我們可以為消費者提供質優價廉、快捷方便的優質正品。研究的流程是首先了解用戶對系統的產品需求，其中核心的需求是系統需求提供多樣全面的積木玩具商品，能讓用戶有更多的選擇；其次了解系統的操作流程，從瀏覽、選擇商品，選擇商品的產品規格，下單再到收貨成功，在開始項目是需要制定完整的流程方案，才能更好地完成系統的實現。需要解決的主要問題是：在滿足用戶需求的前提下，該項目能否在穩定運行，信息安全，操作簡便，界面美觀的前提下，履行積木商城系統所需的基本功能。1.4開發技術與開發工具1.4.1Vue.js2.0前端框架Vue前端框架在2016年“出生”，它是由數據驅動和組件組成的漸進式的、基于MVVM模式的Javascript庫，雖然誕生至今只有四年時間，但它有著專注于View層，使開發者不必花過多時間去處理數據等優點，所以稱為了前端開發的“新寵”。與原生的JQuery不同，Vue提供專門的周期函數，開發者根據自身項目需求在指定的函數內執行方法，配合v-model、v-bind等語法糖，能更有效地進行數據驅動和雙向綁定，便于實現功能。同時使用組件化原則，開發者引入需要的組件，這樣做的好處在于能更好地管理插件和代碼，清晰地讓開發者知道項目的組成。1.4.2Webpack構建工具WebpackREF_Ref21817\r\h[14]構建工具的創立是為了更方便地管理依賴包、和代碼，如今的Web前端應用變化多樣，使用的語言和技術比后端的多，如果由人為地去管理代碼和依賴包，隨著后期項目的開展，代碼會變得非常冗余且容易出錯。Webpack構建工具被稱為模塊加載器（MODULEBUNDLER）,能夠把頁面中的依賴文件打包成靜態資源，按需去加載這些資源，大大地減少了項目的體積以及更易管理文件。

系統需求分析對該系統的需求進行分析，調查并了解父母購買兒童積木玩具的需求，分析市場上積木玩具的銷量，并在收到此數據后進行分析。現在該系統與市面上現有的網上商城不同之處在于，積木網上商城使用數據分析對積木商品進行分類和收集，從而形成一個只針對兒童人群的線上積木銷售平臺。對于功能性和非功能性需求，使用功能性分析方法、結構性分析方法、信息建模方法和面向對象的分析方法來識別、分析和綜合問題，制定規范和評審過程。在競爭激烈的市場中，不僅內容應豐富多樣，而且要提高核心競爭力，如果網站可以吸引更多的客戶，則它應該在許多方面具有自己的特征，同時在頁面美學方面也要吸引人。特別是該系統屬于特征人群訪問網站，有必要開發一種符合兒童審美觀的用戶界面，并通過視覺效果吸引更多的顧客。使用HTML+CSSREF_Ref607\r[9]裝飾Web界面，使網站擺脫舊的和丑陋的局面，再加上千變萬化的前端技術，通過前框架Vue前端和流行的UI框架element，顯示網頁的效果非常漂亮，開發一個用于積木主題商城的網站。2.1系統需求分析2.1.1功能需求分析《基于Vue框架積木網上商城》的主要功能要五個功能模塊：商品瀏覽模塊、用戶信息模塊、訂單管理模塊、社區談論模塊、購物車管理模塊。商品瀏覽模塊功能需求圖2-1商品瀏覽模塊圖商品列表：無論是用戶還是游客都可以在網站首頁查看各種品牌的積木玩具商品、熱門商品、導購指南；商品清單有兩類:價格類和銷售類。默認情況下，它按銷售從高到低的順序顯示。商品列表顯示商品數據，例如商品照片，商品價格和商品銷量。2）商品分類:系統根據品牌、適用性別和適用年齡對商品進行分類，這三種分類可以聯合篩選。3)展示商品詳情:積木玩具商品明細、外觀圖片、價格、屬性、庫存數量等信息的顯示；用戶選擇商品的規格(顏色、型號、數量)添加到購物車或購買中。如果用戶未登錄，在繼續下一步之前，將提示用戶登錄。如果用戶已登錄，用戶將直接進入下一步。選擇產品規格后，用戶點擊添加購物車按鈕，系統提示用戶“添加購物車成功”，否則提示“添加購物車失敗，請重試”；在用戶選擇商品規格并點擊購買按鈕后，他將跳轉到提交訂單的頁面。4)搜索:搜索分為兩種搜索方法，即模糊搜索和分類搜索。用戶可以搜索商品的標題字段以找出匹配條件的積木商品；分類搜索是用戶通過商品所屬的類型進行搜索，搜索結果以列表顯示。2.用戶信息模塊功能需求圖2-2用戶信息模塊圖1）個人基本信息：包括用戶設置頭像、昵稱、郵箱、居住地區、購物愛好選擇等個人信息。2）收貨地址：填寫收貨人的名稱、收貨人的手機號碼、所在地區、詳細地址；其中，手機號碼通過正則表達式驗證，確保用戶輸入的手機號碼是正確的；所在地區是通過匹配中國地區數據庫獲取地區信息供用戶選擇，保證地址正確；用戶確認保存收貨地址信息后，可以直接選擇已經保存的收貨地址信息，也可以通過下訂單的方式創建新的收貨地址信息；3）默認收貨地址：用戶可在已保存的收貨信息列表中選擇其中一個地址信息作為默認收貨地址，默認收貨地址是不會有重復的，設置后的默認收貨地址會一直顯示在收貨地址列表的第一位，并加上“默認”標簽。3.訂單管理模塊功能需求圖2-3訂單管理模塊圖1）檢查訂單狀態:訂單狀態有五種狀態:“全部”、“待支付”、“待接收”、“已完成”和“已取消”。“全部”狀態顯示用戶的所有訂單；“待定付款”狀態顯示用戶提交訂單，系統將檢查商品是否有貨。如果沒有庫存，系統會提示用戶商品缺貨。否則，系統將鎖定訂單信息10分鐘。“待接收”狀態顯示系統執行的操作，如發貨單；“完成”狀態表示用戶已經收到貨物，并且確認訂單沒有問題；“已取消”狀態表示用戶提交訂單，但在10分鐘內還沒有支付成功的訂單，或者訂單被用戶取消；2)訂單管理:用戶可以在五種狀態下查看明細和刪除訂單；3)支付方式:用戶提交訂單時，選擇支付方式，包括支付寶和微信；4）送貨時間：用戶在提交訂單時選擇適合的送貨時間，系統會安排送貨員在制定時間段內送貨上門；如果用戶沒有選擇送貨時間，則系統默認支付訂單成功后安排配送積木商品。4.社區管理模塊功能需求圖2-4社區管理模塊圖1）商品談論：用戶進入商城社區交流平臺，用戶可發布相關商品的提問，所有用戶都可以評論該用戶提出的問題，同時標識出購買過和未購買過的評論用戶，同時系統篩選出用戶提問的相似問題進行匯合處理，以使用戶更清晰地了解該商品。5.購物車管理模塊功能需求圖2-5購物車管理模塊圖1)購物車列表:用戶在商品詳細信息頁中選擇商品規格，并向購物車中添加。這個清單顯示了購物車中的貨物和貨物的存儲狀態。如果商品無效，則表示該商品無法購買，用戶需要清除該商品信息。2)購物車管理:管理購物車中的商品，并快速刪除無效商品;刪除選定的商品;貨物結算和貨物數量操作。3)購物車結算:用戶管理購物車中有效商品的結算。待結算商品進入訂單管理，用戶可以查看訂單。2.1.2非功能需求分析基于本系統是面向家長、兒童使用的，所以保證前端界面用戶體驗是必要的，所以會考慮下面幾個非功能性需求：兼容性需求自從HTML5協議問世以來，由于IE瀏覽器對HTML5的支持度不如其他的瀏覽器，IE瀏覽器一統天下的局面已不復存在，如今成為了谷歌公司的Chrome瀏覽器，火狐公司的FireFox瀏覽器、和微軟公司的IE瀏覽器三足鼎立。不同瀏覽器的面世，他們基本上使用自家公司制定的協議標準，此外，不同的瀏覽器使用不同的內核，因此它們對HTML5和CSS3的分析和支持將會不同，尤其是IE9以下的版本，只能盡可能地兼容這些瀏覽器的顯示效果以及交互功能，例如在Chrome瀏覽器下自定義的一些原生控件樣式，但在火狐瀏覽器卻不能正常顯示，這給前端開發帶來一定的難度。性能需求前端擁有良好的性能將有效改善系統的用戶體驗,所以在前端編程時進行優化將是系統開發的重要工作。以下幾點則是主要優化工作。a)減少HTTP請求次數與頻率瀏覽器在加載和刷新頁面的時候，每次都會發送HTTP請求到后臺獲取數據，這個過程會消耗大量的時間，導致頁面在首次加載的時候都會有段時間的空白，當網絡不佳的時候這種情況會更明顯。而請求耗時除了取決于網絡就是網頁資源加載,因此我們將主要優化網頁資源。主要方法就是合并圖片,合并JS文件與CSS文件。b)減少DOM操作操作DOM將會嚴重消耗頁面性能,所以盡量避免操作DOM,本文選用Vue.js框架,將有效避免直接操作DOM這一問題，因為他使用的是雙向綁定來進行對樣式和功能的操作，在前端框架出現之前，網頁的功能基本上是使用Javascript對DOM元素進行操作以獲得需要的功能，但Vue.js能有效的減少直接對DOM元素的操作，進而更有效的提高網頁性能。響應式多屏自適應需求REF_Ref859\r[10]在4G時代的帶領下，多終端成為了普遍現象，一個網頁響應不同設備的分辨率顯示是十分必要的，這樣子能解決程序員一套代碼多端使用的情況，很大程度上提高的開發效率。嚴格定義的響應式一般是指響應式Web設計、而Web憑借其特有的靈活性和可塑性，在網頁中使用rem和百分比的形式，獲取瀏覽器的寬高，對齊進行自適應，從而響應不同尺寸、不同分辨率下的設備。2.1.3技術可行性分析整個系統使用的技術以Vue2.0作為前端開發框架，實現前后端分離，由于本人在公司擔任前端開發的職位，知道Vue.js的語法糖、周期函數以及路由處理等操作；HTML+CSS的網頁界面開發語言能滿足我們對主題顯示預期的效果，適當的使用JQueryREF_Ref3510\r[11]幫助補充Vue中的功能不足；后臺方面使用集成度很高的thinkPhp5.0后臺開發框架，技術方面一般能滿足。2.1.4操作可行性分析由于本系統是面向于家長和兒童，所以我們對系統目標是簡單易用的，就好像中國偉大的企業家馬云說過，一個好的產品是讓任何人學會如何使用，盡可能的降低學習成本，所以在商城系統的操作方面沒有要求，用戶只要學會一般的網購流程即可。2.2系統用例圖2.2.1商品瀏覽模塊用例圖圖2-1商品瀏覽模塊用例圖2.2.2用戶信息模塊用例圖圖2-2用戶管理子系統用例圖2.2.3社區談論模塊用例圖圖2-3社區談論模塊用例圖2.2.4購物車管理模塊用例圖圖2-4購物車管理模塊用例圖2.3用例規約1.商品瀏覽1)查看商品列表用例規約表2-1查看商品列表用例規約表用例編號SB011用例名稱查看商品列表功能描述游客或用戶查看商品列表，列表默認以銷量最高到低排序，其中包括關鍵字模糊搜索和分類搜索；執行者用戶、游客、系統前置條件網絡正常；后置條件用戶或游客查看條件篩選后的商品列表涉眾利益用戶、游客基本路徑用戶/游客查看商品；用戶/游客根據商品標題模糊查詢商品；用戶/游客根據商品分類查詢商品；系統獲取商品數據后展示；用戶/游客查看商品。擴展1、用戶沒有對商品查詢進行操作1.1、系統以默認條件顯示商品；2、用戶搜索沒有結果2.1、系統提示搜索結果為空，并要求用戶重新搜索；字段列表商品信息；商品分類；業務規則預定業務規則：1、用戶/游客搜索的結果為空，則在頁面中提示搜索結果為空，請重新搜索；2、系統默認列表以銷量最高到低排序；備注2)查看商品詳情用例規約表2-2查看商品詳情用例規約表用例編號SB012用例名稱查看商品詳情功能描述游客或用戶查看商品詳情；執行者用戶、游客、系統前置條件網絡正常；后置條件用戶或游客可以查看商品的詳細信息，用戶可以將商品添加到購物車，進入社區談論或購買商品。涉眾利益用戶、游客續表2-2基本路徑用戶/游客查看商品詳情；判斷該角色是商城用戶還是游客；提示游客登錄；允許用戶將商品放入購物車中、進入社區談論或購買；游客只能查看商品詳情；擴展1、游客進行加入購物車、進入社區談論或購買操作1.1、系統提示游客進行登錄；2、用戶將商品提交到購物車2.1、加入成功；2.2、庫存為空，加入失敗；3、用戶購買商品3.1、提交訂單；3.2、庫存為零，購買失敗；字段列表商品名稱；商品編號；商品數量；售價；規格；商品分類；庫存業務規則預定業務規則：1、當商品庫存不為零時，用戶才能加入購物車或購買；備注2.用戶信息1）填寫個人基礎信息表2-3填寫個人基礎信息用例規約用例編號SB003用例名稱填寫個人基礎信息功能描述已登錄的用戶填寫和完善個人基礎信息執行者用戶、系統前置條件網絡正常；用戶已登錄；用戶打開個人信息頁后置條件用戶保存個人基礎信息成功涉眾利益用戶填寫完個人基本信息后，系統可以獲取該信息基本路徑1、用戶設置頭像、昵稱、郵箱、居住地區、個人愛好選擇、購物愛好等個人基礎信息；。2、系統判斷郵箱、居住地址是否正確；3、用戶提交個人基礎信息；4、點擊提交，個人基礎信息已完善；擴展1、用戶取消填寫個人基礎信息1.1、結束流程；2、用戶沒有填寫必填項2.1、系統提示用戶填寫必填項，并禁止提交。3、系統錯誤3.1、用戶再次填寫個人基本信息續表2-3字段列表頭像；昵稱；郵箱；居住地區，購物愛好選擇；生日；身份證號業務規則預定業務規則：1、郵箱、購物愛好選擇、生日為必填。2、居住地區具體到市/縣，下拉選擇框；3、郵箱必須是正確的郵箱格式。備注2）收貨地址用例規約表2-4收貨地址用例規約表用例編號SB004用例名稱填寫收貨地址功能描述用戶在提交訂單或個人信息中填寫收貨地址執行者用戶、系統前置條件網絡正常；用戶已登錄后置條件用戶已填寫收貨地址，系統保存收貨地址成功涉眾利益用戶可以在提交訂單時選擇已經存在的收貨地址信息，或者直接創建新的收貨地址信息。基本路徑用戶打開個人信息頁，進入收貨地址列表頁；創建或編輯、刪除收貨地址；用戶必須填寫詳細收貨地址、收貨人、手機號碼；用戶也可以在提交訂單時新建收貨地址；系統成功保存收貨地址信息；6、用戶管理收貨地址。擴展1、用戶取消填寫收貨地址信息1.1、結束流程；2、用戶沒有填寫必填項2.1、系統提示用戶填寫必填項，并禁止提交。3、系統出錯3.1、用戶重新填寫個人基礎信息4、提交訂單時沒有需要的收貨地址4.1、新建收貨地址字段列表詳細收貨地址；收貨人；手機號碼業務規則預定業務規則：1、所有表單字段為必填。2、詳細收貨地址由省市區+詳細地區組成；備注3）默認收貨地址用例規約表2-5默認收貨地址用例規約表用例編號SB005用例名稱設置默認收貨地址功能描述用戶在收貨地址列表設置收貨地址執行者用戶、系統前置條件網絡正常；用戶已登錄；有一個以上的收貨地址信息后置條件默認收貨地址設置成功涉眾利益用戶基本路徑用戶打開收貨地址頁；用戶設置一條收貨地址為默認收貨地址；系統數據更新；默認收貨地址顯示在列表第一條；設置成功；擴展1、用戶取消設置默認收貨地址1.1、結束流程；2、系統出錯2.1、用戶重新設置默認收貨地址字段列表默認收貨地址業務規則預定業務規則：1、用戶收貨地址列表中必要有一條以上的收貨地址信息才能設置默認收貨地址。2、默認收貨地址顯示在列表的首位，并帶有“默認”標簽；備注3.訂單管理1）查看訂單狀態表2-6查看訂單狀態用例規約表用例編號SB031用例名稱查看訂單狀態功能描述用戶創建了訂單，進行訂單操作并查看訂單狀態執行者用戶、系統前置條件網絡正常；用戶創建了訂單后置條件用戶查看訂單列表和狀態涉眾利益用戶基本路徑用戶創建訂單；用戶查看訂單的狀態，分別是“全部”、“待付款”、“待收貨”、“已完成”、“已取消”；3、用戶切換tab欄選擇查看訂單的狀態續表2-6擴展1、用戶沒有創建和提交訂單1.1、五個狀態均為空數據；2、系統出錯2.1、系統顯示數據有問題，提示用戶刷新；字段列表狀態；訂單商品規格；訂單商品數量；業務規則預定業務規則：1、五個狀態的type從1到5排序；備注2）管理訂單表2-7管理訂單用例規約表用例編號SB031用例名稱管理訂單功能描述用戶對訂單進行支付、刪除、收貨等操作執行者用戶、系統前置條件網絡正常；用戶創建了訂單后置條件用戶修改訂單的狀態涉眾利益用戶基本路徑用戶創建并提交訂單；十分鐘內未支付，訂單狀態為“待支付”；系統監聽用戶的支付情況，十分鐘內未支付。系統自動把訂單修改成為“已取消”狀態；用戶也可自行取消訂單的支付；用戶支付成功，訂單狀態從“待支付”變為“待收貨”；用戶點擊收貨，訂單狀態從“待收貨”變為“已完成”；用戶查看所有狀態下訂單的詳情；用戶可以刪除已完成的訂單；擴展用戶支付失敗1.1更換支付方式；1.2取消支付；字段列表訂單狀態；訂單詳情信息；是否刪除；業務規則預定業務規則：1、用戶只能對“已完成”和“已取消”的訂單進行刪除操作；備注3）支付方式表2-8支付方式用例規約表用例編號SB033用例名稱選擇支付方式功能描述用戶在支付訂單時選擇支付方式執行者用戶、系統前置條件網絡正常；用戶創建了訂單，還沒支付后置條件用戶選擇支付方式并以這種方式支付金額涉眾利益用戶基本路徑1、用戶選擇商品并提交訂單；2、系統提示選擇支付方式；3、用戶選擇一種支付方式；擴展無字段列表支付方式；業務規則預定業務規則：1、支付方式有支付寶、微信支付、貨到付款等三種方式；備注4）選擇送貨時間表2-9選擇送貨時間用例規約表用例編號SB034用例名稱選擇送貨時間功能描述用戶在支付訂單時選擇支付方式后選擇送貨時間執行者用戶、系統前置條件網絡正常；用戶創建訂單并選擇付款方式后置條件用戶已選擇送貨時間涉眾利益用戶基本路徑用戶選擇商品并提交訂單；系統選擇了支付方式；然后選擇送貨時間；擴展無字段列表送貨時間；業務規則預定業務規則：1、送貨收貨精確到天；備注4.購物車管理1）查看購物車列表表2-10查看購物車信息用例規約表用例編號SB051用例名稱查看購物車列表功能描述用戶查看購物車列表，并查看購物車信息續表2-10執行者用戶、系統前置條件網絡正常；用戶已登錄后置條件用戶成功查看購物車列表涉眾利益用戶基本路徑用戶已登錄；用戶查看購物車列表；若購物車列表為空，則提示購物車沒有商品，請添加；購物車不為空，查看購物車商品信息列表；擴展1、用戶沒有登錄1.1、系統提示用戶去登陸；2、購物車里的商品都是空的2.1、用戶選擇要添加到購物車的商品字段列表購物車商品；商品數量；商品信息；業務規則無備注2）管理購物車表2-11管理購物車用例規約表用例編號SB051用例名稱管理購物車功能描述用戶管理購物車，包括刪除無效商品、刪除商品和向購物車添加商品執行者用戶、系統前置條件網絡正常；用戶已登錄后置條件系統處理用戶的操作涉眾利益用戶基本路徑用戶在商品詳細信息頁面上將商品添加到購物車；系統查詢商品是否有庫存；把商品加入購物車；用戶清除加入購物車后庫存或其他原因不能結算的商品；用戶刪除不需要的商品；擴展1、用戶沒有登錄1.1、系統提示用戶去登陸；2、購物車商品為空2.1、用戶去挑選商品將其放入購物車列表中；3、購物車中的商品過期3.1過期商品無法結算；字段列表購物車商品；商品數量；商品信息；是否失效；是否被刪除；業務規則無備注3）購物車結算表2-12購物車結算用例規約表用例編號SB051用例名稱購物車結算功能描述用戶清點購物車中的商品執行者用戶、系統前置條件網絡正常；用戶已登錄；結算商品有效后置條件用戶成功結算涉眾利益用戶基本路徑用戶選擇需要結算的商品；選擇商品數量；提交結算；系統保存結算信息。擴展無字段列表商品數量；商品信息；業務規則無備注2.4本章總結本章主要從軟硬件、功能、非功能、技術、操作五個方面分析了基于Vue框架積木網上商城系統的需求，并且用用例圖和用例規約表說明了各功能模塊的功能、業務和規則，展示系統各組件的主要功能和聯系。

第3章系統設計3.1系統總體功能設計3.1.1系統總體設計積木網上商城系統總功能模塊如圖3-1所示：圖3-1系統總功能模塊圖3.2系統類圖圖3-2系統類圖3.3數據庫設計作為一個商城系統，數據庫設計上需要關聯多個表以查詢和更新信息，其中商品sku(庫存量單位）數據較為復雜，一個產品的多種屬性形成了層級之間的組合，加上商城要處理用戶的個人信息、購物車信息和訂單信息。本系統使用的數據庫是MYSQL數據庫，這個數據庫有體積小、高效、開源的特點，非常適合用于本系統的開發，本節將對系統用到的數據庫表結構進行詳細設計。3.3.1用戶表設計SB_USER表:用戶結構表中id為自增字段，其中用戶名、密碼、地址、頭像、郵箱設置為非空，用戶必須填寫這些字段。表3-1用戶結構表列名類型是否允許為空備注Idint(11)NO用戶編號,主鍵usernamevarchar(12)NO用戶名passwordvarchar(50)NO密碼sexintYES性別(1男，2女，3保密)phoneint(11)NO電話emailvarchar(50)NO郵箱addressvarchar(50)YES收貨地址photovarchar(100)YES頭像birthdatetimeYES生日ID_cardvarchar(50)YES身份證號3.3.2商品表設計SB_GOODS表:商品結構表中id為自增字段，goods_spec為聯系規格表的外鍵，其中商品名稱、商品編號、售價、規格、庫存為非空字段。表3-2商品結構表列名類型是否允許為空備注Idint(11)NO商品ID,主鍵goods_namevarchar(12)NO商品名稱goods_snvarchar(12)NO商品編號goods_numberintYES商品數量goods_priceintNO售價goods_specvarchar(50)NO規格goods_classvarchar(50)YES商品分類goods_stockintNO庫存3.4

系統流程圖系統流程圖是用戶、管理員對積木網上商城系統的流程進行分析說明，主要流程是用戶從注冊登錄賬號開始，完善個人信息，瀏覽商城商品，加入購物車，添加訂單，結算收貨結束流程，管理員在后臺對商品、用戶、系統等進行管理操作。3.4.1商品瀏覽流程圖圖3-1商品瀏覽流程圖商品瀏覽流程敘述：首頁展示積木商品；用戶瀏覽積木商品；根據商品搜索的條件，用戶根據商品名稱的模糊查詢找到符合條件的商品；用戶頁可以通過分類篩選搜索出商品；進入產品詳細信息頁面，用戶瀏覽產品圖片、詳細信息、規格、備注等信息；該頁面顯示商品的sku(庫存單位)信息。用戶選擇商品的規格和數量后，可以將其添加到購物車或直接購買；系統判斷用戶是否已經登錄，如果沒有，則提示用戶打開登錄頁面進行登錄操作；如果用戶登錄了，則進行下一步操作；7、登錄用戶操作后，系統會將商品添加到購物車或直接生成訂單，跳轉提交訂單，并進行支付操作。3.4.2用戶信息流程圖圖3-2用戶信息流程圖用戶信息流程敘述：用戶進入頁面前，系統判斷用戶狀態是否登錄，若沒登錄，提示并跳轉到登錄頁進行登錄；用戶進入用戶信息頁或收貨地址頁；用戶編輯用戶信息，用戶信息中所有字段都是必填的，用戶填寫全部用戶信息后提交到后臺，并結束此流程；用戶編輯收貨地址后，填寫收貨地址、收貨人、收貨手機號碼等，用戶可以選擇收貨地址作為默認收貨地址，然后提交信息；3.4.3訂單管理流程圖圖3-3訂單管理流程圖訂單管理流程敘述：用戶在商品詳情頁按下購買按鈕；系統后臺接收提交的訂單信息；3、系統根據訂單信息查詢該商品庫存是否充實，如果庫存為零，則提示用戶該商品庫存為零，拒絕訂單提交；若庫存充足，則完善訂單信息；4、用戶可以選擇支付方式，包括支付寶、微信支付和貨到付款；5、用戶根據自己需要選擇送貨時間；6、系統為用戶鎖定訂單信息；7、用戶需要在十分鐘內支付，如果用戶給沒有在十分鐘內支付，則系統自動取消該訂單，用戶可查看訂單狀態為“已取消”;用戶十分鐘內支付成功，訂單狀態改為“待收貨”；3.4.4購物車管理流程圖圖3-4購物車管理流程圖購物車管理流程敘述：在商品詳細信息頁面上選擇商品的規格和數量后，用戶按下“添加購物車”按鈕；系統后臺接收提交的加入購物車的商品信息；3、系統根據商品信息查詢商品的庫存是否已滿，如果庫存為零，系統提示用戶商品的庫存為零，并拒絕加入購物車請求；如果庫存充足，則把商品加入購物車；4、商品成功添加到購物車后，用戶可以選擇直接結算商品或查看購物車中的商品，并在管理商品后一起結算；5、購物車需要結算的商品提交到訂單中，生成訂單；3.5

系統接口設計3.5.1Axios請求接口庫本系統是使用的是Axios請求接口庫，Axios是一個在promise函數的基礎上開發的HTTP庫，簡單的講就是通過在瀏覽器中發送get、post請求。前幾年前端框架還沒有興起時，前端技術主要以JQuery為主，ajaxREF_Ref4301\r[12]能很好地適應JQuery，但是由于Vue、ReactREF_Ref24266\r\h[15]等前端框架的興起與發展，框架的優點在于不需要直接操作Dom，所以JQuery的作用越來越小，促進了Axios輕量級庫的發展，能替代Ajax在Vue框架里高效地請求后臺接口，獲取數據。Axios的特點在于擁有Ajax所有的功能，包括阻止所有后臺請求和響應，另外增加了提供了一些并發請求的接口、支持PromiseAPI等新特性。3.5.2Api接口設計《基于Vue框架積木網上商城系統》接口數據來源于ThinkPhp5.0后端的后臺接口，請求返回以JSON為格式的數據，接口文檔寫在阿里巴巴公司開發的RAP2系統上。1、注冊接口地址：/api/User/userInfo類型：POST狀態碼：200請求接口格式：├─username:String├─password:String返回格式JSON：code:String(成功)├─data:Array(數據)│├─id:Number│├─username:String│├─password:String└─msg:String(注釋)數據說明:表3-3注冊接口數據說明表序號參數名稱必須說明1code是200:請求成功；-200：請求失敗；2Id是用戶ID，唯一續表3-33Username是用戶賬號/用戶名4Password是賬號密碼5Msg否提示2、提交訂單接口地址：/api/Order/goodsAccounts類型：POST狀態碼：200請求接口格式：├─uid:String├─spec_id:String(規格id)├─gid:String(商品id)├─number:String(購買數量)└─address_id:String(地址id)返回接口格式JSON：├─code:String├─data:Array│└─order_sn:String(訂單號)└─msg:String數據說明:表3-4注冊接口數據說明表序號參數名稱必須說明1code是200:請求成功；-200：請求失敗；2Order_sn是生成的訂單號3Msg否提示3、添加或編輯商品地址：/api/Goods/addGoods類型：POST狀態碼：200請求接口格式：├─goods_name:String(商品名稱)├─shop_price:String(價格)├─photo:String(封面圖)├─goods_class:String(分類)├─spec:String(規格名稱)├─spec_value:String(規格值)├─spec_goods_sku:String(規格對應sku)├─goods_sn:String(商品編號)├─keywords:String(關鍵字)├─photos:String(圖片)├─spec_goods_price:String(規格對應價格)├─spec_goods_stock:String(規格對應庫存)├─goods_desc:String(描述)└─is_shelves:Number(是否上架1：是；2：否)返回接口格式JSON：├─code:String(code)├─data:String└─msg:String數據說明:表3-5添加或編輯商品數據說明表序號參數名稱必須說明1code是200:請求成功；-200：請求失敗；2data是添加或編輯成功后返回的商品信息3Msg否提示4、獲取商品規格地址：/api/Spec/getGoodsSpec類型：POST狀態碼：200請求接口格式：├─uid:String(用戶id)└─gid:String(商品id)返回接口格式JSON：├─code:String(code)├─data:Array│├─sp_id:String(規格ID)│├─sp_name:String(規格名稱)│└─spec_value:Array(規格值)│├─sp_value_id:String(規格值ID)│└─sp_value_name:String(規格值名稱)└─msg:String數據說明:表3-6獲取商品規格數據說明表序號參數名稱必須說明1code是200:請求成功；-200：請求失敗；2data是獲取商品規格后返回的規格信息3Msg否提示

第4章系統實現Vue前端框架的特點是使用單個頁面原理來開發應用程序，即整個項目只使用一個html頁面來加載和渲染頁面，這樣的好處在于減少瀏覽器在每次加載頁面時都加載http請求和文件，從而減少對網絡的依賴；因為是單頁面的原因，頁面在跳轉時不會有切換的效果讓用戶覺得網絡的延遲，路由跳轉頁面的方法讓網頁加載更有效率。編程時html、js、css代碼放在同一個文件里，使用@import的方法引入公共樣式，這樣子做的好處在于能更有效地將每一個頁面模塊抽離出來，方便以后的維護。4.1商品瀏覽模塊實現1、實現過程各種品牌的積木玩具商品、熱門商品、導購指南；首頁使用輪播圖的形式展示熱門的玩具商品，由于系統頁面上多處出現商品的展示，所以為了減少代碼的重復性，提高復用性，系統采用組件的形式處理商品展示的代碼，部分代碼實現如下：<template>

<li

class="GoodsItem">

<div

class="imgBox">

<img

:src="img"

alt="商品圖片"

@click="navTo('/mall/goods/'+id)"/>

</div>

<div

class="goodsInfo">

<span

class="goodsName

ellipsis"

@click="navTo('/mall/goods/'+id)">{{name}}</span>

<span

class="price">{{'￥'+price}}</span>

</div>

</li></template>2、界面展示圖4-1首頁界面圖4-2商品詳情界面生成商品規格代碼如下：addGuigeTableDataInput(id,

val)

{

this.addGuigeVal[0].ac_guigeVal.forEach((val,

index)

=>

{

if

(this.addGuigeVal[0].ac_guigeVal[index].val

!=

"")

{

this.addGuigeVal[1].ac_guigeVal.forEach((val1,

index1)

=>

{

if

(this.addGuigeVal[1].ac_guigeVal[index1].val

!=

"")

{

let

params

=

{

msg:

this.addGuigeVal[0].ac_guigeVal[index].val,

msg2:

this.addGuigeVal[1].ac_guigeVal[index1].val,

price:

"",

stock:

"",

allMsg:

this.addGuigeVal[0].ac_guigeVal[index].val

+

this.addGuigeVal[1].ac_guigeVal[index1].val

};

this.addGuigeTableData.push(params);

}

});

}

});

var

hash

=

{};

this.addGuigeTableData

=

this.addGuigeTableData.reduce(function(

item,

next

)

{

hash[next.allMsg]

?

""

:

(hash[next.allMsg]

=

true

&&

item.push(next));

return

item;

},

[]);

}4.2訂單支付模塊實現1、實現過程當用戶創建了訂單之后，系統提示支付，用戶點擊支付之后，系統會請求第三方支付接口（支付寶或微信），第三方支付平臺會返回支付狀態和支付編號，系統根據第三方支付回調函數返回的數據，在頁面上生成臨時支付二維碼，用戶掃碼后，系統會使用setInterval函數每秒請求支付狀態接口，若用戶支付成功，第三方支付接口返回支付成功狀態，完成支付操作。代碼實現如下：

$('#recharge-model').modal('show');

timer

=

setInterval(function

()

{

$.ajax({

type:

"POST",

url:

"/index.php?ac=pay_orderCheck",

dataType:

"json",

data:

{

order_sn:

data.data.order_sn

},

success:

function

(data)

{

if

(data.code

==

'SUCCESS')

{

layer.msg(data.msg);

$('#recharge-model').modal(

'hide');

clearInterval(timer)

setTimeout(window.location

.reload,

4000);

}

},

error:

function

()

{

layer.msg('網絡異常');

}

});

},

1000);

2、界面展示圖4-3訂單支付界面4.3用戶信息模塊實現1、實現過程本模塊是用于收集商城用戶的個人信息，功能實現上是用戶登錄后填寫自己的個人信息，同時必填項進行檢查，這種檢查是前端檢查，速度快一點，因為它不需要返回后端數據。同時，提示信息使用Element界面框架風格，使整個項目更加美觀。個人信息模塊使用Vue框架中的v-model語法糖來雙向綁定數據，當用戶實時輸入數據時，輸入框的值和一個數據是綁定的,輸入框的值變化,和他綁定的值也會發生變化，個人信息表單信息通過qs+axios傳輸數據到后端，qs是一個庫，它為查詢字符串解析和序列化增加了一些安全性，并且可以自動將數據轉換成序列化格式。2、界面展示圖4-4用戶信息界面圖4-5收貨地址界面設置默認收貨地址代碼：setPrime(id)

{

var

that

=

this;

this.$confirm("是否設置為默認地址?",

"提示",

{

confirmButtonText:

"確定",

cancelButtonText:

"取消",

type:

"warning"

})

.then(()

=>

{

let

postData

=

this.$qs.stringify({

uid:

this.uid,

token:

this.token,

id:

id

});

const

res

=

setPrime(postData);

res

.then(res

=>

{

that.getAddressList();

console.log(res.data);

})

.catch(e

=>

{

that.$message({

duration:

3000,

showClose:

true,

message:

e,

center:

true,

type:

"error"

});

});

})

.catch(()

=>

{

this.$message({

type:

"info",

message:

"已取消刪除"

});

});

},圖4-6設置收貨地址界面4.4訂單管理模塊實現1、實現過程在我的訂單頁面，用戶可以通過滑動或者點擊選項卡的方式來查詢自己訂單的狀態。除了顯示訂單的基本信息，用戶還可以根據訂單的不同狀態進行不同的操作。2、界面展示圖4-7訂單管理界面圖4-8提交訂單界面4.5購物車管理模塊實現1、實現過程購物車功能使主要是使用getCarList、updateCar、deleteCar等方法實現，請求數據接口訪問購物車列表，當列表數據中的iskucun字段為0時，頁面顯示該商品為不能購買，用戶可以通過deleteCar方法傳入該商品id以刪除失效的商品；2、界面展示圖4-9購物車管理界面

第5章系統測試5.1測試的目的項目的開發過程中，往往會出現數據或樣式的漏洞，而只觀察代碼是不可能全部找出的，所以在項目開發完成后，需要不斷地進行測試找出項目之中的漏洞，通過黑盒測試及白盒測試REF_Ref5049\r[13]等測試方式來達到盡量減少漏洞的存在，讓項目能正常的運行，一般這個測試的過程需要進行多遍，過程時間要比開發時間更長，來使項目完成度更高。5.2功能測試5.2.1商品瀏覽模塊測試表5-1商品瀏覽模塊測試表測試編號測試功能測試操作測試結果測試人員測試時間1檢查頁面是否響應式處理多次由電腦端到移動端分辨率切換多端樣式自適應改變江兆堯2020-03-182模糊搜索模糊輸入商品標題搜索沒有商品，提示結果為空；能正常顯示有模糊字段的商品江兆堯2020-03-183分類搜索分別點擊品牌、適用性別、適用年齡分類搜索商品能正常搜索和顯示不同分類的商品江兆堯2020-03-184查看商品詳情點擊商品圖片，后臺傳入商品ID頁面跳轉到商品詳情頁，并正常顯示商品詳情江兆堯2020-03-185.2.2用戶信息模塊測試表5-2用戶信息模塊測試表測試編號測試功能測試操作測試結果測試人員測試時間1用戶上傳頭像點擊上傳頭像成功上傳頭像，并返回上傳結果江兆堯2020-03-182檢查郵箱格式輸入錯誤的郵件格式提示郵箱格式錯誤江兆堯2020-03-183從中國地區數據庫中獲取地區信息