vue+rabbitmq
最近实验室一同学搭建了rabbitmq的消息队列，想让我帮他重构一下rabbitmq的web管理界面，并进行远程访问。这是前端就可以完成的工作，完全不涉及后端程序，正好前段时间学习了vue，就打算趁这个机会用一下。
因为rabbitmq有很好的RabbitMQ Management HTTP API,可以通过提供的API就可以直接获取json格式的数据。
例：通过http://localhost:55672api/vhosts 获取vhosts的数据
所以，有了完备的API支持，我们就可以开始了！
项目架构
├── LICENSE
├── README.md
├── build // vue-cli 生成，用于webpack监听、构建
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config // vue-cli 生成&自己加的一些配置文件
│ ├── default.conf
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── dist // Vue build 后的文件夹
│ ├── index.html // 入口文件
│ └── static // 静态资源
├── index.html // vue-cli生成，用于容纳Vue组件的主html文件。单页应用就只有一个html
├── package.json // npm的依赖、项目信息文件
└──src // vue-cli 生成&自己添加的utils工具类
├── App.vue // 主文件
├── assets // 相关静态资源存放
├── components // 单文件组件
└── main.js // 引入Vue等资源、挂载Vue的入口js
看起来好像很复杂，其实很大一部分文件夹的结构是 vue-cli 这个工具帮我们生成的。
全局安装 vue-cli
$ npm install --global vue-cli
创建一个基于 webpack 模板的新项目
$ vue init webpack my-project //配置好相关设置
我们的框架就搭好了
需要的依赖
- Vue.js
- Vue-Router
- Axios
- vue-Axios
- vue-resourse
- Element ui
剩下依赖可以参考本文最后给出的项目demo仓库。
项目开始
关于Nodejs与npm的安装不再叙述，大家尽量安装最新版本的
整个管理系统有很多页面，既然用vue，那么我们就讲系统分成组件来弄，现在以其中一个小组件为例。
这是Channels页面的数据显示表格
先把页面画了
前端使用的element ui，这是基于vue2.0的桌面端组件库，自动匹配vue的结构，少些很多代码。
<el-row>
<el-col style="width: 90%"> <p id="showing_c">{{channelsdata.length}} 项(最多 100 项)</p> </el-col>
<el-table :data="channelsdata" border style="width: 90%" :row-class-name="tableRowClassName">
<el-table-column label=" " width="400"> <el-table-column prop="name" label="通道" width="200"></el-table-column> <el-table-column prop="node" label="节点" width="200"></el-table-column> </el-table-column>
<el-table-column label="详细" width="700"> <el-table-column prop="user" label="用户名" width="150"></el-table-column> <el-table-column prop="mode" label="模式" width="100"></el-table-column> <el-table-column prop="prefetch_count" label="预读取" width="100"></el-table-column> <el-table-column prop="messages_unacknowledged" label="未应答" width="100"></el-table-column>
<el-table-column prop="messages_unconfirmed" label="未确认" width="150"></el-table-column> <el-table-column prop="state" label="状态" width="100"></el-table-column> </el-table-column>
<el-table-column label="信息比率"> <el-table-column prop="publish" label="发布" width="100"></el-table-column> <el-table-column prop="confirm" label="确认" width="100"></el-table-column> <el-table-column prop="message_stats.deliver_get_details.rate" label="投递/获取"></el-table-column> <el-table-column prop="message_stats.deliver_no_ack" label="应答" width="100"></el-table-column> </el-table-column>
</el-table> <button type="button" name="button" id="tableid" @click="channelsrefresh()" style="display:none"></button>
<el-row>
这是表格的结果
获取数据
这里我们安装的是axios以及vue-axios，之所以不用vue-resourse，有两个原因：1、vue更新到2.0之后，vue-resourse已经不是最受宠的了，首要推荐的成了axios；2、作为一个专一的人，怎么能因为别人不推荐，就不用了呢，结果试过之后，很不给力呀，总是报错，恕我水平浅，总是弄不明白怎么回事。所以换了axios，完全没有问题。
安装完之后，在main.js中引用
import axios from 'axios'
import VueAxios from 'vue-axios'
全局使用 Vue.use(VueAxios, axios)
我们现在来获取数据，因为vue2.0已经不支持ready()函数了，用mounted代替
获取channels的api是http://localhost：15672/api/channels
mounted: function() { this.$nextTick(function() { this.axios.get('http://localhost：15672/api/channels') .then((response) => { this.channelsdata = response.data }) }） }
我们将返回的数据传入之前定义好的channelsdata中，但是我们运行之后出现了404错误，无法连接。
这就涉及了另一个问题，就是JavaScript无法跨域请求的问题，这个问题有很多解决办法，现在我们选择设置代理的方法解决。在config文件夹中有一个index.js文件，在里面找到proxyTable参数，设置如下：
proxyTable: { '/api': { target: 'http://localhost:15672', changeOrigin: true, pathRewrite: { '^/api': '/api' } }
上面的意思是，我们在组件里请求的地址如果是/api/xxxx实际上请求的是http://localhost:15672/api/xxxx， 但是由于webpack帮我们代理了localhost的15672端口的服务，所以我们可以把实际是跨域的请求当做是同域下的接口来调用。
然后将URL地址改为api/channels，运行，出错。很无奈啊~~
那是因为rabbitmq的访问是需要用户名和密码的，这个怎么办呢，还是那就话，承认自己比较LOW，我选择了最没有技术含量的方法，直接访问http://用户名：密码@localhost:15672/api/channels， 所以，将target：换为http://用户名：密码@localhost:15672 就可以了，当然，谁有更好的方法，还请赐教，在此谢过！
实时刷新
我们需要获得实时数据，本人找了很久都没在axios中找到可以自己实时刷新请求的参数，无奈之下，就写了一个定时器。然后，就掉进了另一个坑。
我是这么写的：
methods: { channelsRefresh() { this.axios.get('/api/channels') .then((response) => { this.channelsdata = response.data }) setTimeout(this.channelsrefresh(), 10000) }, }
写了一个channelsRefresh()函数，然后触发这个函数，每隔10秒钟刷新一次，运行，崩溃。我的精神随着浏览器一起崩溃了，我所设定的10秒钟根本没起作用，因为现在还是1毫秒执行了一次，我的浏览器一秒钟请求1000次，也太难为它了。
本人水平LOW，但也有LOW的方法，直接上代码：
第一：写一个按钮触发channelsRefresh()函数，然后设为display:none我们就在页面上看不到它了；
<button type="button" name="button" id="tableid" @click="channelsrefresh()" style="display:none"></button>
第二：讲上面channelsRefresh()中的定时器去掉，我们可不想浏览器崩掉；
第三：我们不断地点按钮就可以了，很方便吧，写条代码来做这件事。
setInterval(function() { document.getElementById("tableid").click(); }, 5000)
放到mounted中，每隔5秒，点一次，完成。
数据分发
我们将整个页面分成了很多小组件，每个组件都需要数据，但如果每个组件都自己请求数据，那么对于实时监控来说，太消耗资源了。
这就属于vue2.0的内容了。
prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props选项声明 “prop”
vue手册上讲的很清楚，这里就不多说了。
最后
感觉自己很多问题的解决办法都不太好，而且代码写的也比较乱，所以很虚心的请大家指教！！
最后贴几个图
