system: [SYSTEM]

user: 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垂直布局展现，从顶部开始为用户的头像姓名和小程序的版本信息，随后的列表分别为：身份认证，个人设置，更新日志，加入我们，推荐给好友这几个板块构成。身份认证包含此用户的专业班级学号等基本信息；个人设置可根据用户的喜好更改小程序、课表的配色，还可清除缓存；更新日志包含每次大小版本更新优化的位置及时间。 图1. 首页布局设计 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条，则表示查询成功，得到用户名字，返回前端