1、基于微信小程序的商城設計畢業論文摘要隨著“互聯網+”的大潮興起，平臺型應用再受熱捧。其中，微信小程序憑借其強大的 用戶基礎及其應用時的便捷而深受歡迎。在此基礎上，以小程序為載體的社群電商，將具 有相同興趣的社群成員組織在一起，推廣與之需求高度匹配的產品或服務，輕松實現流量 變現。因此，結合以上優勢設計并實現基于JavaWeb的小程序商城，具有一定的研究意義 和商業價值，符合我國互聯網精準化營銷和個性化服務的趨勢。本系統主要由微信小程序客戶端、服務器、數據管理端構成，前端代碼基于Layui，封 裝工具類，使用的是H-ui Admin。客戶端的頁面實現通過網絡與服務器REST API接口通信 獲取

2、MySQL數據。本人重點參與網上購物系統客戶端、服務器以及數據庫的設計、開發、 測試工作。在系統的設計與實現過程中，對客戶端的代碼進行全局的MVC模式設計控制，采用 template模板增加代碼的復用性，并創建客戶端用戶的token管理機制進行用戶身份驗證 與權限分級。本文重點闡述小程序商城客戶端的商品信息展示、商品分類、購物車、下單 支付，個人信息管理及數據庫設計六大模塊的設計和實現過程。采用了 JavaWeb和 springboot框架作為后臺開發，HTML+JS+CSS和微信web開發工具作為前端開發，遵守微 信的開發規范，完成了小程序商城的基本功能，系統運行流暢，可以正常使用。 關鍵詞

3、：電商；JavaWeb；小程序商城；購物；ABSTRACTWith the rise of Internet ，platform-based applications are becoming more popular. Among them，WeChat Mini Program with its strong user base and its application when convenient and popular. On the basis of this，the community e-commerce with the small program as the carrier

4、，will have the same interest community members to organize together， promotes the product or the service which is highly matched with its demand，realizes the flow realization easily. Therefore，combining the above advantages to design and implement the Mini Programs Mall based on Java Web has certain

5、 research significance and commercial value， which is in line with the trend of precision marketing and personalized service of the Internet in China.The system is mainly composed of WeChat Mini Program client，server，data management，front-end code based on Layui，encapsulating tool class，using H-ui A

6、dmin. The clients page implementation acquires MySQL data by communicating with the server REST API interface through the network. I focus on the online shopping system client，server and database design，development，testing work.In the design and implementation of the system，the clients code is contr

7、olled by the global MVC pattern design，the template template is used to increase the reusability of the code，and the clients token management mechanism is created for user authentication and permission classification. This paper focuses on the design and implementation of the six modules of the smal

8、l program mall clients commodity information display，commodity classification，shopping cart，order payment，personal information management and database design. Using Java Web and SSM framework as background development，HTML JSCSS and WeChat web development tool as front-end development Send，abide by

9、the development specifications of WeChat，completed the basic functions of Mini Programs Mall， the system runs smoothly，can be used normally.Keywords: E-commerce；Java Web；Mini Programs Mall；Shopping；目錄引 言錯誤!未定義書簽。第一章系統的分析錯誤!未定義書簽。可行性分析錯誤!未定義書簽。需求分析錯誤!未定義書簽。系統環境開發錯誤!未定義書簽。第二章系統的總體設計錯誤!未定義書簽。工具及關鍵技術的介紹

10、 錯誤!未定義書簽。Vue技術介紹錯誤!未定義書簽。pringbOOT介紹錯誤!未定義書簽。系統流程錯誤!未定義書簽。系統模塊設計錯誤!未定義書簽。有了系統流程描述和流程圖 錯誤!未定義書簽。第三章數據庫的設計錯誤!未定義書簽。數據庫設計原則錯誤!未定義書簽。數據庫實體設計錯誤!未定義書簽。數據庫結構設計錯誤!未定義書簽。第四章程序模塊的界面設計錯誤!未定義書簽。用戶注冊錯誤!未定義書簽。輸入的用戶注冊信息保存到數據庫 錯誤!未定義書簽。用戶列表錯誤!未定義書簽。購物車模塊錯誤!未定義書簽。下訂單模塊錯誤!未定義書簽。第五章系統調試與測試錯誤!未定義書簽。5.1測試分析錯誤!未定義書簽。結 論

