• 自动化运维: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结合到了一起。
  • 相关阅读:
    iOS controller 和 window 图层
    iOS CGAffineTransform 仿射变换
    iOS UIButton的UIEdgeInsets
    iOS UI的动态布局
    iOS 栅格动态布局
    iOS 系统键盘几个类型
    iOS 金融类高精度处理
    Sublime Text (崇高文本)
    iOS 静态库——制作bundle
    iOS 静态库——制作Framework
  • 原文地址:https://www.cnblogs.com/liujian001/p/5798135.html
Copyright © 2020-2023  润新知