基于微信小程序的商城設計畢業(yè)論文摘要隨著“互聯(lián)網(wǎng)+”的大潮興起，平臺型應用再受熱捧。其中，微信小程序憑借其強大的用戶基礎及其應用時的便捷而深受歡迎。在此基礎上，以小程序為載體的社群電商，將具有相同興趣的社群成員組織在一起，推廣與之需求高度匹配的產品或服務，輕松實現(xiàn)流量變現(xiàn)。因此，結合以上優(yōu)勢設計并實現(xiàn)基于JavaWeb的小程序商城，具有一定的研究意義和商業(yè)價值，符合我國互聯(lián)網(wǎng)精準化營銷和個性化服務的趨勢。本系統(tǒng)主要由微信小程序客戶端、服務器、數(shù)據(jù)管理端構成，前端代碼基于Layui，封裝工具類，使用的是H-uiAdmin?？蛻舳说捻撁鎸崿F(xiàn)通過網(wǎng)絡與服務器RESTAPI接口通信獲取MySQL數(shù)據(jù)。本人重點參與網(wǎng)上購物系統(tǒng)客戶端、服務器以及數(shù)據(jù)庫的設計、開發(fā)、測試工作。在系統(tǒng)的設計與實現(xiàn)過程中，對客戶端的代碼進行全局的MVC模式設計控制，采用template模板增加代碼的復用性，并創(chuàng)建客戶端用戶的token管理機制進行用戶身份驗證與權限分級。本文重點闡述小程序商城客戶端的商品信息展示、商品分類、購物車、下單支付，個人信息管理及數(shù)據(jù)庫設計六大模塊的設計和實現(xiàn)過程。采用了JavaWeb和springboot框架作為后臺開發(fā)，HTML+JS+CSS和微信web開發(fā)工具作為前端開發(fā)，遵守微信的開發(fā)規(guī)范，完成了小程序商城的基本功能，系統(tǒng)運行流暢，可以正常使用。關鍵詞：電商；JavaWeb；小程序商城；購物；ABSTRACTWiththeriseof"Internet"，platform-basedapplicationsarebecomingmorepopular.Amongthem，WeChatMiniProgramwithitsstronguserbaseanditsapplicationwhenconvenientandpopular.Onthebasisofthis，thecommunitye-commercewiththesmallprogramasthecarrier，willhavethesameinterestcommunitymemberstoorganizetogether，promotestheproductortheservicewhichishighlymatchedwithitsdemand，realizestheflowrealizationeasily.Therefore，combiningtheaboveadvantagestodesignandimplementtheMiniProgramsMallbasedonJavaWebhascertainresearchsignificanceandcommercialvalue，whichisinlinewiththetrendofprecisionmarketingandpersonalizedserviceoftheInternetinChina.ThesystemismainlycomposedofWeChatMiniProgramclient，server，datamanagement，front-endcodebasedonLayui，encapsulatingtoolclass，usingH-uiAdmin.Theclient'spageimplementationacquiresMySQLdatabycommunicatingwiththeserverRESTAPIinterfacethroughthenetwork.Ifocusontheonlineshoppingsystemclient，serveranddatabasedesign，development，testingwork.Inthedesignandimplementationofthesystem，theclient'scodeiscontrolledbytheglobalMVCpatterndesign，thetemplatetemplateisusedtoincreasethereusabilityofthecode，andtheclient'stokenmanagementmechanismiscreatedforuserauthenticationandpermissionclassification.Thispaperfocusesonthedesignandimplementationofthesixmodulesofthesmallprogrammallclient'scommodityinformationdisplay，commodityclassification，shoppingcart，orderpayment，personalinformationmanagementanddatabasedesign.UsingJavaWebandSSMframeworkasbackgrounddevelopment，HTMLJSCSSandWeChatwebdevelopmenttoolasfront-enddevelopment

Send，abidebythedevelopmentspecificationsofWeChat，completedthebasicfunctionsofMiniProgramsMall，thesystemrunssmoothly，canbeusednormally.Keywords:

