Automated O & M: flask-bootstrap + highstock integration and highstock

Automated O & M: flask-bootstrap + highstock integration and highstock

　　

1, Load highstock. js in the base.html template of flask-bootstrap.The following is an example of calling a js file in the source code of base.html. File Path: 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 %} In the example, bootstrap_find_resource (filename, cdn) is used) this function calls the js file. We need to do the same in flask-bootstrap. <Script src = "{bootstrap_find_resource ('highstock. js', cdn = 'highstock') }}"> </script> however, if you use the preceding format, you will find that it is useless. 2, The actual method of calling the. js file.To call the. js file, we need to know the source of the function bootstrap_find_resource (filename, cdn. According to the principles of the flask framework, this type of function should generally exist in the _ init _. py file of the flask-bootstrap template. Let's check this file. Pwd: python2.7/site-packages/flask_bootstrap/_ init _. py first, we need to back up the _ init _. py file. To avoid irreparable problems caused by your modifications, this is a necessary quality for O & M personnel. By reading the source code, we have noticed the following functions or content:, Call the js template variable: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): The use_minified parameter in this function. The highstock template we call does not have a mini version. Note This. C. def lwrap (cdn, primary = static) jquery = lwrap (WebCDN ('// cdnjs.cloudflare.com/ajax/libs/jquery/%s/' % JQUERY_VERSION), local). These two examples are the concatenation functions and instances connected by js templates, we also need to create highstock according to his format. js link variable. D. app. extensions ['bootstrap '] = {'cdns': {'local': local, 'static ': static, 'bootstrap': bootstrap, 'jquery ': jquery, 'html5shiv': html5shiv, 'respond. js': respondjs. This dictionary corresponds to the name of the js template. Pay attention to it when adding it. 3, Modify the source code: _ Init _. pyHIGHSTOCK_VERSION = '4. 2.6 'app. config. setdefault ('bootstrap _ USE_MINIFIED ', False) highstock = lwrap (WebCDN (' // cdnjs.cloudflare.com/ajax/libs/highstock/ss/' % HIGHSTOCK_VERSION) app. extensions ['bootstrap '] = {'cdns': {'highstock': highstock, base.html <script src = "{bootstrap_find_resource ('highstock. js', cdn = 'highstock') }}"> </script> 4, Last obstacleOkay, we thought that after such a process, everything would be okay, but we were too young. View the page and review the elements. The following error is reported on our page: Uncaught ReferenceError: $ is not defined (anonymous function) After our wise thinking (various baidu), we can conclude that jquery's loading sequence or position is incorrect. Now let's look at base.html. We suddenly realized that our js loading location is behind the js Code, leading to this undefined problem. The solution is to advance the location of the base.html template calling js to