论文总字数：26402字

摘 要

随着互联网及移动互联网、专用网络信息系统和各种网络应用的普及，网络安全日益重要，提供网络攻防平台来提供对网络安全实践能力的提高也已有了诸多研究，当前的网络攻防平台通过web技术已经可以实现模拟攻防的作用，但对攻防的实时展示以及攻防平台的资源监控少有人做，本课题通过Vue前端框架和web开发技术实现网络攻防平台的可视化，即实时攻防展示、日志记录、流量统计以及资源监控，过程中借助多个前端库文件实现友好的界面UI。

1. 首先进行技术调研与学习，对项目涉及到的web技术node.js，前端

开发技术vue框架进行调研学习；

1. 对课题要求进行分析整理，将课题要求映射为具体的前端开发模块，

包括五个页面的开发（首页、拓扑图页、流量图页、日志表页、资源监控图页）；

1. 通过Node.js实现服务端功能，对前端页面的web请求提供服务。具

体页面经调研、比较、测试后选择ECharts、Bootstrap-table等前端库文件实现了各个组件的功能要求及可视化要求。最后，通过前端库Mock.js拦截ajax请求并返回提前设计的数据来实现前端功能的测试；

1. 最后对课题进行内容以及经验的总结，合理规划后续工作。

对于整套可视化工作，预计实现五个页面，首页作为可视化系统地入口，可以跳转至四个页面分别展示四项功能，各个页面之间也可通过链接进行相互跳转，最终实现友好的用户界面。

关键词：web服务，组件，拓扑，网络攻防

Abstract

With the popularity of the Internet and mobile Internet, private network information system and various network applications, network security has become increasingly important, A number of studies have been conducted to provide a network attack and defense platform to improve the practical ability of network security. The current network attack and defense platform has been able to realize the role of simulated attack and defense through web technology, but the real-time display of attack and defense and the resource monitoring of attack and defense platform are rarely done.in this paper, Vue (The Progressive JavaScript Framework) is used to realize the visualization of network attack and defense platform, that is, real-time attack and defense display, log record, traffic statistics and resource monitoring, with the help of a number of front-end library files to achieve a friendly interface UI.

(1)Firstly, I conducted research and learning on the web technology node.js involved in the project and the vue framework of front-end development technology；

(2)Analyze and sort out the project requirements, map the project requirements into specific front-end development modules, including the development of five pages (home page, topology page, flow chart page, log table page, resource monitoring chart page)；

(3)Realize server-side functions through node. js and provide services for web requests of front-end pages.After investigation, comparison and test, the front-end library files such as ECharts and bootstrap-table were selected to realize the functional requirements and visualization requirements of each component.Finally, the front-end functions are tested by the front-end library Mock. Js to intercept ajax requests and return the data designed in advance；

(4)At last, summarize the content and experience of the project, and plan the follow-up work reasonably.

For the whole set of visualization work, it is expected to achieve five pages. The home page, as the entrance of the visualization system, can be redirected to four pages to display four functions, and each page can also be redirected through links to achieve a friendly user interface.

KEY WORDS: Web services; Components; Topology; Network attack and defense

东南大学毕业（设计）论文独创性声明

本人声明所呈交的毕业（设计）论文是我个人在导师指导下进行的研究工作及取得的研究成果。尽我所知，除了文中特别加以标注和致谢的地方外，论文中不包含其他人已经发表或撰写过的研究成果，也不包含为获得东南大学或其它教育机构的学位或证书而使用过的材料。与我一同工作的同志对本研究所做的任何贡献均已在论文中作了明确的说明并表示了谢意。

论文作者签名： 日期： 年 月 日

东南大学毕业（设计）论文使用授权声明

东南大学有权保留本人所送交毕业（设计）论文的复印件和电子文档，可以采用影印、缩印或其他复制手段保存论文。本人电子文档的内容和纸质论文的内容相一致。除在保密期内的保密论文外，允许论文被查阅和借阅，可以公布（包括刊登）论文的全部或部分内容。论文的公布（包括刊登）授权东南大学教务处办理。

论文作者签名： 导师签名：

日期： 年 月 日 日期： 年 月 日

目录

摘 要 2

Abstract 3

第一章 绪论 7

1.1 选题背景 7

1.2 研究现状 7

1.3 攻防平台可视化的要求 9

1.4 课题任务和论文章节安排 9

第二章 技术基础 11

2.1 前端三大件 11

2.1.1 HTML 11

2.1.2 CSS 11

2.1.3 JavaScript 12

2.2 前端框架 13

2.2.1 Node.js amp; npm amp; webpack 13

2.2.2 Vue 14

2.3 前端常用库 15

2.3.1 Echarts 15

2.3.2 bootstrap-table, jQuery 16

2.3.3 mock.js 16

2.4 github代码管理工具 17

第三章 攻防平台前端整体结构 19

3.1 逻辑结构 19

3.2 代码结构 21

第四章 攻防平台前端实现细节 25

4.1 拓扑图页面（Topo.vue） 26

4.1.1 前端UI实现 26

4.1.2 数据处理流程 27

4.2 流量图页面（Traffic.vue） 28

4.2.1 前端UI实现 29

4.2.2 数据处理流程 29

4.3 资源监控图页面（Monitor.vue） 31

4.3.1 前端UI实现 32

4.3.2 数据处理流程 32

4.4 日志表页面（Log.vue） 33

4.4.1 前端UI实现 33

4.4.2 数据处理流程 33

第五章 结束语 35

5.1 毕设工作总结 35

5.1.1 工作内容总结 35

5.1.2 经验教训总结 35

5.2 今后工作展望 36

参考文献 37

致谢 38

第一章 绪论

1.1 选题背景

随着互联网及移动互联网、专用网络信息系统和各种网络应用的普及，网络信息安全已成为关系到国家政治、国防、社会的重要问题，这对培养具有网络信息安全知识和实践技能的专业技术人员提出了更高的要求。网络攻防课程是网络信息安全中重要的课程，主要以网络攻击模拟为依据向学生介绍常用网络攻击的各阶段的攻击方法和原理，以及应对相应网络攻击的防护技术和手段。该课程由于实践性比较强，而且具体的攻击实现方法往往根据现实的网络环境和网络服务而有所改变。为了模拟实现这种实战性较强和依赖于不同网络环境的攻击情况在课堂教学以及实验环境中展示，需要在教学实验室里根据实际情况创建特定应用网络环境。在这个特定的环境中，一方面可以模拟实际的攻击技术手段，甚至模拟网络攻防的相应防御手段，另一方面，在教学实验室特定的网络环境中，可以有效防止网络攻击对其他网络的影响。

传统的网络攻防平台已经可以实现在平台上直接操作对应的教学实验室的网络环境，可以直观地在平台上进行网络攻防的演示以及直接在平台上模拟具体的攻防事件，这个平台一方面提供了教学演示的功能，另一方面提供了实验环境来进行网络攻防演练。对于传统攻防平台来说，有着许多管理上的问题，例如：管理者并不能实时地了解到当前平台中具体有哪些机器在相互攻击，这样便不能及时发现网络环境中例如主机掉线、攻击异常的问题，也没有记录历史攻防事件的地方供管理者后续对攻防事件的分析，缺乏流量汇总功能监控网络环境中是否存在流量异常问题，缺乏对网络环境中诸多机器的资源利用情况的实时监控，换句话说，当前的攻防平台虽然能够较好地实现网络攻防时间教学演示以及模拟网络攻防实践的任务，却缺乏对平台本身的监控功能。

剩余内容已隐藏，请支付后下载全文，论文总字数：26402字