基于B/C/S模式的掌上数字化校园平台研究与实施

袁南星 何卫华

（四川机电职业技术学院，四川 攀枝花 617000）

基于B/C/S模式的掌上数字化校园平台研究与实施

袁南星 何卫华

（四川机电职业技术学院，四川 攀枝花 617000）

以四川机电职业技术学院为蓝本，分析了掌上数字化校园平台开发中面临的主要技术问题，提出基于B/C/S模式来架构平台，最终开发出能够满足现实应用需求的掌上数字化校园平台；对系统作出总结与思考，给出改进思路。

B/C/S；掌上数字化校园；安卓；HTML5；JavaScript

1 绪论

1.1 课题背景

四川省高校不断发展壮大，信息化水平日益提高，新一代校园用户更趋向于使用手机等移动智能终端使用网络服务，旧有的业务系统在设计之初，大多只考虑了PC用户的使用需求，即使有少数系统有wap版本，但是依然需要用户进行单独访问，现有服务水平已经不能满足当前用户的实际需要，各高校对拥有一套掌上数字化校园平台的需求十分迫切。

目前四川省内高校的掌上数字化校园项目大多委托第三方方案商开发建设，而四川机电职业技术学院在攀枝花市政府的支持下，利用建设国家骨干高职院校的契机，试图自主研发出一套适合攀西地区（攀枝花市、凉山州、雅安市）甚至全省高校使用的掌上数字化校园平台，填补攀西地区在此领域的空白。

1.2 问题提出、分析和解决思路

四川机电学院在掌上数字化校园开发中主要存在以下三大问题急需解决：

第一，如何集成既有信息系统；

第二，如何为用户进行业务功能展现；

第三，如何进行系统更新维护。

三个问题进一步具体化分析：

(1)既有信息系统多达数十个以上，包括教务、学工等核心系统和大量一般业务系统，既有系统绝大多数为B/S模式；

(2)掌上平台对应的用户终端型号多样，在用户展现上的难度远超PC端同一问题的处理；

(3)任何信息化系统后期都必然涉及到更新维护问题，如何才能简化更新维护问题，一方面要减少用户的更新难度，另一方面则是要减少系统开发维护人员的工作难度。

上述三大问题如果能够顺利解决，该平台将具有高度的适应性和扩展性，可以在更大范围内进行推广，而不局限于某一特定学校或者特定校园用户群体。

2 系统分析设计

根据对平台面临三大问题的分析，要想集成整合现有信息系统，B/S模式无疑是最佳选择，但是考虑到掌上平台的特殊性，B/S模式由于性能问题，并且需要用户记住相关网络地址才能访问，都使得用户体验不佳，所以掌上平台往往采用C/S模式，即原生app模式。

但是采用原生app开发，问题一、三的解决都会显得十分困难，用原生app去整合现有B/S系统，初次开发难度增加，后期扩展也非常困难。更新维护方面，功能更新对系统的开发维护人员提出了很高的专业技术要求，脱离专业开发人员后，系统将变得不可维护。用户方面，则要求用户都养成主动更新或者接受推送的使用习惯，但是任何人都无权强制用户养成这样的习惯，实际上也不具有任何可操作性。

综上所述，B/S和C/S在当前问题的解决上各有优劣，单一模式无法同时很好地解决三大问题，因此项目组考虑将两种经典模式融合，提出B/C/S模式的设计构想。

B/C/S模式本质上就是一个C/S的浏览器外壳——中间件，业务以B/S在该特定浏览器中运行，用户不能随意跳转到指定界面之外的页面。该模式在商业领域有微信这样的典型app应用，但是目前微信中WEB页面体验十分糟糕，因此选择一个合适的中间浏览器平台十分重要，甚至可以说是项目成败的关键之一。

项目组认真比对了当前市面上的主要的中间件，鉴于微信的糟糕表现，腾讯的浏览器中间件首先被排除，因为平台主攻Android系统，因此最终选定了在Android领域有技术优势的Rexsee，基于该中间件，可以将Android原生开发简化为HTML5+JavaScript开发，但同时能够达到高度接近原生app的性能体验，除此外，该中间件与原生开发兼容，用HTML5+ JavaScript无法完成的部分，依旧可以采用原生开发技术开发。平台技术架构图如图1所示。

