实验室管理系统WX小程序的设计与实现.docx
《实验室管理系统WX小程序的设计与实现.docx》由会员分享，可在线阅读，更多相关《实验室管理系统WX小程序的设计与实现.docx（15页珍藏版）》请在冰豆网上搜索。
实验室管理系统WX小程序的设计与实现
实验室管理系统微信小程序的设计与实现
摘要：
微信小程序是一种不需要下载安装即可使用的应用，它依托了广泛应用且用户数量庞大的微信平台，可以借助平台优势快速推广。
因此这种无需安装的特性使得小程序相对传统APP更易让用户接受使用。
本文设计与实现了一个简单的微信小程序，依托微信小程序提供预约实验室、验证预约、实验室状态操作、个人信息查询、实验室信息查询等功能。
从编程技术，系统构造，系统开发过程，系统总结等方面进行了阐述，该系统采用经典MVC模式开发，其结构设计合理，且简单易用，实际使用可有效提高实验室管理事务的效率。
关键词：
微信小程序；JAVA语言；Servlet；系统开发
Abstract：
TheWeChatappletisanapplicationthatcanbeusedwithoutdownloadingandinstallation.ItreliesontheWeChatplatformwhichiswidelyusedinChina,andcanbequicklypromoted.Therefore,theinstallation-freefeaturemakesappleteasiertousethantraditionalmobileapps.ThispaperdesignedandimplementedasimpleWeChatappletforlaboratoryappointmentandmanagement.Thispaperintroducedtheprogrammingtechnology,systemconstruction,systemdevelopmentprocessandsoon.TheappletisdevelopedwiththeclassicalMVCmodel,anditisreasonableandeasytouse.Anditcaneffectivelyimprovetheefficiencyoflaboratorymanagement.
Keywords：
Wechatapplet；Java；Servlet；SystemDevelopment
1绪论
随着信息技术的高速发展，智能手机早已普及，我们也进入了移动互联网时代。
伴随智能手机的普及其应用程序（即Application简称APP）也层出不穷。
近两年现状来看，现在主流的移动应用仍然是基于Android或者IOS的原生服务，但因为其开发周期较长且成本高，尤其是商家在推广时成本极高，导致应用的使用变得困难。
而微信小程序则提供了低成本的入口，既缓解了开发周期长且成本高的问题，开发又相对Android和IOS简单，顺利成为目前开发者的热门开发平台。
当然因微信小程序平台的各种限制和功能未开放，所以微信小程序目的主要还是在于解决轻量级的问题，重点在于灵活、快捷、用完即走。
2017年1月9日，万众瞩目的微信第一批小程序正式低调上线，用户可以体验到各种各样小程序提供的服务。
根据微信官方给出的数据，小程序刚发布时，用户数量增长迅速，一段时间后有一部分用户在尝鲜结束时就回归到了Android/IOSAPP的怀抱，导致用户数量相对减少。
因市场需求，微信小程序经过一年多的发展，相继开放了各种各样的权限和功能，使开发体验较之前要相对丰富许多，算是缓解了微信小程序最初的尴尬。
根据2018年最新微信小程序数据报告显示，小程序累计用户总数已经接近4亿，意味着有一半的微信用户成为了小程序用户，且人均在线时长仍在持续攀升。
微信小程序更适合提供内容和服务为主，但又需要功能性的小应用，比如服务相对单一的O2O应用等，以及在内容之外还希望提供简单功能的应用[1]。
伴随着实验室的发展，面对规模日趋增长的实验室事务,管理员需要投入的精力也会越来越多，因此老旧的管理方式在一些地方已力不从心。
由于该系统的服务对象是学生和管理实验室工作人员，再结合零散的多系统必须要对应IP登录使用的现状，所以将会优先考虑如何让学生和工作人员能便捷的使用到该系统。
因微信小程序的灵活快捷优势，本文将基于微信小程序实现实验室管理系统。
2开发环境及相关技术
2.1开发框架
微信小程序的主要特点在于将.html文件封装成了.wxml文件,将.css文件封装成了.wxss文件，JavaScript文件的命名没有改变仍为.js，所以其本质是在写Html5网页。
MINA是微信开发小程序的框架，MINA的目标是通过尽可能简单，高效的方式让开发者可以在微信中开发具有原生APP体验的服务。
微信小程序在普通用户的理解下，应该是只能在微信里使用的“APP”。
实际上，微信小程序本身只是一个前端框架，因微信对它的审核和限制使得可以发布在微信平台上，所以要实现一个非离线的小程序,那么服务器端程序自然必不可少。
本文主要使用的服务器端程序用JavaServlet进行编写。
Java是由SunMiosystems公司于1995年5月推出的Java程序设计语言和Java平台的总称。
随着Java技术的不断更新，受到更多软件开发者的喜欢。
满足项目需要的前提下，尽量选用版本较高JVM，一般来说高版本产品在速度、性能和效率上比低版本会有改进和提高[3]。
同理本文将使用64位Tomcat8.5作为应用Java服务器。
ApacheHTTPServer和Nginx都能够将某一个文本文件的内容通过HTTP协议返回到客户端，但是这个文本文件的内容是固定的，也就是说无论何时、任何人访问它得到的内容都是完全相同的，这样的资源我们称之为静态资源。
因为要使用Java生成大量的动态资源，Tomcat与ApacheHTTPServer相比，Tomcat能够动态的生成资源并返回到客户端，而且Tomcat本身就是编译JSP\Servlet的容器。
本次“实验室管理系统微信小程序”设计采用了经典开发模式MVC，初步掌握面向对象编程的基本思想，掌握微信小程序开发前端UI，掌握Eclipse开发服务器端程序，掌握Eclipse调试程序的方法。
从而深刻体会开发微信小程序的过程和魅力。
2.2开发前重要准备
微信小程序需要准备合法SSL证书来使用HTTPS协议，且必须要在微信开发者工具里设置合法域名。
两者缺一不可，否则在使用和测试过程中会提示该url不合相关规定，从而阻止微信小程序访问服务器端程序。
因域名备案流程复杂且需要相关企业资质证明，对个人开发者有较大的难度，尤其是学生。
但个人开发者可以通过阿里云等云服务平台购买SSL证书和域名，如果域名不能成功备案，目前可以购买海外的云服务器来解析未备案域名。
2.3相关技术
2.3.1JavaEE的定义
主要用于分布式的网络程序的开发，如电子商务网站和ERP系统，也就是大批量定制软件的一个模版，像生产线的模式一样。
同时，J2EE是一套全然不同于传统应用开发的技术架构，包含许多组件，主要可简化且规范应用系统的开发与部署，进而提高可移植性、安全与再用价值。
Servlet是J2EE规范中的一种，主要是为了扩展Java作为Web服务的功能。
Servlet是一个Java接口，Servlet接口定义的是一套处理网络请求的规范，所有实现Servlet的类，都需要实现它那五个方法，其中最主要的是两个生命周期方法init（）和destroy（），还有一个处理请求的service（）。
简单点讲，就是初始化的时候做什么，接受到请求时做什么，销毁时做什么。
基于Servlet3.0来设计我们的JavaMVC框架显然会使我们的框架更加轻量！
2.3.2JavaBean
JavaBean就是一个普通的Java类，也称之为简单Java对象--POJO（PlainOrdinaryJavaObject），是Java程序设计中一种设计模式，是一种基于Java平台的软件组件思想。
使用JavaBean最大的几个好处就是数据的封装，可读，重用。
因为微信小程序需要使用到JSON格式的数据。
众所周知，JSON数据的格式是非常严谨的，那么通过Servlet服务器端程序，将所需要的数据封装进自定义的JavaBean类中即可自动生成{key:
value}这符合标准JSON格式的数据，但JavaBean本身还不是JSON对象，所以需要Gson这类工具序列化Java对象为JSON字符串，或反序列化JSON字符串成Java对象。
图2-1JavaBean结构图
2.3.3JSON
JSON（JavaScriptObjectNotation）基于JavaScript语言的一个子集,提供了一种具有嵌套数据元素的结构，传送相同的信息所需的字节数较之XML格式少许多[4]。
它易于人编写和阅读，同时也易于机器生成和解析，广泛应用于各种数据的交互中，尤其是服务器与客户端的交互。
最主要的一点微信小程序所使用的数据格式本身就是JSON，并且微信小程序框架里自带的功能和标签，可以将JSON数据更加便捷快速和自由的遍历输出到相应位置。
2.3.4微信小程序的“Ajax”与Servlet
Ajax即异步JavaScript和XML技术,是指一种创建交互式网页应用的网页开发技术,其关键点在于异步发送请求。
微信小程序将Ajax封装成wx.request。
wx.request的使用方法和Ajax基本一致，会使用Ajax的开发者可快速上手实现相关功能，唯一要注意的就是url中的属性值。
与Ajax同理，wx.request将数据提交给Servlet后，Servlet在后台完成对应操作后将返回一个JSON对象，可通过success:
function（res）回调函数获取到该对象。
前后端数据的成功交互将是实现微信小程序的重要之处。
图2-2Ajax数据交互原理图
2.3.5MySQL事件
事件（event）是MySQL在相应的时刻调用的过程式数据库对象。
一个事件可调用一次，也可周期性的启动，它由一个特定的线程来管理的，也就是所谓的“事件调度器”。
使用事件优点在于一些对数据定时性操作不再依赖外部程序，而直接使用数据库本身提供的功能。
它可以实现每秒钟执行一个任务，这在一些对实时性要求较高的环境下较为实用，并实在的减轻了Web服务器的负担。
2.4开发环境
本项目开发环境如下：
操作系统：
MicrosoftWindows8.1中文版
处理器：
Intel（R）Core（TM）i5-4200HCPU@2.80GHz
内存：
16GB
程序语言：
Html5、Java语言、SQL
开发平台：
微信开发者工具，Eclipse,MySQL
3总体设计
3.1需求分析
因微信小程序采用B/S结构开发，可减轻升级的成本与系统维护，提高开发效率，只要有微信、网络，就可以随时随地进行使用。
维护简单方便，只需要改变页面，即可实现所有用户的同步更新；其功能扩展简单方便，通过增加页面即可增加服务器功能。
针对实验室管理需求分析后，该系统需要实现的主要功能有以下几点:
（1）用户能够直接看到实验室的大体信息，如这个实验室还剩多少空位，该实验室什么时候关门。
（2）用户通过点击实验室大体信息中的查看后，可直接查看到所点击的实验室中具体哪些座位是空闲的。
（3）点击预约空闲座位，完成一人一机的需求。
（4）预约后，用户可取消预约和验证预约。
（5）防止用户预约后不去使用对应的实验室，需要实现能自动清除过期预约信息的功能。
（6）用户需要结束使用实验室，并保存相关使用信息。
（7）管理员可在后台查询实验室的相关信息。
3.2业务流程
微信小程序开启Debug模式添加体验用户，体验用户在进入微信小程序后，登录数据库导入的某普通用户账号进入到主界面，并将成功登录的信息保存进Session中用作登录状态，与此同时通过服务器程序中的Java过滤器通过对应的Session信息禁止普通用户访问应是管理员用户才能进入的界面。
体验用户通过主界面挑选自己想要使用的实验室，进入到实验室详情界面后，可以挑选预约自己想坐的位置。
在进行预约操作的这个时候需要进行两个判断：
第一，已预约未验证的用户是不可以再次预约的；第二，正在使用实验室还未结束使用的用户也是不可以预约的。
在判断可预约之后，服务器程序才会处理相关信息创建预约信息进入数据库，并随之更改实验室座位的状态。
成功预约后，进入【个人中心】可以看见用户自身使用实验室的历史总时长，更是可以看见用户自己的操作状态如：
未使用、已预约、正在使用，这三个主要状态类型。
已预约的状态下，会动态刷新出【取消预约】和【预约认证】两个按钮，【取消预约】功能就是字面上的功能，而点击【预约认证】按钮后会弹出一个对话框要求用户填入验证码，而要获取这个验证码是必须要用户在实验室PC上打开exe辅助认证工具，输入相应的用户账号方可获取。
如果用户没在规定时间之内完成预约认证，MySQL将自动解除过期的预约信息。
若是验证成功后，用户操作状态将会刷新为正在使用，随之有关预约操作的按钮将会刷新为【结束使用】，点击【结束使用】后服务器端程序就将处理相关信息并存储进数据库。
普通用户主程序流程如图3-1所示。
图3-1普通用户主程序流程图
管理员登录后通过选择选项卡输入相关所指示并需要的查询条件后，点击【查询】后即可获取到查询结果。
管理员点击【下载】后即可将最新一次查询结果以Excel文件保存在本地上。
管理员用户主程序流程如图3-2所示。
图3-2管理员用户主程序流程图
3.3技术要点
1、因该系统的主题是管理，那必定存在两种及其以上的用户。
每一种用户所拥有的权限和能使用的功能自然会各有不同，但是程序若不做出相关限制，会直接导致不同的用户类型所能使用的功能都是一样的，那么肯定是不符合该系统的设计初衷，所以必须得通过有效的方法对不同用户进行权限管理。
2、在普通用户登录进入主页面后，需要直接显示出有位置并可使用的实验室大概详情信息，如N1311剩余X个座位AA时间关闭实验室，可使用微信小程序的layout线性布局将此类信息做成类似AndroidListView的效果。
该UI效果可使得整体界面简洁并符合主流设计。
3、系统中实现一个预约座位的功能，用户正常操作预约并完成验证的流程是不会出现问题的，但若是有人只预约却不完成验证就导致实验室的位置被空气占有，为了解决此问题，就需要使用MySQL的时间事件，高频率的去清除过期的预约信息。
为了减轻因为时间事件给服务器带来的压力，就需要设计结构良好的数据表，可有效节省资源的使用。
4、该系统本质是为了管理实验室的使用情况，为了确保用户是在真正使用
实验室，预约后的验证功能尝试使用了微信小程序的GPSAPI，但效果不尽人意，只能定位到大概的位置而并不能直接定位到实验室。
为了有效解决该问题，将使用JavaAwt配合多线程编程制作一个辅助验证功能完成的exe小工具放在实验室机子里，这样可确保用户是真正使用了实验室。
5、exe辅助小工具的安全性也是值得考虑的问题，需要使用类似j2ewiz的小工具将其封装并设置不可反编译，同时需要文件加密手段处理exe相关本地文件。
6、管理者所使用的查询功能需要建立在结构良好的数据表上，整理管理者最需要查询的内容，之后理清楚查询逻辑。
7、不可能让管理员只查询却要直接操作数据库获取相关信息Excel文件，所以要将管理员所查询到的信息通过下载操作可以直接以Excel的形式下载到电脑或者手机上。
8、当下网络信息安全问题至关重要，信息的产生、传递、存储和验证存在许多问题和困难。
加密技术的目的力图保证的信息行为主要有确保信息的确切有效性，防止信息丢失，强化信息安全避免被盗和如何使发送者不能否认的信息等。
这些行为的发生都需要技术的进一步升级。
在此，本系统也会挑选一种加密手段用来保证用户信息。
3.4程序核心
3.4.1控制不同用户账号的权限
使用JavaServletFilter中的HttpServletRequest值并通过使用与之对应的getRequestURI（）方法可以获取用户所访问的链接。
由于使用Session保存了用户的登录信息，所以当普通用户访问管理员界面时，用getRequestURI.indexOf（“管理员界面路径”）的条件来判断该账号是否为管理员账号，如果是管理员账号就doFilter（）将此访问放行通过，反之拒绝访问。
3.4.2实验室信息的动态刷新
效果预期是普通用户登录到主界面后显示实验室相关的大体信息，点击查看进入后显示对应实验室的详细信息。
主要通过前后端的数据交互得到相关的数据内容并展示给用户。
3.4.3实验室实时预约功能
普通用户可以通过实验室主界面和详情界面了解到实验室的使用状态，使用预约功能最大的好处是让用户前往实验室必定有一个可使用的位置，更是大可不必的辛苦排队并出现多人争抢占位的尴尬局面。
该功能应考虑高并发问题的存在，需要进行同时操作预约的测试，避免出现有多人同时成功预约同一个实验室位置的情况。
3.4.4辅助预约验证工具
该工具的功能实现，是完成系统主流程的重要环节之一。
该工具的安全性和唯一性更是重中之重，这判断着用户是否一定在实验室完成预约认证的关键，杜绝别有用心之人利用可能存在的BUG进行一些非法操作影响到他人的自身利益。
4详细设计
优先参照商业微信小程序的样式，设计出系统合理的前端界面。
在前端界面设计的同时更应结合服务器程序进行分析，服务器程序需要注意输出规定格式的数据到前端，以便于正常显示正常结果在前端界面上。
本文接下来将讲述如何详细实现该系统的几个主要功能。
4.1安全登录
用户登录到系统必须填写账号、密码、验证码，先需要对填写的数据进行一次筛选，具体实现为微信小程序form表单标签绑定提交事件，事件中需编写JavaScript脚本在点击【登录】按钮时使用e.detail.value.lzh或e.detail.value[“lzh”]可直接获取表单中组件name值为lzh的value值，如输入账号的文本框name值为username，那么开发者只需要简单的调用方法e.detail.value.username即可获取到用户所填写的账号信息，在判断账号密码、验证码必不能为空之后，再使用AJAX将数据提交给服务器程序进行处理，这样可以减轻服务器的压力。
服务器端程序优先判断验证码是否正确，若是错误将直接输出一个JSON到Ajax回调函数，并判断该值做出对用户体验友好的错误提示，同理，账号密码的判断结果也会对应着不同的可视化提示。
但在验证账号密码的时候，与之对应的出现了安全问题。
SQL注入攻击是黑客对数据库进行攻击的常用手段之一。
该类型攻击会直接造成的数据库安全风险有刷库、拖库、撞库。
通常判断未连接网络的账号密码跟数据库是否匹配的方法是使用的quals（）函数，常规浅显基础的理解下“lzh”.queal（“lzh”）结果为true，“lzh”.queal（“err”）结果为false，明面上看起来没什么问题，但就因为该函数在字符串进行比较后返回的结果是一个Boolean数据类型跟MySQL的where语句返回的类型相同，所以若是不对账号和密码进行相关数据加密，是可以通过SQL注入将结果强行为true，如SQL的万能钥匙'or1='1，若有人知道你的账号为lzh，那么MySQL一旦执行select*fromtablewhereusername=‘lzh’andpassword=‘'or1='1’查询语句，登录验证就将会通过，因为1=‘1’永远为true。
本系统使用了32位MD5算法（MessageDigestAlgorithmMD5）来保护用户的相关信息，它是一种把任意长度的输入消息串变化成固定长度的输出串的算法，这个输出串称为该消息的HASH值[2]。
该算法本质来说并不算是加密算法，因为他不存在解密算法，但它依然可以提供消息的完整性保护，它的主要特点之一抗修改性，只要对原数据进行任何改动，所得到的MD5值都有很大区别，所以要让不同的原数据（原数据与伪造数据）得到相同的MD5值是非常困难的。
MD5用法相对单一，有着更安全更有效的方法，实实在在的使用加密算法如RSA，在用户提交数据到服务器程序之前，就先对数据进行一次加密，服务器拿到数据后再进行解密，该方法可以防范一定程度的网络劫持技术。
在登录验证后，服务器程序将自动把用户的相关信息存储进Session中，同时可用作登录状态，最后通过完成入口筛选的Servlet类所返回的数据来判断并跳转到对应账号类型的主界面。
4.2实验室信息的动态刷新
因为微信小程序框架里没有类似Layui前端框架里table标签中的src接口，可以在页面加载的同时即可访问src获取相关数据并显示在列表中，所以解决方案为，设计一个完全透明无大小的按钮在界面上，并给该透明按钮绑定一个点击事件，在该事件里写一个Ajax去访问生成实验室大概信息的服务器端程序。
在页面加载完成后，在对应微信小程序主界面中的JavaScript的文件中写入一段自动点击透明按钮的脚本程序，从而通过Ajax的（callback）回调函数获取到JSON数据。
微信小程序框架自带的标签功能强大，可以快速将获取到的JSON数据按照自己想要的格式进行遍历输出。
微信小程序将CSS进行轻量级封装，其使用display中的属性值之一“Flex”，是可以快速完成Layout线性布局的一种方式，其效果跟AndroidApp的LinearLayout布局一样。
由于实验室数量较大，不可能去为每一个实验室专门写一个显示详细信息的WXML。
于是采取了更为灵活方式解决了此问题，写一个WXML模版用来作为显示实验室详细信息以及可点击预约的容器。
将主界面中的【查看】按钮绑定点击事件，该点击事件将获取用户点击【查看】按钮的相关实验室ID，再通过Ajax，将此实验室ID数据加载进data数据中，如data:
{“classroomid”:
classroomid};Servlet服务器端程序通过HttpServletRequest的getParametr（“classroomid”）方法获取到信息后直接保存在一个新建的Session中，与此同时开始从主界面跳转到实验室详细信息界面。
如主界面一样，设置自动点击事件，使用Ajax直接访问Servlet，该Servlet将先获取保存“classroomid”的Session信息并创建数据库事务，提交MySQL查询语句，再通过遍历获取数据库中所返回对应ID的详细数据，并将这些数据封装进自定义的JavaBean对象中，最后通过创建Gson对象将JavaBean对象输出为JSON给Ajax的回调函数。
WXML模版只需要遍历得到的JSON数据到对应的位置，即可完成详细信息的显示。
4.3预约与高并发
4.3.1预约
预约功能的实现是程序主流程的关键之一，用户所看见的实验室详情界面里的数据本身是经过筛选后才将其显示。
在MySQL数据表里设计了一个存储实验室使用状态的字段名“pc_static”，它的值只为“free”或者“busy”，通过SQL语句对其字段名的值进行遍历查询，只将pc_static为free的数据返回给前端。
当用户点击【预约】时执行绑定事件，编写JavaScript脚本获取用户所预约的实验室和座位，通过Ajax传递给服务器端程序。
服务器程序获取数据将会依次进行三次判断，其一，服务器端程序将通过用户登录Session信息查询该用户是否正在使用实验室，若是正在使用则生成对应JSON数据返回前端并做
升级会员 