北京理工大學(xué)現(xiàn)代遠程（繼續(xù)）教育學(xué)院畢業(yè)設(shè)計（論文）PAGE86PAGE在線手機商城系統(tǒng)摘要手機在線商城系統(tǒng)是一款應(yīng)真實社會需求而開發(fā)的一款系統(tǒng)，今年受到疫情影響，在疫情階段，所有線下服務(wù)商因為不能直接營業(yè)，所以手里的貨物不能出售，而且員工需要發(fā)工資等原因，很多商戶因此而損失慘重，甚至破產(chǎn)倒閉。但是擁有線上渠道的商戶卻免此一劫，因為長時間維護線上商鋪的商戶缺少線下渠道后，仍然可以在線上售賣商品，所以損失并不是很大。因此，一套成熟的線上商城系統(tǒng)顯得尤為重要。該套系統(tǒng)分為前端小程序和后臺服務(wù)端兩部分組成，前端之所以選擇以小程序的方式作為展示形式，是因為微信在中國市場的普及率非常高，基本上有智能手機都會安裝一個，并且在生活中，大多數(shù)人的社交工具都是它，所以其內(nèi)置的小程序就成了我們的首選，開發(fā)成本低，后期便于推廣。商品管理使用常規(guī)的后臺管理模塊，將其放在服務(wù)器中，可以隨時隨地的使用瀏覽器訪問，方便使用。前端使用HbuildX開發(fā)工具，開發(fā)過程中使用的是現(xiàn)階段比較流行的uni-app框架，其框架主要使用HTML+CSS+JavaScript構(gòu)成，能夠快搭建商城頁面，后端使用了VScode開發(fā)工具，開發(fā)過程中使用了php的laravel框架，及后臺的laravel-admin后臺模板框架。數(shù)據(jù)庫使用現(xiàn)在主流的輕量數(shù)據(jù)庫MySQL。關(guān)鍵字：HTML5PHP數(shù)據(jù)庫WebMySQLSQLJSPB/SServer物聯(lián)網(wǎng)SocketAbstractMobileonlinemallsystemisasystemdevelopedinresponsetotherealsocialneeds.Thisyear,affectedbytheepidemic,allofflineserviceproviderscannotselltheirgoodsbecausetheycan'toperatedirectly.Moreover,employeesneedtopaywagesandotherreasons,manybusinessessufferheavylossesandevengobankrupt.However,merchantswithonlinechannelsareexemptfromthisdisaster,becausethemerchantswhomaintainonlineshopsforalongtimecanstillsellgoodsonlineafterlackingofflinechannels,sothelossisnotgreat.Therefore,amatureonlinemallsystemisparticularlyimportant.Thesystemiscomposedoffront-endsmallprogramsandback-endservers.Thereasonwhythefront-endchoosestodisplayintheformofsmallprogramsisthatwechathasaveryhighpopularityintheChinesemarket.Basically,therearesmartphonesthatwillbeinstalled.Inourlife,mostpeople'ssocialtoolsareit,sothebuilt-insmallprogramshavebecomeourfirstchoice,Thedevelopmentcostislow,anditiseasytopromoteinthelaterstage.Commoditymanagementusesthegeneralbackgroundmanagementmodule,putitintheserver,youcanusebrowseraccessanytimeandanywhere,convenienttouse.hefront-endusesthehbuildxdevelopmenttool,thedevelopmentprocessusesthecurrentstageofthemorepopularuniappframework,theframeworkmainlyusesHTML+CSS+JavaScript,canquicklybuildmallpages,theback-endusesvscodedevelopmenttools,thedevelopmentprocessusesphp'slaravelframework,andthebackgroundlaraveladmintemplateframework.Thedatabaseusesthemainstreamlightweightdatabasemysql.Keywords:HTMLJSCSSPHPHbuild目錄TOC\o"1-3"\h\u50241系統(tǒng)概述 6125461.1選題背景 6191471.2需求分析 6184561.3可行性分行 7202001.4系統(tǒng)功能分析和開發(fā)環(huán)境介紹 8251521.4.1系統(tǒng)功能分析 812981.4.2開發(fā)環(huán)境介紹 8188122系統(tǒng)開發(fā)涉及的相關(guān)理論知識介紹 11274652.1HTML 1160652.2.1HTML5新特性 11612.2JavaScript 12214392.2.1JavaScript腳本語言特點 13282752.3PHP基礎(chǔ) 13267802.3.1PHP的基本語法 13157522.3.2PHP語言特點 13199642.4MySQL 1488683系統(tǒng)概要設(shè)計 15142243.1系統(tǒng)設(shè)計思想 1544353.2總體框架結(jié)構(gòu) 1517613.3系統(tǒng)功能模塊劃分與系統(tǒng)流程分析。 16308193.3.1功能模塊劃分 16238833.3.2各功能模塊 16129203.3配置數(shù)據(jù)設(shè)計 18221943.3.1檢測內(nèi)容需求分析 18124013.3.2LaravelORM數(shù)據(jù)設(shè)計 19314513.4數(shù)據(jù)庫設(shè)計 20214673.4.1數(shù)據(jù)庫需求分析 2088493.4.2結(jié)構(gòu)設(shè)計(E-R圖設(shè)計) 21250853.4.3數(shù)據(jù)庫物理結(jié)構(gòu)設(shè)計 22140834小程序端設(shè)計 28318114.1界面設(shè)計 2894684.1.1商品界面設(shè)計 28125674.1.2手機商品詳情界面設(shè)計 28273604.1.3幫助界面設(shè)計 2942004.2程序設(shè)計 2980874.2.1小程序端主體程序設(shè)計 29187914.2.2商品類型程序設(shè)計 434604.2.3商品詳情設(shè)計 48230844.2.4商品訂單列表 49289595后臺服務(wù)端設(shè)計 7142275.1系統(tǒng)登錄 71247835.1.1登錄界面設(shè)計 7148485.1.2登錄代碼設(shè)計 71184785.2權(quán)限管理 81265015.2.1權(quán)限界面設(shè)計 8198545.2.2權(quán)限管理代碼設(shè)計 82174165.3商品上傳 10219755.3.1商品界面界面設(shè)計 10294035.3.2商品界面代碼設(shè)計 10378535.4小程序用戶 106251635.4.1小程序用戶界面設(shè)計 106219535.4.2小程序用戶代碼設(shè)計 10721406運行環(huán)境、測試及運行分析 109127416.1運行環(huán)境 109310506.1.1硬件環(huán)境 1093046.1.2軟件環(huán)境 10943706.2系統(tǒng)測試 109250556.2.1測試項目 109185736.2.2結(jié)果分析 110148366.3系統(tǒng)使用 1109049總結(jié) 11125745致謝 11217952參考文獻 113第七章總結(jié)1系統(tǒng)概述1.1選題背景受到疫情影響，大量的線下實體店在疫情期間沒有銷量和業(yè)務(wù)往來。在這期間，每家實體店毫無營收，并且每月要承擔大量的房屋租金，員工工資等一系列費用，損失慘重。與之對應(yīng)的是，擁有線上服務(wù)平臺的產(chǎn)業(yè)反而因為疫情影響大賺特賺。從線上商城平臺分析來看，擁有線上平臺的商戶，可以直接將所有的商品信息發(fā)布在線上商城中。商戶將平臺的二維碼等信息推廣出去后，用戶不需要去實體店，只需要通過推廣信息，就可以進入線上商城平臺，看到心儀的商品后，直接在平臺下單，商戶通過快遞的方式將商品發(fā)送客戶，這樣的話，就形成了無接觸就可以購買商品的方式，大大減少了現(xiàn)階段的感染風(fēng)險。即便疫情完全結(jié)束后，線上商城仍然可以保留大量的活躍用戶。所以，我應(yīng)一家線下手機實體店的需求，通過了解店主需求，我需要做一款在線手機商城系統(tǒng)。1.2需求分析從前期需求調(diào)研來看，當前系統(tǒng)主要分為兩部分，即用來給客戶使用的客戶端和用來給商戶使用的商品管理后臺。從市場行情來說，在中國，使用智能手機的用戶，80%都會安裝微信，所以微信中的微信公眾號、小程序等成了頭號選擇。在再次詢問商戶意見后，我決定用戶使用的線上商城將以小程序的方式制作出來。因為用戶使用公眾號的話，進入商城的時候需要多次點擊后才能進入商城中，而且會因為公眾號過多而無法找到公眾號入口。但是小程序不同，用戶通過推廣碼進入商城后，系統(tǒng)會自動將其放置在微信的上方，用戶下拉后即可進入，所以從客戶體驗來說，小程序無疑是最好的選擇。線上商城作為現(xiàn)在最常用的軟件之一，其功能需求等都已經(jīng)非常明確，但是由于資金等方面原因，我們在開發(fā)過程中需要對這些功能進行篩選，挑選出我們最需要做的，將其他不符合我們實際平臺需求的功能統(tǒng)統(tǒng)擯棄掉。因此，我們在做過大量分析后發(fā)現(xiàn)，客戶端只需要客戶注冊，積分統(tǒng)計，常用地址，收藏、下單、支付等主要功能。面向商戶的商品管理端，主要是用來管理客戶、訂單、商品三部分，客戶部分，主要管理客戶的信息，客戶積分及客戶常用地址、商品收藏等。訂單管理中，當用在客戶端下單后，后臺需要直觀的看到客戶下的訂單，然后快速備貨，并將其發(fā)出去，然后改變訂單狀態(tài)，讓客戶及時看到他下單的情況。商品部分需分為兩部分，一為商品分類，二為商品上傳。商品分類是為了更加直觀的通過分類的方式將所有商品展示出來。商品上傳是將商品信息上傳到平臺中，客戶端通過用戶點擊將商品信息展示出來。綜合以上的大致需求分析，我們就可以進行可行性分析及后續(xù)開發(fā)。1.3可行性分行隨著時間的變遷，每年都有新的技術(shù)在被發(fā)現(xiàn)，而每年又有許多就得技術(shù)被淘汰，所以在做開發(fā)時，我們往往要選擇一種生態(tài)圈較為完整、健康的語言去做軟件開發(fā)，方便后期維護、符合大眾化、人性化需求。本系統(tǒng)可行性分析包括以下三方面內(nèi)容：技術(shù)可行性。隨著時間的發(fā)展。大部分應(yīng)用每時每刻都可能進行升級，而在以前的C/S架構(gòu)中，C端的每次更新都要重新下載和安裝，即麻煩，而且又不能實時跟新，所以B/S架構(gòu)的軟件成了我們的首選。綜合而言，B/S架構(gòu)的優(yōu)勢有以下幾個優(yōu)點易推廣，易于維護a）幾乎現(xiàn)在每個可視化工具中都會或多或少的安裝瀏覽器。b）所有可視化界面都是通過瀏覽器去展示。c）繼承與三層C/S架構(gòu)，擁有三層C/S架構(gòu)的優(yōu)勢。d）所有資源都在服務(wù)器中，每次升級，只需要更新服務(wù)器中的資源即可。2）開發(fā)成本低a）瀏覽器中一般使用的都是超文本標簽語言，學(xué)習(xí)難度較低。b）生態(tài)圈即為完善，有大量的框架及插件可用。c）開發(fā)速度快，不需要大量編碼工作。3）跨平臺、跨設(shè)備a）不論是Linux系統(tǒng)還是windows系統(tǒng)電腦，都可以安裝瀏覽器，有瀏覽器，就可以將可視化界面展示出來。b）隨著技術(shù)的更新，現(xiàn)在出現(xiàn)了通過webkit內(nèi)核可以在移動設(shè)備中使用HTML等語言使用的技術(shù)，所以只需要開發(fā)一套，就可以在不同的設(shè)備用使用。軟件開發(fā)人員分配可行性，由于商城項目功能并不多，而且技術(shù)框架非常完善，不需要重新制作大量的“車輪”,所以在人員方面，不需要其他人參與，一人即可完成所有功能開發(fā)。數(shù)據(jù)安全可行性。商戶通過商品管理后臺管理用戶信息和商品信息，用戶在登錄時，系統(tǒng)獲取微信授權(quán)，獲取微信中用戶的一些基本信息和openid，后臺管理通過openid對用戶的一些操作進行管理，最終所有的信息都會儲存在數(shù)據(jù)庫中，開發(fā)過程中，商品管理后臺是通過passport進行加密驗證，保證信息和數(shù)據(jù)的安全性。1.4系統(tǒng)功能分析和開發(fā)環(huán)境介紹1.4.1系統(tǒng)功能分析在線手機商城系統(tǒng)分為小程序和后臺管理兩部分，小程序需要實現(xiàn)用戶登錄，商品分類、商品展示、商品收藏、下單功能。后臺管理需要實現(xiàn)分類管理、客戶管理、商品管理及訂單管理。1.4.2開發(fā)環(huán)境介紹HTMLHTML又被稱為為超文本標記語言，其語言特性是通過不同的標簽等標識字符，在其規(guī)范基礎(chǔ)上對文檔格式統(tǒng)一化，web開發(fā)人員通過統(tǒng)一化標識的處理，將想要展示的文檔格局其規(guī)范標準寫成HTML文件，瀏覽器根據(jù)同樣的規(guī)范對這些文件進行解釋，并將解釋內(nèi)容展現(xiàn)給使用人員。JavaScript:JavaScript，在web發(fā)展初期，因為基礎(chǔ)的html只能實現(xiàn)簡單的文字信息展示和編輯，并不能控制復(fù)雜的驗證邏輯。因此誕生了JavaScript，而作為其開發(fā)組織的Netscap，因為在與當時知名Sun公司合作，所以Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。它通過瀏覽器對其語言進行解釋執(zhí)行，所以既是一種高級編程語言，也是一門\o"動態(tài)類型"動態(tài)類型，\o"面向?qū)ο蟪绦蛟O(shè)計"面向?qū)ο螅╘o"基于原型的編程"基于原型）的\o"解釋型語言"解釋型語言。CSS:CSS的全稱是CascadingStyleSheets中文寓意為層疊樣式表。在web剛開始的時候，只有簡單的標簽HTML，只能擁有簡單的樣式，所有樣式都是簡單丑陋。但是隨著瀏覽器的發(fā)展，HTML無法滿足用戶的需求，所以出現(xiàn)了CSS，通過CSS樣式可以修飾HTML，讓其展示出不同的效果樣式。PHP:PHP全稱為PersonalHomePage，雖然是一種通用開源腳本語言，但是可以在服務(wù)器和web環(huán)境下執(zhí)行，結(jié)構(gòu)又與C語言有的類似，語法中包含了部門其他語言的設(shè)計思維，入門簡單、生態(tài)圈完善，強大的跨平臺特性，內(nèi)置了豐富的各類庫，所以備受喜愛和關(guān)注。在web應(yīng)用中，有著較高的數(shù)據(jù)傳送處理水平和輸出水平，在PHP5.0以后，更是新增了面向?qū)ο蟮刃绿匦裕琍HP7.0以后，其web服務(wù)處理水平甚至遠超Java，是現(xiàn)在中小型軟件公司最喜歡的語言之一。Vue:Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架，它自誕生起都是自底向上逐層應(yīng)用，只關(guān)注圖層，方便與第三方庫和項目整合，其核心簡單靈巧，漸進式框架讓它可以應(yīng)付任何規(guī)模的應(yīng)用。Uni-App:uni-app是使用Vue.js開發(fā)的前端框架，只需要使用HTML+CSS+Js就可以編寫一套代碼，這套代碼通過特定的編譯器，可以生成微信小程序，IOS和Android的App,大大減少了開發(fā)費用與開發(fā)周期。Laravel:Laravel是基于PHP的一套框架，它因為簡潔優(yōu)雅而出名，只需要使用簡單應(yīng)用邏輯，就可以構(gòu)建出一個表現(xiàn)力很強的網(wǎng)站，語法豐富靈活，配合高質(zhì)量的文檔，可以幫助使用者快速構(gòu)建一個功能強大的服務(wù)端。MySQL數(shù)據(jù)庫:MySQL是一種開源的關(guān)系型數(shù)據(jù)庫，使用的最常用SQL語言進行數(shù)據(jù)庫管理，雖然我們常說MySQL是輕量級數(shù)據(jù)庫，但是在運行速度上并不比Oracle等數(shù)據(jù)庫差，事實上正是因為其小巧、可靠、速度又快，所以備受程序員的喜愛和關(guān)注，再不需要事務(wù)處理的情況下，MySQL無疑是最好的數(shù)據(jù)庫，所以我們在這個項目中，就用MySQL數(shù)據(jù)庫。Nginx服務(wù)器:Nginx服務(wù)器是一個免費的開源的輕量的高性能的Web應(yīng)用服務(wù)器，同時提供反向代理服務(wù)及SMTP等服務(wù)，支持高達5萬的并發(fā)量，可以支持內(nèi)部直接使用Redis和PHP，無緩存的反向代理加速，簡單的負載均衡及容錯。備受開發(fā)者們的喜愛。開發(fā)環(huán)境配置:硬件環(huán)境：（1）處理器:AMDRyzen32200GwithRadeonVegaGraphics3.5GHz.（2）安裝內(nèi)存（RAM）:8.00GB.（3）硬盤500G軟件環(huán)境：（1）操作系統(tǒng)：Windows10（2）數(shù)據(jù)庫：MySQL5.7（3）開發(fā)語言：HTML、JavaScript、CSS、PHP（4）系統(tǒng)類型：64位操作系統(tǒng)

