Authored by Yiwen Zhang
Authored by Sen Wang
总体上,我们这个软件是一个单页面网页。
我们的整体架构图如下:
首先,整个网页是由一个 MenuTabs
来控制。这也可以在单页应用中实现不同页面的转化和展示。
我们主要有四个子页面组成。
- 欢迎页面
- 输入页面
- 发送者页面
- 接收者页面
欢迎界面是我们这个应用初始化加载的页面,具体是我们这个应用的一些粗略的使用方法和我们这个项目的GitHub仓库。
输入界面的功能是输入相应的参数和配置。其中,为了完成这个功能和实现配置的分层化展示,我们这个子页面又有一个 Stepper
控制。
Stepper
控制了以下几种不同的输入。
- 基础输入
- TCP 高阶输入
- IP 高阶输入
发送者页面是发送者从应用层到传输层、网络层、数据链路层的包的头部打包的详细过程的动画展示,最终通过物理层传输往接收方。
接收者页面是发送者从物理层到数据链路层、网络层、传输层的包的头部逐步解包的详细过程的动画展示。最终接受到发送方的信息。
效果图如上所示,当前展示的页面和本应用可以展示的子页面的相关信息。
效果图如上图所示,点击 Explore Now!
进入基本配置输入界面, 点击 Our GitHub
展示我们这个项目的仓库。
效果图如上所示,下方指示目前输入配置内容完成的阶段。
效果图如上图所示,界面的右方为之前输入的基本配置,中间为打包的过程和结果。
效果图如上图所示,中间为解包的过程和结果,界面的右方为结果得到的参数。