DophinScheduler ui部分 核心代码详细解析续集——前端组件的代码综合分析
2021SC@SDUSC
文章目录
- 一、总体思路
- 二、js代码分析
- 1.pages
- 2.router
- 3.store
- 4.login
- 三、module
- 四、view
上文链接：
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之外补充设置组件样式用的。
DophinScheduler ui部分 核心代码详细解析续集——前端组件的代码综合分析相关推荐
- DophinScheduler ui部分 核心代码详细解析——重中之重的src文件夹里究竟有何种玄机
2021SC@SDUSC 文章目录 一.整体结构 二.具体细节 1.components 2.images 3.js 1.dag-canvas 2.contextMenu 3.nodeStatus.j ...
- DophinScheduler ui部分 核心代码详细解析——底层逻辑与具体实现
2021SC@SDUSC 文章目录 一.前端 1.\_test\_ 1.Counter.js 2.test.spec.js 2.build 3.node_modules 4.src 一.前端 1._t ...
- DophinScheduler server部分 核心代码详细解析——掌控任务和进程的呼吸与脉搏：log、monitor与registry
2021SC@SDUSC 文章目录 一.整体结构 二.具体分析 1.log 1.LoggerRequestProcessor 2.LoggerServer 3.MasterLogFilter 2.mo ...
- DophinScheduler server部分 核心代码详细解析——统领全局调度全场的服务器server部分究竟干了什么？
2021SC@SDUSC 文章目录 一.整体结构 二.细节分析 1.builder 2.entity 1.DataxTaskExecutionContext 2.DependenceTaskExecu ...
- 心形图Python代码详细解析
心形图Python代码详细解析 源代码 print('\n'.join([''.join([('pikachu'[(x-y)%7]\if((x*0.05)**2+(y*0.1)**2-1)**3-(x ...
- Apollo Planning决策规划算法代码详细解析 (5)：规划算法流程介绍
之前的章节介绍了planning模块的整体框架,经过scenario与stage的选择,便进入了具体的task任务,由一系列配置好的task组成了具体的规划算法,本章以apollo中的PublicRo ...
- Apollo Planning决策规划算法代码详细解析 (1)：Scenario选择
本文重点讲解Apollo代码中怎样配置Scenario以及选择当前Scenario,Scenario场景决策是Apollo规划算法的第一步,本文会对代码进行详细解析,也会梳理整个决策流程,码字不易,喜 ...
- Apollo Planning决策规划算法代码详细解析 (2)：Scenario执行
上一章节讲Scenario的决策逻辑,当确认当前Scenario后,本章节继续深入讲解在代码中,Scenario的执行过程.Scenario的Process()函数根据配置文件顺序执行stage,并判 ...
- HanLP二元核心词典详细解析
2019独角兽企业重金招聘Python工程师标准>>> 本文分析:HanLP版本1.5.3中二元核心词典的存储与查找.当词典文件没有被缓存时,会从文本文件CoreNatureDict ...
最新文章
- 字节流写数据加异常处理
- Filter,FilterChain,FilterConfig
- 如何降低Windows Server 2008的IE安全级别?
- lz4压缩算法--速度之王
- layui tree 加载慢_图片太多，加载慢，我用了layui里的方式，放在服务器后还是太慢！怎么解决？？？有没有什么优化的技巧？？？...
- 网课老师凭什么年薪200万？
- windows下，linux下elasticsearch安装插件head插件的步骤
- Java多线程、主线程等待所有子线程执行完毕、共享资源
- MVC过滤器详解 面向切面编程（AOP）
- 在计算机网络GAN代表什么,图解 生成对抗网络GAN 原理 超详解
- Small game written by Python 2021/1/7
- 计算机相关技术资料整理
- require() 的基本用法
- 浏览器页签icon图标的设置和获取
- 10.26 node.js day01
- 净亏损2.9亿元，财务业绩陷入困境后，逸仙电商盈利仍遥遥无期
- 校园网认证界面加载不出来？
- A Deep Learning-Based Remaining Useful Life Prediction Approach for Bearings 基于深度学习的轴承剩余寿命预测
- 什么是黑帽SEO，哪些属于黑帽技术?
- bootstrap table 实现底部合计