聂力　杜丹蕾　韦美雁　 文昕　唐俊杰

关键词：微信小程序；C/S；回调地狱

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

文章编号：1009-3044（2023）02-0029-04

1 前言

随着科技的高速发展，我国的城市化不断推进，越来越多的大自然环境被建设为高楼大厦和水泥公路，这使得那些原本生活在大自然环境中的猫咪的生存空间越来越小，它们被迫离开了自然环境，被人为或非人为地带入城市中[1]，经常吃不饱，到处流浪，受到诸方面的伤害，流浪猫的问题越来越严重[2]；有些人可能会对这一现象表示同情，想收养流浪猫，但却不知道通过怎样的途径[3]；随着时代的变化，人们越来越会享受生活，开始养宠物猫，但养猫的人家却不一定懂得猫咪的生活习惯。所以关于这些问题项目团队基于微信公众平台设计了一款方便、简洁、智能、功能健全的流浪猫领养求助系统[4-5]。

2 相关技术介绍

系统采用C/S（Client/Server）架构，这种架构更便于以后的更新与维护，也是目前主流的設计模式之一。C/S架构安全性高、交互性强、网络通信量低、响应速度快。分为小程序客户端、后台服务端和数据库端的开发[6-7]。

小程序是一种基于微信平台的应用，相对于其他C/S架构的系统，其不需要下载，更加方便。内有许多的内置接口，大大方便了开发人员，节约了开发的时间，提高了效率[8-9]。小程序使用WXML、WXSS、JS和JSON语言进行开发。WXML功能更加强大，新增了数据绑定、列表渲染、条件渲染和模板引用等功能，能够构建更加复杂的页面；WXSS增加了尺寸单位——rpx，这种尺寸单位可以为开发者免除不同屏幕之间换算的烦恼。这些语言上手快，开发周期短，开发完后通常能够在各系统和平台上运行。

服务器后端是采用Java语言用IntelliJ IDEA工具进行编写。Java语言是一种跨平台应用程序的面向对象的程序设计语言，其使用广泛，简单。服务器采用了目前市面上较流行的Spring框架，该框架遵守低耦合、高内聚原则，增加了系统的可读性和可维护性，降低了对环境的要求，无须配置文件，使得开发更加简化，方便和加速了开发人员的代码编写。

采用关系型数据库MySQL管理数据，MySQL体积较小、速度快、成本低而且还是开源软件，获得大多人的喜爱与优先选择，前端向后端请求更新数据后，后端通过MyBaits与数据库进行通信，对数据进行增、删、改、查等各种操作。

3 系统设计分析

3.1 功能设计

“送它回家”系统包括基础功能模块、主要功能模块以及特色功能模块。由猫咪领养模块、猫咪送养模块、为它治病模块、猫圈模块、用品购买模块、消息推送模块、登录注册模块和个人信息模块组成。各模块之间相互独立，便于管理和维护，用户能通过这些功能模块能对猫咪进行全方位照顾。这些模块都实现了前后端互联，页面的加载与跳转。程序界面清爽，操作简单，帮助用户从没有猫咪到学会照顾猫咪与享受猫咪生活的一条龙服务。

3.2 数据库设计

对照几大功能模块，数据库一共设计了7张数据表，分别是cat表（存储猫咪信息），news表（存储猫咪小贴士信息），per表（存储用户信息），ship表（存储猫用品信息），shuo表（存储说说信息），shuodis表（存储说说的评论信息），user表（存储用户账号信息），每个表都有唯一ID，表示每条数据的唯一性。

4 系统实现

4.1 登录与注册模块

界面里input组件绑定了输入事件（bindinput="in?putWatch"），每当input组件被输入了数据，JS就能通过inputWatch（e）函数的形参e进行数据的获取。form组件绑定了提交事件（bindsubmit="submit"），点击提交按钮，JS对填写数据进行校验。首先用trim（）函数判断要提交给后端的参数是否为空，为空便通过wx.showToast（）接口提示“输入内容为空”，不为空便继续进行数据格式的判断，校验通过便使用wx.request（）请求把数据传给后端，后端进行相应的处理。

