目的

superset是很强大的BI分析框架，有些不满足需求的难免要二次开发，二次开发首先要读懂它的源码，基于此目的把自己阅读代码的一些分析分享给大家，让大家都superset整体的源码有个整体的认识，然后具体到哪块代码的时候，可以快速找到具体分析。

Superset是什么？

Superset 是一款由 Airbnb 开源的“现代化的企业级 BI（商业智能） Web 应用程序”，其通过创建和分享 dashboard，为数据分析提供了轻量级的数据查询和可视化方案。

支持的图表类型非常多，如下一部分：

进入正题，源码分析

后台

spuerset 后端采用 Flask-AppBuilder, Sqlachermy, celery，pandas

Flask-AppBuilder: superset 的基本框架，登录验证，权限控制

pandas：数据处理

celery：定时异步任务

sqlachermy: 数据引擎，连接DB

superset源码结构如下：

• bin: 程序的入口文件，可以不关心
• common: 程序共用的代码，暂不关心
• connectors: 数据库连接器，连接数据源有2种类型，通过ConnectorRegistry连接
• migration: superset本身的数据库 升级操作记录
• db_engine_specs,db_engines: 连接其他数据库的engines 比如mysql，pgsql等
• examples: 事例文件，不关心
• models: 数据库模型, Slice, Dashboard
• views: 视图，core.py 存放所有得superset 开头的接口
• tasks: celery 任务脚本
• security: 修改权限入口
• templates, static: 前端相关的模板, 控件代码
• app.py: superset 服务启动，初始化入口
• cli.py: spuerset 命令
• viz.py: 重要，所有得图表类型 后端数据处理入口
• extensions.py: 定义 celery， logger 等中间件

前端

superset 前端采用 React，D3

• superset-frontend/webpack.config.js : 前端入口文件
• superset-frontend/src: 前端重要文件
• superset-frontend/src/explore: 查看图表详情的页面
• superset-frontend/src/chart：根据图表属性渲染具体图表页面，里面调用了SuperChart组件，而此组件属于superset-ui前端库，会根据后台传入的属性，最终渲染出对应的图表组件。

总结

动态图表设计思路其实都是如此，前端会把各种图表先写好，内置到代码中，然后每个图表都是自己唯一标示和相应的属性，等通过拖拽设计好后，保存的时候其实就是把图表对应的属性元数据信息（描述图表的json字符串），发送给后台。 等预览图表的时候，其实就是从后台读取这些元数据信息，然后给前端组件按照这些元数据信息，找到对应的内置好的图表组件，并渲染出来，而上面的SuperChart组件其实就是superset框架中的渲染组件。

前端和后台交互源码分析

前端的代码结构中webpack.config.js 入口文件中 定义了 以src文件夹去生成打包js文件，webpack的功能

会根据不同的源码，打包成不同的文件，打包后的文件是可以直接给浏览器运行的

后台代码入口

superset/app.py

下面列出一些主要的代码片段，大部分都是这种的

appbuilder.add_link(
    "SQL Editor",
    label=_("SQL Editor"),
    href="/superset/sqllab/",
    category_icon="fa-flask",
    icon="fa-flask",
    category="SQL Lab",
    category_label=__("SQL Lab"),
)
appbuilder.add_link(
    __("Saved Queries"),
    href="/savedqueryview/list/",
    icon="fa-save",
    category="SQL Lab",
)
appbuilder.add_link(
    "Query Search",
    label=_("Query History"),
    href="/superset/sqllab/history/",
    icon="fa-search",
    category_icon="fa-flask",
    category="SQL Lab",
    category_label=__("SQL Lab"),
)
 appbuilder.add_view(
            SliceModelView,
            "Charts",
            label=__("Charts"),
            icon="fa-bar-chart",
            category="",
            category_icon="",
        )
appbuilder.add_view(
            DashboardModelView,
            "Dashboards",
            label=__("Dashboards"),
            icon="fa-dashboard",
            category="",
            category_icon="",
        )

这些都是flask Appbuilder框架的内容，大概意思就是通过add_link和add_view会在界面上加入相应的菜单，如果是add_link点击菜单的时候就会访问相应的链接，比如第一个，点击“SQL Editor”菜单的时候，会访问/superset/sqllab/链接发送给后台。

然后后台处理/superset/sqllab/链接的后台代码在哪？

在superset/view/core.py文件中，代码如下：

@has_access
@event_logger.log_this
@expose("/sqllab/", methods=["GET", "POST"])
def sqllab(self) -> FlaskResponse:
    """SQL Editor"""
    payload = {
        "defaultDbId": config["SQLLAB_DEFAULT_DBID"],
        "common": common_bootstrap_payload(),
        **self._get_sqllab_tabs(g.user.get_id()),
    }

    form_data = request.form.get("form_data")
    if form_data:
        try:
            payload["requested_query"] = json.loads(form_data)
        except json.JSONDecodeError:
            pass

    payload["user"] = bootstrap_user_data(g.user)
    bootstrap_data = json.dumps(
        payload, default=utils.pessimistic_json_iso_dttm_ser
    )
    return self.render_template(
        "superset/basic.html", entry="sqllab", bootstrap_data=bootstrap_data
    )

上面的注解都是flask框架的东西，定义了处理/sqllab请求的方法，其中render_template是flask框架渲染模板的方法，里面传入两个参数一个entry=“sqllab”和bootstrap_data，最后会把渲染后台的页面返回给后台。

这里再详细看下模板渲染，先看下superset/basic.html这个模板文件，默认的flask框架的模板都在源码的templates目录下，这里是templates/superset/basic.html,这里粘贴核心代码如下：

{% block body %}
  <div id="app" data-bootstrap="{{ bootstrap_data }}">
    <img src="/static/assets/images/loading.gif" style="width: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%)">
  </div>
{% endblock %}
// --------------------------------
{% block tail_js %}
      {% if not standalone_mode %}
        {{ js_bundle('menu') }}
      {% endif %}
      {% if entry %}
        {{ js_bundle(entry) }}
      {% endif %}
      {% include "tail_js_custom_extra.html" %}
    {% endblock %}

上面一部分的代码定义了一个id=app的div，用过前端react或vue框架的都知道，这个是前端js文件渲染的入口，无论是vue还是react生成的js文件都会绑定到一个id=app的div下面的。

下面那块代码会js_bundle(entry)，其中通过上面分析entry是sqllab，他会从目录中到到前端通过webpack打包好的js_bundle文件，这里的sqllab在前面的webpack.config.js中已经定义了，这里再粘贴一下吧

可以看到里面有sqlab，最终后台代码

return self.render_template(
        "superset/basic.html", entry="sqllab", bootstrap_data=bootstrap_data
    )

就是根据模板把前端代码/src/sqllab/index.jsx打包生成的对应js代码，嵌入到了模板中，然后返回给前端显示了。

后续页面中的具体请求都是rest api请求，后台对应的代码如下：

结构都很类似，都有api.py，dao.py等，其中api.py就是处理页面中发起的rest api请求的（其实最终通过ajax），到时候具体问题具体分析即可。

总结

superset框架app.py中定义了界面上各个菜单按钮的功能跳转链接，然后具体链接的后台处理在views/core.py中，它会继续根据templates模板渲染出结果给前端显示，模板中会根据传入的参数来找到对应的前端webpack打包好的文件（不一定都是这样，这些只是其中的一部分）。

它这个前后端分离跟之前的还是有点区别的，并不是把打包好的前端代码通过nginx访问的，他还是通过python代码访问的，模板的方式嵌入。