基于uni-app的果蔬配送平台系统的设计与实现

吴家旭 吴建胜 王新元 郎书旭

摘要：近些年来，随着互联网的蓬勃发展，生活质量的不断提高。受互联网的影响，人们开始注意饮食的健康，对食材的要求有所提高，传统的购买方式无法得知食材的来源与新鲜的程度。相较于传统的购买方式，果蔬配送平台使得人们购买更加方便，购买的产品品质优良，节省时间精力。通过系统中的“智慧果蔬”功能保证了食品的质量与可靠性，方便了用户的使用，相信果蔬配送平台会受到大众的青睐，在未来逐渐代替线下售卖。

关键词：前后端分离架构;果蔬配送;后端设计;uni-app

中图分类号：TP311      文献标识码：A

文章编号：1009-3044（2022）16-0046-02

1 系统设计

1.1 需求分析

随着科技的进步，网络的日益发展，人们不满足于线下耗时久、货源少的购物方式，而是通过网上购物，选择更多且更有质量保证的产品。现如今，蔬菜水果的售卖集中于线下个体店或大型超市，部分人不愿意耗费时间或精力再去挑选果蔬等物品。开发果蔬配送平台小程序正是基于此社会需求分析的结果。

线下售卖需从厂家进货，由线下售卖点进行销售，利润来源于中间差价，此平台由厂家直接进行配送，厂家负责配送周边的区域，减少了商品流動，降低了成本。使得所配送的果蔬价格低廉。小程序所开发的功能齐全，包括预订配送、每日推荐商品、购物记录、意见反馈和订单等功能。平台还提供特有的“智慧果蔬”功能来保障果蔬的质量，只需回家烹饪菜肴即可。优化了用户体验，提高用户的购物满意度，更加贴合市场需求。且不用安装，即开即用，节省手机空间，相较于App开发成本更低，并且降低了用户的使用难度，为用户节省时间。

1.2 技术需求

本系统需要可靠的稳定性与安全性，数据自动备份，加密用户信息，控制访问用于系统管理员控制用户对服务器、目录、文件等网络资源的访问。前端采用uni-app与VUE.JS框架快速搭建页面，运用最新的HTML5及CSS3技术与JavaScript。后端使用基于C# 语言的 ASP.NET Core Webapi框架。数据库采用SQL Server 2019。

1）Vue是一套用于构建用户界面的渐进式框架，可以进行双向数据绑定，进行组件化开发，轻量高效，使用路由超链接跳转时不会刷新页面，优化用户体验。

2）uni-app框架是一个使用Vue.js开发的框架。uni-app只需要编写一套代码多端实现，就可以发布到iOS、Android、H5以及各种小程序等多个平台，实现跨端并支持原生代[1]。

3）Microsoft SQL Server是一款功能强大的关系型数据库管理系统，具有使用方便可伸缩性好与相关软件集成程度高等优点，为关系型数据和结构化数据提供了更安全可靠的存储功能。

4）使用.NET（C#）平台。从数据处理效率来说，当软件内容较为复杂或数据处理量比较大时，使用.NET（C#）平台提升运行效率则显得尤为重要[2]。

1.3 功能板块

该平台主要分为六大板块分别对应首页、分类及商品详情、购物车、活动、智慧农场和个人中心。

1）首页：可以查看用户附近支持配送的门店、商品分类、售后、预定配送、每日推荐商品、每日限定特价福利商品和产品销量排行榜。

2）分类及商品详情：本页面提供商品的详细分类和商品售卖情况，显示商品近一周内的价格波动情况，还提供搜索词条和加入购物车功能，在分类选项中特设秒杀专栏，由厂家限量推送特价产品。点击商品进入详细界面可查看物品详情与买家评价晒图，并推送相关产品。

3）购物车：在本页面，消费者可以查看自己所要购买的所有物品，提供价格总和。

4）活动：在活动界面特推出“健康均衡，私人订制”，我们会为用户提供每日膳食搭配，为用户搭配均衡的营养菜系并推荐适合做营养菜系的优质食材。这种定制，可以根据客户家庭成员喜好，需求进行搭配，会让消费者觉得很高级，很享受。此界面会根据不同用户需求不断更新补充更多优质活动。

5）智慧果蔬：我们使每个果蔬的包装上都贴有自己成长历程的二维码，扫描二维码，会弹出用户所购买果蔬的生长视频，上面详细记录着它的选种、施肥时间、浇水时间、农药使用等情况。保证每个产品都能追根溯源，从根本上保证农产品质量。

6）个人中心：个人中心提供购物记录，我的商品，意见反馈和订单功能，用户可以通过查找购物记录，查看购买商品的记录和购买时填写的信息记录。我的商品里面可以修改上传的商品信息，还提供下架功能。同时卖家可以查看意见反馈。在订单栏中设置全部、待付款、待发货、待收货、已完成等5个栏，用户中心中特设有存储款，用户可以通过存续款获取优惠券，以得到更多的优惠，每一笔费用都会通过后台实时显示在收支记录中。

1.4 创新技术支持板块

uni-app 是一个使用Vue.js 开发所有前端应用的框架，一套代码，可发布到iOS、Android、Web（响应式）以及各种小程序、快应用等多个平台。基于Vue打造的小程序端框架，在页面文件、数据绑定及事件处理方面遵循Vue单文件组件（SFC）规范，同时，其组件标签、接口能力（JS API）又依托于小程序的规范[3]。采用懒加载的加载模式，减少了因网速而导致的页面崩溃等问题，MyBstis中的延迟加载，也称为懒加载，例如在加载很多东西的时候，MyBstis再发出SQL语句进行查询。这样延迟加载就可以减少数据库的压力。机器打印二维码，在商品的包装外部打印二维码可通过二维码查询此产品的所有生产信息。数据库：SQL Server 2019。C#语言ASP.NET Core Webapit框架，其中C#就是一种精确且简单的一种，它是一种类型全面且面向对象的语言，并拥有其强大的周边，数据传输以json的数据格式进行数据的传输与储存，通过分流算法解决负载均衡问题合理分摊系统压力。