图1 掌上数字化校园平台技术架构

平台主体转换成基于HTML5+JavaScript而非JAVA或者C/C++的好处显而易见：

(1)开发难度降低，开发周期（包括未来的版本升级）大幅度缩短；

(2)集成既有平台更加容易，因为既有平台以B/S模式为主；

(3)操作系统版本和硬件兼容性增强，在中间件的操作系统兼容性有保障的前提下，只需要考虑分辨率自适应就可以了，而这是C/S模式所不擅长的，但正好是B/S模式的优势所在；

(4)大大降低了未来平台维护人员的技术门槛和工作难度，只要不是重大功能性改动，一个静态网页技术员就能轻松维护平台。

3 系统实现

本系统是一个完整的掌上数字化校园系统，系统较为庞大，限于篇幅，选取有代表性的部分核心功能代码加以介绍，为安全起见，文中略去了部分URL详细地址。系统部分关键实现代码如下：

无线网络状态检测：

//通过WIFI网络ID判断WIFI是否有效连通

WEB运行环境判断：

预加载https页面：

rexseePreload.preload("https://edu.scemi.com/*");

消息订阅：

对某闭源查询系统的集成：

document.getElementById("result").innerHTML="";//清空容器

var temp1=unescape(response);//临时存放ajax返回HTML完整代码

document.getElementById("result").innerHTML=temp1;//远端代码给当前容器

var temp2=document.getElementById("container").innerHTML;//从当前容器中提取需要的columns部分

var temp3=strToArray(temp2.replace(/〈[^＞]+＞/g,""));//去除html代码，只保留文字的结果为空。";

系统部分功能界面如图2、图3所示：

图2 app主界面

图3 app登录个人服务中心

4 测试结论

项目组基于Android4.0～5.0的各版本，对系统核心功能及运行性能进行了全面人工测试，均达到预期目标，为了获得更专业的测试结论，项目组还将app提交给360-Testin平台进行多机型多系统兼容性测试，顺利通过该专业测试，如图4所示，结合用户反馈，平台开发达到预期目标。

图4 360-Testin测试报告

5 结束语

本文开篇提出的本平台开发面临的三大问题，也是本平台开发的难点和关键所在，三大问题有任何一个不能很好地解决，平台的通用性都将大打折扣。

通过项目团队的科学分析和努力，三大问题都获得了较为理想的解决，最终实现了一个具有高度兼容性、用户免更新但是可以无限扩展的掌上数字化校园平台。

考虑到Android操作系统在平台用户群体使用终端中占绝大多数，另外iOS版本的开发难度和周期均不亚于Android版本，由于时间、精力等客观因素限制，iOS版本暂未进行开发。希望未来有机会可以进一步完善。

[1]王斌，袁新辉，蒋新华，林云．高校新一代移动信息门户的建设[J]．华东师范大学学报(自然科学版)，2015，S1(B03)：40-45．

[2]宋小明．基于安卓的掌上校园客户端设计初探[J]．信息与电脑(理论版)．2014(10)．

[3]梁国业．基于C/S与B/S混合架构高校课室管理系统的研究与实现[J]．科技信息，2013(34)：187．

[4]黄悦深．基于HTML5的移动Web App开发[J]．图书馆杂志．2014(07)：72-77．

Research and Implementation of Palm Digital Campus Platform Based on B/C/S Model

Yuan Nanxing He Weihua
（Sichuan Electromechanical Institute of Vocational and Technology，PanZhihua 617000，Sichuan）

This research is based on the main technical problems in the development of digital campus platform.The main technical problems in the development of palm digital campus platform are analyzed,and the B/C/S model is put forward to solve the problem,and finally the palm digital campus platform which can meet with the needs of real application is developed.

B/C/S;palm digital campus;Android;HTML5;JavaScript

TP311.52

A

1008-6609(2015)11-0040-03

袁南星，男，四川攀枝花人，硕士研究生，讲师，技师，研究方向：移动互联，信息系统，WEB技术，计算机网络。

攀枝花市科技局掌上数字化校园建设示范，项目编号：2015CY-G-25