11、錯誤!未定義書簽。參考文獻 錯誤!未定義書簽。致 謝錯誤!未定義書簽。第一章 系統的分析可行性分析技術可行性：“外賣系統”是基于B/S架構，采用MVC的設計模式，VUE開發技 術，java編程語言，Springboot技術和MySql數據進行開發實現。在 B/S 架構下，實務處理邏輯模塊從客戶機分類出來，客戶機通過瀏覽器可以對 服務器發出數據請求，由服務器與數據庫打交道完成事務處理工作后將數據庫傳回客 戶端進行顯示。MVC 設計模式，應用程序的輸入、處理和輸出被強行分開，其三個核心部件：模 型、試圖和控制器都各自處理自己的任務。由于視圖層和業務層的分離，更改視圖層 代碼時不用重新編譯模型和控制

12、器代碼，使其可以移植和復用以及功能的擴展。MYSQL數據庫：作為以重關聯數據庫，MySQL將數據保存在不同的表中，增加存 取的速度，提高操作的靈活性。并且 MYSQL 采用最最常用標準化進行數據庫的訪問， 簡化開發流程。并且mysql是開源比較成熟的數據庫，在數據的安全性方面技術已經 比較穩定。MyBatis它是一個代碼開放式的框架，它比較好用，而且可以把Java對象持久化 于數據庫當中，它把很多 JDBC 的那些復雜性代碼抽離出來，然后經過自身內部的封 裝和改造把原有的代碼復雜性簡單化了，還提供了一個讓人很好使用而且很簡單的 API借口給我們調用，這樣我們就很容易的與數據庫方面交互。需求分析

13、軟件開發中，需求分析是必不可少的，它有助于了解客戶需求，對軟件的功能由初步 的構思。綜合市場中已有的外賣軟件，我對外賣系統進行了初步需求分析。系統的核心功能是 訂單管理、物流信息管理、配送管理。系統描述本系統包括兩個基本部分：一是前臺用戶的操作程序，用戶在前端可以瀏覽網頁， 查看相關信息。通過注冊可以形成一個有密碼與之匹配的賬號，用戶可以使用該賬戶登陸 系統。在登陸的情況下可以開始點餐。權限在記賬系統中，權限的主體分為了用戶和管理員，用戶可以通過登陸操作記賬操作。 而系統管理員可以用戶進行管理，進行權限的分配，也可以修改用戶的信息，如下圖：管理員列表M新增ID 用戶名郵箱手機號狀態創建時間 H

14、YPERLINK mailto:rootren.ren rootren.ren. 1361234567admin正常io8新增角色名稱備注用戶授權 系統管理管理員列表查看新增修改刪除角色管理 查看圖管理員列表示意圖用例識別在角色的基礎上，可以識別出與權限相關的用例，從而得到系統的用例模型，如圖;l ill管理聯必找特敷道;IL空誦圖系統的用例模型系統環境開發該系統采用B/S架構，使用vue作為前端框架，后臺數據實現使用MYSQL軟件環境windows7數據庫 MYSQL-Navicat Premium 15編程軟件IDEA系統的總體設計開發工具及關鍵技術的介紹記賬系統基于B/S結構，采用MVC

15、設計模式，java編程語言，SPRINGBOOT、VUE和 mysql數據庫。以idea IDE最為開發工具，內置Tomcat9.0為服務器進行開發實現的。B/S結構概述B/S結構概述B/S(Browser/Server)結構即瀏覽器和服務器結構。它是隨著Internet 技術的興起，對C/S結構的一種變化或者改進的結構。在B/S結構下，用戶工作界面是通 過瀏覽器來實現，極少部分事務邏輯在前端Browser實現，但是主要事務邏輯在服務器端 Server實現，形成所謂三層結構。相對于C/S結構屬于“胖”客戶端，需要在使用者電腦 上安裝相應的操作軟件來說，B/S結構是屬于一種“瘦”客戶端，大多數或

16、主要的業務邏 輯都存在在服務器端。因此B/S結構的系統只需要安裝通用的瀏覽器即可對服務器進行訪 問。系統升級或維護時也只需更新服務器端軟件，這樣就大大簡化了客戶端電腦載荷，減輕了系統維護與升級的成本和工作量。與C/S結構比較B/S架構軟件具有以下優勢：1維護和升級方式簡單。目前，軟件系統的改進和升級越來越頻繁B/S架構的產品明顯體現著更為方便的特性。 對一個稍微大一點單位來說，系統管理人員如果需要在幾百甚至上千部電腦之間來回奔跑， 效率和工作量是可想而知的，而B/S架構的軟件只需要管理服務器就行了，所有的客戶端 只是瀏覽器根本不需要做任何的維護。無論用戶的規模有多大，有多少，分支機構都不 會增

