基于Web的社区销售平台设计与实现

万玲娜

（东华理工大学软件学院，南昌 330013）

0 引言

根据统计局数据，2019年全社会商品零售总额约为40 万亿元，其中线上消费约占10 万亿元，也就是说还有30 万亿的商品是通过线下来完成流通的，社区团购［1］就是实现对这一线下部分线上化的王牌武器。当然，线下购物不可能被完全替代，这其中连锁大商超、大型购物中心以及其他一些能带来独特购物体验的场所的市场份额就很难被社区团购替代，这部分市场份额加起来不超过10 万亿。除此之外，遍布农村城市、大街小巷的小商超、小餐馆，都可以被社区团购线上化［1］。虽然消费者总是会有即时性购物需求，通常来说只有线下场景才能满足这部分需求，但这部分本应属于便利店的市场份额也可以通过社区团批的方式（即社区团购平台成为便利店的供应商）被社区团购平台间接占领。

同时，社区团购的涉及范围不仅仅局限于商品流通，还可以作用于服务类产品的流通，比如理发、配镜这些本地生活服务，乃至教育类服务产品，都可以通过社区团购平台实现和消费者的连接。如果把这个因素考虑进去，社区团购的潜在市场规模还会更加庞大［1］。

社区团购的经济价值和社会价值已经获得了充分证明。而当地居民的消费空间还很大。在当前的数字经济形势下，社区团购有效地推动了乡村振兴和农民的快速致富。在疫情爆发的早期，对于经营着社区团购的企业来说，发展都是不错的，为当地的人们提供了很多的生活必需品。根据数据平台的预测，中国的本地生活服务市场将再创新高，这种快速的发展趋势表明，人们对生活的需求日益增加，对生活的期望也越来越高。

另一方面，社区团购在经历了多次市场整顿和资本介入，也逐步走上了正轨；经过三年的磨砺和培养，社区团购逐渐从肆意成长的过程中摸索出经验，经历了转型、整顿的时期之后，逐渐进入了平稳的发展时期。

1 社区销售平台总体方案选择和设计

1.1 程序语言的选择和Web框架选择

本项目的后端主要使用Java 语言进行开发。Java 语言自一九九五面世至今，现在仍然是最常用的一种Web 程序设计语言。而Java 编程语言也被开发者们普遍所认可，这必定与这门编程语言的设计框架和语言特点有着莫大的关系，正如SUN 公司在Java 语言白皮书中透露的那样：Java是一门简单、面向对象、分布、解释、稳健、安全、结构独立、轻量化、高性能、多线程和动态的编程语言［2］。在近三十年的发展过程中，Java 已经拥有庞大而完善的生态系统［3］，比如此项目使用的开源应用框架就是Java 生态中的Spring Boot 框架。后端的技术栈涵括了SpringBoot 框架、MyBatis、tkMappper、Quartz、Swagger、ngrok 等；前端的技术栈涵括了Vue、Axios、Layui、Element-ui等。

1.2 数据库选择

该项目使用了当前市场上最受欢迎的关系数据库MySQL，在Web 应用方面，MySQL 是最好的关系数据库管理系统应用软件之一。同时MySQL也是开源免费的，可以满足开发需求。

1.3 系统总体方案设计

根据功能分析，本文推导出该项目的结构图，如图1所示。

图1 项目结构图

2 社区销售平台具体设计

2.1 平台整体构建

本项目的编码设计采用的并不是传统的模型-视图-控制器（Model-View-Controller，MVC）开发模式，其中Model 负责作为数据封装的载体，View 负责页面数据的显示，Controller 负责数据的逻辑处理，充当模型和视图之间的桥梁［4］。于此同时，MVC模式也暴露了一些缺点，从用户体验来看，每个请求都要通过“Controller-Model-View”过程，而且视图与模型紧密相关，没有这个模型视图就不能显示出最后的结果；从效率上来看，渲染视图和数据处理是通过同一个服务器进行的，从而造成服务器的过载，这对于有着千万级并发量的项目来说，无疑是很致命的，因为服务器繁忙宕机是较为常见的事情，无法保证对每一个请求都能做出响应，由此可见，这种开发模式显然已经不太适合如今的企业级开发了［5］。

本项目采用前后端分离模式进行开发，很好地解决了上述问题。后端仅处理向前端界面提供的数据，而前端则只负责数据和页面的渲染绘制。作为互联网项目开发的业界标准使用方式，前后端分离模式的核心思想是前端HTML页面［6］通过AJAX［7］调用后端封装的且符合RESTFUL风格的API接口，并使用JSON［8］格式的数据进行交互，即后端提供数据接口，前端调用接口获得数据，前端将获取的数据再进行处理。与之前的JavaWeb 单体项目身兼数职相比，前后端分离模式的后端专注于数据的处理［9］，而前端只需要专注页面的设计和数据的渲染［10］，这样不仅可以有效降低前端和后端之间的耦合，同时也会提高项目的开发效率。

2.2 用户注册和登录模块

用户注册界面如图2所示。在设计用户的登录与注册环节中，均对密码采用了MD5 密码加密，以保障账号的安全性，同时也在登录环节中采用了token 令牌校验的方式，相比于传统的采用session 来存储用户信息，每次验证用户发起的请求时，服务器都需要去创建一个存储对应信息的记录，但当用户发起多次请求时，服务器的压力就会变大。

