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

　　

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

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

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

     {% block scripts %}

    <script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>

    <script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>

    {%- endblock scripts %}

 

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

    <script src="{{bootstrap_find_resource('highstock.js', cdn='highstock')}}"></script>

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

     

2、真正的调用.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模板的名称，在添加的时候也需要注意。

 

3、修改源码关键部分：

   __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

     <script src="{{bootstrap_find_resource('highstock.js', cdn='highstock')}}"></script>

 

4、最后的障碍

     ok，我们以为经过这样的处理，一切就没有问题了，但是我们还是太年轻了。

     

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

      Uncaught ReferenceError: $ is not defined  (anonymous function)

 

     经过我们睿智的思考（各种baidu）

     我们得到的结论是：

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

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

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

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

     

5、成功的喜悦与界面

     

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