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结合到了一起。

自动化运维：flask-bootstrap + highstock整合的更多相关文章

  1. 【目录】Python自动化运维

    目录:Python自动化运维笔记 Python自动化运维 - day2 - 数据类型 Python自动化运维 - day3 - 函数part1 Python自动化运维 - day4 - 函数Part2 ...

  2. 自动化运维：网站svn代码上线更新（flask+saltstack）

    阶段性总结:      跌跌撞撞的用了一周左右的时间做完了网站自动升级功能,中间遇到了很多的问题,也学到了很多,在此做一个总结.   1.整体架构: 后台:nginx+uwsgi  #nginx提供w ...

  3. 自动化运维—tomcat服务起停（mysql+shell+django+bootstrap+jquery）

    项目简介: 项目介绍:自动化运维是未来的趋势,最近学了不少东西,正好通过这个小项目把这些学的东西串起来,练练手. 基础架构: 服务器端:web框架-Django 前端:html css jQuery ...

  4. CheungSSH国产自动化运维工具开源Web界面

    CheungSSH web2.0 发布文档 CheungSSH 简介 CheungSSH是一款国人自主研发的Linux运维自动化管理服务器软件,秉着为企业降低运营成本,解放管理员双手和自动化生产的理念 ...

  5. 自动化运维Ansible安装篇

    Ansible自动化工具之--部署篇 ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了 ...

  6. Python自动化运维开发实战 一、初识Python

    导语 都忘记是什么时候知道python的了,我是搞linux运维的,早先只是知道搞运维必须会shell,要做一些运维自动化的工作,比如实现一些定时备份数据啊.批量执行某个操作啊.写写监控脚本什么的. ...

  7. sso 自动化运维平台

    单点登录SSO(Single Sign-On)是身份管理中的一部分.本文中作者开发了一个自动化运维平台中的统一认证接口,单点登录平台通过提供统一的认证平台,实现单点登录.因此,应用系统并不需要开发用户 ...

  8. Python+Django+ansible playbook自动化运维项目实战☝☝☝

    Python+Django+ansible playbook自动化运维项目实战☝☝☝  一.入门引导 DevOPSDevOps(英文Development和Operations的组合)是一组过程.方法 ...

  9. SQL Server 自动化运维系列

    本系列为SQL SERVER自动化运维的一些操作技巧点,所有内容都是根据日常运维过程中最经常遇到的问题,并为此形成了一些自动化运维的方式,皆为原创.... 供部分DBA和开发人员浏览借鉴,所应用平台基 ...

随机推荐

  1. Unity3D中可中途释放的单例

    Unity3D中可中途释放的单例 使用静态类,静态变量的坏处是从程序加载后就一直占用内存,想要释放比较麻烦,可是之前使用的单例,没有提供释放的方法,那是不是也同静态的一样直到程序结束菜释放?那单例的好 ...

  2. BaseDao代码,用于连接数据库实行增删改查等操作

    在学习JavaWeb时会用到此代码,用于实行增删改查操作 1 package com.bdqn.dao; import java.sql.Connection; import java.sql.Dri ...

  3. zynq中uboot的qspi启动报错及解决办法

    问题描述: 用u-boot-xlnx-v2016.3版本编译的uboot通过qspi flash启动出现如下错误: 尝试在uboot命令行输入"sf probe 0 0 0"挂载q ...

  4. 一道google面试题

    输入n,把1-n分成两个和相等的子集,有多少种分法 想了个dp,直接背包也行 #include <iostream> #include <cstdio> using names ...

  5. Win10/UWP开发—使用Cortana语音与App后台Service交互

    上篇文章中我们介绍了使用Cortana调用前台App,不熟悉的移步到:Win10/UWP开发—使用Cortana语音指令与App的前台交互,这篇我们讲讲如何使用Cortana调用App的后台任务,相比 ...

  6. 黑马-----内存模型和volatile详解

    黑马程序员:Java培训.Android培训.iOS培训..Net培训 JAVA线程-内存模型和volatile详解 一.单核内存模型 1.程序运行时,将临时数据存放到Cache中 2.将CPU计算所 ...

  7. LVM逻辑卷基本概念及LVM的工作原理

    这篇随笔将详细讲解Linux磁盘管理机制中的LVM逻辑卷的基本概念以及LVM的工作原理!!! 一.传统的磁盘管理 其实在Linux操作系统中,我们的磁盘管理机制和windows上的差不多,绝大多数都是 ...

  8. Bullet核心类介绍（Bullet 2.82 HelloWorld程序及其详解，附程序代码）

    实验平台:win7,VS2010 先上结果截图: 文章最后附有生成该图的程序. 1. 刚体模拟原理 Bullet作为一个物理引擎,其任务就是刚体模拟(还有可变形体模拟).刚体模拟,就是要计算预测物体的 ...

  9. matlab 批量提取CNN特征

    无类别,图像混合放置: clear close all addpath ./matlab model= './models/bvlc_reference_caffenet/deploy.prototx ...

  10. css3背景图水平垂直顺时针逆时针翻转旋转

    .bgPlay{ background:url(../images/bg.jpg) no-repeat; /* background-size:auto auto || cover 代表以宽或高填满元 ...