skydive前端代码框架分析

skydive前端代码：
https://github.com/skydive-project/skydive/tree/master/statics

前端代码使用框架分析：
以vue-2.1.9框架为主进行开发的。其它第三方插件为：bootstrap、d3、jquery.1.9.1、jquery-ui.1.10.1、lscache、popper、tooltip、v-tooltip。
项目中的功能js组件写在：statics/js/components下。

前端代码分析：
1.总体上来说是完全前后端分离的，该代码能跑起来。
2.但其要通过后端读取相关配置项目（skydive_service_ip:prot/api），具体有：

http://skydive_service_ip:prot/api/
http://skydive_service_ip:prot/api/config/ui.theme
http://skydive_service_ip:prot/api/config/analyzer.ssh_enabled
http://skydive_service_ip:prot/api/config/ui.bandwidth_threshold
http://skydive_service_ip:prot/api/config/analyzer.capture_enabled
http://skydive_service_ip:prot/api/config/ui.bandwidth_update_rate
http://skydive_service_ip:prot/api/config/analyzer.packet_injection_enabled
http://skydive_service_ip:prot/api/config/ui.topology.favorites

因为存在跨域问题（No 'Access-Control-Allow-Origin' header is present on the requested resource.），前端无法请求到相关信息。
解决办法（猜想）：
方法一：后端添加相关代码，可参考：https://studygolang.com/articles/6713。全局搜索后端代码：w.Header().Set("content-type"，在其上方添加：

w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Add("Access-Control-Allow-Headers", "Content-Type")

然后重新编译放到相应的位置，这里要知道：
（1）代码、环境搭建、编译、运行,这四步是如何运行起来的？通过docker容器没有得到答案。
（2）analyzer端和agent端程序是根据那一部分代码编译出来，还是都是同一个编译好的文件？
根据官方的安装文档（https://skydive-project.github.io/skydive/getting-started/install/），是整个代码编译出来后，再分别启动analyzer端（skydive agent [--conf etc/skydive.yml]）和agent端（skydive analyzer [--conf etc/skydive.yml]）。在ubuntu中搭建，没有运行成功，原因：官方文档中提到的相关依赖没有正确安装好。

所以该解决办法还没验证是否可行。

方法二：因为该前端框架使用的是vue2,其中Vue-cli proxyTable 可解决开发环境的跨域问题（https://www.jianshu.com/p/95b2caf7e0da），但该办法只适合用于开发阶段。
3.该前端代码，在<head></head>中嵌入了一小段go的模版语言，用于引入对应的js文件。
引入的go模版语言如下：

<!-- extra assets -->
<< range $i, $asset := .ExtraAssets >>
<< if eq $asset.Ext ".css" >>
<link rel="stylesheet" href="<< $asset.Filename >>" />
<< end >>
<< if eq $asset.Ext ".js" >>
<script src="<< $asset.Filename >>"></script>
<< end >>
<< end >>
</head>

基主界面中，该部分并没有这部分的相关代码，后期删掉该代码，估计影响也不大。

总结：
1.首先要完成从go源码==》环境搭建==》源码编译==》项目运行起来，走通这个步骤。再往下做，看可不可行。
2.熟悉vue前端框架，方便后期使用与参考该部分的前端代码。

转载于:https://www.cnblogs.com/a963383404/p/8966653.html

skydive前端代码框架分析相关推荐

linux usb host复位,Linux USB Host-Controller的初始化代码框架分析
Linux USB Host-Controller的初始化代码框架分析 http://blog.csdn.net/zkami usb_hcd_omap_probe (const struct hc_d ...
linux音频框架分析,Alsa音频子系统Codec---al5623.c内核代码框架分析
驱动代码位于: sound/soc/codec/alc5623.c 随便找个Linux内核都会有. 1.首先进行i2c总线驱动加载在: static int __init alc5623_modini ...
百度有啊前端js框架分析（一）
由于时间有限,今天只对有啊的前端JavaScript 做一个概括性的分析,后面会对每一块再做详细的分析. 百度有啊的所有JavaScript 扩展都位于BB 命名下. 在BB 下定义了: VERSIO ...
电商网站前端代码特点分析
现在电子商务发展迅速,国内个人电商网站已经具有很大规模.电商网站相对传统的博客.论坛等,对用户体验和审美方面要求更高.排版布局等也在传统基础上有新的突破. 以下是一个小型电商网站的代码: <!D ...
RT-Thread工程代码框架分析——(1)启动流程
前言学的东西多了难免有些记不住,通过博客形式记录下来虽然耗费些时间,但总算是留下了一些东西,回头想起来也有迹可循不用完全依赖记忆,顺便也许能对一些同仁提供些许帮助. 本文章主要记录RT-Thread ...
linux usb代码,Linux USB Host Controller的初始化代码框架分析
usb_hcd_omap_probe (const struct hc_driver *driver) (dev/ohci/ohci-omap.c) 在模块初始化时被platform_driver_r ...
开源推荐 | 携程 Foxpage 前端低代码框架
作者简介 Jason Wang,携程研发经理,目前主要负责低代码类产品的设计和研发,关注低代码行业的发展及相关解决方案在企业内部的落地. 大厂技术高级前端 Node进阶点击上方程序员成长指北 ...
开源 | 携程 Foxpage 前端低代码框架
作者简介 Jason Wang,携程研发经理,目前主要负责低代码类产品的设计和研发,关注低代码行业的发展及相关解决方案在企业内部的落地. 一.背景随着低代码开发方式被越来越多的人接受和认可,低代码得 ...
基于虎书实现LALR(1)分析并生成GLSL编译器前端代码(C#)
基于虎书实现LALR(1)分析并生成GLSL编译器前端代码(C#) 为了完美解析GLSL源码,获取其中的信息(都有哪些in/out/uniform等),我决定做个GLSL编译器的前端(以后简称编译器或 ...

skydive前端代码框架分析

skydive前端代码框架分析相关推荐

最新文章

热门文章