XJIPC OpenIR  > 多语种信息技术研究室
基于前端整合框架的科研安全生产平台设计与实现
张睿
学位类型硕士
导师董军
2016-05-29
学位授予单位中国科学院大学
学位授予地点北京
学位专业计算机应用
摘要

如今非常流行Web2.0和HTML5在很大程度上提高了Web应用的功能性和交互能力。越来越多的服务器端逻辑转移到了浏览器端来实现。浏览器的作用,已经从单纯的数据接收及展现演变成为具有强大交互能力的应用承载体。对于日渐复杂的浏览器端HTML、CSS以及JavaScript代码,需要一套更好的流程化工具来促进开发过程中各个环节能够协同、高效的进行。这其中也包括了前端代码全生命周期的管理,如初始的代码结构、开发流程、前端代码自动化测试等。本文借鉴MVC的后端架构方式,通过分析传统前端开发和维护过程中所面临的问题,结合现在流行的前端设计模式,依托AngularJS、node.JS、gulp等前端技术,采用理论与技术相结合的方式,设计实现了前端整合框架,使得前端开发遵循模块化的开发方式,代替前端开发人员完成JS压缩合并、语法检查、文件目录管理等机械繁琐的工作,解决了前端多种端适应性的问题,极大的提高了前端开发效率。具体研究过程如下: 首先,按照分层架构的思想对前端整合框架各部分进行了设计。前端整合框架由基本JS框架和自动化构建以及组件模块化三部分组成。深入学习研究了前端整合框架设计的相关技术,并针对科研安全生产平台项目对前端整合框架各部分需要完成的功能进行了分析。其次,对前端整合框架各个功能模块进行了配置实现。本框架的一个创新点是对DOM节点的操作进行封装,前端开发人员无需再通过对DOM繁琐的编程操作展现业务层的系统体验,对DOM节点的操作只需通过DOM属性的方式进行标注即可。另一个创新点是配置实现了自动化构建任务,使得前端整合框架能够自动监听开发文件的更改,一旦发生改变,自动进行语法检查,文件压缩及合并、文件目录管理等多项任务,并自动在浏览器中展示修改后的效果。其次,融合组件化的开发模式,将基本页面和控制器进行封装,在开发中只需通过标签的引入并写入后端接口即可完成基本页面的开发工作。最后,以前端整合框架作为前端开发框架,设计实现了科研安全生产平台,包括危化品采购使用管理、安全责任制、量化考核、巡检、隐患整改等业务功能。其中巡检功能通过手机端及NFC功能实现,巡检人员通过扫描电子标签的方式进行日常巡检,提高巡检效率,并保证了安全信息的实时性。针对其业务层、系统架构、数据架构以及技术架构进行了详细的设计,并融合了基于角色的设计模式,使用户体验以个人为中心,待处理任务向当先登录用户推送,做到系统配合用户工作,极大的提高了用户体验。

其他摘要

The popular HTML5 and Web2.0 to a large extent improve the functionality and interaction capabilities of Web applications. More server-side logic is transferred to the browser to achieve. The role of the browser, has evolved from a simple data reception and show the evolution of a strong interactive ability to use the bearer. For increasingly complex browser side HTML, CSS and JavaScript code, the need for a better process of chemical tools to promote the development of all aspects of the process can be coordinated and efficient. This includes the management of the entire life cycle of the front-end code, such as the initial code structure, development process, front-end code automation testing, etc.. Reference from MVC backend architecture, through the analysis of the traditional front-end development and maintenance problems faced in the process, combined with now popular front-end design mode, relying on angularJS, node.JS, gulp front-end technology, using a combination of theory and technology, design and implementation of the front-end integration framework, and the front end is developed according to the development of modular, instead of the front-end developers complete JS compression and merger, grammar check, file directory management machinery tedious work to solve the various front end adaptation problems, greatly improve the front-end development efficiency. The specific research process as follows: First of all, according to the idea of hierarchical structure of the front end of the integrated framework of the design of each part. The front end integration framework consists of three parts, the basic JS framework and the automation construction and the component modules. In depth study and research of the front-end integration framework design of the relevant technology, and for the research and safety production platform for the front-end integration framework of the various parts of the need to complete the function of the analysis Secondly, each function module of the front-end integration framework is implemented. The innovative point of this framework is the DOM node operation of package, front-end developers do not need to through the programming operation on the DOM tedious show business experience with the system, operation of DOM nodes just by Dom properties annotation can be. Another innovation is the configuration of automation construction task, making the front-end integration framework is able to automatically monitor the development of file changes, once change, automatic grammar check, file compression and consolidation, file directory management such as multiple tasks and automatically in the browser display the modified effect.Besides, the integration of the development model of the component, the basic page and controller package, in the development of only through the introduction of labels and write back-end interface to complete the development of the basic page. Finally, to the front-end integration framework as the front-end development framework, design and implementation of the production safety system of scientific research, including dangerous goods procurement management, safety responsibility system, quantitative assessment, inspection, rectification and other business functions. The inspection function is realized through mobile phone terminal and NFC function, the inspection personnel through scanning electronic tags to carry out daily inspection, improve the efficiency of inspection, and ensure the safety of real-time information. In the business layer, system architecture, data architecture and technical architecture were designed in detail, and the integration of the design mode based on role, the use of user experience to the individual as the center, pending tasks to yourselves to log the user push, do match the user work system, greatly improve the user experience.

文献类型学位论文
条目标识符http://ir.xjipc.cas.cn/handle/365002/4578
专题多语种信息技术研究室
作者单位中国科学院新疆理化技术研究所
推荐引用方式
GB/T 7714
张睿. 基于前端整合框架的科研安全生产平台设计与实现[D]. 北京. 中国科学院大学,2016.
条目包含的文件
文件名称/大小 文献类型 版本类型 开放类型 使用许可
基于前端整合框架的科研安全生产平台设计与(1695KB)学位论文 开放获取CC BY-NC-SA浏览 请求全文
个性服务
推荐该条目
保存到收藏夹
查看访问统计
导出为Endnote文件
谷歌学术
谷歌学术中相似的文章
[张睿]的文章
百度学术
百度学术中相似的文章
[张睿]的文章
必应学术
必应学术中相似的文章
[张睿]的文章
相关权益政策
暂无数据
收藏/分享
文件名: 基于前端整合框架的科研安全生产平台设计与实现.pdf
格式: Adobe PDF
所有评论 (0)
暂无评论
 

除非特别说明,本系统中所有内容都受版权保护,并保留所有权利。