基于SpringBoot+Vue的好農(nóng)物商城的設(shè)計(jì)與實(shí)現(xiàn)

陳小燕 朱映輝 余曉春

摘要：我國正處于傳統(tǒng)農(nóng)業(yè)逐漸轉(zhuǎn)入現(xiàn)代農(nóng)業(yè)的新發(fā)展階段，在互聯(lián)網(wǎng)時(shí)代背景下，為及時(shí)變更經(jīng)營模式、引進(jìn)新技術(shù)以利好農(nóng)產(chǎn)品的銷售，開發(fā)了好農(nóng)物商城，系統(tǒng)采用SpringBoot、Vue、Mybatis-plus與MySQL數(shù)據(jù)庫等技術(shù)構(gòu)建，分為前臺管理和后臺管理兩部分。前臺管理主要包括用戶、首頁、商品分類、逛逛、購物車、訂單和我的模塊等。后臺管理主要包括管理員、會員、商品、圖片、訂單等的有效管理。開發(fā)的系統(tǒng)界面簡潔、運(yùn)行穩(wěn)定，具有一定的實(shí)用價(jià)值。

關(guān)鍵詞：農(nóng)產(chǎn)品商城;SpringBoot;Vue;Mybatis-plus;MySQL數(shù)據(jù)庫

中圖分類號：TP311? ? ? 文獻(xiàn)標(biāo)識碼：A

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

1 背景

互聯(lián)網(wǎng)在全國各地得到了廣泛應(yīng)用，在農(nóng)村的普及率更是逐年遞增，“互聯(lián)網(wǎng)+”模式為傳統(tǒng)農(nóng)業(yè)轉(zhuǎn)型至現(xiàn)代農(nóng)業(yè)提供了有效途徑，為農(nóng)村農(nóng)業(yè)電商的崛起提供了有利環(huán)境[1]。

近年來，我國農(nóng)村零售額不減反增，因?yàn)槲覈娚绦袠I(yè)中誕生了一大批農(nóng)村電商，農(nóng)村電商作為扶貧新興的“領(lǐng)頭羊”，憑借著全新的銷售模式，能夠有效解決農(nóng)民因不能及時(shí)了解市場動向、對農(nóng)產(chǎn)品定價(jià)無主動權(quán)、農(nóng)產(chǎn)品利潤被中間商大比例瓜分等因素導(dǎo)致的農(nóng)產(chǎn)品滯銷、消費(fèi)者有錢買不到優(yōu)質(zhì)農(nóng)產(chǎn)品等現(xiàn)象[2]。有數(shù)據(jù)顯示，2021年農(nóng)產(chǎn)品網(wǎng)絡(luò)銷售額突破7800億，某平臺上的購買次數(shù)均在10萬次以上，是上一年同期的1.5倍以上，是2019年一整年農(nóng)產(chǎn)品銷售額的1.7倍以上[3]。

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

2 技術(shù)綜述

該系統(tǒng)主要采用SpringBoot、MyBatis-plus、Vue等技術(shù)進(jìn)行開發(fā)。后臺數(shù)據(jù)庫使用MySQL數(shù)據(jù)庫來實(shí)現(xiàn)數(shù)據(jù)管理。

2.1 SpringBoot

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

2.2 MyBatis-plus

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

2.3 Vue

Vue集合了容易上手、使用范圍廣、功能性強(qiáng)和性能極高等優(yōu)點(diǎn)，是目前使用率最高的JavaScript框架。Vue基于MVVM模式，通過數(shù)據(jù)雙向綁定，極大地降低了前端開發(fā)的難度，也縮短了項(xiàng)目開發(fā)周期[5]。

3 好農(nóng)物商城的分析與設(shè)計(jì)

3.1 系統(tǒng)功能性分析

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

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

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

3） 農(nóng)產(chǎn)品展示：通過首頁輪播圖、新品推薦、限時(shí)秒殺、商品分類選擇等方式快速鎖定價(jià)格最低、最新鮮的產(chǎn)品。

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

5） 訂單查詢：用戶提交訂單后，可在個(gè)人訂單中查看不同狀態(tài)下的訂單狀態(tài)。

6） 商城系統(tǒng)信息：接收系統(tǒng)的消息，提醒用戶當(dāng)前有未支付的訂單。

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

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

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

10） 商品評價(jià)：用戶對購買過的農(nóng)產(chǎn)品進(jìn)行評價(jià)，并在每個(gè)商品的詳情頁中可以看到評價(jià)信息。

商城的后臺功能如下：

1） 會員管理：對前臺注冊的賬號進(jìn)行管理。

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

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

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

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

3.2 系統(tǒng)模塊設(shè)計(jì)

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

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

3.3 系統(tǒng)數(shù)據(jù)庫設(shè)計(jì)

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

4 好農(nóng)物商城的實(shí)現(xiàn)

4.1 前臺首頁模塊

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

4.2 后臺商品管理模塊

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

5 結(jié)束語

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

參考文獻(xiàn)：

[1] 胡瑩瑾.“互聯(lián)網(wǎng)+”背景下農(nóng)業(yè)電子商務(wù)發(fā)展對策探析——評《實(shí)戰(zhàn)農(nóng)業(yè)電子商務(wù)》[J].中國瓜菜，2020，33（1）：92.

[2] 張怡.“互聯(lián)網(wǎng)+”背景下農(nóng)業(yè)電子商務(wù)發(fā)展初探[J].農(nóng)業(yè)經(jīng)濟(jì)，2019（5）：126-128.

[3] 中國質(zhì)量新聞網(wǎng).科技賦“農(nóng)”，拼多多重投入農(nóng)產(chǎn)品基礎(chǔ)設(shè)施型平臺[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的電子商城設(shè)計(jì)與實(shí)現(xiàn)[D].西安：西安石油大學(xué)，2020：7-8.

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

【通聯(lián)編輯：謝媛媛】