系统能够以游客的身份进入，如果要进行领养猫咪、购买猫用品等功能时会跳转到登录界面。登录成功后，系统把用户基本信息存入本地缓存中（通过wx.setStorageSync（"userinfo"， userInfo） ）。当程序运行到那些需要登录才能进行下去的功能时，系统首先尝试从本地缓存调取数据（通过wx.getStorageSync（"userIn?fo"） ），然后把获取的数据用if 进行判断，如果为NULL，以便提醒用户登录，否则就进行下一步操作。

4.2 个人信息模块（“我的”模块）

该界面显示和管理用户个人消息，用户在平台上注册了一个账号，那么用户所填写的个人消息就绑定在这个账号上。

界面中间部分是领养记录、送养记录与购买记录的按钮，当用户做了相应的动作后，后台会进行更新数据，点击进入相应的界面就能看到用户做过的相关记录（比如，当用户领养过一次猫咪后，那么领养记录里会有这次领养的情况）。界面的上半部分，当用户登录了就会显示用户的头像与昵称，如果未登录便显示一个登录按钮，此效果是通过view组件中的wx-if实现，小程序先从本地缓存尝试获取用户信息，如果能获取到便显示头像与昵称，否则就显示按钮。

4.3 用品购买模块

此模块是一个电商模块。通过线下团队对周围猫用品店进行筛选，最后挑选出一些质量靠谱的商家进行合作，在这里用户能够买到通过团队认证的猫用品与猫粮。

界面中的所有商品，通过request请求向后端获取，通过view组件中的属性wx：for一次性渲染，点击物品进入物品详情界面。因为每个物品有一个唯一的ID号，在这过程中小程序把用户所点击物品的那个ID 号通过request请求传给后端，后端通过物品ID 号向数据库查找数据，再返回相应ID号物品的详细信息，前端接收后端返回的数据，就能通过一个固定的模板把不同的商品的详情给渲染出来。

4.4 消息推送模块

针对用户群体对养猫知识的兴趣，系统开辟消息推送模块，推送一些猫咪冷知识和生活习惯。消息推送显示在首页的底部，每当用户进入系统时，便能看到系统发布的每日小贴士，方便用户了解猫咪的相关消息。

4.5 猫圈模块

此模块类似于朋友圈，用户能够在这样分享自己与猫咪一起生活的趣事，发布后所有系统用户都可见，能够评论与点赞。

每次进入猫圈都进行一次request请求，获得所有的说说，通过view组件渲染；点击说说下的爱心给说说点赞，此过程前端是通过request请求把说说的ID发给后台，后台进行处理，页面刷新，完成点赞；点击说说下的评论按钮，输入要评论的话后点提交完成评论，此过程前端是通过request请求把评论人的ID、说说的ID、评论内容发送给后台，后台进行相应处理后，刷新页面，完成评论。点击右上角的+号跳转到发表说说界面，发表说说界面由顶部的评论栏、中部的+号（增加图片按钮）和发表按钮组成。点击+号可以从手机中选取图片（wx.chooseImage（）），增加的图片会在+号右边显示，图片右上方会有一个叉号，点击图片会消失，这是一个自定义组件的功能。在上边评论栏写上要分享的话并进行发表。

4.6 猫咪领养模块

此模块是解决流浪猫问题的主要模块。团队的线下猫舍会对周边的流浪猫进行收养，管理员把所有线下猫舍的猫录入数据库，通过前端渲染出来。每个猫有唯一的标识、不同的分类，用户能在这对流浪猫进行领养。

