大家好，交互网站源码分享相信很多的网友都不是很明白，包括交互的网站也是一样，不过没有关系，接下来就来为大家分享关于交互网站源码分享和交互的网站的一些知识点，大家可以关注收藏，免得下次来找不到哦，下面我们开始吧！
目的
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(\n&34;,\nlabel=_(&34;),\nhref=&34;,\ncategory_icon=&34;,\nicon=&34;,\ncategory=&34;,\ncategory_label=__(&34;),\n)\nappbuilder.add_link(\n__(&34;),\nhref=&34;,\nicon=&34;,\ncategory=&34;,\n)\nappbuilder.add_link(\n&34;,\nlabel=_(&34;),\nhref=&34;,\nicon=&34;,\ncategory_icon=&34;,\ncategory=&34;,\ncategory_label=__(&34;),\n)\nappbuilder.add_view(\nSliceModelView,\n&34;,\nlabel=__(&34;),\nicon=&34;,\ncategory=&34;,\ncategory_icon=&34;,\n)\nappbuilder.add_view(\nDashboardModelView,\n&34;,\nlabel=__(&34;),\nicon=&34;,\ncategory=&34;,\ncategory_icon=&34;,\n)
这些都是flaskAppbuilder框架的内容，大概意思就是通过add_link和add_view会在界面上加入相应的菜单，如果是add_link点击菜单的时候就会访问相应的链接，比如第一个，点击“SQLEditor”菜单的时候，会访问/superset/sqllab/链接发送给后台。
然后后台处理/superset/sqllab/链接的后台代码在哪？
在superset/view/core.py文件中，代码如下：
@has_access\n@event_logger.log_this\n@expose(&34;,methods=[&34;,&34;])\ndefsqllab(self)->FlaskResponse:\n&34;&34;&34;\npayload={\n&34;:config[&34;],\n&34;:common_bootstrap_payload(),\n**self._get_sqllab_tabs(g.user.get_id()),\n}\n\nform_data=request.form.get(&34;)\nifform_data:\ntry:\npayload[&34;]=json.loads(form_data)\nexceptjson.JSONDecodeError:\npass\n\npayload[&34;]=bootstrap_user_data(g.user)\nbootstrap_data=json.dumps(\npayload,default=utils.pessimistic_json_iso_dttm_ser\n)\nreturnself.render_template(\n&34;,entry=&34;,bootstrap_data=bootstrap_data\n)
上面的注解都是flask框架的东西，定义了处理/sqllab请求的方法，其中render_template是flask框架渲染模板的方法，里面传入两个参数一个entry=“sqllab”和bootstrap_data，最后会把渲染后台的页面返回给后台。
这里再详细看下模板渲染，先看下superset/basic.html这个模板文件，默认的flask框架的模板都在源码的templates目录下，这里是templates/superset/basic.html,这里粘贴核心代码如下：
{%blockbody%}\n<divid=&34;data-bootstrap=&34;>\n<imgsrc=&34;style=&34;>\n</div>\n{%endblock%}\n//——————————–\n{%blocktail_js%}\n{%ifnotstandalone_mode%}\n{{js_bundle(&39;)}}\n{%endif%}\n{%ifentry%}\n{{js_bundle(entry)}}\n{%endif%}\n{%include&34;%}\n{%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，最终后台代码
returnself.render_template(\n&34;,entry=&34;,bootstrap_data=bootstrap_data\n)
就是根据模板把前端代码/src/sqllab/index.jsx打包生成的对应js代码，嵌入到了模板中，然后返回给前端显示了。
后续页面中的具体请求都是restapi请求，后台对应的代码如下：
结构都很类似，都有api.py，dao.py等，其中api.py就是处理页面中发起的restapi请求的（其实最终通过ajax），到时候具体问题具体分析即可。
总结
superset框架app.py中定义了界面上各个菜单按钮的功能跳转链接，然后具体链接的后台处理在views/core.py中，它会继续根据templates模板渲染出结果给前端显示，模板中会根据传入的参数来找到对应的前端webpack打包好的文件（不一定都是这样，这些只是其中的一部分）。
它这个前后端分离跟之前的还是有点区别的，并不是把打包好的前端代码通过nginx访问的，他还是通过python代码访问的，模板的方式嵌入。
关于交互网站源码分享到此分享完毕，希望能帮助到您。