图2 用户注册

而本系统的身份验证流程如下所示：

（1）用户通过用户名与密码向后端发送请求；

（2）后端通过程序验证token；

（3）程序返回一个token令牌；

（4）客户端存储token 信息并用于用户请求部分受限资源；

（5）服务器对用户携带token 的请求进行校验并返回对应数据。

2.3 分类索引和关键词索引

商品类别效果图如图3所示。用户可以通过点击分类或者在搜索栏中输入关键字来对商品进行查询，并且该页面也支持在原有基础上进行二次品牌查询，做到更为准确化和人性化的查询操作。

图3 商品类别效果图

2.4 商品详情页

商品详情是该系统的核心页面之一，包含了多种数据的展示，包括商品基本信息展示、商品参数展示、商品评论展示以及商品推荐展示等多个版块。用户通过该页面进行购物车加购操作。

2.5 购物车/订单的实现

该模块作为本系统最核心的一部分，用户通过商品详情页对商品进行加购后，可以在购物车中查询商品的信息，并对加购的商品进行删改操作，如图4所示。

图4 购物车页面效果图

用户通过选中需要结算的商品，点击结算按钮，即可跳转到结算页面进行结算操作。用户可以通过点击来选择收货地址以及付款方式，在页尾可以根据选中的数据信息进行动态的更新，如图5和图6所示。

图5 订单结算页面效果图

图6 订单支付成功效果图

通过点击提交订单按钮来生成订单数据以及通过请求微信支付平台得到的支付短链接，前端页面再通过页面渲染将支付短链接转变为二维码，用户通过手机扫码支付，向微信支付平台发请对应的支付请求，微信支付平台根据支付结果响应对应结果，系统再根据响应数据给予用户页面提示。为了便于理解，本文给出订单生成以及订单支付的流程分析图，如图7所示。

图7 订单生成以及订单支付流程分析图

2.6 个人中心页

本系统的个人中心页提供个人信息修改、个人订单管理、个人地址管理和个人评价管理等四个模块。

2.7 轮播图管理

轮播图作为首页版面较大且位置特殊的一个元素，能够迅速抓住用户的眼球，突显网站近期的卖点以及方向，管理员通过配置对应的信息来改变首页轮播图效果，增强用户体验。轮播图管理效果图如图8所示。

图8 轮播图管理效果图

2.8 商品分类管理

分类索引作为商品索引的主要部分，在本系统中分类的最高级别为三级，管理员可以对不同级别的分类进行删改操作，用户也可以根据首页的分类信息来查询不同的商品。

2.9 用户管理

考虑到可能存在用户有不良昵称或者违规操作，管理员可以通过修改昵称或者禁用用户账号的方法来实现社区销售平台的和谐氛围。

2.10 商品管理

管理员通过完善商品信息，使用文字加图片的方式，让消费者能够充分掌握商品信息，增加消费者的购物欲望，同时也可以对库存不足的商品进行下架处理。

2.11 订单管理

管理员可以通过查询订单状态去控制订单的流程，如商品的发货以及订单的关闭。

2.12 评论管理

评论是衡量商品是否值得购买的一个判断依据，管理员可以通过禁言某种不良评论来达到商品控评的效果。

3 社区销售平台测试效果

软件测试就是利用人工或自动化的方法来操作或测量一个特定的系统，以检测该系统是否符合预期的要求，或找出期望和现实的不同。从软件开发的角度出发，从开发模式、工具和技术等方面找出问题和不足，防止再出现的问题。在软件测试中，尽量使用最少的经济成本、人力成本和时间成本去发现软件的不足之处，以确保软件的质量，同时为后期的软件测试积累经验。从用户的要求出发，软件测试可以检测出软件是否与用户的要求相一致，评价和衡量软件的质量，从而为用户评价软件提供了强有力的基础。

对于软件测试来说，静态测试、动态测试、功能测试、性能测试、黑盒测试和白盒测试都是诸多测试方式的一种。在本系统中，仅使用了黑盒测试和白盒测试。黑盒测试的对象是呈现给用户的功能，白盒测试则注重于代码逻辑与数据。

在前期的开发过程中，本文使用Postman 这款软件进行接口的测试，在开发的中期，利用Swagger 插件构建了一个系统的在线接口文档，方便测试，如图9所示。设计的绝大部分功能都可以通过测试，绝大部分的页面符合预期效果。

图9 Swagger接口在线文档

4 结语

本文对目前市面上成熟的社区销售软件进行了分析，结合了前后端分离开发思想，通过使用SpringBoot+Vue的技术，设计开发了该社区销售平台系统。

本文所设计实现的系统主要完成了以下工作：

系统数据方面，主要完成了对应数据库功能表的设计，系统中的绝大部分数据均来自真实商品数据。

系统文档方面，主要建立了涵括了所有接口的文档，方便二次开发和调试。

系统后端方面，本系统作为一个Web 项目，由SpringBoot 框架进行搭建，整合了多种第三方框架，在减少了繁杂配置、降低开发难度的同时，也增强了代码的可读性以及代码的复用性。

系统前端方面，主要是采用了Vue.js 和layui 以及Element.ui 框架，界面风格参照了美团优选和京东购物，采用分页模式加载数据，保证了数据的完整与显示。