目的

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, Dashboardviews: 视图，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代码访问的，模板的方式嵌入。