企业运维APP应用开发实践

1、 企业运维APP应用开发实践马哥Linux运维 微信号 magedu-Linux功能介绍 嘿！等你好久了。马哥Linux运维目前有近10万小伙伴在这里学习和成长，我们每天为你呈上Linux运维工程师超爱的Linux学习教程、Linux培训视频，还可以免费拿Linux、Python、大数据的前沿实战干货，一起来吧！文章目录：1. 准备工作2. 代理3. 页面框架4. 获取数据5. 绘图6. 自问自答效果图如下页面逻辑简要说明：1. 一共三个 tab，分别为 home，es，zabbix。2. home 页面有 es，zabbix 的性能指标。3. es页面可以图形展示搜索的数据。4. zabbi

2、x页面可以图形展示搜索的数据（没有环境所以留空）。(一)1. 环境搭建参考：第一篇/10513771/17354502. es 服务器因为没有现成的 es 环境再者自己搭建还得往里面填数据，这太难过了，所以通过 shodan 找一个暴露在公网的 es 服务器。3. 创建一个 APPionic start myops blank4. sublime 打开该项目(二)1. 搭建代理虽说 app 里面似乎没有跨域的限制，但是自己在调试的时候还是可能被这个跨域弄得焦头烂额的。所以可以通过 flask 简单的写一个代理页面，代码如下，如你所见，我把这个暴露在公网的 es 服务器的 IP 写出来，的确有点

3、不道德（大家不要搞破坏呀数据量这么丰富的还是比较难找的呀）。这个页面的效果如下。（三）1. 页面框架就如上面的效果图，我们应该需要三个 tab，然后一个 es 性能的模板页面，一个详情模板页面。所以目录结构大体如下。总而言之，我们需要五个模板，所以在 www 目录下创建了一个 tpls 的目录用于放置我们的模板文件。完整源代码，可以访问我的 GitHub。2. 页面框架编写。首先在入口页撰写总体布局：创建视图文件，大致结构如下，home.html,es.html.zabbix.html等编写路由逻辑。（四）1. 获取数据这里我们通过 angularjs 内置的 $http 访问相应的 api，

4、大致如下。本来性能指标应该是时间序列的监控数据，但是由于没有环境，这里就简单的列出当前指标值。perf.html 内容如下。（五）1. 绘图这里绘图使用 chart.js2. 安装 chart.js在项目目录下执行下面命令3. 在 index.html 引入 js 文件4. 检索 es 中我们感兴趣的字段通过检索 mapping 效果如下个人而言，感觉可玩的是 clientip，agent，response我们利用 es 的 api 统计以下上面的字段吧。因为聚合需要 post 方法，所以这里使用 postman。效果如下5. 通过 $http 获取数据6. 模板内容如下7. 绘图（六）自问自答Q：为毛不用最新的 ionicA：暂时没有看 typescript 的看法Q：能画其他图么？A：参考 http:/jtblin.github.io/angular-chart.js/Q：为毛没