基于SpringBoot+Vue的好農物商城的設計與實現

陳小燕 朱映輝 余曉春

摘要：我國正處于傳統農業逐漸轉入現代農業的新發展階段，在互聯網時代背景下，為及時變更經營模式、引進新技術以利好農產品的銷售，開發了好農物商城，系統采用SpringBoot、Vue、Mybatis-plus與MySQL數據庫等技術構建，分為前臺管理和后臺管理兩部分。前臺管理主要包括用戶、首頁、商品分類、逛逛、購物車、訂單和我的模塊等。后臺管理主要包括管理員、會員、商品、圖片、訂單等的有效管理。開發的系統界面簡潔、運行穩定，具有一定的實用價值。

關鍵詞：農產品商城;SpringBoot;Vue;Mybatis-plus;MySQL數據庫

中圖分類號：TP311? ? ? 文獻標識碼：A

文章編號：1009-3044（2022）22-0037-03

1 背景

互聯網在全國各地得到了廣泛應用，在農村的普及率更是逐年遞增，“互聯網+”模式為傳統農業轉型至現代農業提供了有效途徑，為農村農業電商的崛起提供了有利環境[1]。

近年來，我國農村零售額不減反增，因為我國電商行業中誕生了一大批農村電商，農村電商作為扶貧新興的“領頭羊”，憑借著全新的銷售模式，能夠有效解決農民因不能及時了解市場動向、對農產品定價無主動權、農產品利潤被中間商大比例瓜分等因素導致的農產品滯銷、消費者有錢買不到優質農產品等現象[2]。有數據顯示，2021年農產品網絡銷售額突破7800億，某平臺上的購買次數均在10萬次以上，是上一年同期的1.5倍以上，是2019年一整年農產品銷售額的1.7倍以上[3]。

好農物農產品商城系統就是為解決上述問題而設計，后端由SpringBoot、Mybatis-Plus等技術完成開發，采用MySQL數據庫來實現數據管理，前端采用Vue全家桶技術開發，符合電子商務平臺的開發需求。通過這個系統，在遍布互聯網的區域用戶可以實時關注自己想購買的農產品的各種詳細信息，并根據自己的意愿購買商品，提供了很強大的在線服務和訂單處理功能。除此之外，用戶還能發布自己的購買心得，可供其他用戶參考。還擁有很強大的后臺管理功能，企業或者商家可以很輕松地對龐大的農產品進行管理，方便快捷處理訂單。

2 技術綜述

該系統主要采用SpringBoot、MyBatis-plus、Vue等技術進行開發。后臺數據庫使用MySQL數據庫來實現數據管理。

2.1 SpringBoot

SpringBoot是Spring框架經過深度優化后的框架，它能幫人們自動配置[4]，Pom文件下的spring-boot-starter-web會自動引入開發過程中必須用到的Web模塊Jar包，做到盡可能減少開發者們編寫多個XML文件去完成配置，當默認的配置不能滿足人們需求時，能夠進行手動配置。它還內置Tomcat，無須打包部署就能直接運行。

2.2 MyBatis-plus

MyBatis-plus是在MyBatis原有的基礎上進行升級，為了提升開發效率和簡化代碼而誕生的。在使用過程中，MyBatis-plus提供一套通用的Mapper和Server的操作，只需要繼承簡單配置即可使用單表大部分CRUD操作。

2.3 Vue

Vue集合了容易上手、使用范圍廣、功能性強和性能極高等優點，是目前使用率最高的JavaScript框架。Vue基于MVVM模式，通過數據雙向綁定，極大地降低了前端開發的難度，也縮短了項目開發周期[5]。

3 好農物商城的分析與設計

3.1 系統功能性分析

商城的Web前端頁面功能如下：

1） 用戶信息管理：用戶注冊后可進入商城瀏覽商品。包括用戶信息維護管理等常用功能。

2） 農產品查詢：用戶可以通過頁面中的搜索框，輸入商品名稱進行查詢，也可通過一級、二級分類獲取商品，以了解詳細的商品信息和用戶評價。

3） 農產品展示：通過首頁輪播圖、新品推薦、限時秒殺、商品分類選擇等方式快速鎖定價格最低、最新鮮的產品。

4） 購物車：用戶可瀏覽商品詳情頁，點擊商品加入購物車，并在購物車中完成購買。

5） 訂單查詢：用戶提交訂單后，可在個人訂單中查看不同狀態下的訂單狀態。

6） 商城系統信息：接收系統的消息，提醒用戶當前有未支付的訂單。

7） 逛逛分享：用戶可在這里發布對已購買農產品的推薦分享或吐槽情況，也可以查看其他用戶的分享，通過其他用戶推薦產品的詳情頁購買商品。

8） 收藏商品：用戶可將商品收藏到自己的列表中。

9） 收貨地址管理：用戶可添加自己的收貨地址，并且選擇是否為默認地址才能成功購買商品。

