基于SpringBoot+Vue的智能随车营销系统

陈冬君 孔海军 吴 荷 饶 浩

（韶关学院信息工程学院，广东 韶关 512005）

1 引言

基于随车营销创意理念，研究和开发智能随车营销平台系统，能够实现在车上进行购物功能。本项目由乘客购买货品的微信小程序、拥有司机模式和补货站模式的App 和PC端后台管理系统三大部分组成。乘客可以通过手机扫码“开箱”拿取机器中所售卖的货品，司机会实时收到销售信息，在售卖机器中的货品库存不足时,司机将会收到补货通知，司机自行补货或预约附近补货站发送补货订单，从而进行补货。补货站在收到补货请求后，准备补货订单详情中的货品并登记补货信息。同时项目还搭建了可视化系统和后台管理系统，实时记录销售数据，设置相关商品信息以及打折方式，随时随地掌握销售情况。本项目还可以通过在小程序、App、网约车投入相关广告，从而获得盈利。

2 架构设计

系统前端采用uniapp框架、Vue、TypeScript、vite、Nginx、Linux、axios、微信小程序技术，结合UI 设计，基于uniapp 框架搭建移动端App、微信小程序技术搭建微信小程序平台和Vue3、vite、TypeScript 搭建PC 端并通过Nginx 等前端服务器方式部署静态资源，且均采用了aixos 技术实现进行服务器数据请求和接收[1]。

系统后端采用SpringBoot快速构建Web应用程序，使用Mybatis-plus对数据进行持久化操作，使用Redis作为缓存[2]，采用MySQL、MongoDB数据库，使用WebSocket技术在浏览器和Web服务器之间建立双向通信，采用Docker容器技术对应用程序进行打包部署到linux服务器上，使用Nginx作为反向代理服务器，采取前后端分离式开发[3,4]，遵循RESTful API风格来设计和开发API接口。

3 系统框架

智能随车营销系统主要由微信小程序、App、PC端三大部分组成。具体实现功能模块划分如图1所示。

图1 随车营销系统总体框架

乘客小程序有三大模块：购物模块、个人信息模块、订单模块。实现乘客通过出租车的广告屏微信扫码进入小程序，授权登录后跟着引导进入首页，可看到该司机售卖的产品，点击去开锁按钮，进行开锁、取商品、关锁、生成订单，完成支付购物流程。乘客可以进行个人信息的修改。

App端有两大模式，分别为司机模式和补货站模式。司机模式有四大模块：扫码绑定机器、商品管理、补货模块、统计模块；补货站模式有两大模块：订单模块和商品管理。主要实现司机利用已绑定的机器进行售卖商品，补货站为司机提供进货功能。

PC 端有两大模块：统一后台管理系统和数据可视化大屏两大模块。管理员可以根据注册账号和登录功能进入管理平台，可以查看收益数据、投放广告功能、管理商品等，如图2所示。

图2 平台数据界面

4 商务功能模块

4.1 购物

乘客用户通过出租车的广告屏微信扫码进入小程序，微信授权登录，填写个人信息，并发送微信临时登录凭证至服务器，服务器接收数据后，进行登录验证，生成微信登录唯一标识oppenId[5]，并将用户信息存储在数据库表中，界面通过收到服务器从数据库中获取的信息，利用for 循环进行动态渲染，用户跟着引导进入首页，查看该司机售卖的全部产品，点击去开锁按钮，进行机器开锁，将机器的唯一标识机器编码发送至服务器，当用户拿取商品时，储柜内置摄像头采用OpenMV 图像处理模块[6]，将用户拿取的商品信息反馈给服务器，服务器接收到数据自动生成订单发送至小程序实现页面的跳转至订单详情页面，完成关锁、生成订单、完成支付流程。乘客也可以根据储柜的产品进行搜索购买，将搜索关键词发送至服务器，服务器通过对数据库表中的数据进行查询，进而对页面重新渲染。具体流程如图3所示。

图3 购物模块流程设计图

4.2 添加商品

添加商品功能仅提供给司机和补货站用户，主要是司机对所绑定的售卖机器中的货品进行管理，补货站用户对补货站所售卖的货品进行管理。为了方便用户的使用，提供了两种添加货品方式，分别为手动添加和拍照识别添加。手动添加是由用户手动添加上售卖的产品信息，拍照识别技术是用户通过摄像头拍摄货品，进行货品的识别，用户也可以在额外手动修改货品信息。通过axios 技术发送GET 或POST 请求将用户填写的数据发送至服务器，由服务器对收到的全部数据进行清洗和提取有效数据，并添加到数据库表中。具体流程如图4所示。

图4 添加商品模块流程设计图

4.3 补货

