vue+rabbitmq
最近實驗室一同學(xué)搭建了rabbitmq的消息隊列，想讓我?guī)退貥?gòu)一下rabbitmq的web管理界面，并進(jìn)行遠(yuǎn)程訪問。這是前端就可以完成的工作，完全不涉及后端程序，正好前段時間學(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ù)，無奈之下，就寫了一個定時器。然后，就掉進(jìn)了另一個坑。
我是這么寫的：
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手冊上講的很清楚，這里就不多說了。
最后
感覺自己很多問題的解決辦法都不太好，而且代碼寫的也比較亂，所以很虛心的請大家指教！！
最后貼幾個圖
