vue+rabbitmq
最近實驗室一同學(xué)搭建了rabbitmq的消息隊列甲葬，想讓我?guī)退貥?gòu)一下rabbitmq的web管理界面庭呜，并進行遠程訪問。這是前端就可以完成的工作钢颂，完全不涉及后端程序钞它，正好前段時間學(xué)習(xí)了vue，就打算趁這個機會用一下殊鞭。
因為rabbitmq有很好的RabbitMQ Management HTTP API,可以通過提供的API就可以直接獲取json格式的數(shù)據(jù)遭垛。
例：通過http://localhost:55672api/vhosts 獲取vhosts的數(shù)據(jù)
所以，有了完備的API支持操灿，我們就可以開始了锯仪！
項目架構(gòu)
├── LICENSE
├── README.md
├── build // vue-cli 生成，用于webpack監(jiān)聽牲尺、構(gòu)建
│ ├── 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 // 靜態(tài)資源
├── index.html // vue-cli生成卵酪，用于容納Vue組件的主html文件。單頁應(yīng)用就只有一個html
├── package.json // npm的依賴谤碳、項目信息文件
└──src // vue-cli 生成&自己添加的utils工具類
├── App.vue // 主文件
├── assets // 相關(guān)靜態(tài)資源存放
├── components // 單文件組件
└── main.js // 引入Vue等資源、掛載Vue的入口js
看起來好像很復(fù)雜溢豆，其實很大一部分文件夾的結(jié)構(gòu)是 vue-cli 這個工具幫我們生成的蜒简。
全局安裝 vue-cli
$ npm install --global vue-cli
創(chuàng)建一個基于 webpack 模板的新項目
$ vue init webpack my-project //配置好相關(guān)設(shè)置
我們的框架就搭好了
需要的依賴
- Vue.js
- Vue-Router
- Axios
- vue-Axios
- vue-resourse
- Element ui
剩下依賴可以參考本文最后給出的項目demo倉庫。
項目開始
關(guān)于Nodejs與npm的安裝不再敘述漩仙，大家盡量安裝最新版本的
整個管理系統(tǒng)有很多頁面搓茬，既然用vue犹赖，那么我們就講系統(tǒng)分成組件來弄，現(xiàn)在以其中一個小組件為例卷仑。
這是Channels頁面的數(shù)據(jù)顯示表格
先把頁面畫了
前端使用的element ui峻村，這是基于vue2.0的桌面端組件庫，自動匹配vue的結(jié)構(gòu)锡凝，少些很多代碼粘昨。
<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="節(jié)點" width="200"></el-table-column> </el-table-column>
<el-table-column label="詳細(xì)" 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="預(yù)讀取" width="100"></el-table-column> <el-table-column prop="messages_unacknowledged" label="未應(yīng)答" width="100"></el-table-column>
<el-table-column prop="messages_unconfirmed" label="未確認(rèn)" width="150"></el-table-column> <el-table-column prop="state" label="狀態(tài)" width="100"></el-table-column> </el-table-column>
<el-table-column label="信息比率"> <el-table-column prop="publish" label="發(fā)布" width="100"></el-table-column> <el-table-column prop="confirm" label="確認(rèn)" 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="應(yīng)答" 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>
這是表格的結(jié)果
獲取數(shù)據(jù)
這里我們安裝的是axios以及vue-axios，之所以不用vue-resourse窜锯，有兩個原因：1张肾、vue更新到2.0之后，vue-resourse已經(jīng)不是最受寵的了锚扎，首要推薦的成了axios吞瞪；2、作為一個專一的人驾孔，怎么能因為別人不推薦芍秆，就不用了呢，結(jié)果試過之后翠勉，很不給力呀妖啥，總是報錯，恕我水平淺眉菱，總是弄不明白怎么回事迹栓。所以換了axios，完全沒有問題俭缓。
安裝完之后克伊，在main.js中引用
import axios from 'axios'
import VueAxios from 'vue-axios'
全局使用 Vue.use(VueAxios, axios)
我們現(xiàn)在來獲取數(shù)據(jù)，因為vue2.0已經(jīng)不支持ready()函數(shù)了华坦，用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 }) }） }
我們將返回的數(shù)據(jù)傳入之前定義好的channelsdata中愿吹，但是我們運行之后出現(xiàn)了404錯誤，無法連接惜姐。
這就涉及了另一個問題犁跪，就是JavaScript無法跨域請求的問題，這個問題有很多解決辦法歹袁，現(xiàn)在我們選擇設(shè)置代理的方法解決坷衍。在config文件夾中有一個index.js文件，在里面找到proxyTable參數(shù)条舔，設(shè)置如下：
proxyTable: { '/api': { target: 'http://localhost:15672', changeOrigin: true, pathRewrite: { '^/api': '/api' } }
上面的意思是枫耳，我們在組件里請求的地址如果是/api/xxxx實際上請求的是http://localhost:15672/api/xxxx， 但是由于webpack幫我們代理了localhost的15672端口的服務(wù)孟抗，所以我們可以把實際是跨域的請求當(dāng)做是同域下的接口來調(diào)用迁杨。
然后將URL地址改為api/channels钻心，運行，出錯铅协。很無奈啊~~
那是因為rabbitmq的訪問是需要用戶名和密碼的捷沸，這個怎么辦呢，還是那就話狐史，承認(rèn)自己比較LOW痒给，我選擇了最沒有技術(shù)含量的方法，直接訪問http://用戶名：密碼@localhost:15672/api/channels预皇， 所以侈玄，將target：換為http://用戶名：密碼@localhost:15672 就可以了，當(dāng)然吟温，誰有更好的方法序仙，還請賜教，在此謝過鲁豪！
實時刷新
我們需要獲得實時數(shù)據(jù)潘悼，本人找了很久都沒在axios中找到可以自己實時刷新請求的參數(shù)，無奈之下爬橡，就寫了一個定時器治唤。然后，就掉進了另一個坑糙申。
我是這么寫的：
methods: { channelsRefresh() { this.axios.get('/api/channels') .then((response) => { this.channelsdata = response.data }) setTimeout(this.channelsrefresh(), 10000) }, }
寫了一個channelsRefresh()函數(shù)宾添，然后觸發(fā)這個函數(shù)，每隔10秒鐘刷新一次柜裸，運行缕陕，崩潰。我的精神隨著瀏覽器一起崩潰了疙挺，我所設(shè)定的10秒鐘根本沒起作用扛邑，因為現(xiàn)在還是1毫秒執(zhí)行了一次，我的瀏覽器一秒鐘請求1000次铐然，也太難為它了蔬崩。
本人水平LOW，但也有LOW的方法搀暑，直接上代碼：
第一：寫一個按鈕觸發(fā)channelsRefresh()函數(shù)沥阳，然后設(shè)為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秒埠啃，點一次死宣，完成。
數(shù)據(jù)分發(fā)
我們將整個頁面分成了很多小組件碴开，每個組件都需要數(shù)據(jù)毅该，但如果每個組件都自己請求數(shù)據(jù)，那么對于實時監(jiān)控來說潦牛，太消耗資源了眶掌。
這就屬于vue2.0的內(nèi)容了。
prop 是父組件用來傳遞數(shù)據(jù)的一個自定義屬性巴碗。子組件需要顯式地用 props選項聲明 “prop”
vue手冊上講的很清楚朴爬，這里就不多說了。
最后
感覺自己很多問題的解決辦法都不太好橡淆，而且代碼寫的也比較亂召噩，所以很虛心的請大家指教！逸爵！
最后貼幾個圖
