基于HTML5技术的校企互联平台开发
2020-11-17王蒙郁慧琴王玉贵
王蒙 郁慧琴 王玉贵
【摘 要】产学研合作主要是将学校、企业以及各科研机构有效地联系起来，实现生产要素的充分调用，从而达到效益最大化的目标。论文在对产学研合作深度分析后，在对现有产学研网络平台的总结比较基础上，根据以上要点，结合使用各种技术，开发了一个基于HTML5技术的校企互联产学研平台。
【Abstract】Industry-university-research cooperation is mainly to effectively connect schools， enterprises and various scientific research institutions， realize the full mobilization and use of production factors， so as to achieve the goal of maximum benefits. After the in-depth analysis of the industry-university-research cooperation， based on the summary and comparison of the existing industry-university-research network platforms， according to the above key points， combined with the use of various technologies， this paper develops the industry-university-research platform of school-enterprise interconnection based on HTML5 technology.
【关键词】产学研;校企互联;HTML5
【Keywords】industry-university-research; school-enterprise interconnection; HTML5
【中图分类号】TP311.5 【文献标志码】A 【文章编号】1673-1069（2020）10-0170-03
1 引言
为了更好地把握产学研需求，为客户带来更为舒心便捷的服务，本文重点在用户体验系统和运营管理等方面进行了创新。以HTML5开发技术为基础，以促进高校科技成果转化为核心，利用各种新渠道为客户营造更加舒适便捷的服务体验。本平台主要针对高校教师和企业客户，其以HTML5与JavaScript技术为基础，搭建了一个操作简单、功能实用、沟通快捷的响应式网站平台，旨在更好地促进高校和企业顺畅沟通合作，使得企业能够精准快捷地获取所需技术、高校科技成果能够合理充分地应用到实践当中，省去中间烦琐的流程，减少实用型科技成果的流失。
2 利用HTML5开发本项目的优势
2.1 解决跨浏览器的问题
在应用HTML5之前，各浏览器厂商为获取更大的效益都制定了自己专属的标准，同一個页面在不同的浏览器上往往呈现出不同的页面效果，这极大地降低了用户的体验。本项目以其优越的跨平台性能，能够赢得优质的用户体验。
2.2 用户至上原则
基于HTML5标准开发的网站，始终把用户体验放在第一位，这也符合开发本网站的需求。利用HTML5开发的网站，页面效果加载更为流畅，用户可以更好更快地浏览所需的信息，从而避免了因下载、更新等一系列烦琐流程而带来的烦恼。
2.3 用户信息安全
为确保用户信息安全，HTML5引入了一种新的基于来源的安全模型，该模型针对不同的API（Application Programming Interface，应用程序编程接口）都可通用。使用这个模型，不需要借助任何不安全的hack就能跨域进行安全对话，在很大程度上提升了用户信息的安全性。
2.4 化繁为简的优势
作为当下流行的通用标记语言，HTML5将复杂的代码简单化，严格遵循“简单至上”的原则，甚至创建了新的简化字符集声明以迎合用户需求，以不同浏览器自带的原生能力替代复杂的JavaScript代码等。为了避免造成误解，HTML5杜绝任何歧义模糊的语句出现，其细致严格的规范，为维护人员带来了诸多便利，大大降低了平台后期的维护难度[1]。
3 平台框架与搭建思路
3.1 平台框架
本平台在对各种现有产学研平台的总结比较基础上，从用户体验出发，主要应用技术有Bootstrap框架、HTML5语言，结合JavaScript进行项目开发。项目建设包括UI设计及后台模块。具体包括角色切换功能、科技中心、需求中心、专家中心、定位系统、通讯功能、分享系统、用户二维码等。平台框架如表1所示。
3.2 搭建思路
众所周知，互联网最大的特性和优势就是能够实现资源的海量存储及广泛共享。因此，利用互联网这些良好的特性搭建一个优质的交流平台，将企业与高校密切地联系起来，就可为高校的各项科研成果提供一个良好的孵化平台，从而促进各项科技成果的转化。在产学研合作过程中，高校和科研机构能够为企业发展提供所需要的技术支持，企业能够为促进自身转型升级所需的科研技术提供发展平台，二者社会分工不同。为更好地提升用户体验，本文进行了细致的规划，具体规划如图1所示。
①简化平台开发中的界面设计。根据用户角色不同（高校用户或企业用户）进行不同的界面设计。②减少科技成果的转化时间。根据用户所处的行业不同，按照用户的需求，进行供需的智能匹配。③建立完善的分享传播系统。根据网站、微博、微信的用户量广、信息流通渠道多等的特点，打通社会化营销渠道，提高宣传的渗透度。④通过会员制度进行和实现用户行为记录分析，建立用户数据库。此外，可以通过二维码技术，实现从线下到线上的无缝连接，以提升社会化营销的效果。⑤利用HTML5的新特性，实现精准定位。使用该网站，可以搜索地点或可以利用GPS定位用户所在地，为用户提供更精准的高校科研服务或企业需求的信息。⑥实现供需智能匹配。一是根据高校提交的科技成果服务，或者企业提供的科技成果需求，进行智能匹配推送，方便用户快速找到感兴趣的服务或需求;二是用户也可以根据行业类别划分，查看不同行业的供需信息;三是可通过关键词查找用户感兴趣的供需信息。⑦专家查找功能。根据高校教师擅长的领域，进行专家资格审核认证;企业可通过行业、地区、搜索等多种形式，查找相关领域的专家，以便沟通。⑧沟通、点评功能。教师和企业双方，均可相互发送消息进行沟通，并且可对对方提供的供需信息进行点评。⑨建立信息分享系统。可通过微信、微博、二维码等形式，将供需信息分享到其他平台，便于扩大影响力和提升知名度，促进科技成果的转化。
4 平台具体设计与功能优化
4.1 平台具体设计
第一，用户可通过密码，也可通过短信验证码快捷登录。如果忘记密码，可通过手机短信验证码的方式重置密码。第二，用户登录后，根据用户的信息，若判断出用户为高校角色，则自动展示高校版页面，主要展示类别如下：①默认展示企业信息;②按领域展示企业信息;③按应用行业展示企业信息;④按成熟度展示企业信息;⑤按地区展示企业信息;⑥按周、按月、按累计等多种方式，展示企业信息;⑦按发布时间展示企业信息。第三，用户登录后，根据用户的信息，若判断出用户为企业角色，则自动展示企业版页面，主要展示类别如下：①专家、机构页面快捷导航;②专家信息展示;③按行业展示专家列表;④推荐机构参考;⑤专家详情介绍;⑥专家推荐服务;⑦相关专家推荐。第四，详细信息展示界面：①介绍信息的基本情况;②详细介绍信息内容，包含方案描述、技术优势、适用对象等;③企业用户将鼠标放在所需产品上方，可快速显示该技术的适用情况、浏览量、咨询量、快速联系技术方等;④高校用户将鼠标放在企业介绍上方，可快速显示该企业的详细信息及其所属类别。第五，用户反馈界面：①用户可将使用软件过程中遇到的问题，提交反馈;②后台将会接收用户提交的数据，根据用户提出的诉求进行升级优化;③联系对接，可通过手机、微信等方式联系客户，并可通过微信分享到朋友圈。
4.2 功能优化
4.2.1 优化选择结构
在网站结构设计中，if语句和switch语句都可以用来设计多重选择结构，相较而言，switch语句可以更方便地应用于多个分支的控制流程，在特定的环境下switch结构的执行效率可以远远高于if结构[2]。例如，在网站登录模块界面，我们采用switch语句设计多重选择结构。考虑到大多数情况，普通用户数量是远大于管理员和网站维护人员的数量的，大部分登录者都是普通用户，因此，我们完全可以利用switch的结构优势将普通用户这个最可能出现的条件放在前面，这样就可以在很大程度上降低程序的检测次数，自然就提升了选择结构的执行效率，这在大批量数据检测中效果是非常明显的。
4.2.2 优化运算性能
在性能优化方面，我们使用查表法访问数据来替代if或switch查找结构，将一些事先计算好的结果，存储在常量数组中，这样运行时就可节省计算开销，尤其是在条件数目非常巨大的环境中，使用查表法访问数据比使用if或switch结构查找速度更快，效率更高。使用查表法消除所有条件判断，由于没有条件判断，当候选值的数量增加时，基本上也不会增加额外的性能开销，这样就可提高页面加载速度，从而为用户提供更加舒适便捷的服务体验。
4.2.3 设置延迟执行
在浏览网页时，经常会遇到网页加载出错、加载时间过长等问题，这是因为基于HTML5搭建的网页基本框架，布局在
标签之后，而标签中又包含了大量的JavaScript脚本或文件。这就意味着基于HTML5搭建的网页基本框架必须等到标签中JavaScript代码全部被解析完成后，才可解析。而在网页解析标签中的JavaScript代码时，如果遇到加载失败项时，整个页面也将无法显示。因此，要解决这个问题，就需要用到