自动化运维：flask-bootstrap + highstock整合

时间 2019-11-09

标签自动化 flask bootstrap highstock 整合栏目测试自动化繁體版

原文原文链接

一、 在flask-bootstrap的base.html模板中加载highstock.js

如下是base.html的源码中，调用js文件的例子。

　　文件路径： python2.7/site-packages/flask_bootstrap/templates/bootstrap/base.html

{% block scripts %}

{%- endblock scripts %}

在例子中，使用了 bootstrap_find_resource(filename,cdn)这个函数调用了js文件，显然在flask-bootstrap咱们也须要这样作。

不过单纯的使用以上的格式调用，你会发现没有什么卵用。

二、 真正的调用.js文件的方法。

若是想要真正的调用.js文件，咱们须要知道bootstrap_find_resource(filename,cdn)这个函数的来源。

根据flask框架的原理，通常这种函数应该存在与这个flask-bootstrap模板的__init__.py文件中，那咱们

去查看这个文件。

pwd：python2.7/site-packages/flask_bootstrap/__init__.py

首先咱们须要备份__init__.py文件。以避免你的修改形成了没法挽回的问题，这是一个运维人员的必要素质。

经过阅读源代码，咱们关注到了如下几个函数或者内容：

a、 调用js的模板变量：

JQUERY_VERSION = '1.12.4'

HTML5SHIV_VERSION = '3.7.3'

RESPONDJS_VERSION = '1.4.2'

b、 bootstrap_find_resource(filename, cdn, use_minified=None, local=True):

这个函数中的use_minified参数，咱们调用的highstock模板没有mini版本。

这点须要注意。

c、 def lwrap(cdn, primary=static)

jquery = lwrap(

WebCDN('//cdnjs.cloudflare.com/ajax/libs/jquery/%s/' %

JQUERY_VERSION), local)

这两个例子是js模板链接的拼接函数以及实例，咱们也须要根据他的格式造出highstock.js的连接变量。

d、 app.extensions['bootstrap'] = {

'cdns': {

'local': local,

'static': static,

'bootstrap': bootstrap,

'jquery': jquery,

'html5shiv': html5shiv,

'respond.js': respondjs,

这个字典对应了js模板的名称，在添加的时候也须要注意。

三、 修改源码关键部分：

__init__.py

HIGHSTOCK_VERSION = '4.2.6'

app.config.setdefault('BOOTSTRAP_USE_MINIFIED', False)

highstock = lwrap(

WebCDN('//cdnjs.cloudflare.com/ajax/libs/highstock/%s/' %

HIGHSTOCK_VERSION))

app.extensions['bootstrap'] = {

'cdns': {

'highstock': highstock,

base.html

四、 最后的障碍

ok，咱们觉得通过这样的处理，一切就没有问题了，可是咱们仍是太年轻了。

查看页面，审查元素，咱们的页面报了这样一个问题：

Uncaught ReferenceError: $ is not defined (anonymous function)

通过咱们睿智的思考（各类baidu）

咱们获得的结论是：

jquery加载顺序或者位置错误。

看到这咱们再检查base.html恍然大悟，咱们的js的加载位置是在js代码的后边，

致使这种未定义的问题出现。那么解决办法就是，将

base.html模板调用js的位置提早到<head>中，这就完美的解决了咱们的问题。

五、成功的喜悦与界面

很明显，highstock的表格已经完美的与flask-bootstrap结合到了一块儿。