10） 商品評價：用戶對購買過的農產品進行評價，并在每個商品的詳情頁中可以看到評價信息。

商城的后臺功能如下：

1） 會員管理：對前臺注冊的賬號進行管理。

2） 商品管理：商品管理模塊包括一級分類商品、二級分類商品和商品列表，列表中的商品信息是與一級分類和二級分類緊密結合的，在新增商品時需要確保商品對應的一級、二級分類都存在。

3） 交易管理：包括各個狀態的訂單管理。其中，待支付訂單管理可完成待支付訂單查詢、提醒買家支付以及刪除等功能，待發貨訂單管理是完成發貨或處理訂單，待收貨訂單功能是幫助用戶確認收貨。確認收貨訂單是查看已完成訂單列表。

4） 圖片管理：圖片管理功能模塊主要包括輪播圖管理和商品圖片管理。

5） 消息管理：該模塊主要功能是接收用戶的意見反饋信息。

3.2 系統模塊設計

前臺功能模塊設計包括用戶信息管理、首頁模塊、分類模塊、逛逛模塊、購物車模塊和我的模塊，其框架圖如圖1所示。

后臺管理功能主要由商品管理、交易管理、會員管理、消息管理、管理員管理和圖片管理等，其框架圖如圖2所示。

3.3 系統數據庫設計

好農物商城系統設計規劃有收貨地址、管理員、輪播圖、購物車、收藏、消息、訂單、一級分類、二級分類、商品、商品圖片、逛逛、建議、會員等共14個實體。每個實體中雖然包含了不同的信息，但是它們之間是相互關聯的。主要的數據表及相關字段如表1所示。

4 好農物商城的實現

4.1 前臺首頁模塊

前臺首頁模塊包含廣告輪播、商品一級分類、新品推薦、限時秒殺和商品列表5個子模塊，圖3為前臺首頁模塊的設計。進入首頁，點擊“新品推薦 送貨到家”圖標進入新品推薦列表，進入新品推薦后，可點擊商品列表進入商品詳情頁面或點擊商品右下方加入購物車圖標將商品加入購物車。前臺分類模塊分為商品的分類情況和對應的商品列表，其中一級分類采用better-scroll滾動實現左右滑動效果。當點擊一級分類時，后端會回傳一級分類下的二級分類列表，點擊二級分類，后端會回傳二級分類下的商品列表。用戶成功購買商品后，可在逛逛頁面發布自己的購物體驗和商品分享，發布逛逛時，需要用戶選擇已購買過的商品、上傳照片和分享內容才能發布成功，也可在逛逛中查看其他用戶推薦的商品，點擊跳轉到商品詳情頁面進行購買。購物車模塊是商城必不可少的模塊，給用戶提供了便利的購物方式，會員通過點擊商品列表右下方的加號按鈕，也可通過詳情頁下的按鈕將商品加入購物車。

4.2 后臺商品管理模塊

后臺商品管理模塊包含商品分類管理、已審核商品管理和未審核商品管理，管理員進入管理系統后，點擊產品管理下的一級分類管理可對一級分類信息進行管理，如圖4所示。點擊二級分類管理可對二級分類信息進行管理，如圖5所示。點擊已審核商品列表可對已審核商品進行管理，如圖6所示。管理員進入后臺管理系統后，點擊交易管理下的待支付訂單管理，可查看待支付訂單列表、提醒用戶支付和刪除訂單。點擊待發貨訂單管理，可查看待發貨訂單列表、對訂單進行發貨和刪除。點擊待收貨訂單管理可查看待收貨訂單列表、確認收貨和刪除。點擊確認收貨訂單管理可查看已收貨訂單列表。

5 結束語

好農物商城系統在設計思路上，采用前后端分離的開發模式，前端利用Vue.js+elementUI進行開發，頁面設計風格符合當下群眾的審美，內容模塊劃分明細，內容豐富，操作簡單;后端利用SpringBoot+Mybatis-plus快速開發接口，使用MySQL設計數據庫存儲系統所有數據，后端管理系統按照高度模塊化方式進行開發，便于后臺管理員對數據進行管理和維護。

參考文獻：

[1] 胡瑩瑾.“互聯網+”背景下農業電子商務發展對策探析——評《實戰農業電子商務》[J].中國瓜菜，2020，33（1）：92.

[2] 張怡.“互聯網+”背景下農業電子商務發展初探[J].農業經濟，2019（5）：126-128.

[3] 中國質量新聞網.科技賦“農”，拼多多重投入農產品基礎設施型平臺[EB/OL].（2021-08-10）[2021-10-11].https：//www.cqn.com.cn/cj/content/2021-08/10/content_8721958.htm.

[4] 耿慶陽.基于Spring Boot與Vue的電子商城設計與實現[D].西安：西安石油大學，2020：7-8.

[5] 劉亞茹，張軍.Vue.js框架在網站前端開發中的研究[J].電腦編程技巧與維護，2022（1）：18-19，39.

【通聯編輯：謝媛媛】