第一次进入此界面时，系统通过request请求向后端获取所有猫咪信息的一个列表，然后将猫咪信息列表和发起request请求时的系统时间保存在缓存中（wx. setStorageSync（"cates"， {time： Date. now（）， data： this.Cates}））。之后每次进入该模块，系统先调取本地缓存中的猫咪列表信息，通过猫咪列表保存的时间和当前request请求的时间相减（设置如果时间差大于1小时数据便过期），如果数据过期，便重新向后台请求新的数据再把数据与时间存入缓存，如果没有过期，便取出本地缓存中的数据。这样当猫咪信息过多时能极大地增加系统运行速度，提升用户体验。界面中通过scroll-view组件形成滚动条；点击猫咪会进入猫咪详情界面（此部分与用品购买模块功能相似）。

4.7 猫咪送养模块

一些人可能会有养宠物的经历，如果出现了一些自己无能为力的情况，必须要对宠物进行放养，那大家可能会很难过。但通过此模块，大家可以把自己不能照顾的猫咪送给他人领养，能够很好地解决这件事情。

需要填写一些基本信息，再点击确认。在发送给后端之前，前端会用JS进行一些简单的验证。后端又会进行一次验证，如果成功，后端把这只猫咪的信息录入数据库，返回送养成功的信息给前端，前端渲染在界面上。过后线下工作人员便会到相应地点带走猫咪。

4.8 为它治病模块

在养猫咪的时候，总会遇到要打疫苗的时候，有时猫咪也会生病，但一些小的诊所可能水平不够，大的医院又感觉没必要。这时候，便能通过该模块联系医生，向医生请求帮助，医生会给你一些更好的意见。

5 技术难点

5.1 回调地狱

在开发初期，遇到一个难点：回调地狱。说到回调地狱首先要先解释一下什么是回调函数，当一个函数作为参数传入另一个参数中，但它不会立即执行，只有当满足一定条件后该函数才执行，这种函数就称为回调函数。而回调函数嵌套回调函数的情况就叫作回调地狱。

微信小程序内置接口wx.request（）是一个异步请求，JS不会等待wx.request执行完毕，会直接往下继续执行代码。所以如果想要获取wx.request接口向后端请求的数据，就必须在它的回调函数里编码。但一两个异步函数的嵌套感觉还不是很乱，当嵌套层数达到4个及以上，代码的可读性会出现极大问题。

但是使用promise对象解决回调地狱问题后，同步过程屏蔽了异步优势。为了解决这一问题，引入了es7 的async、await 语法，在函数前加上async，在re?quest前加上await，表明当前函数是异步函数，不会阻塞线程导致后续代码运行停止。这样解决了promise的一些小缺陷，在请求时，主线程也能一起执行，使代码更加简洁，彻底解决了回调地狱的问题。

5.2 其他

“送它回家”微信小程序由微信开发者工具开发，由于小程序的大小被限制在2MB之内，所以小程序本地不能保存太大的文件，系统界面中的图标是引用阿里云矢量圖标库里的图标样式，图标样式单独形成一个样式文件（iconfont.wxss），被全局样式文件所引用（通过@import "./styles/iconfont.wxss" 实现）。

系统中前端与后端间的数据传输采用了PUT和POST两种方式，当不是重要数据时使用PUT方法，当敏感数据的传输时便采用POST方式传输；前后端图片的传输都以Base64格式进行，前后端在发送图片之前都要先转换为base64格式才能进行传输[10]（"data：image/png;base64， " +wx. getFileSystemManager（）.readFileSync（xxx， "base64"））。

6 结束语

针对当前社会的流浪猫问题，项目团队认真调研分析研究，实现了猫用品购买、送/领养猫咪、了解猫咪的习性学习，为它治病、猫圈等功能，搭建了一个线上线下一体化小程序流浪猫抚养救助平台。

平台很好地解决了一般系统异步请求中出现的回调地狱问题，并通过不同数据分端口传输，确保了系统数据的安全性。通过线上多次实测，平台稳定性与实用价值收到了用户认可。