2系統(tǒng)開發(fā)涉及的相關(guān)理論知識介紹2.1HTMLHTML5這種超文本編輯語言是構(gòu)建Web瀏覽器等內(nèi)容的方式。HTML5既是互聯(lián)網(wǎng)新一代標桿，也是現(xiàn)在組成互聯(lián)網(wǎng)在線內(nèi)容的方式．它可以被認為新時代的核心技術(shù)之一。HTML產(chǎn)生于1990年，1997年HTML4成為互聯(lián)網(wǎng)標準，H5在從前HTML4.01的基礎(chǔ)上取其精華去其糟粕，雖然程序員在開發(fā)的時候不會都應(yīng)用到，但是對于這些技術(shù)的新特性，每一個人前端程序員都必須有所有了解。這些技術(shù)大概有以下幾個點，主要是關(guān)于正常圖像，定位位置，數(shù)據(jù)存儲，多線程等功能的。新增了一些關(guān)于圖像繪制的canvas，多媒體的video，離線儲存的localStorage等新元素，大大提高了開發(fā)速度的同時，將web應(yīng)用推向了新時代軟件B/S架構(gòu)的頂端。HTML5讓W(xué)eb平臺更加趨于成熟和穩(wěn)定，在當前平臺上，所有常用標簽及與設(shè)備的交互都進行了嚴格規(guī)范。智能瀏覽器表單：在以往\t"/item/html5/_blank"表單中，用戶在瀏覽器中填寫表單內(nèi)容時，都是需要程序使用JS等方式實現(xiàn)部分內(nèi)容的記錄功能。但是智能表單在以往的表單基礎(chǔ)上，賦予了其新的特性。H5在智能表單方面。input的新的類型和屬性增強了其擴展性和多樣性，而瀏覽本身在讀取input的對應(yīng)屬性時，根據(jù)用戶的常用習(xí)慣，自動對賬號密碼等進行自主記錄，再加上新增加的一些表單標簽，使得web程序員減少了大量JavaScript代碼。2.2JavaScriptJavaScript它是一種直譯式腳本語言，其語言類型具有動態(tài)、弱引用、基于原型的等特點，是瀏覽器的內(nèi)置支持類型。瀏覽器中的的解釋器被稱為JavaScript引擎，在客戶端瀏覽器及現(xiàn)階段web應(yīng)用，游戲引擎中具有廣泛性，最早是在HTML（標準通用標記語言下的一個應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能,為用戶提供更流暢美觀的瀏覽效果。它具有一下幾個特性：1、腳本語言。2、基于對象。3、簡單。4、動態(tài)性。5、跨平臺性。2.3PHP基礎(chǔ)PHP是PHP的遞歸首字bai母縮寫：HypertextPreprocessor，一種用于創(chuàng)建動態(tài)和交互式HTML網(wǎng)頁的腳本語言。當網(wǎng)站訪問者打開頁面時，服務(wù)器處理PHP命令，然后將結(jié)果發(fā)送到訪問者的瀏覽器。2.3.1PHP的基本語法PHP獨特的語法混合了C、Java、Perl以及PHP自創(chuàng)的語法。它可以比CGI或者Perl更快速地執(zhí)行動態(tài)網(wǎng)頁。用PHP做出的動態(tài)頁面與其他的編程語言相比，PHP是將程序嵌入到HTML文檔中去執(zhí)行，執(zhí)行效率比完全生成HTML標記的CGI要高許多。PHP還可以執(zhí)行編譯后代碼，編譯可以達到加密和優(yōu)化代碼運行，使代碼運行更快。2.3.2PHP語言特點開源性和免費性由于PHP的解釋器的源代碼是公開的，所以安全系數(shù)較高的網(wǎng)站可以自己更改PHP的解釋程序。另外，PHP運行環(huán)境的使用也是免費的?？旖菪訮HP是一種非常容易學(xué)習(xí)和使用的一門語言，它的語法特點類似于C語言，但又沒有C語言復(fù)雜的地址操作，而且又加入了面向?qū)ο蟮母拍?，再加上它具有簡潔的語法規(guī)則，使得它操作編輯非常簡單，實用性很強。數(shù)據(jù)庫連接的廣泛性PHP可以與很多主流的數(shù)據(jù)庫建立起連接，如MySQL、ODBC、Oracle等，PHP是利用編譯的不同函數(shù)與這些數(shù)據(jù)庫建立起連接的，PHPLIB就是常用的為一般事務(wù)提供的基庫。面向過程和面向?qū)ο蟛⒂迷赑HP語言的使用中，可以分別使用面向過程和面向?qū)ο螅铱梢詫HP面向過程和面向?qū)ο髢烧咭黄鸹煊?，這是其它很多編程語言是做不到的。2.4MySQLMySQL是一個開放源代碼的關(guān)系數(shù)據(jù)庫管理系統(tǒng)。MySQL架構(gòu)可以在多種不同場景中應(yīng)用并發(fā)揮良好作用。主要體現(xiàn)在存儲引擎的架構(gòu)上，插件式的存儲引擎架構(gòu)將查詢處理和其它的系統(tǒng)任務(wù)以及數(shù)據(jù)的存儲提取相分離，其事務(wù)具有ACID的特性:原子性：事務(wù)中的所有操作要么全部提交成功，要么全部失敗回滾,比如你從取款機取錢,這個事務(wù)可以分成兩個步驟:1劃卡,2出錢.不可能劃了卡,而錢卻沒出來.這兩步必須同時完成.要么就不完成.一致性：數(shù)據(jù)庫總是從給一個一致性的狀態(tài)轉(zhuǎn)換到另一個一致性的狀態(tài)。例如,完整性約束了a+b=10,一個事務(wù)改變了a,那么b也應(yīng)該隨之改變.不管數(shù)據(jù)怎么改變。一定是符合約束。隔離性：一個事務(wù)所做的修改在提交之前對其它事務(wù)是不可見的。兩個以上的事務(wù)不會出現(xiàn)交錯執(zhí)行的狀態(tài).因為這樣可能會導(dǎo)致數(shù)據(jù)不一致。持久性：一旦事務(wù)提交，其所做的修改便會永久保存在數(shù)據(jù)庫中。

