1. 引言
随着互联网的不断发展，我国网民中使用手机上网的人数占总网民人数的99.3% [1]。微信小程序背靠微信这个巨大流量入口和2019年发布的资源扶持计划，到目前为止日活已突破3.3亿 [2]。而大学生作为一个快速接受新事物的群体，因此基于微信小程序的校园服务平台也越来越受到关注。
目前市面上的现有的校园类服务平台鱼龙混杂，参差不齐。首先，APP类客户端或安全性不高的平台由于代码复杂，可能会造成的信息泄露和页面被黑客篡改 [3]。其次，校园类小程序大都形式单一，功能简化，无法满足大学生个性化的生活学习需求。再者来说，大量校园类小程序页面设计的美观性与反馈性欠缺，给用户混乱的视觉感受和交互体验，导致用户留存率不高 [4]。
基于以上问题的出现，团队经过研究与设计，选择在微信完善的开发环境下进行校园小程序服务平台的开发，调用微信相应接口即可完成开发，解决了APP类校园服务平台可能出现的安全问题 [5]；而相比于同类校园小程序，如校园二手交易信息汇、番薯打卡等功能较为单一的产品，萌校园作为校园功能整合的服务平台有着巨大的市场潜力和满足大学生需求的能力；针对页面设计问题，萌校园界面经过精心设计，采用了清新风格的图标配色加之功能的齐全和项目完成后的不断测试反馈，给用户带来良好的使用体验。
本文致力于研究现有校园类服务平台存在的问题，本着学在校园、住在校园、玩在校园的理念，结合当下大学生所需要的课表、查询成绩 [6]、空教室、二手平台 [7] 和论坛等功能和微信小程序无须安装，用完即走的模式 [8]。设计了一款便捷、简单、易上手的校园类智慧服务平台，为大学生提供高效便捷安全的校园生活服务。
2. 开发工具及语言
2.1. 微信/QQ小程序
由于微信和QQ同属腾讯计算机系统有限公司的两大热门产品，故微信与QQ小程序可共用腾讯的产品生态，且在代码上可以直接转换并且相互兼容，实现了一次开发，两边上线的需求，实现了类似于跨平台的效果，下文中的小程序即指微信和QQ小程序。它们都是使用JavaScript脚本语言基于vue开源开发框架再次深度定制，且提供一套特有的实用的API，使产品的开发简单，程序运行稳定。其直接腾讯成熟的生态体系也实现了应用“触手可及”的梦想，用户只不需要再下载其他的APP，只需扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题 [8]。
2.2. ThinkPHP
ThinkPHP是一款基于MVC三层架构的轻量级PHP框架，其在发布时便是专门为API而生，适合小程序的这种前后端分离式的开发。ThinkPHP框架(原名FCS)，由上海顶想信息科技有限公司开发和维护，基于MVC三层架构，遵循Apache 2开源协议发布，是为Web应用快速开发而打造的一款轻量级Web框架 [9]。其采用MVC的设计模式和面向对象的开发结构，不仅融合了Struts的Action思想，还使用了JSP的TagLib标签库，封装了很多如CURD的常用操作，使模板引擎、缓存机制、认证机制和扩展性都有极大地提升 [10]。
2.3. Spring
Spring框架使用的是基本的JavaBean来完成以前只可能由EJB完成的事情。然而，Spring的用途不仅仅限于服务器端的开发。业务逻辑层处于控制层和数据访问层之间，在数据交换中起着承上启下的作用，它包含具体应用的业务对象、业务规则和业务服务，完成特定的业务逻辑功能，并封装成JavaBean组件交由SpringIoc容器进行管理 [11]。其特有的轻量级控制反转(IoC)和面向切面(AOP)，也使得代码的后期维护和二次开发非常的便捷。同时，基于Java语言，既有解释型和编译型语言的特点，采用JVM虚拟机，使得它也非常适合此次研究中稳定运行程序的需求。
2.4. Nginx
Nginx是一款HTTP和反向代理服务器，其配置方法简单，内存消耗极少，并发处理高效。Nginx支持的负载均衡方式有轮询、IP哈希、URL哈希、加权轮询、最少连接数法等等多种方式 [12]。由一个核心和一系列模块组成，核心主要提供Web Server的基本功能，以及Web和Mail反向代理的功能。Nginx的系列模块提供了core内核、event事件、HTTP服务、mail邮件、misc杂项五种类别，每一类模块根据需要又有多种具体模块 [13]。以上特点使Nginx作为负载均衡的信息集中分发的信息中转软件成为了最佳的选择。
2.5. MySQL
MySQL关系型数据库通过“客户端/服务器”模式实现的，是一个多用户、多线程的小型数据库，具有其稳定、可靠、管理方便以及支持众多系统平台的特点，适用于中小项目的开发 [14]。使用不同的表格来存储数据，具有运行速度快、使用成本低、开放源码等优点。MySQL软件使用C和C++进行编写，进行了多种测试，确保源代码的移植 [15]。
萌校园服务平台通过前端colorUI组件与后端ThinkPhp技术对全校师生课程情况及教室安排进行爬取，结合对关系型数据库MySQL和非关系型数据库Redis的增删查改操作返回用户正确的结果。用户通过前端组件的操作即可完成空教室、课表、二手市场、私密论坛、电费查询的一体式完美体验。
2.6. CentOS
CentOS是一个基于Red Hat Linux 提供的可自由使用源代码的企业级Linux发行版本。其完全免费,独有的yum命令支持在线升级，可以即时更新系统等特性。由于CentOS 7系统采用了XFS文件系统，XFS 能够通过日志很好的保护系统数据的完整性 [16]。也使得其成为了本次研究的十分重要的工具。本次研究使用CentOS作为服务端的操作系统，确保了整个平台的后端能够高效稳定的运行。
3. 平台总体设计
平台总体基于前后端分离的设计，前端部分使用小程序原生所提供的Ajax等API调用后端的数据在小程序前端进行展示，实现数据的动态加载。界面上使用ColorUI开源组件库制作，使产品整个界面风格统一、简约大气、交互效果人性化，同时也大大缩短了前端的开发时间。后端使用基于PHP编程语言的think PHP框架和基于JAVA编程语言的Spring框架进行爬虫和常规功能的开发。部分数据通过爬虫实现模拟登陆然后进行网络数据采集，并使用正则对数据进行清洗，制作成前端所需要的API，实现小程序前端到学校指定系统的实时数据展示。常规功能的开发则采用了Mysql+redis的数据库开发模式进行开发，同样制作成前端所需要的API。
平台总体数据爬取来源于内网，因此也使用了小米路由器进行了嵌入式开发。给路由器的闪存芯片烧入了基于linux发行版的openwrt嵌入式操作系统。在openwrt系统中运行了基于GO语言开发的frpc程序，在公网的服务器上运行frps程序与路由器建立一个TCP长连接，将内网的TCP请求转发至路由器，路由器再通过该长连接返回给服务器，实现了传输层的内网穿透。
模拟登陆时对于验证码自创了一套验证码识别算法，其大致思路如下：
a) 使用php将图片像素化，通过每个像素点的颜色和位置识别该点是背景、有效字符或者噪点；
b) 处理后的图片进行二值化，转成相应的0/1字符串；
c) 人工创造相应的字符训练集，本文的研究的训练集容量为240条记录；
d) 训练完毕，整合进爬虫代码，并在不断的生产运行中统计，将长期没有调用的训练集清除，增加日后识别该验证码的效率。
基于小程序将之前的多个平台的且需要内网的数据集中到一个一体化，简洁化，易用化的平台，有网即可访问，为同学们提供便捷安全的服务。作为给在校学生一个便捷，简单的校园类服务平台，集合了大学学子最需要的功能，学在校园、住在校园、玩在校园，同学的需求就是产品的需求。平台针对在校大学生所提供的功能包括空教室查询，课表成绩查询，倒计时任务、二手市场、TodoList、电费查询、私密论坛，在线预约，个人信息认证管理等功能。
3.1. 前端布局设计
考虑小程序的轻简和不占用过多内存的特点，在符合用户需求的前提下萌校园服务平台设计了两个界面，分别为个人信息界面和首页，其他页面则可按需加载，使得用户的设备的性能可以得到最大限度的节约。
3.1.1. 首页布局设计
首页罗列了在校大学生所需要的各种功能，整体由layout布局把界面从上至下分为五个版块构成：页面顶部为header标题部分，第二部分为轮播图，第三部分为功能展示区域，第四部分为优美好句，第五部分为底部导航。其中轮播图采用小程序原生组件库中提供的swipe标签进行显示，左右tabBar页面切换使用小程序原生的路由APIwx.switchTab (Object object)完成，功能展示区域使用icon图标和button按钮实现页面跳转和数据传递，整体页面风格采用简约风格，可以自行更换配色。具体如图1所示。
3.1.2. 个人页面布局设计
界面绑定了已认证用户的信息，只有当用户输入教务系统的账号及密码时才可认证成功，根据这些用户的账号和密码信息向后端返回token作为登陆验证，由PHP先对来源进行鉴权，判定是否来源于自己的小程序，鉴权允许后便使用前端传过来的账号和密码进行模拟登陆，登陆完即可开始抓取对应网站的数据，并制作成API返回给小程序前端。界面则由layout垂直布局展现，从顶部开始为用户的头像姓名和小程序的版本信息，随后的列表分别为：身份认证，个人设置，更新日志，加入我们，推荐给好友这几个板块构成。身份认证包含此用户的专业班级学号等基本信息；个人设置可根据用户的喜好更改小程序、课表的配色，还可清除缓存；更新日志包含每次大小版本更新优化的位置及时间。
3.1.3. 主要功能–课表
用户完成认证之后在小程序功能页面进行点击操作，触发课表的button从而实现页面跳转，如果前端有课表信息的缓存则直接从缓存中获取，如果没有则可请求服务器。服务器则通过前端传回的cookie到对应的网页抓取数据返回给前端，返回的数据通过colorUI组件和前端基础语言写好的样式被渲染到相应的位置，形成用户所看到的课程表界面，并且课表可通过周次的切换。
3.1.4. 主要功能–蹭课与空教室
这两个功能还是与课表功能保持了一致性，是对think PHP所爬取教务系统的全校课表数据库的筛选和查询功能，与课表不相同的是查询的字段有所不同。蹭课通过课程名称字段在课表数据库中进行查询，查询得到的结果会以json的形式返回给前端，最终以列表的形式展现。空教室拥有三个规定的查询字段，分别为校区，日期，节次，以下拉选择框的形式供用户操作，若不进行选择更改校区日期和节次，则以默认的字段返回给后端以查询数据库，最后以表格的方式展示出来。
3.1.5. 主要功能–TODO和倒计时
TODO又称之为待办事项，是日常计划的一种罗列方式，用户输入待办事件通过enter键发送，会自动添加到下方列表中，可对待办事件勾选删除操作。
倒计时使用微信小程序所提供的组件完成，例如输入考研日期，四六级考试日期，就会通过写好的reduce函数进行未来日期到此时此刻相差时间的计算，以增强大学生的时间观念。
3.2. 数据库设计
萌校园服务平台使用了MySQL关系型数据库管理系统和Redis非关系型数据管理系统，MySQL数据库保证了源代码的可移植性。支持多线程，充分利用CPU资源，优化的SQL查询算法，有效地提高查询速度。根据实际情况共有21张数据库表格，重点介绍以下几张表：
注册用户表：记录所有已注册用户的账号信息和密码信息。
Id信息表：通过爬虫技术所抓取的信息，以此验证注册用户是否为该校真实学生
课表信息表：通过爬虫技术所抓取的全校课程表，以此可查询个人课表，指定日期空教室和完成蹭课功能。
二手市场商品表：用来保存用户在二手市场发布商品的商品名称，商品图片和发布时间。
3.3. 前后端交互设计
前后端数据交互是萌校园服务平台一个非常重要的部分，它不仅代表着用户在小程序页面进行操作时是否会返回正确的数据，还影响着小程序的是否拥有良好的性能和优秀的用户体验。优秀的代码设计和良好模块应用会提高小程序返回数据的速度，性能进一步提升。
降低耦合度是代码设计提高速度和性能至关重要的一环，它代表模块间关联程度的度量，取决于模块间接口的复杂性、调用模块的方式以及通过界面传送数据的多少。联系越多，其耦合性越强，表明其独立性越差。所以我们在开发阶段为了避免耦合度的降低，运用了分模块化的开发方式，减少了不必要代码和数据的传递，使各个代码模块之间的联系清晰明了，提高了程序的性能，降低了日常维护的难度。
3.3.1. 登录验证数据交互过程：
· 所有请求的公共Cookie，前后端数据交互都会带上此cookie，并且在登录时写入 localStorageJSESSIONID=A186E0370284ECA6FC983B19AEA599F8; Path=/;SERVERID=122; JSESSIONID=8B514FAC321FB8DEFCCAF4ADAeC65237; JSESSIONID=8834B1F6DB8E5647A6327DA249B87Ee6;
· 接受前端请求，并且将发送请求给和后端以查询数据库的API为：
https://mark.zhoumeilei.cn/api/v1/jwLogin?studentID=一卡通号&password=教务系统密码&cookie=&code=前端随机生成的加密编码
· 在登录之前会进行模拟登录：$moreMsg = $this->firstLogin($studentID, $password);
· 获取教务系统cookie：$cookieJw = (new GetCookie())->getNewJwCookie($page);
· 识别验证码：$RANDOMCODE=$this->getHec('https://jw.jxust.edu.cn/verifycode.servlet', 0, $cookieJw);
· 对账号和密码进行加密处理： $encodedSource = $this->getEncoded($studentID, $password, $cookieJw);
· 模拟登陆请求发送：$page = (new Utils())->curl($url, $post, $cookieJw);
· 账号密码经过正则验证：若是登录成功，将获取的名字在后端数据库中抓取详细信息，并返回给前端；若是登录失败，提示用户名或密码错误。
3.3.2. 数据库处理过程
· 用户通过前端页面的登录操作，发送请求，后端相应请求，对数据库进行查询操作，过程如下：
· 通过MySQL连接语句对后端数据库进行连接操作
· 发送POST请求，并且通过data格式传递数据：$post = ['userAccount' => $studentID, 'userPassword' => '', 'RANDOMCODE' => $RANDOMCODE, 'encoded' => $encoded];得到登录用户的学号及其密码。
· 通过前端发送的查询字段，在已存在的用户数据库中进行查询，查询语句为：
· $sql =SELECT * FROM user_login where 'userAccount' =' $ studentID and ' userPassword' =' $Password。
· 如果查询数据库成功数据大于0条，则表示查询成功，得到用户名字，返回前端
4. 小程序的实现
萌校园小程序是一款结合学在校园、住在校园、玩在校园三种理念服务于大学生群体的微信小程序，它无须安装，打开微信搜索即可使用，不再考虑手机的内存和性能。相比较学校网站，产品具有快捷，易操作，综合性强，节约资源的优势。而比较私人公司，我们更重注便学服务和此举带来的正面的社会影响，而并非单纯为了盈利。
首次使用萌校园小程序，由于学生的用户信息均通过教务系统进行爬取，所以没有注册页面，使用教务系统账号密码在图2所示的登录界面上登录即可；登录成功之后会加入图3所示的个人中心页面，依次显示身份是否认证，版本号和个人设置等信息；用户切换到首页界面，通过点击，可查询到如图4所示的课表信息；点击成绩即可查询到如图5所示的每学期成绩及绩点；想要了解校内新鲜事即可点击进入如图6所示的论坛进行交流；点击蹭课即可如图7所示查询到想要的课程时间老师及地点。
5. 研究意义
相对于校园官方网站：官方网站的信息发布网站如学校门户网站，教务系统等，他们的登陆繁琐，甚至有的学校的系统想进入要输入三个图形验证码才能进入，而且很多的入口隐秘，对用户的操作极不友好，且大部分的网站系统都只有PC端，移动端的适配十分糟糕。但是我们的平台将用户最常用的功能做了一个归纳，通过小程序简洁人性化的界面使用户操作更加的便捷，易懂，且不受时间和地点的限制，在有网的情况下即可访问优势。
相对于移动端APP：如超级课程表、微校等提供的同时夹杂着很多商业广告。但在微信这个完善的开发环境和闭环的生态结构下，无需使用大量代码，有效的避免了恶意代码和黑客的攻击，尽可能避免了用户信息泄露危险。并且萌校园有着信息与官方同步，准确实时，且功能更加全面的优势。
相对于同类小程序：如校园二手交易信息汇、番薯打卡等，萌校园校园服务平台是依托于创新创业项目而开发设计的产品，更重注便学生服务和此举带来的正面的社会影响，而并非单纯为了盈利。并且功能齐全，整合了大学生所必须的绝大多数功能，无需频繁更换页面，实现了一站式的服务和完善的交互功能。
相对于小程序的界面设计：绝大多数市面上的小程序，致力于实现功能需求，而忽略了用户所需要的页面设计性与美观性。用户体验功能的同时又不得不忍受混乱的视觉体验。因此萌校园服务平台为用户设置了自定义的配色方案，页面在多次更新换代之后采用清新风格的图标和令人舒适的主题，为用户带来良好的视觉感受
萌校园小程序校园服务平台一经推广便受到同学们的喜爱，成为同学们上课下课必备的手机小程序，无论是查询下节课的时间地点，还是使用倒计时功能和TODO功能提高学习效率，抑或是在寝室内即可查看剩余电费和完成二手交易，它都能轻松一站式实现。现如今萌校园仅仅通过校园内的试点推广，已经拥有如图8所示的数据访问量和累计用户，日常四千加的访问量和一万加的用户量，成为了同学们校园生活必备的服务平台。
6. 结束语
本着服务大学学子的信念，在微信小程序这个的开发环境下，使用前端(原生+colorUI)和后端(PHP+JAVA)的开发技术，将大学生所需要的大部分功能集合在一起，实现了即开即用和无须内存的一款校园服务类小程序。它使大学学子能在节约时间和手机性能的情况下迅速获取需要的信息，高效快速地进行在大学中的学习与生活，不再需要查询某个信息而下载一堆APP，更加符合现代的生活节奏和日常学习。