標籤：python app flask
前言:自己的挖的坑還得填，此篇為完結篇，環境的搭建參考第一篇從無到有寫一個營運APP(一)，至於第二篇就跳過吧，寫個APP沒那麼複雜。由於自己現在無業游民，所以沒有什麼現成的環境，環境就隨便找個公網的。。再者當下的完成度應該算不上一個完整的APP，但是作為參考，依瓢畫葫蘆絕對足夠了，如果等完整產品，可能得等一段時間了，下面的是該項目的地址。
項目地址: https://github.com/youerning/MyApp(star一下唄)
如下
650) this.width=650;" src="https://s5.51cto.com/wyfs02/M01/99/60/wKiom1lHrUHyQM8MAAAY4_S_xnE795.png-wh_500x0-wm_3-wmp_4-s_2839937888.png" style="float:none;" title="preview1.png" alt="wKiom1lHrUHyQM8MAAAY4_S_xnE795.png-wh_50" />
650) this.width=650;" src="https://s5.51cto.com/wyfs02/M00/99/60/wKiom1lHrUGQ3u60AAAcoO04O6I984.png-wh_500x0-wm_3-wmp_4-s_2138968026.png" style="float:none;" title="preview2.png" alt="wKiom1lHrUGQ3u60AAAcoO04O6I984.png-wh_50" />
650) this.width=650;" src="https://s3.51cto.com/wyfs02/M01/99/60/wKioL1lHrUKxhk1RAAA8JhhMyTY466.png-wh_500x0-wm_3-wmp_4-s_3431620878.png" style="float:none;" title="preview3.png" alt="wKioL1lHrUKxhk1RAAA8JhhMyTY466.png-wh_50" />
650) this.width=650;" src="https://s3.51cto.com/wyfs02/M00/99/60/wKioL1lHrUPxjFXHAAAowsdCZXo571.png-wh_500x0-wm_3-wmp_4-s_3750332120.png" style="float:none;" title="preview4.png" alt="wKioL1lHrUPxjFXHAAAowsdCZXo571.png-wh_50" />
文章目錄：
準備工作
代理
頁面架構
擷取資料
繪圖
自問自答
頁面邏輯簡要說明:
一共三個tab,分別為home，es，zabbix。
home頁面有es，zabbix的效能指標。
es頁面可以圖形展示搜尋的資料。
zabbix頁面可以圖形展示搜尋的資料(沒有環境所以留空)。
(一)
1.環境搭建參考: 第一篇
2.es伺服器
因為沒有現成的es環境再者自己搭建還得往裡面填資料，這太難過了，所以通過shodan找一個暴露在公網的es伺服器。
650) this.width=650;" src="https://s2.51cto.com/wyfs02/M02/99/60/wKioL1lHrh3C9YW4AAJyUm4btbE005.png-wh_500x0-wm_3-wmp_4-s_1367791143.png" title="Image2017-06-19-15-01-002.png" alt="wKioL1lHrh3C9YW4AAJyUm4btbE005.png-wh_50" />
3.建立一個APP
ionic start myops blank
4.sublime開啟該項目
650) this.width=650;" src="https://s5.51cto.com/wyfs02/M00/99/60/wKiom1lHrj2Q3I-tAAEd7A-HCFs180.png-wh_500x0-wm_3-wmp_4-s_3812278321.png" title="Image2017-06-19-15-06-001.png" alt="wKiom1lHrj2Q3I-tAAEd7A-HCFs180.png-wh_50" />
(二)
1.搭建代理
雖說app裡面似乎沒有跨域的限制，但是自己在調試的時候還是可能被這個跨域弄得焦頭爛額的。
所以可以通過flask簡單的寫一個代理頁面，代碼如下，如你所見，我把這個暴露在公網的es伺服器的IP寫出來，的確有點不道德(大家不要搞破壞呀~資料量這麼豐富的還是比較難找的呀)。
from flask import Flaskfrom flask import Response, request, abortimport urlparseimport requestsimport jsonapp = Flask(__name__)esUrl = "http://176.31.137.145:9200/"@app.route("/<app>", methods=["GET","POST"])def index(app): params = "?format=json&pretty" data = {} error = "" req = getattr(requests, request.method.lower()) if app == "es": arg = request.args["api"] if "search" in arg: params = params + "&size=0" url = urlparse.urljoin(esUrl, arg + params) # print url page = req(url) if request.method == "GET" else req(url, request.data) if page.ok: try: ret = page.json() except Exception as e: ret = page.content error = str(e) else: ret = "The url:%s request faild" % url error = "request faild" elif app == "zab": ret = [{"status":"ok"}] else: ret = "" error = "incorrect url" data["data"] = ret data["error"] = error resp = Response(json.dumps(data)) if error: abort(500) resp.headers["Content-Type"] = "application/json; charset=UTF-8" resp.headers["access-control-allow-origin"] = "*" return respif __name__ == "__main__": app.run(port=80,debug=True,host="0.0.0.0")
這個頁面的效果如下。
650) this.width=650;" src="https://s2.51cto.com/wyfs02/M01/99/60/wKioL1lHr2PxD1WrAAAw8U7_DUM679.png-wh_500x0-wm_3-wmp_4-s_3224945681.png" title="Image2017-06-19-15-11-001.png" alt="wKioL1lHr2PxD1WrAAAw8U7_DUM679.png-wh_50" />
(三)
1.頁面架構
就如上面的，我們應該需要三個tab，然後一個es效能的模板頁面，一個詳情模板頁面。
所以目錄結構大體如下。
650) this.width=650;" src="https://s4.51cto.com/wyfs02/M02/99/61/wKiom1lHr5LBpRleAAAqtEqfpRw519.png-wh_500x0-wm_3-wmp_4-s_3337656017.png" title="Image2017-06-19-15-16-001.png" alt="wKiom1lHr5LBpRleAAAqtEqfpRw519.png-wh_50" />
總而言之，我們需要五個模板，所以在www目錄下建立了一個tpls的目錄用於放置我們的模板檔案。
完整原始碼，可以訪問我的GitHub。
2.頁面架構編寫。
首先在入口頁撰寫總體布局:
<body ng-app="myops"> <ion-pane> <ion-nav-bar class="bar-positive"> <ion-nav-back-button></ion-nav-back-button> </ion-nav-bar> <ion-tabs class="tabs-icon-top"> <ion-tab title="Home" icon="ion-home" href="#/home"> <ion-nav-view name="tab-home"></ion-nav-view> </ion-tab> <ion-tab title="es" icon="ion-ionic" href="#/es"> <ion-nav-view name="tab-es"></ion-nav-view> </ion-tab> <ion-tab title="zabbix" icon="ion-ionic" href="#/zabbix"> <ion-nav-view name="tab-zabbix"></ion-nav-view> </ion-tab> </ion-tabs> </ion-pane> </body>
建立視圖檔案，大致結構如下,home.html,es.html.zabbix.html等
<ion-view view-title="{YOUR TITLE}"> <ion-content>{YOUR CONTENT} </ion-content></ion-view>
編寫路由邏輯。
app.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) { $ionicConfigProvider.tabs.position(‘bottom‘); $stateProvider .state("home", { url:"/home", views:{ "tab-home":{ controller:"homeCtrl", templateUrl: "tpls/home.html" } } }); $stateProvider .state("detail", { url:"/detail/:name", views:{ "tab-es":{ controller:"detailCtrl", templateUrl: "tpls/detail.html" } } }); $stateProvider .state("perf", { url:"/perf/:name", views:{ "tab-home":{ controller:"perfCtrl", templateUrl: "tpls/perf.html" } } }); $stateProvider .state("es", { url:"/es", views:{ "tab-es":{ controller:"esCtrl", templateUrl: "tpls/es.html" } } }); $stateProvider .state("zabbix", { url:"/zabbix", views:{ "tab-zabbix":{ controller:"zabbixCtrl", templateUrl: "tpls/zabbix.html" } } }); $urlRouterProvider.otherwise("/home");})
(四)
1.擷取資料
這裡我們通過angularjs內建的$http訪問相應的api,大致如下。
$http.get(esUrl, {params:{api: "_cat/health"}}).then(function(resp){ $scope.data.status = resp.data.data[0].status; }, function(resp) { $scope.data.status = "something wrong"; });
本來效能指標應該是時間序列的監控資料，但是由於沒有環境，這裡就簡單的列出當前指標值。
perf.html內容如下。
<ion-view view-title="Performance for {{name | uppercase}}"> <ion-content> <ion-list class="cards"> <ion-item>how many nodes: {{data.nodes}}</ion-item> <ion-item>how many shards: {{data.shards}}</ion-item> <ion-item>status:{{data.status}}</ion-item> <ion-item>how many indices: {{data.indices}}</ion-item> <ion-item>how many documnet:{{data.counts}}</ion-item> </ion-list> </ion-content></ion-view>
(五)
1.繪圖
這裡繪圖使用chart.js
2.安裝chart.js
在項目目錄下執行下面命令
bower install angular-chart.js
3.在index.html引入js檔案
<script src="lib/chart.js/dist/Chart.min.js"></script> <script src="lib/angular-chart.js/dist/angular-chart.min.js"></script>
4.檢索es中我們感興趣的欄位
通過檢索mapping效果如下
650) this.width=650;" src="https://s4.51cto.com/wyfs02/M00/99/61/wKioL1lHsUmCOGUEAABnHI9ssvo802.png-wh_500x0-wm_3-wmp_4-s_1185511909.png" title="Image2017-06-19-16-30-001.png" alt="wKioL1lHsUmCOGUEAABnHI9ssvo802.png-wh_50" />
個人而言，感覺可玩的是clientip，agent，response
我們利用es的api統計以下上面的欄位吧。
因為彙總需要post方法，所以這裡使用postman。
效果如下
650) this.width=650;" src="https://s2.51cto.com/wyfs02/M01/99/61/wKioL1lHsW-iDnh_AABdu_lOvxE185.png-wh_500x0-wm_3-wmp_4-s_937265781.png" style="float:none;" title="Image2017-06-19-16-42-001.png" alt="wKioL1lHsW-iDnh_AABdu_lOvxE185.png-wh_50" />
650) this.width=650;" src="https://s5.51cto.com/wyfs02/M00/99/61/wKiom1lHsXSQucDaAAC7IoZDneo662.png-wh_500x0-wm_3-wmp_4-s_1688015742.png" style="float:none;" title="Image2017-06-19-16-42-002.png" alt="wKiom1lHsXSQucDaAAC7IoZDneo662.png-wh_50" />
5.通過$http擷取資料
$http.post(esUrl, setData($scope.name), {params:{api:"_search"}}).then(function(resp) { var ret = resp.data.data.aggregations.top_tags.buckets; console.log(ret); $scope.labels = []; $scope.series = [$scope.name]; $scope.data = []; for (var i=0;i<ret.length;i++){ $scope.labels.push(ret[i]["key"]); $scope.data.push(ret[i]["doc_count"]); } },function(resp) { // console.log(resp.config); })
6.模板內容如下
<ion-view view-title="Detail for {{name}}"> <ion-content> <ion-list > <ion-item> <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels"> chart-series="series" </canvas> </ion-item> <ion-item ng-repeat="label in labels"> <h2>{{label}}</h2> <p>{{data[$index]}}</p> </ion-item> </ion-list> </ion-content></ion-view>
6.繪圖
650) this.width=650;" src="https://s2.51cto.com/wyfs02/M00/99/61/wKiom1lHscbSYjA1AAA8JhhMyTY753.png-wh_500x0-wm_3-wmp_4-s_4093725976.png" title="Image2017-06-19-18-18-001.png" alt="wKiom1lHscbSYjA1AAA8JhhMyTY753.png-wh_50" />
(六)
自問自答
Q:為毛不用最新的ionic
A:暫時沒有看typescript的看法
Q:能畫其他圖嗎？
A:參考http://jtblin.github.io/angular-chart.js/
Q:為毛沒有擷取一下zabbix的資料
A:沒環境，不想搭
不足
有一些重複的代碼
不夠足夠好看
沒有將url的控制權交給APP
本文出自 “又耳筆記” 部落格，請務必保留此出處http://youerning.blog.51cto.com/10513771/1939987
從無到有寫一個營運APP(三)完結篇
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