17、加任何維護升級的工作量所有的操作只需要針對服務器進行，如果是異地只需要把 服務器連接專網即可實現遠程維護、升級和共享。所以客戶機越來越“瘦”，而服務器越 來“胖”是將來信息化發展的主流方向。今后，軟件升級和維護會越來越容易，而使用起 來會越來越簡單，這對用戶人力、物力、時間、費用的節省是顯而易見的驚人的。因此維護和升級革命的方式是“瘦”客戶機“胖”服務器。2應用服務器運行數據負荷較重。由于B/S架構管理軟件只安裝在服務器端Server上 網絡管理人員只需要管理服 務器就行了，用戶界面主要事務邏輯在服務器Server端完全通WWW瀏覽器實現，極少部 分事務邏輯在前端Browser實現所有的客戶端

18、只有瀏覽器網絡管理人員，只需要做硬件維 護。但是 應用服務器運行數據負荷較重，一旦發生服務器“崩潰”等問題，后果不堪設 想。因此，許多單位都備有數據庫存儲服務器，以防萬一。Vue技術介紹Vue （讀音/vju:/，類似于view）是一套用于構建用戶界面的漸進式框架。與其它大型框 架不同的是，Vue被設計為可以自底向上逐層應用。Vue的核心庫只關注視圖層，不僅易 于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支 持類庫結合使用時，Vue也完全能夠為復雜的單頁應用提供驅動。1、Vue.js可以說是MVVM架構的最佳實踐，是一個JavaScriptMVVM庫，是一套構建

19、 用戶界面的漸進式框架。專注于MVVM中的ViewModel，不僅做至1了數據雙向綁定，而且 也是一款相對比較輕量級的JS庫，API簡潔2、因為vue的雙向數據綁定特性以及技術的成形，實現了項目的熱加載，改完頁面 代碼能立即在瀏覽器方面顯示效果，提高開發效率3、Vue.js是采用Object.defineProperty的getter和setter,并結合觀察者模式來實現 數據綁定的。當把一個普通Javascript對象傳給Vue實例來作為它的data選項時，Vue將 遍歷它的屬性，用Object.defineProperty將它們轉為getter/setter。用戶看不到getter/set

20、ter, 但是在內部它們讓Vue追蹤依賴，在屬性被訪問和修改時通知變化。pringboot 介紹SpringSpring是一個開源框架，Spring是于2003年興起的一個輕量級的Java開發框架，由 Rod Johnson 在其著作Expert One-On-One J2EE Development and Design。Spring 是為了 解決企業級應用開發的復雜性而創建的，使用Spring可以讓簡單的JavaBean實現之前只有 EJB才能完成的事情。但是Spring不僅僅局限于服務器端開發，任何Java應用都能在簡單 性、可測試性和松耦合性等方面從Spring中獲益。1、Spring

21、是如何簡化Java開發的為了降低Java開發的復雜性，Spring采用了以下4種關鍵策略：1、基于POJO的輕量級和最小侵入性編程；2、通過依賴注入（口1）和面向接口實現松耦合；3、基于切面（AOP）和慣例進行聲明式編程；4、通過切面和模版減少樣式代碼；2、SpringBoot四個主要特性1、SpringBoot Starter：他將常用的依賴分組進行了整合，將其合并到一個依賴中，這 樣就可以一次性添加到項目的Maven或Gradle構建中；2、自動配置：SpringBoot的自動配置特性利用了 Spring4對條件化配置的支持，合理 地推測應用所需的bean并自動化配置他們；3、命令行接口

22、：（Command-line-interface, CLI）： SpringBoot 的 CLI 發揮了 Groovy 編 程語言的優勢，并結合自動配置進一步簡化Spring應用的開發；4、Actuatir：它為SpringBoot應用的所有特性構建一個小型的應用程序。但首先，我 們快速了解每項特性，更好的體驗他們如何簡化Spring編程模型。系統流程在第一章的用例圖中，已經定義了系統角色及用例模型。作為一個完整的記賬軟件， 有必要知道整個系統運行流程這有利于我們明確系統開發任務和功能模塊。用戶后登陸 網站，新建自己的賬戶和開支類別，然后開始記賬，每個賬戶都能對賬，這樣保證的數據 的準確性和明