1.5 数据库设计

1）商品表：商品ID为主键，作为唯一标识，可通过商品ID查询到每一个商品，属性分别为商品名称、商品价格、商品数量、商品详情、商品评价、商品配图等。

2）用户表：用于存放用户的登录ID，登录User Name和Password信息，同时在用户表存储管理员账号，此表ID为表的主键[4]。

3）购物车表：将被选中的商品导入到购物车表，每个用户对应一个购物车表，提供商品的所有信息，标识价格，购买数量number。

4）分类表：作为产品分类的表格，通过class 属性，系统会将售卖的商品自动添加到属于它的总类页面上。

5）订单表：属性为商品ID，购买数量number，计算总价格allprice，自动生成的订单编号。订单编号时间年月日时分秒加两位随机数生成并存储到订单编号属性中。

2 项目内容分析

2.1 项目创新内容

基于uni-app的果蔬配送平台系统可以多平台使用，作为一个小程序无须安装，即开即用，节省了手机空间。相较于App开发，小程序的成本更低，用户使用更加便捷，公众号关联小程序使小程序更容易推广。其中智慧果蔬功能将每个出售的果蔬包装上配备二维码，买家可以通过扫二维码来获取果蔬的生长视频，详细记录着它的选种、施肥时间、浇水时间、农药使用等情况。区域定位匹配功能分配给每个厂家各自的配送区域，用户填写收货地址后，通过算法定位匹配负责配送的厂家。

2.2 拟解决问题及优化内容

对于监控果蔬生长的设备维护成本设备在非人为的情况下损坏由供货商承担。

创新点：应用uni-app技术实现了一端开发多端运行。告别了传统的开发模式，节约了人力物力，提高程序的可维护性。

2.3 代码示例

第三方登录微信授权具体实现：

wxGetUserInfo（） {

uni.login（{

provider： 'weinxin'，

success： res => {

if （res.code） {

uni.getUserInfo（{

success： user => {

uni.request（{

url： "http：//localhost：3000/wxLogin"，

method： "POST"，

3 系统测试优化及使用

3.1 系统测试

在前后端开发完成后进行前后端的交互，根据需求分析进行测试，是否达到预期功能，测试包括前端测试，是否能流畅地切换各种页面，是否有卡顿与加载延迟，调整界面细节进行美观优化等。后端提供json格式的数据传输，测试数据传输的稳定性[5]，挂载到服务器上测试界面刷新速度判断是否要增加延迟加载处理界面崩溃等问题，登录管理员网页界面，将数据添加、删除、修改等操作，是否会出现无用数据的残留，能否达到预期的效果，测试微信授权登录是否运行正常，重要信息数据是否暴露在外，并进行调整，测试订单数据，订单编号能否通过大量瞬时的数据测试 。

测试完成后將问题集中写成文档，通过交流前后端协同将问题进行处理与优化，直到达到预期的设计需求，就可以打包并上线使用。经过几轮的测试与修改优化，本系统可在微信小程序中可以进行良好的运行，数据不会出现丢失的情况，管理界面可及时获取各类数据并拥有权限修改，如下架、上架、封号等处理手段，运行界面如图1所示。

3.2 系统优化

减少HTTP的请求，例如删除没必要的图片、js代码、多余的css和多余插件等等，使用预加载与缓存技术，提高加载速度，对于后端的处理主要是提高请求能力、效率、硬件性能，这些都可以提升系统的性能，检查程序代码规范，数据库结构对性能的影响，比如一些糟糕的循环语句、查询语句、索引表等，检查接口功能是否单一，子类父类是否有多余重复定义，达到高内聚低耦合。

4 结束语

基于uni-app开发的果蔬配送平台小程序紧跟时代的脚步。通过uni-app框架开发使得其性能更加强大，流畅。同时跨多种平台开发，减少了开发成本。基于人们愈发重视食材选择的大环境，此平台的出现具有必然性。

本系统尚处于开发阶段，会不断开发出新的功能模块，并且会完善智慧农业模块的相关功能，进一步地优化系统算法，使得系统的运行更加稳定与快速，此平台使用户与厂家达到了共赢，极大地解决果蔬产品因储存太久而造成经济损失的问题。小程序方便快捷，开发成本低，可一端多开发，且具有庞大的微信用户支持的特点，会使这款平台越走越远。

参考文献：

[1] 陈思，冷雪.微信小程序开发方式对比[J].电子制作，2020（2）：22，52-53.

[2] 魏恒.PDMS二次开发语言PML与.NET（C#）的对比[J].电子世界，2021（2）：186-187.

[3] 杨晓燕.基于ASP.NET的项目管理系统的设计与实现[J].科技传播，2015，7（16）：128-129.

[4] 沈佳棋，倪珊，王杰，等.基于Vue+SpringBoot的分类学科竞赛管理系统设计[J].无线互联科技，2020，17（17）：74-77.

[5] 李威威.基于前后端分离架构的工作台账系统设计与实现[J].云南民族大学学报（自然科学版），2021，30（2）：174-178，184.

【通联编辑：谢媛媛】