手把手教你三步完成测试监控系统搭建

笔者所在的项目组有多个测试环境，偶尔会出现由于程序错误导致负载飙升或日志打满磁盘的问题。基于早发现、早治疗的原则，我们可以构建一个web应用，从而对服务器的负载及磁盘空间进行监控。在本文中，前端我们使用易于上手的Vue、饿了么开源的Element以及百度的Echarts，后端接口使用基于Python的Flask框架。

No.1

搭建前端框架

 

我们将使用Vue CLI产生基本Vue.js App。如果你还没有安装它，请参考：https://cli.vuejs.org/zh/guide进行安装，然后使用Vue CLI快速创建一个应用，如：$ vue create server-monitor。

在选择了一些配置项并经过漫长等待之后，Vue CLI会建好相应文件夹，打开这个文件夹，并执行**$vue add element、$npm install vue-echarts –save****、$npm install axios –save**以添加element、vue-echarts和axios。

同样，在选择了一些配置项并经过等待之后，可以看到添加成功的提示，下图以element为例：

 

此时，执行**$ npm run serve**会在本地的8080端口启动服务，打开浏览器并输入地址，可以看到这样的一个页面，这表明Vue+Element的环境已经搭建成功了：

 

此时，我们在项目文件夹运行**$ npm run build**可以生成一个包 。

No.2

后端服务

 

接下来，我们开始编写我们的后端服务，在前端项目同级文件夹新建一个文件夹bac