23、晰性 用戶當然也可以修改自己的信息 包括密碼，最后用戶可以退出系統。系統模塊設計有了系統流程描述和流程圖根據流程圖將系統劃分為以下模塊：表系統功能模塊設計表a |系統功能鑲塊應計杼號功能模塊類別功能模塊L前臺操作端注冊、登錄、個人心思管理2賬戶管理3開支類別管理4對賬5記賬及轉賬6后臺笆理端用戶管理7公告R默認F支管理后臺管理模塊它與前臺用戶的個人信息管理功能模塊是不同的。這里管理的是所有的注冊用戶信息， 是真正意義上的用戶管理模塊表用戶公里功能模塊2-7用戶管理功能模玳序 號功能列表功能明細1管理員登錄杵理物人用戶名和謂舊r系統進行驗證2后臺蛤證管理a進行功能模塊笆理時,都要驗證4杳者用戶信

24、息杳看用戶信息1刪J除用戶刪除用戶數據庫的設計記賬系統是以MSQL5.5建立起來的，在對本系統個子模塊功能分析的基礎上設計了數 據庫的表及表之間的關系圖，并根據關系圖實現了數據庫添加、查找、修改、刪除、瀏覽 等基本操作。數據庫設計原則.在完成數據存儲的基礎上，基本表的個數要盡量少。.確保各個表之間對應關系的同時，主鍵的個數要盡量少。鍵是表間連接的工具主鍵 越少，表間的連接就越簡單。.字段個數越少越好。所有基本表的設計均應盡量符合第三范式，減少數據冗余，數 據庫是在表的基礎上創建完成的，所有對象的屬性都以元組的形式在表中表示。程序員必須對數據庫的數據進行必要的維護。在開發設計數據庫時 應考慮數據

25、庫的 使用過程中可能出現的問題，設計數據庫有一定的數據恢復功能 使數據庫在被使用過程中對用戶的影響降到最低的程度，維護的花費降到最低。數據庫系統要求具有以下方面的特點：.結構合理，所建立的數據冗余度小，獨立性強。. 2.增加、修改、查詢和統計快速而準確，保密性和可靠性好。.有一定的數據恢復功能，便于后期的維護。3.2數據庫實體設計在對“外賣系統”各個功能分析的基礎上，可以確定數據庫應該包含以下實體管理員 信息實體(admin).通過賬號和密碼登錄系統后臺，可以修改自己信息，包括密碼.可以對用戶進行查看和刪除操作.可以修改默認的收支類別。用戶信息實體(user)1、通過注冊成為網站會員2、登錄后

26、可以修改自己信息3、可以開始進行記賬。3.3數據庫結構設計外賣系統采用MSQL數據庫進行系統設計和開發，分類信息表、商品信息表，如下圖。start.dlstrl enddistri shop_prke shop num hopjmg shop catemtint decimal int rchrint11117111502S5配送卸量商品世址 廟品英別宕長度不公null注1100中手號cate_namevarchar320克品存名類型1爨點不是null度擬腱江輕蘆1 序號商品各商品洋魴mtrchartestidshopiw 訃叩text字段宏引 外蜒 融及靠 選項 汪徑 SQL HE程序模塊的