当车内售卖机器存库不足时，司机可通过自行补货或预约附近补货站进行补货。客户端获得到司机当前的定位信息，并将定位信息发送到服务器根据当前定位信息将查询到的附近补货站的相关信息发送至App，实现界面动态渲染。因此司机用户通过使用App查找附近补货站，服务端查询附近补货站功能具体实现：根据请求的路径（@GetMapping("select/{longitude}/{latitude}")），从路径参数中获取经度和纬度。创建一个Point 对象，用于表示给定的经度和纬度。创建一个NearQuery 对象，并设置最大距离为20 公里。该对象表示一个地理位置查询，指定查询附近的位置。使用mongoTemplate 对象执行地理位置查询，返回一个GeoRes-ults 对象，其中包含了附近位置的结果。创建一个空的ArrayList 对象，用于存储查询结果中的位置信息。遍历查询结果中的每个地理位置。获取当前地理位置的内容（SupplementMap 类型），即具体的位置信息。将当前位置信息添加到位置信息列表中。构建一个成功的响应对象，并将查询到的位置信息列表作为数据返回。响应对象使用自定义的R类型，使用R.ok() 表示成功的状态，R.ok().data("map",locations)表示将位置信息列表作为名为"map"的属性添加到响应中。

司机查询到附近补货站并发起订单申请，在客户端应用程序中填写订单信息，将订单信息发送到服务器端。服务器端接收到订单信息后，将其保存到Redis 数据库中，生成一个唯一标识符（Order ID）用于标识该订单。订单信息推送给补货站端：补货站终端通过WebSocket 连接到服务器端。当有新的订单申请时，服务器从Redis 数据库中获取订单信息，并使用WebSocket 将订单信息推送给补货站端。实时更新订单状态：补货站通过WebSocket 接收到司机发来的订单信息后，可以选择接单或者拒单进行订单处理。如果补货站选择接单，订单状态将更新为“已接单”，并将订单信息持久化存储到MySQL 数据库中。如果补货站选择拒单，订单状态将更新为“拒绝接单”。服务器通过Websocket将更新的订单状态信息推送到司机端，以便司机实时获取订单状态信息。App中的补货站模式全局挂载着监听事件，当收到补货订单时，页面将实现弹窗功能，将弹窗盒子的布局由不显示变为显示，点击弹窗内按钮实现查看订单详情，实现补货站收到补货请求信息。具体流程如图5所示。

图5 补货模块流程设计图

5 数据呈现

智能随车营销系统需要对大量数据进行处理，包括司机的个人的账单收支情况、补货站的销售情况、区域广告投放情况、司机和补货站分布情况、商品销售情况等。通过数据分析技术建立广告投放数据仓库模型和商品销售数据仓库模型，对于大量臃肿的数据，采用mysql+Echarts技术将大量数据进行分类并图形化展示，来方便用户更直观地分析数据；也可以精准判断出具有较高商业价值的用户行为，可以掌握用户的购买行为和偏好，为用户提供购买建议，激发用户的购买欲望[7]。

补货站分布地图显示：通过服务器返回的所有补货站的信息，提取json 格式的补货站地理位置的经纬度数据，创建中国地图的Echarts 实例，通过series 属性对实例进行绘制，将提取的数据渲染到绘制好的图表地图上，根据补货站的商品情况，当管理员点击某个补货站的位置点时，将该补货站的商品情况返回到界面上。

广告投放：针对广告投放数据仓库中广告播放量、播放时长等数据进行分析，对区域投放广告。小程序从数据库获取到投放广告的相关数据后，通过读取视频url地址，使用vedio 标签和swipers 组件，实现广告视频自动轮播并自动播放功能。

销售汇总：针对商品销售数据仓库中总销售额、订单数等数据进行分析，在组件刚挂载的时候，向服务器发送GET请求，收到服务器发送过来的json 格式的数据，将渲染在已创建并通过series 属性进行绘制的Echarts 实例上,将实例映射到文档对象模型(DOM)[8]。如图6，可以直观地观察到销售数据的整体走势。例如销售额折线，在1 月至4 月数据整体是趋于稳定的，在4 月至5 月，数据逐渐下降甚至达到谷值，在6月至12月，数据逐渐增长并趋于稳定。通过数据变化趋势可以看出整体趋势相对稳定。通过比较各个月份商品销售的差异，可以找出销售的周期性规律、趋势和数据的异常趋势，例如，1月至4月和7月至12月，有季节性波动，但整体趋势相对稳定，而5月至7月，数据逐渐增长。对此可以调整销售策略，从而实现销售利润最大化。

图6 销售汇总数据呈现图

装机数量：指已安装并绑定售卖的全部机器的数量。通过mysql 语句查询机器绑定表的全部有效数据[9]，在组件挂载在页面的时候，向服务器发送GET请求，将数据渲染在已创建并绘制好的Echarts实例上，将实例映射到文档对象模型(DOM)。如图7，从折线图可以直观地看出每个月份的总装机数量，如4 月的装机数量达到峰值，且数据整体呈上升趋势。对此，可以适当增加补货站的商品数量或者增加新的补货站站点。

图7 装机数量数据呈现图

6 结语

本项目采用Vue、Springboot 技术，搭建微信小程序、App、PC 端三个平台，在页面设计上，以简单易用、直观友好为第一要点，提供指引使用操作，使得用户能够快速地了解营销活动的信息和优惠，司机和补货站用户可以快捷方便使用；并提供了通过不同设备的分辨力和尺寸大小进行页面的自适应，保证了页面的美观。在激烈的市场中，随车营销平台作为运营商和车主之间的桥梁，具有便利的交互模式和较好的用户体验，可以提升运营商与客户之间的沟通和交流效率。