基于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.

【通联编辑：谢媛媛】