27、界面設計程序注冊及登錄個人信息管理功能模塊：任何系統功能的實現都離不開角色的參與， 為了便于系統的管理，需要對不同用戶賦予不同的權限和功能，因此需要對用戶進行管理， 設計了個人信息管理模塊.。由于本系統采用了 MVC設計模式 下面將用MVC的三層結構 說明個人信息管理模塊的功能。用戶注冊用戶在進行注冊的過程中，輸入用戶名移開鼠標，文本框失去焦點后會觸發onblur方 法，此時系統會提取輸入的用戶名與數據庫用戶表中已存在的用戶名進行比對，若數據庫 用戶表中已經存在輸入的用戶名，將提示不能注冊若不存在輸入的用戶名“可以注冊”的 提示。該操作主要的代碼如下PostMapping(/sys/login

28、)public MapString, Object login(RequestBody SysLoginForm form)throws Exception /*boolean captcha = sysCaptchaService.validate(form.getUuid(), form.getCaptcha(); if(!captcha)return R.error(驗證碼不正確)；*/用戶信息SysUserEntity user = sysUserService.queryByUserName(form.getUsername();/賬號不存在、密碼錯誤if(user = null |

29、 !user.getPassword().equals(new Sha256Hash(form.getPassword(), user.getSalt().toHex() return R.error(賬號或密碼不正確)；賬號鎖定/*if(user.getStatus() = 0)return R.error(賬號已被鎖定，請聯系管理員”)；*/ /生成token，并保存到數據庫R r = sysUserTokenService.createToken(user.getUserId();return r;* WeChatV10:14會員中心立即資0Q積分我的匯接板登錄優秀至資金用成為.譴斷梗小

30、箱5登錄-我們不會公布您的這些信后三請發票O圖4.1.1管理員登錄示意圖輸入的用戶注冊信息保存到數據庫用戶輸入注冊信息后，在第二層邏輯訪問層將使用java語言使用的save()方法將輸入的用戶信息封裝到對象user中，然后調用 包下 SysUserEntity .java 中的對象 SysUserEntity 的 add()方法，同時連接數據庫，通過對象的方式添加到數據庫中，代碼如下:/* *保存用戶*/SysLog(保存用戶)PostMapping(/save)/*RequiresPermissions(sys:user:save)*/public R save(RequestBody Sy

31、sUserEntity user)/*ValidatorUtils.validateEntity(user, AddGroup.class);*/*user.setCreateUserId(getUserId();*/sysUserService.saveUser(user);return R.ok();用戶列表將注冊用戶信息保存到管理賬戶中，可直接觀察到目前注冊的賬戶數目，主要代碼如下/*用戶列表*/RequestMapping(/list)/*RequiresPermissions(modules:datatotal:list)*/public R list(RequestParam Ma

32、p params)PageUtils page = dataTotalService.queryPage(params);return R.ok().put(page, page);購物車模塊用戶對菜單點擊訂購后就會添加到購物車中，在購物車中有刪除某個已選菜單、繼續采購、修改菜單數量、下訂單功能。購物車界面設計4.5下訂單模塊下訂單模塊 選購菜單結束后，點擊“去下訂單”，就跳轉到下訂單界面，其中必須填寫收貨人信息、詳細地址、聯系電話、付款方式信息。爆效昔心O W*+* WeCh 旨 G10：51009 三），輸入搜索關鍵同秒殺和一痹沿上裝髓價區兒童事衣罵童短地獨相啟季動兒園園眼林版男女瑩裝春2

33、9&Q舊,加外+圖詰I 491后卻跖4怎百H的圖案毛衣190毛衣恥4.5訂單查詢模塊訂單查詢模塊 用戶成功提交訂單后，在訂單查詢中可對菜單查 看，可以根據訂單的處理狀態查看，用戶也可以將管理員未做過任 何處理的訂單刪除。第五章 系統調試與測試重點測試目標和測試計劃，對項目測試用例，并分析測試結果是否達到系統預期，如 未達到提出改進措施。測試項目目標根據測試范圍的不同，如吞吐率、訪問時間等等，分 析項目模塊，指標功能實現，邊界條件是否實現等等，測試用例根據測試目標來進行設計（表 5.1）功饞溶試概述UBiASw 予GMO】功能描述用戶在求功能VRL用例目的測試用戶是否能登錄峨功前提條件進入川戶矍

34、求界面割試操作編號輸2動作期望的結加響應實際情況1L不 Ml H正確錯謾編號1叫人不存荏的用戶名, 不填寫密碼系統捉小擊網不能為 空系統根小密叫不 能為空正確5.1測試分析1、部分數據未能自動生成圖表數據2、程序中反映出現字符亂碼現象功能惻優測試編號GSOOL功能描述齦電統計功能LRL用例目的測試賬收統計是否存在而糖條仲進入用戶登錄界面泅試操作編號榆A/動作期里的輸畀響應嘿際情況是否正確錯誤褊號1輸入住的月份展示H體觸據展示具體霰據正確2輸入不存在的月份系統提小謂眄錯誤系統提小該月份沒有敷理正確3程人春倒足飾展示具體數據展示具悻數據正確4輸入不存在的年階系統提示密碼鋪說蔡統提示該年份 沒有效鍬正確結論在經過幾個月努力后，在老師指導下，我對web開發有了系統的深入的理解，同時對 開發技術有了進一步的經驗，本系統用例比較成熟的web開發框架設計，實現B/S結構， 具有相當的