1、 企業(yè)運維APP應(yīng)用開發(fā)實踐馬哥Linux運維 微信號 magedu-Linux功能介紹 嘿！等你好久了。馬哥Linux運維目前有近10萬小伙伴在這里學(xué)習(xí)和成長，我們每天為你呈上Linux運維工程師超愛的Linux學(xué)習(xí)教程、Linux培訓(xùn)視頻，還可以免費拿Linux、Python、大數(shù)據(jù)的前沿實戰(zhàn)干貨，一起來吧！文章目錄：1. 準(zhǔn)備工作2. 代理3. 頁面框架4. 獲取數(shù)據(jù)5. 繪圖6. 自問自答效果圖如下頁面邏輯簡要說明：1. 一共三個 tab，分別為 home，es，zabbix。2. home 頁面有 es，zabbix 的性能指標(biāo)。3. es頁面可以圖形展示搜索的數(shù)據(jù)。4. zabbi

2、x頁面可以圖形展示搜索的數(shù)據(jù)（沒有環(huán)境所以留空）。(一)1. 環(huán)境搭建參考：第一篇/10513771/17354502. es 服務(wù)器因為沒有現(xiàn)成的 es 環(huán)境再者自己搭建還得往里面填數(shù)據(jù)，這太難過了，所以通過 shodan 找一個暴露在公網(wǎng)的 es 服務(wù)器。3. 創(chuàng)建一個 APPionic start myops blank4. sublime 打開該項目(二)1. 搭建代理雖說 app 里面似乎沒有跨域的限制，但是自己在調(diào)試的時候還是可能被這個跨域弄得焦頭爛額的。所以可以通過 flask 簡單的寫一個代理頁面，代碼如下，如你所見，我把這個暴露在公網(wǎng)的 es 服務(wù)器的 IP 寫出來，的確有點

3、不道德（大家不要搞破壞呀數(shù)據(jù)量這么豐富的還是比較難找的呀）。這個頁面的效果如下。（三）1. 頁面框架就如上面的效果圖，我們應(yīng)該需要三個 tab，然后一個 es 性能的模板頁面，一個詳情模板頁面。所以目錄結(jié)構(gòu)大體如下?？偠灾?，我們需要五個模板，所以在 www 目錄下創(chuàng)建了一個 tpls 的目錄用于放置我們的模板文件。完整源代碼，可以訪問我的 GitHub。2. 頁面框架編寫。首先在入口頁撰寫總體布局：創(chuàng)建視圖文件，大致結(jié)構(gòu)如下，home.html,es.html.zabbix.html等編寫路由邏輯。（四）1. 獲取數(shù)據(jù)這里我們通過 angularjs 內(nèi)置的 $http 訪問相應(yīng)的 api，

4、大致如下。本來性能指標(biāo)應(yīng)該是時間序列的監(jiān)控數(shù)據(jù)，但是由于沒有環(huán)境，這里就簡單的列出當(dāng)前指標(biāo)值。perf.html 內(nèi)容如下。（五）1. 繪圖這里繪圖使用 chart.js2. 安裝 chart.js在項目目錄下執(zhí)行下面命令3. 在 index.html 引入 js 文件4. 檢索 es 中我們感興趣的字段通過檢索 mapping 效果如下個人而言，感覺可玩的是 clientip，agent，response我們利用 es 的 api 統(tǒng)計以下上面的字段吧。因為聚合需要 post 方法，所以這里使用 postman。效果如下5. 通過 $http 獲取數(shù)據(jù)6. 模板內(nèi)容如下7. 繪圖（六）自問自答Q：為毛不用最新的 ionicA：暫時沒有看 typescript 的看法Q：能畫其他圖么？A：參考 http:/jtblin.github.io/angular-chart.js/Q：為毛沒