DophinScheduler ui部分 核心代码详细解析续集——前端组件的代码综合分析

2021SC@SDUSC

---

上文链接：
DophinScheduler ui部分 核心代码详细解析——重中之重的src文件夹里究竟有何种玄机

一、总体思路

 上一篇博客中我们详细分析了ui部分代码的dag页面组件，经过对源代码的细致观察和精心解读，笔者发现ui端的组件实现都大同小异，都是一些寻常的页面组件元素。
 因此，我们将目光从代码的前端组件实现语法转到了前端功能性组件的安排逻辑。换句话说，让我们提高我们的视野范围，从代码的细枝末节转到更高一层的组织逻辑，揣摩DophinScheduler代码编写者们编写程序时的心路历程。

二、js代码分析

1.pages

还是我们上次分析的js文件夹。经确认，pages文件夹中大多数文件的组织结构安排都与我们在这里展开的datasource类似，其中存了一个list文件夹，用来储存当前页面所有子页面的前端ui代码，而index.vue则包含一个router-view组件，用来实现从当前页面路径到前端页面代码的路由匹配。
datasource负责的是任务实例的数据源配置界面，用来为任务实例指定可供访问和操作的数据源。
home负责的是用户登录后进到的用户主页，主要内容便是我们之前实战中见到的任务实例等资源的环形图可视化分析，以及到创建任务实例等各个主要功能的导航按钮。
monitor负责的是任务实例和系统进程以及系统状态的监测前端，负责向用户可视化地展示当前运行中的任务实例和系统的运行状态。
projects负责项目管理界面。在正常的业务流程中，用户应当先新建项目，确定项目的主要任务和主要工作，再创建任务实例完成相应任务。projects负责的便是这一部分的用户交互。
resource负责的是任务进程的资源分配调度的前端界面，所谓资源，不仅包括任务可能用到的文本、图片、视频等资料，还可以包括第三方库等代码块，通过对资源库的引用能够提供更多基础功能以外的延伸功能。
security负责的自然就是安全界面了。无论是任务还是项目，在网络中传输时的安全务必得到万分的保证。而这里的security就是为了向用户提供安全服务的详细信息，以及提供安全建议等。
user界面就更不必多说，想必经过了实战之后各位都对其十分熟悉了。

2.router

router其实是网路编程的常规组件了，这里简单提一下。

这里就是指定了之前写的那些页面的网络路由，实现网址与组件界面的绑定。具体语法就如图所示了。

3.store

如图所示，图中所有组件的代码结构都是相同的。每一个部分都包含actions组件动作、getters用户输入、index参数、mutations修改状态和state组件状态这五个js文件，用来储存一些可供vue组件调用的数据信息。
最下面的index.js则是向代码的其他部分声明当前部分的所有组件名称，即dag,projects,kinship,resource,security,datasource,user和monitor。
这里值得一提的是前面没有提到过的kinship。这个单词的英文原意是前缘关系。它做的事情是管控组件间的继承关系，记录哪些组件继承了哪些组件，从而方便程序员和其他代码使用者和阅读者明白组件间继承的逻辑关系。

4.login

这组件就不用多说了吧，就是用户登录界面。

三、module

这里是DophinScheduler引用的第三方库。通常而言这个没什么好谈的，不过这里我们可以看到耳熟能详的axios、echarts和util等，看一眼这里也可以了解行业前沿常用到的一些组件库。

四、view

这里放了home和login的两个命名为index的html文件。这一点比较少见，因为主流框架还是用vue组件。
在两个html文件中写了大量meta源数据标签，用来方便网络爬虫等程序获取页面数据。

在body中则是写了这么一个轮播菜单栏。从DophinScheduler目前的表现效果来看，我们有理由相信这是DophinScheduler早期使用的页面元素，现在已经遭受了遗弃，默默地躺在文件夹的一角。

至此，ui部分的核心代码src部分已经解读完毕了。

最后，让我们再看一眼ui部分的sql文件夹。

可以看到DophinScheduler用到的一些sql语句，并且他们还细致地按create和update分了类，并按照版本号进行组织。

图中还可以看到style文件夹，里面包含两个xml文件，是用来在xcss之外补充设置组件样式用的。