優購微信小程序設計與實現

楊昭兵　楊培培

摘 要：本系統經過系統架構設計、系統需求分析、系統設計與實現，完成本系統開發，可以完成通過微信小程序實現購物。

關鍵詞：eclipse；JDK2.0；mysql；設計；實現

一、開發工具和運行環境

開發工具：（一）微信開發者工具：eclipse；（二）瀏覽器：QQ瀏覽器 （三）操作系統：Windows 12；（四）運行環境：jdk2.0；（五） 數據庫：mysql。

二、系統架構設計

后端主要使用Spring Boot框架。Spring Boot結構具有封裝Servlet、提高開發效率、集成Servlet容器、配置簡單、應用靈活等優點。此外還使用了MyBatis，它主要封裝JDBC，并提供靈活的SQL配置文件。我后端管理接口采用Bootstrap框架。Bootstrap的扁平設計使界面整體美觀優雅。使用Vue.js作為JavaScript框架，它可以將數據鏈接到DOM，使其更易于操作。數據庫使用MySQL，因為它體積小，適合本項目的開發。

三、系統需求分析

（一）用戶端

1.注冊/登錄：用戶首次進入需先注冊，給予小程序個人信息和地址授權，可讓用戶擁有更好的購物體驗。

2.首頁：可對想購買的商品進行搜索，廣告活動圖，商品類型，正在銷售產品，點擊查看詳情，可對商品下單，或加入購物車內也可收藏商品。

3.商品分類：對于不同的產品類型，分類展示，客戶可根據傾向的類型進行瀏覽，點擊想要的商品，可加入購物車或直接購買。

4.購物車：客戶可對其加入的商品，進行增加或者減少，也可刪除，如果滿意商品可直接購買。

5.我的：在修改資料中可修改個人基本信息，我的訂單里可以查詢顧客的購買的商品狀態，全部訂單可查詢應該購買的商品信息，在我的收藏里可對商品進行刪除或購買，用戶可增加修改地址信息。

（二）后臺管理端

1.統計分析：對客戶，產品，購買數量；近7日銷售數量分析。

2.用戶管理：對登錄注冊的用戶信息，及查詢或刪除。

3.廣告管理：根據不同活動對廣告圖進行增加刪除更改處理。

4.分類管理：管理員根據實際情況適當增加刪出更改商品分類類型。

5.商品管理：根據季節時間和商品庫存對商品進行增加刪改以及上架或下架處理。

6.訂單管理：根據客戶下單信息，對訂單進行及時的處理。

7.優惠劵管理：根據節假日或商品活動進行增加或刪除優惠劵，或修改優惠力度。

8.管理員管理：后臺管理員增刪改查。

系統對數據的安全性、完整性要求表現在：用戶信息保密，只有管理員可見 （可査），但不能任意修改。確保用戶信息安全。以下是系統性能需求：

（1）準確性和可靠性高。

（2）界面友好，功能齊全，且可以方便使用。

（三）技術的可行性

實現配送小程序的開發用到的三種技術：Java、MySQL和微信開發者工具。Java一種面向對象的編程語言，有用法簡單，容易學習、操作靈活，方便等益處；MySQL一種安全牢靠的數據庫系統，并且支持面向對象設計，易于使用和維護；小程序采用原生組件進行開發，而小程序官方網站提供了每個組件的用例，學習成本也較低。通過學習和掌握Java、MySQL和小程序的相關知識，開發生鮮配送小程序總體難度并不高，技術上可行。

四、設計與實現

（一）系統功能結構

本系統主要實現兩大模塊：客戶前端和管理員后端管理。其中微信小程序前端就有商品首頁、商品分類、購物車、個人中心、商品詳情、我的訂單等等。后端管理包括團長管理、分類管理、廣告管理、訂單管理、優惠券管理等，具體功能結構如圖1所示：

（二）系統業務流程圖

本系統簡易流程圖如例圖2。

（三）程序數據庫設計

（四）系統實現

1. 商品詳情

客戶在對他想購買或知道的商品點擊后，轉向產品的細節，展示商品的圖片，產品名稱和產品價格，以及產品介紹等，用戶可以點擊商品立刻購買，也可點擊加入購物車.

{{cartnum}}

購物車

加入購物車

立即購買

2.提交訂單

客戶選擇想要的商品進行購買，提交訂單顯示購買的商品，以及該訂單的價格，客戶能夠選擇商家配送或者自提，選擇商家配送，提交訂單時需選擇客戶的收貨地址，然后再點擊提交并付款，就可購買該商品。

//用函數setpice方法設置金額，獲取原始總價，優惠金額，優惠后金額，用if判斷有無優惠劵，如果有的話，用$th.setData獲取用優惠劵以后的優惠金額！

3.購物車

購物車內顯示產品的圖片，名稱，價格，數量，每個商品有個單選按鈕，也可點擊全選按鈕，更能方便顧客選擇想要的產品，點擊去支付會轉到提交訂單頁面。

4.登錄/注冊

想要購買商品并查看其個人資料的用戶必須首先注冊或登錄，并且需要您的許可才能按下它們。提示是否允許給予和人信息位置授權，點擊同意則給予授權，就可成功登陸。

重要代碼：

wx.showModal（{

title： “請求授權當前位置”

content： '需要獲取您的地理位置 請確認授權'，

success： function （res） {

if （res.cancel） {

wx.showToast（{

title： '拒絕授權'

icon： 'none'，

duration： 1000

}）

} else if （res.confirm） {

wx.openSetting（{

success： function （dataAu） {

if （dataAu.authSetting["scope.userLocation"] == true） {

wx.showToast（{

title： '授權成功'，

icon： 'success'，

duration： 1000

}）

//wx.showModal自定義展示地理位置信息，用wx.showToast方法，彈出彈框拒絕授權或者授權成功

五、后臺管理頁面

后臺管理主要實現了商品管理、分類管理、訂單管理，廣告管理，優惠劵管理，團長管理等。

六、小結

本文闡述了優購微信小程序系統的需求分享、技術背景、項目設計、項目實現，以及到最終實現功能，為行業需求成功提供了解決方案。

參考文獻：

[1]王宇倫_基于微信小程序的二手交易商城系 2021

[2]基于JSP的戶外運動產品網上購物系統 王旭輝2022

[3]許佳豪-基于微信小程序的校園”咸魚“交易 平臺的設計與實現2019

[4]閆爍. 基于微信小程序的商品展示系統的設計與實現[D].大連海事大學，2019.