自動化運維：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結合到了一塊兒。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。