E-commerce；JavaWeb；MiniProgramsMall；Shopping；目錄TOC\o"1-2"\h\z\u引言 1第一章系統(tǒng)的分析 21.1可行性分析 21.2需求分析 21.3系統(tǒng)環(huán)境開發(fā) 4第二章系統(tǒng)的總體設計 52.1開發(fā)工具及關鍵技術的介紹 52.1.2Vue技術介紹 62.1.3Springboot介紹 62.2系統(tǒng)流程 72.3系統(tǒng)模塊設計 82.3.1有了系統(tǒng)流程描述和流程圖 8第三章數(shù)據(jù)庫的設計 93.1數(shù)據(jù)庫設計原則 93.2數(shù)據(jù)庫實體設計 93.3數(shù)據(jù)庫結構設計 10第四章程序模塊的界面設計 114.1用戶注冊 114.2輸入的用戶注冊信息保存到數(shù)據(jù)庫 124.3用戶列表 134.4購物車模塊 144.5下訂單模塊 15第五章系統(tǒng)調試與測試 155.1測試分析 16結論 18參考文獻 19致謝 20第一章系統(tǒng)的分析1.1可行性分析技術可行性：“外賣系統(tǒng)”是基于B/S架構，采用MVC的設計模式，VUE開發(fā)技術，java編程語言，Springboot技術和MySql數(shù)據(jù)進行開發(fā)實現(xiàn)。在B/S架構下，實務處理邏輯模塊從客戶機分類出來，客戶機通過瀏覽器可以對服務器發(fā)出數(shù)據(jù)請求，由服務器與數(shù)據(jù)庫打交道完成事務處理工作后將數(shù)據(jù)庫傳回客戶端進行顯示。MVC設計模式，應用程序的輸入、處理和輸出被強行分開，其三個核心部件：模型、試圖和控制器都各自處理自己的任務。由于視圖層和業(yè)務層的分離，更改視圖層代碼時不用重新編譯模型和控制器代碼，使其可以移植和復用以及功能的擴展。MYSQL數(shù)據(jù)庫：作為以重關聯(lián)數(shù)據(jù)庫，MySQL將數(shù)據(jù)保存在不同的表中，增加存取的速度，提高操作的靈活性。并且MYSQL采用最最常用標準化進行數(shù)據(jù)庫的訪問，簡化開發(fā)流程。并且mysql是開源比較成熟的數(shù)據(jù)庫，在數(shù)據(jù)的安全性方面技術已經(jīng)比較穩(wěn)定。MyBatis它是一個代碼開放式的框架，它比較好用，而且可以把Java對象持久化于數(shù)據(jù)庫當中，它把很多JDBC的那些復雜性代碼抽離出來，然后經(jīng)過自身內部的封裝和改造把原有的代碼復雜性簡單化了，還提供了一個讓人很好使用而且很簡單的API借口給我們調用，這樣我們就很容易的與數(shù)據(jù)庫方面交互。1.2需求分析軟件開發(fā)中，需求分析是必不可少的，它有助于了解客戶需求，對軟件的功能由初步的構思。綜合市場中已有的外賣軟件，我對外賣系統(tǒng)進行了初步需求分析。系統(tǒng)的核心功能是訂單管理、物流信息管理、配送管理。1.2.1系統(tǒng)描述本系統(tǒng)包括兩個基本部分：一是前臺用戶的操作程序，用戶在前端可以瀏覽網(wǎng)頁，查看相關信息。通過注冊可以形成一個有密碼與之匹配的賬號，用戶可以使用該賬戶登陸系統(tǒng)。在登陸的情況下可以開始點餐。1.2.2權限在記賬系統(tǒng)中，權限的主體分為了用戶和管理員，用戶可以通過登陸操作記賬操作。而系統(tǒng)管理員可以用戶進行管理，進行權限的分配，也可以修改用戶的信息，如下圖：圖管理員列表示意圖1.2.3用例識別在角色的基礎上，可以識別出與權限相關的用例，從而得到系統(tǒng)的用例模型，如圖圖系統(tǒng)的用例模型1.3系統(tǒng)環(huán)境開發(fā)該系統(tǒng)采用B/S架構，使用vue作為前端框架，后臺數(shù)據(jù)實現(xiàn)使用MYSQL軟件環(huán)境windows7數(shù)據(jù)庫MYSQL-NavicatPremium15編程軟件IDEA系統(tǒng)的總體設計2.1開發(fā)工具及關鍵技術的介紹記賬系統(tǒng)基于B/S結構，采用MVC設計模式，java編程語言，SPRINGBOOT、VUE和mysql數(shù)據(jù)庫。以ideaIDE最為開發(fā)工具，內置Tomcat9.0為服務器進行開發(fā)實現(xiàn)的。2.1.1B/S結構概述B/S結構概述B/S（Browser/Server）結構即瀏覽器和服務器結構。它是隨著Internet技術的興起，對C/S結構的一種變化或者改進的結構。在B/S結構下，用戶工作界面是通過瀏覽器來實現(xiàn)，極少部分事務邏輯在前端Browser實現(xiàn)，但是主要事務邏輯在服務器端Server實現(xiàn)，形成所謂三層結構。相對于C/S結構屬于“胖”客戶端，需要在使用者電腦上安裝相應的操作軟件來說，B/S結構是屬于一種“瘦”客戶端，大多數(shù)或主要的業(yè)務邏輯都存在在服務器端。因此B/S結構的系統(tǒng)只需要安裝通用的瀏覽器即可對服務器進行訪問。系統(tǒng)升級或維護時也只需更新服務器端軟件，這樣就大大簡化了客戶端電腦載荷，減輕了系統(tǒng)維護與升級的成本和工作量。與C/S結構比較B/S架構軟件具有以下優(yōu)勢：1維護和升級方式簡單。目前，軟件系統(tǒng)的改進和升級越來越頻繁B/S架構的產品明顯體現(xiàn)著更為方便的特性。對一個稍微大一點單位來說，系統(tǒng)管理人員如果需要在幾百甚至上千部電腦之間來回奔跑，效率和工作量是可想而知的，而B/S架構的軟件只需要管理服務器就行了，所有的客戶端只是瀏覽器根本不需要做任何的維護。無論用戶的規(guī)模有多大，有多少，分支機構都不會增加任何維護升級的工作量所有的操作只需要針對服務器進行，如果是異地只需要把服務器連接專網(wǎng)即可實現(xiàn)遠程維護、升級和共享。所以客戶機越來越“瘦”，而服務器越來“胖”是將來信息化發(fā)展的主流方向。今后，軟件升級和維護會越來越容易，而使用起來會越來越簡單，這對用戶人力、物力、時間、費用的節(jié)省是顯而易見的驚人的。因此維護和升級革命的方式是“瘦”客戶機“胖”服務器。2應用服務器運行數(shù)據(jù)負荷較重。由于B/S架構管理軟件只安裝在服務器端Server上網(wǎng)絡管理人員只需要管理服務器就行了，用戶界面主要事務邏輯在服務器Server端完全通WWW瀏覽器實現(xiàn)，極少部分事務邏輯在前端Browser實現(xiàn)所有的客戶端只有瀏覽器網(wǎng)絡管理人員，只需要做硬件維護。但是應用服務器運行數(shù)據(jù)負荷較重，一旦發(fā)生服務器“崩潰”等問題，后果不堪設想。因此，許多單位都備有數(shù)據(jù)庫存儲服務器，以防萬一。2.1.2Vue技術介紹Vue(讀音/vju?/，類似于view)是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue被設計為可以自底向上逐層應用。Vue的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現(xiàn)代化的工具鏈以及各種支持類庫結合使用時，Vue也完全能夠為復雜的單頁應用提供驅動。1、Vue.js可以說是MVVM架構的最佳實踐，是一個JavaScriptMVVM庫，是一套構建用戶界面的漸進式框架。專注于MVVM中的ViewModel，不僅做到了數(shù)據(jù)雙向綁定，而且也是一款相對比較輕量級的JS庫，API簡潔2、因為vue的雙向數(shù)據(jù)綁定特性以及技術的成形，實現(xiàn)了項目的熱加載，改完頁面代碼能立即在瀏覽器方面顯示效果，提高開發(fā)效率3、Vue.js是采用Object.defineProperty的getter和setter，并結合觀察者模式來實現(xiàn)數(shù)據(jù)綁定的。當把一個普通Javascript對象傳給Vue實例來作為它的data選項時，Vue將遍歷它的屬性，用Object.defineProperty將它們轉為getter/setter。用戶看不到getter/setter，但是在內部它們讓Vue追蹤依賴，在屬性被訪問和修改時通知變化。2.1.3Springboot介紹1.1什么是SpringSpring是一個開源框架，Spring是于2003年興起的一個輕量級的Java開發(fā)框架，由RodJohnson在其著作《ExpertOne-On-OneJ2EEDevelopmentandDesign》。Spring是為了解決企業(yè)級應用開發(fā)的復雜性而創(chuàng)建的，使用Spring可以讓簡單的JavaBean實現(xiàn)之前只有EJB才能完成的事情。但是Spring不僅僅局限于服務器端開發(fā)，任何Java應用都能在簡單性、可測試性和松耦合性等方面從Spring中獲益。1、Spring是如何簡化Java開發(fā)的為了降低Java開發(fā)的復雜性，Spring采用了以下4種關鍵策略：1、基于POJO的輕量級和最小侵入性編程；2、通過依賴注入（DI）和面向接口實現(xiàn)松耦合；3、基于切面（AOP）和慣例進行聲明式編程；4、通過切面和模版減少樣式代碼；2、SpringBoot四個主要特性1、SpringBootStarter：他將常用的依賴分組進行了整合，將其合并到一個依賴中，這樣就可以一次性添加到項目的Maven或Gradle構建中；2、自動配置：SpringBoot的自動配置特性利用了Spring4對條件化配置的支持，合理地推測應用所需的bean并自動化配置他們；3、命令行接口：（Command-line-interface,CLI）：SpringBoot的CLI發(fā)揮了Groovy編程語言的優(yōu)勢，并結合自動配置進一步簡化Spring應用的開發(fā)；4、Actuatir：它為SpringBoot應用的所有特性構建一個小型的應用程序。但首先，我們快速了解每項特性，更好的體驗他們如何簡化Spring編程模型。2.2系統(tǒng)流程在第一章的用例圖中，已經(jīng)定義了系統(tǒng)角色及用例模型。作為一個完整的記賬軟件，有必要知道整個系統(tǒng)運行流程這有利于我們明確系統(tǒng)開發(fā)任務和功能模塊。用戶后登陸網(wǎng)站，新建自己的賬戶和開支類別，然后開始記賬，每個賬戶都能對賬，這樣保證的數(shù)據(jù)的準確性和明晰性用戶當然也可以修改自己的信息包括密碼，最后用戶可以退出系統(tǒng)。2.3系統(tǒng)模塊設計2.3.1有了系統(tǒng)流程描述和流程圖根據(jù)流程圖將系統(tǒng)劃分為以下模塊：表系統(tǒng)功能模塊設計2.3.2后臺管理模塊它與前臺用戶的個人信息管理功能模塊是不同的。這里管理的是所有的注冊用戶信息，是真正意義上的用戶管理模塊表用戶公里功能模塊數(shù)據(jù)庫的設計記賬系統(tǒng)是以MSQL5.5建立起來的，在對本系統(tǒng)個子模塊功能分析的基礎上設計了數(shù)據(jù)庫的表及表之間的關系圖，并根據(jù)關系圖實現(xiàn)了數(shù)據(jù)庫添加、查找、修改、刪除、瀏覽等基本操作。3.1數(shù)據(jù)庫設計原則1.在完成數(shù)據(jù)存儲的基礎上，基本表的個數(shù)要盡量少。2.確保各個表之間對應關系的同時，主鍵的個數(shù)要盡量少。鍵是表間連接的工具主鍵越少，表間的連接就越簡單。3.字段個數(shù)越少越好。所有基本表的設計均應盡量符合第三范式，減少數(shù)據(jù)冗余，數(shù)據(jù)庫是在表的基礎上創(chuàng)建完成的，所有對象的屬性都以元組的形式在表中表示。程序員必須對數(shù)據(jù)庫的數(shù)據(jù)進行必要的維護。在開發(fā)設計數(shù)據(jù)庫時應考慮數(shù)據(jù)庫的使用過程中可能出現(xiàn)的問題，設計數(shù)據(jù)庫有一定的數(shù)據(jù)恢復功能使數(shù)據(jù)庫在被使用過程中對用戶的影響降到最低的程度，維護的花費降到最低。數(shù)據(jù)庫系統(tǒng)要求具有以下方面的特點：結構合理，所建立的數(shù)據(jù)冗余度小,獨立性強。2.增加、修改、查詢和統(tǒng)計快速而準確，保密性和可靠性好。3.有一定的數(shù)據(jù)恢復功能，便于后期的維護。3.2數(shù)據(jù)庫實體設計在對“外賣系統(tǒng)”各個功能分析的基礎上，可以確定數(shù)據(jù)庫應該包含以下實體管理員信息實體(admin）通過賬號和密碼登錄系統(tǒng)后臺，可以修改自己信息，包括密碼可以對用戶進行查看和刪除操作可以修改默認的收支類別。用戶信息實體(user)1、通過注冊成為網(wǎng)站會員2、登錄后可以修改自己信息3、可以開始進行記賬。3.3數(shù)據(jù)庫結構設計外賣系統(tǒng)采用MSQL數(shù)據(jù)庫進行系統(tǒng)設計和開發(fā)，分類信息表、商品信息表，如下圖。程序模塊的界面設計程序注冊及登錄個人信息管理功能模塊：任何系統(tǒng)功能的實現(xiàn)都離不開角色的參與，為了便于系統(tǒng)的管理，需要對不同用戶賦予不同的權限和功能，因此需要對用戶進行管理，設計了個人信息管理模塊.。由于本系統(tǒng)采用了MVC設計模式下面將用MVC的三層結構說明個人信息管理模塊的功能。4.1用戶注冊用戶在進行注冊的過程中，輸入用戶名移開鼠標，文本框失去焦點后會觸發(fā)onblur方法，此時系統(tǒng)會提取輸入的用戶名與數(shù)據(jù)庫用戶表中已存在的用戶名進行比對，若數(shù)據(jù)庫用戶表中已經(jīng)存在輸入的用戶名，將提示不能注冊若不存在輸入的用戶名“可以注冊”的提示。該操作主要的代碼如下@PostMapping("/sys/login")publicMap<String,Object>login(@RequestBodySysLoginFormform)throwsIOException{/*booleancaptcha=sysCaptchaService.validate(form.getUuid(),form.getCaptcha());if(!captcha){returnR.error("驗證碼不正確");}*///用戶信息SysUserEntityuser=sysUserService.queryByUserName(form.getUsername());//賬號不存在、密碼錯誤if(user==null||!user.getPassword().equals(newSha256Hash(form.getPassword(),user.getSalt()).toHex())){returnR.error("賬號或密碼不正確");}//賬號鎖定/*if(user.getStatus()==0){returnR.error("賬號已被鎖定,請聯(lián)系管理員");}*///生成token，并保存到數(shù)據(jù)庫Rr=sysUserTokenService.createToken(user.getUserId());returnr;圖4.1.1管理員登錄示意圖4.2輸入的用戶注冊信息保存到數(shù)據(jù)庫用戶輸入注冊信息后，在第二層邏輯訪問層將使用java語言使用的save()方法將輸入的用戶信息封裝到對象user中，然后調用包下SysUserEntity.java中的對象SysUserEntity的add()方法，同時連接數(shù)據(jù)庫，通過對象的方式添加到數(shù)據(jù)庫中，代碼如下：/***保存用戶*/@SysLog("保存用戶")@PostMapping("/save")/*@RequiresPermissions("sys:user:save")*/publicRsave(@RequestBodySysUserEntityuser){/*ValidatorUtils.validateEntity(user,AddGroup.class);*//*user.setCreateUserId(getUserId());*/sysUserService.saveUser(user);returnR.ok();4.3用戶列表將注冊用戶信息保存到管理賬戶中，可直接觀察到目前注冊的賬戶數(shù)目，主要代碼如下/***用戶列表*/@RequestMapping("/list")/*@RequiresPermissions("modules:datatotal:list")*/publicRlist(@RequestParamMap<String,Object>params){PageUtilspage=dataTotalService.queryPage(params);returnR.ok().put("page",page);}4.4購物車模塊用戶對菜單點擊訂購后就會添加到購物車中，在購物車中有刪除某個已選菜單、繼續(xù)采購、修改菜單數(shù)量、下訂單功能。購物車界面設計4.5下訂單模塊下訂單模塊選購菜單結束后，點擊“去下訂單”，就跳轉到下訂單界面，其中必須填寫收貨人信息、詳細地址、聯(lián)系電話、付款方式信息。4.5訂單查詢模塊訂單查詢模塊用戶成功提交訂單后，在訂單查詢中可對菜單查看，可以根據(jù)訂單的處理狀態(tài)查看，用戶也可以將管理員未做過任何處理的訂單刪除。第五章系統(tǒng)調試與測試重點測試目標和測試計劃，對項目測試用例，并分析測試結果是否達到系統(tǒng)預期，如未達到提出改進措施。測試項目目標根據(jù)測試范圍的不同，如吞吐率、訪問時間等等，分析項目模塊，指標功能實現(xiàn)，邊界條件是否實現(xiàn)等等，測試用例根據(jù)測試目標來進行設計（表5.1）表5.1賬單統(tǒng)計模塊5.1測試分析1、部分數(shù)據(jù)未能自動生成圖表數(shù)據(jù)2、程序中反映出現(xiàn)字符亂碼現(xiàn)象表5.2測試分析結論在經(jīng)過幾個月努力后，在老師指導下，我對web開發(fā)有了系統(tǒng)的深入的理解，同時對開發(fā)技術有了進一步的經(jīng)驗，本系統(tǒng)用例比較成熟