3系統(tǒng)概要設(shè)計3.1系統(tǒng)設(shè)計思想系統(tǒng)基本架構(gòu)是軟件能夠支撐用戶使用的基礎(chǔ)，一個好的系統(tǒng)設(shè)計思想可以讓系統(tǒng)開發(fā)的迭代升級更加簡單易懂，在開發(fā)時，根據(jù)系統(tǒng)設(shè)計的思想，我們可以清楚寫出測試樣例，保證系統(tǒng)上線時，BUG輸出得到控制。3.2總體框架結(jié)構(gòu)本系統(tǒng)主體采用B/S(Browser/Server,即瀏覽器/服務(wù)器)結(jié)構(gòu)。隨著Web的興起，web瀏覽器成了客戶端最主要的應(yīng)用軟件,而這款軟件通過規(guī)范HTML等標簽，可以將所需要的內(nèi)容展示出來。由于web瀏覽器的限制，功能數(shù)據(jù)計算等不能在瀏覽器進行大量使用，所以需要將重要的邏輯等功能核心放在服務(wù)器內(nèi)使用。所以就成了我們現(xiàn)在所說的B/S架構(gòu)。B/S架構(gòu)可以說是C/S架構(gòu)的改進，也可以說是三層C/S架構(gòu)，用瀏覽器實現(xiàn)了以前需要大量開發(fā)且復(fù)雜的軟件內(nèi)容，就開發(fā)成本而言就降低了很多。B/S架構(gòu)分為三層，第一層為瀏覽器，也就是常說的客戶端，這個客戶端只有簡單的輸入展示功能，所以只能處理一些非常簡單的邏輯事物，但是優(yōu)點是這些內(nèi)容只要有瀏覽器就能用，所以可以滿足大多數(shù)用戶的需求。第二層是web服務(wù)器，它控制信息傳送，數(shù)據(jù)計算，調(diào)用數(shù)據(jù)庫及其他服務(wù)的作用，是軟件主要的運作地方。第三層就是數(shù)據(jù)庫，所有的前端展示數(shù)據(jù)都是從數(shù)據(jù)庫中取出來，經(jīng)過第二層的邏輯計算后，將數(shù)據(jù)展示在第一層中，反之亦然，用戶通過第一次數(shù)據(jù)輸入后，經(jīng)過第二層處理，最終儲存在了第三層數(shù)據(jù)中。圖3-1B/S架構(gòu)示意圖3.3系統(tǒng)功能模塊劃分與系統(tǒng)流程分析。3.3.1功能模塊劃分系統(tǒng)模塊劃分如圖3-2所示，將系統(tǒng)分別9個模塊，每個模塊負責(zé)的功能相對專一。圖3-2系統(tǒng)模塊圖3.3.2各功能模塊(1）后臺系統(tǒng)用戶登錄主要功能：管理員及員工授權(quán)用戶安全登錄。因為使用了大量語言框架，在后臺登錄方面，我們使用的是普通session授權(quán)方式，最高權(quán)限使用者創(chuàng)建子賬號，用戶通過輸入賬號密碼，后臺對密碼MD5加密后與儲存在數(shù)據(jù)庫的加密密碼對比，一致則登錄，不一致則登錄失敗，。(2）前端用戶登錄系統(tǒng)主要功能：小程序端登錄功能：用戶通過微信進入小程序，系統(tǒng)通過客戶授權(quán)后獲取微信登錄授權(quán)，微信將客戶的openID發(fā)給我們系統(tǒng)，然后進行驗證，確認用戶信息和其是否登錄。(3）用戶管理系統(tǒng)主要功能：修改、查詢功能該功主要是對登錄用戶的一些常用信息進行查詢和修改，不能新增的原因是：用戶來自微信，我們只能通過獲取微信openID才能夠新增客戶(4）產(chǎn)品分類系統(tǒng)主要功能：對將要錄入商品進行分類。在前端頁面展示時，我們不能將所有的商品都展示出來，所以我們需要商品分類，在錄入商品的時候根據(jù)商品錄入，前端根據(jù)分類進行展示。(5）商品錄入系統(tǒng)主要功能：商品的增加，刪除，修改等。作為商城系統(tǒng)，商品錄入時最為重要的一部分，其中包括商品圖片錄入，庫存信息錄入，標題、名稱，郵寄方式等信息。(6）訂單管理系統(tǒng)主要功能：訂單管理前端頁面，用戶選購喜歡的產(chǎn)品，然后立即購買，系統(tǒng)獲取到前端傳來的購買信息，根據(jù)信息，然后找到商品，扣除庫存，核對訂單，等待管理人員進行發(fā)貨。(7）購物車管理主要功能：購物車的改和差，用戶將想要購買的商品儲存在購物車中，方便有時間了購買和使用。(8）收藏商品主要功能：收藏功能的增刪改查。前端用戶中心商品收藏，用戶在瀏覽商品的時候往往會對一些商品進行收藏，所以收藏商品功能可以幫助，用戶點擊收藏后，系統(tǒng)將收藏的商品保存在數(shù)據(jù)庫中，用戶在個人中心收藏頁面可以看到自己收藏過的商品。(9）快遞模板錄入系統(tǒng)主要功能：線上商城一般都具有快遞功能，所以需要快遞設(shè)置模板。管理人員在后臺錄入快遞模板，不過，因為其商城只服務(wù)于本地區(qū)，所以只錄入自提和送貨上門。(10）前端API主要功能：后臺實現(xiàn)的所有功能在小程序中展示時，需要接口作為支撐。接口較多，有登錄，顯示、下單等接口。3.3配置數(shù)據(jù)設(shè)計3.3.1檢測內(nèi)容需求分析在線手機商城系統(tǒng)分為兩部分，一部分為手機端的微信小程序，另一部分為服務(wù)器。他們之間的數(shù)據(jù)傳輸我們統(tǒng)一使用JSON格式進行數(shù)據(jù)交換，JSON格式是一種完全獨立于語言的文本格式，通過這種格式，規(guī)范了我們數(shù)據(jù)傳輸時候的標準，方便前后端在獲取到數(shù)據(jù)后進行解析。具體配置數(shù)據(jù)設(shè)計如下（數(shù)據(jù)均為測試使用）：3.3.2LaravelORM數(shù)據(jù)設(shè)計Laravel自帶的EloquentORM為您的數(shù)據(jù)庫提供了一個優(yōu)雅的、簡單的ActiveRecord實現(xiàn)。每一個數(shù)據(jù)庫的表有一個對應(yīng)的"Model"用來與這張表交互。3.4數(shù)據(jù)庫設(shè)計3.4.1數(shù)據(jù)庫需求分析公手機在線商城系統(tǒng)的后端服務(wù)主要目的是通過控制產(chǎn)品的類型及數(shù)據(jù)控制小程序中的展示內(nèi)容，運營人員通過修改該其內(nèi)容，控制展示類型及效果，再通過瀏覽器反饋的信息進行統(tǒng)計匯總，信息部技術(shù)人員通過數(shù)據(jù)來調(diào)整，以便提出更適合的升級方案。具體數(shù)據(jù)表結(jié)構(gòu)如下：表1:前端用戶信息表序號字段類型允許為空注釋1IdIntNO用戶ID2Namevarchar(20)No姓名3emailvarchar(50)No郵箱4Email_verified_atvarchar(6)YES郵箱驗證編號5passwordvarchar(20)No密碼6Remember_tokenvarchar(20)NoToken7oppenidvarchar(20)YES微信oppenid8guidvarchar(20)No唯一標識9phoneint（11）YES電話10intergralintYES積分表2:商品信息序號字段類型允許為空注釋1idvarchar(36)NOid2Store_idintNO所屬商戶3Type_idintNO所屬類型4Titlevarchar(1)NO商品名5Goods_numintYES商品編號6Read_numintYES瀏覽數(shù)量7Sugvarchar(6)NO規(guī)格8Pricevarchar(6)NO價格9Summaryvarchar(200)YES商品簡介10ContentTextNO商品詳情11Tagsvarchar(1)YES標簽12Create_atdateYES創(chuàng)建時間表3:一級分類序號字段類型允許為空注釋1lidvarchar(36)NOid2Titlevarchar(20)NO分類名稱3Store_idvarchar(20)NO所屬商戶4avatarvarchar(50)YES類型封面圖5Summaryvarchar(6)YES類型簡介6Create_atvarchar(20)YES創(chuàng)建時間表4:二級分類序號字段類型允許為空注釋1idintNOid2Titlevarchar(20)NO分類名稱3Store_idintNO所屬商戶4avatarvarchar(50)YES類型封面圖5Summaryvarchar(6)YES類型簡介6Create_atdateYES創(chuàng)建時間7Parent_idintYES所屬父類7Parent_type_idintYES所屬一級分類表5:訂單表序號字段類型允許為空注釋1uidvarchar(36)NO用戶id2Store_idvarchar(20)NO登錄3Statusvarchar(20)NO訂單狀態(tài)4All_pricevarchar(1)NO商品價格5numintNO商品數(shù)量6Order_numintYES訂單編號7contentvarchar(36)YES訂單詳情在需要關(guān)聯(lián)其他數(shù)據(jù)表的數(shù)據(jù)表分別定義的需關(guān)聯(lián)表的主鍵Id，通過Id來關(guān)聯(lián)兩張表的數(shù)據(jù)信息。3.4.2結(jié)構(gòu)設(shè)計(E-R圖設(shè)計)整體E-R模型，如圖3-3所示。圖3-3整體E-R模型3.4.3數(shù)據(jù)庫物理結(jié)構(gòu)設(shè)計數(shù)據(jù)庫物理結(jié)構(gòu)設(shè)計主要包含兩部分，一是數(shù)據(jù)庫的邏輯設(shè)計：設(shè)計數(shù)據(jù)庫的邏輯結(jié)構(gòu)，與具體的DBMS并無關(guān)系，只是單純的是表與表之間的邏輯結(jié)構(gòu)。第二部分使用laravel的orm組件，可以通過創(chuàng)建數(shù)據(jù)模型生成數(shù)據(jù)庫表所以首先創(chuàng)建數(shù)據(jù)模型Model，利用laravel命令創(chuàng)建數(shù)據(jù)庫表及其遷移表：PHPartisanmake:modelUser-m1)定義用戶信息表Schema::create('users',

function

(Blueprint

$table)

{$table->id();$table->string('name');$table->string('email')->unique();$table->timestamp('email_verified_at')->nullable();$table->string('password');$table->rememberToken();$table->timestamps();});定義后臺管理權(quán)限角色信息表Schema::create('users',

function

(Blueprint

$table)

{$table->id();$table->string('name');$table->string('email')->unique();$table->timestamp('email_verified_at')->nullable();$table->string('password');$table->rememberToken();$table->timestamps();});Schema::create($this->config('database.users_table'),

function

(Blueprint

$table)

{$table->bigIncrements('id');$table->string('username',

120)->unique();$table->string('password',

80);$table->string('name');$table->string('avatar')->nullable();$table->string('remember_token',

100)->nullable();$table->timestamps();});Schema::create($this->config('database.roles_table'),

function

(Blueprint

$table)

{$table->bigIncrements('id');$table->string('name',

50);$table->string('slug',

50)->unique();$table->timestamps();});Schema::create($this->config('database.permissions_table'),

function

(Blueprint

$table)

{$table->bigIncrements('id');$table->string('name',

50);$table->string('slug',

50)->unique();$table->string('http_method')->nullable();$table->text('http_path')->nullable();$table->integer('order')->default(0);$table->bigInteger('parent_id')->default(0);$table->timestamps();});Schema::create($this->config('database.menu_table'),

function

(Blueprint

$table)

{$table->bigIncrements('id');$table->bigInteger('parent_id')->default(0);$table->integer('order')->default(0);$table->string('title',

50);$table->string('icon',

50)->nullable();$table->string('uri',

50)->nullable();$table->timestamps();});Schema::create($this->config('database.role_users_table'),

function

(Blueprint

$table)

{$table->bigInteger('role_id');$table->bigInteger('user_id');$table->unique(['role_id',

'user_id']);$table->timestamps();});Schema::create($this->config('database.role_permissions_table'),

function

(Blueprint

$table)

{$table->bigInteger('role_id');$table->bigInteger('permission_id');$table->unique(['role_id',

'permission_id']);$table->timestamps();});Schema::create($this->config('database.role_menu_table'),

function

(Blueprint

$table)

{$table->bigInteger('role_id');$table->bigInteger('menu_id');$table->unique(['role_id',

'menu_id']);$table->timestamps();});Schema::create($this->config('database.permission_menu_table'),

function

(Blueprint

$table)

{$table->bigInteger('permission_id');$table->bigInteger('menu_id');$table->unique(['permission_id',

'menu_id']);$table->timestamps();});Schema::create($this->config('database.operation_log_table'),

function

(Blueprint

$table)

{$table->bigIncrements('id');$table->bigInteger('user_id');$table->string('path');$table->string('method',

10);$table->string('ip');$table->text('input');$table->index('user_id');$table->timestamps();});3)商戶信息表Schema::create('admin_detaily',

function

(Blueprint

$table)

{$table->increments('id');$table->string('title')->default('商戶');$table->string('avatar')->nullable();$table->text('images')->nullable();$table->float('evaluate')->default('10');$table->string('store_card')->default('');$table->string('card_image')->nullable();$table->boolean('status')->default('1');$table->text('summary')->nullable();$table->string('number_card')->unique()->default('0');$table->string('address')->default('xxxxxx');$table->integer('city_number');$table->string('lng')->nullable();$table->string('lat')->nullable();$table->string('oppenid')->nullable();$table->string('qqid')->nullable();$table->string('weiboid')->nullable();$table->timestamps();$table->softDeletes();});4)商品類型表Schema::create('Type',

function

(Blueprint

$table)

{$table->increments('id');$table->bigInteger('parent_id')->default('0');$table->bigInteger('parent_type_id')->default('0');$table->string('title')->default('');$table->string('avatar')->nullable();$table->string('summary')->nullable();$table->timestamps();$table->softDeletes();});5)商品信息表Schema::create('Goods',

function

(Blueprint

$table)

{$table->increments('id');$table->bigInteger('store_id');$table->bigInteger('type_id');$table->string('title')->default('');$table->string('goods_num')->default('');$table->string('hours')->default('0');$table->integer('order_number')->default('0');$table->string('read_number')->default('0')->nullable();$table->float('evaluate')->default('10')->nullable();$table->text('sug')->nullable();$table->text('tags')->nullable();$table->float('price');$table->bigInteger('express_id');$table->boolean('status')->default('1');$table->text('images');$table->string('summary')->default('');$table->string('content')->nullable();$table->timestamps();$table->softDeletes();});

4小程序端設(shè)計4.1界面設(shè)計4.1.1商品界面設(shè)計小程序商品類型界面設(shè)計如圖4-1所示。圖4-1手機類型界面4.1.2手機商品詳情界面設(shè)計手機商城面界面設(shè)計如下：圖4-2手機商城界面4.2程序設(shè)計4.2.1小程序端主體程序設(shè)計小程序端是基于微信客戶端開發(fā)的一款應(yīng)用，主題用Vue框架及uni-app框架制作而成，其用到的語言主要是HTML+CSS+JS。小程序主體業(yè)務(wù)是在線商城系統(tǒng)，所以我們主頁應(yīng)該第一時間顯示手機列表。4.2.2商品類型程序設(shè)計每個商品都有類型，手機也有類型，例如vivo手機就分為很多系列，所在程序中我們也需要將一塊內(nèi)容做進來4.2.3商品詳情設(shè)計每個商品都有自己的詳情頁面，我們通過詳情頁面可以查看當前手機的參數(shù)就，價格等，并將其可以加入購物車。4.2.4商品訂單列表有商品就有下單功能，我們可以對喜歡的產(chǎn)品進行下單，或者將其放在購物車中，方便后面的支付。5后臺服務(wù)端設(shè)計5.1系統(tǒng)登錄系統(tǒng)整體使用MVC的開發(fā)模式，也就是Model數(shù)據(jù)層控制數(shù)據(jù)庫的增刪改查，View層是展示給用戶的界面，Controller層是控制view層的邏輯。5.1.1登錄界面設(shè)計用戶在瀏覽器輸入系統(tǒng)訪問地址后，先進行登錄操作，商戶通過賬號密碼進行登錄。界面設(shè)計如圖5-1所示。圖5-1管理員登錄界面5.1.2登錄功能首先，取得用戶名和密碼，然后根據(jù)用戶名讀取數(shù)據(jù)庫密碼。最后進行加密對比，相同則登錄成功，反之失敗。系統(tǒng)工作人員根據(jù)自己的使用情況進行登陸，系統(tǒng)管理員：通過最高管理者的權(quán)限賦予，可以登錄后臺管理系統(tǒng)，而系統(tǒng)管理員及普通管理人員通過創(chuàng)建普通用戶。1、功能說明：人員通過分配的賬號密碼進行登錄，系統(tǒng)根據(jù)其分配的賬號及密碼進行驗證，驗證成功則登錄，驗證失敗則登錄失敗。2、用戶：管理員、普通用戶3、功能用例圖：4、業(yè)務(wù)流程圖：5.2系統(tǒng)管理5.2.1界面設(shè)計 圖5-2權(quán)限管理圖5-3角色管理5.2.2系統(tǒng)管理功能描述權(quán)限設(shè)置1、功能說明：后臺管理系統(tǒng)及客戶端中的每個需要進行操作的步驟，都需要對其設(shè)置權(quán)限，工作人員通過權(quán)限的設(shè)置。系統(tǒng)通過對不同的跳轉(zhuǎn)鏈接設(shè)置不同的狀態(tài)來控制權(quán)限接口是否可被調(diào)用。用戶：管理員及開發(fā)人員功能用例圖：數(shù)據(jù)流程圖：角色設(shè)置1、功能說明：將不同的權(quán)限根據(jù)其作用分配成不同的角色集合，這樣就可以控制角色可以訪問哪些內(nèi)容，不可以訪問哪些內(nèi)容。2、用戶：管理員及開發(fā)人員3、功能用例圖：4、數(shù)據(jù)流程圖：組織機構(gòu)設(shè)置功能說明：企業(yè)及各個單位中，每個人都有各自的主要部門，這些部門可能是獨立部門，也可能是分屬于其他部門，所以組織機構(gòu)管理是讓管理人員根據(jù)實際情況，將各部門間的關(guān)系錄入到數(shù)據(jù)庫中，使用人員在進入系統(tǒng)時，系統(tǒng)根據(jù)其部門來提供使用人員的重要信息，幫助系統(tǒng)控制操作權(quán)限。2、用戶：管理員及開發(fā)人員3、功能用例圖：數(shù)據(jù)流程圖：人員設(shè)置1、功能說明：由于功能需求，當前系統(tǒng)需要在內(nèi)網(wǎng)中運行，所以系統(tǒng)本身并不存在自由注冊功能，所有賬號信息都需要管理員分配，管理員分配賬號需要創(chuàng)建用戶，所以人員管理系統(tǒng)就是管理員創(chuàng)建系統(tǒng)用戶并給其分配角色、組織部門的功能模塊，控制工作人員是否能夠進入系統(tǒng)中。2、用戶：管理員、開發(fā)人員、普通用戶3、功能用例圖：數(shù)據(jù)流程圖：5.3商品上傳5.3.1商品界面界面設(shè)計圖5-4商品列表圖5-5商品上傳5.3.2商品界面代碼設(shè)計界面提供“編輯”等功能，可以批量對商品進行操作，也可以點擊列表后面的按鈕進行操作。5.4小程序用戶5.4.1小程序用戶界面設(shè)計圖5-6用戶列表圖5-7用戶詳情5.4.2小程序用戶代碼設(shè)計前端客戶使用微信小程序登錄后，后臺通過請求微信服務(wù)器拿到用戶的openID，然后根據(jù)openID創(chuàng)建前端用戶。6運行環(huán)境、測試及運行分析6.1運行環(huán)境6.1.1硬件環(huán)境表6-1硬件環(huán)境處理器（CPU）Inteli7內(nèi)存8G以上硬盤空間500G以上剩余空間6.1.2軟件環(huán)境表6-2軟件環(huán)境操作系統(tǒng)WINDOWS10應(yīng)用程序MySQL5.6數(shù)據(jù)庫HBuildXNginx1.6PHP7.36.2系統(tǒng)測試系統(tǒng)測試是系統(tǒng)完成后上線前對系統(tǒng)的評估及使用，通過白盒、黑盒等測試手段，找出系統(tǒng)存在的問題，然后根據(jù)問題所在修改并重新測試，盡量減少使用時的問題，保證系統(tǒng)正常運行6.2.1測試項目(1)系統(tǒng)環(huán)境測試使用php的虛擬服務(wù)啟動軟件的web服務(wù)，無任何報錯，由此看見系統(tǒng)運行穩(wěn)定，并未出現(xiàn)任何阻斷軟件運行的情況。(2)系統(tǒng)測試系統(tǒng)測試也叫聯(lián)合測試，將所有軟件模塊連接起來，整體進行測試，從View層的數(shù)據(jù)輸入到Model層的數(shù)據(jù)處理及ORM的儲存，測試是否有問題出現(xiàn)。(3)安裝測試安裝測試是將軟件系統(tǒng)運行在服務(wù)器上，根據(jù)軟件配置和系統(tǒng)配置，查看軟件是否運行正常，測試軟件性能。6.2.2結(jié)果分析(1)PHP虛擬服務(wù)初次啟動時，出現(xiàn)404問題。原因：laravel項目出現(xiàn)問題的原因是因為在正式環(huán)境部署時，需要獲取唯一的key值，后端框架進行用戶驗證時，需要通過將key值和密碼進行哈希，所以在沒Key值的情況下，會出現(xiàn)這種問題