vuejs、eggjs、mqtt全棧式開發簡單裝置管理系統
業餘時間用eggjs、vuejs開發了一個裝置管理系統,通過mqtt協議上傳裝置資料至web端實時展現,包含裝置引數分析、傳送裝置報警等模組。收穫還是挺多的,特別是vue的學習,這裡簡單記錄一下:
原始碼地址:https://github.com/caiya/vuejs-admin,寫文不易,有幫助的話麻煩給個star,感謝!
技術棧
前端:vue、vuex、vue-router、element-ui、axios、mqttjs
後端:eggjs、mysql、sequlize、restful、oauth2.0、mqtt、jwt
- 使用者模組(使用者管理,使用者增刪改查)
- 裝置模組(裝置管理、裝置引數監控、裝置引數記錄、裝置類別管理、引數管理等)
- 授權模組(引入OAuth2.0授權服務,方便將介面以OAuth提供第三方)
- 訊息模組(使用者申請幫助訊息、裝置引數告警訊息等)
效果圖(對一個後端css永遠是內傷)
登入頁:
主頁:
裝置頁:
裝置引數監控頁:
前臺
專案結構
前端使用vue-cli腳手架構建,基本目錄結構如下:
main.js入口
vue專案的入口檔案,這裡主要是引入iconfont、element-ui、echarts、moment、vuex等模組。
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import { axios } from './http/base'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/fonts/iconfont.css'
import ECharts from 'vue-echarts/components/ECharts'
// import ECharts modules manually to reduce bundle size
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
// register component to use
Vue.component('chart', ECharts)
import store from './store'
import moment from 'moment'
Vue.prototype.$moment = moment
Vue.use(ElementUI)
// 引入mqtt
import './mq'
Vue.config.productionTip = false
// 掛載到prototype上面,確保元件中可以直接使用this.axios
// Vue.prototype.axios = axios
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
注意:
1、引入比較大的模組比如echarts時,儘量手動按需進行模組匯入,節省打包檔案大小
2、一般通過將模組比如moment掛載到Vue的prototype上面,這樣就可以在任意vue元件中使用*this.$moment*進行moment操作了
3、iconfont是阿里的圖示樣式,下載下來後放入assets中再引入即可
vuex引入
vuex引入的時候採用了模組話引入,入口檔案程式碼為:
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import devArgsMsg from './modules/devArgsMsg'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
user,
devArgsMsg
}
})
其中user、devArgsMsg為兩個獨立模組,這樣分模組引入可以避免專案過大結構不清晰的問題。其中user.js模組程式碼:
import * as TYPES from '../mutation.types'
const state = {
userInfo: JSON.parse(localStorage.getItem('userInfo') || '{}'),
token: localStorage.getItem('token') || ''
}
const actions = {
}
const mutations = {
[TYPES.LOGIN]: (state, loginData) => {
state.userInfo = loginData.user
state.token = loginData.token
localStorage.setItem('userInfo', JSON.stringify(loginData.user))
localStorage.setItem('token', loginData.token)
},
[TYPES.LOGOUT]: state => {
state.userInfo = {}
state.token = ''
localStorage.removeItem('userInfo')
localStorage.removeItem('token')
}
}
const getters = {
}
export default {
state,
actions,
mutations,
getters
}
關於mutations.type.js:
// 各種mutation型別
// 使用者模組
export const LOGOUT = 'LOGOUT'
export const LOGIN = 'LOGIN'
// 裝置模組
export const SETDEVARGSMSG = 'setDevArgsMsg'
注意:
1、mutations的名稱定義時遵循官方,一般定義為常量
2、state的資料只有通過mutation才能操作,不能直接在元件中設定state,否則無效
3、mutation中的操作都是同步操作,非同步操作或網路請求或同時多個mutation操作可以放入action中進行
4、使用者資訊、登入token一般放入h5的localStorage,這樣重新整理頁面保證關鍵資料不丟失
5、vuex中的getters相當於state的計算屬性,監聽state資料變動時可以使用getters
vue-router路由模組
路由模組基本使用:
import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Login',
component: resolve => require(['@/views/auth/Login'], resolve)
},
{
path: '', // 預設地址為登入頁
name: '',
component: resolve => require(['@/views/auth/Login'], resolve)
},
{
path: '/main',
name: '',
component: resolve => require(['@/views/Main'], resolve),
meta: {
requireAuth: true, // 新增該欄位,表示進入這個路由是需要登入的
nav: '歡迎頁'
},
children: [{
path: 'user',
component: resolve => require(['@/views/user/List'], resolve),
name: 'UserList',
meta: {
requireAuth: true,
nav: '使用者管理',
activeItem: '1-1'
},
}, {
path: 'user/setting/:userId?',
name: 'UserSetting',
component: resolve => require(['@/views/user/Setting'], resolve),
meta: {
requireAuth: true,
nav: '資料設定',
activeItem: '1-2'
},
}, {
path: 'device',
component: resolve => require(['@/views/device/List'], resolve),
name: 'Device',
meta: {
requireAuth: true,
nav: '裝置列表',
activeItem: '3-1'
},
},{
path: 'device/edit/:devId?',
component: resolve => require(['@/views/device/Edit'], resolve),
name: 'DeviceEdit',
meta: {
requireAuth: true,
nav: '裝置編輯',
activeItem: '3-1'
},
},{
path: 'device/type',
component: resolve => require(['@/views/devType/List'], resolve),
name: 'DevTypeList',
meta: {
requireAuth: true,
nav: '裝置類別',
activeItem: '3-2'
},
}, {
path: 'device/arg',
component: resolve => require(['@/views/devArg/List'], resolve),
name: 'DevArgList',
meta: {
requireAuth: true,
nav: '裝置引數',
activeItem: '3-3'
},
},{
path: 'device/monitor',
component: resolve => require(['@/views/device/Monitor'], resolve),
name: 'DevMonitor',
meta: {
requireAuth: true,
nav: '裝置監控',
activeItem: '3-4'
},
}, {
path: '', // 後臺首頁預設頁
component: resolve => require(['@/views/common/Welcome'], resolve),
name: 'Welcome',
meta: {
requireAuth: true,
nav: '歡迎頁'
},
}]
}
]
})
其中,每個路由的meta後設資料中加入requireAuth欄位,以便識別該路由是否需要授權,再在router.beforeEach的鉤子函式中作相應判斷:
router.beforeEach((to, from, next) => {
if (to.path === '/' && store.state.user.token) {
return next('/main')
}
if (to.meta.requireAuth) { // 如果需要攔截
if (store.state.user.token) {
next()
} else {
next({
path: '/',
query: {
redirect: to.fullPath
}
})
}
} else {
next()
}
})
export default router
其中store.state.user.token為使用者登入成功後寫入vuex中的token資料,這裡用來判斷是否已登入,已登入過的再次訪問首頁(登入頁)則直接跳轉至後臺主頁,否則重定向至登入頁。
axios傳送http請求
axios是vue官方推薦的xmlhttprequest類庫,使用起來比較方便:
/*
* @Author: cnblogs.com/vipzhou
* @Date: 2018-02-22 21:29:32
* @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2018-02-22 21:48:40
*/
import axios from 'axios'
import router from '../router'
import store from '../store'
// axios 配置
axios.defaults.timeout = 10000
axios.defaults.baseURL = '/api/v1'
// 請求攔截器
axios.interceptors.request.use(config => {
if (store.state.user.token) { // TODO 判斷token是否存在
config.headers.Authorization = `Bearer ${store.state.user.token}`
}
return config
}, err => {
return Promise.reject(err)
})
axios.interceptors.response.use(response => {
return response
}, err => {
if (err.response) {
switch (err.response.status) {
case 401:
store.commit('LOGOUT')
router.replace({ path: '/', query: { redirect: router.currentRoute.fullPath } })
break
case 403:
store.commit('LOGOUT')
router.replace({ path: '/', query: { redirect: router.currentRoute.fullPath } })
break
}
}
return Promise.reject(new Error(err.response.data.error || err.message))
})
/**
* @param {string} url
* @param {object} params={}
*/
const fetch = (url, params = {}) => {
return new Promise((resolve, reject) => {
axios.get(url, {
params
}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
/**
* @param {string} url
* @param {object} data={}
*/
const post = (url, data = {}) => {
return new Promise((resolve, reject) => {
axios.post(url, data).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
/**
* @param {string} url
* @param {object} data={}
*/
const put = (url, data = {}) => {
return new Promise((resolve, reject) => {
axios.put(url, data).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
/**
* @param {string} url
* @param {object} params={}
*/
const del = (url) => {
return new Promise((resolve, reject) => {
axios.delete(url, {}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
export { axios, fetch, post, put, del }
封裝完基本http請求之後,其餘模組在改基礎上封裝即可,比如使用者user.js的http:
/*
* @Author: cnblogs.com/vipzhou
* @Date: 2018-02-22 21:30:19
* @Last Modified by: vipzhou
* @Last Modified time: 2018-02-24 00:12:00
*/
import * as http from './base'
/**
* 登陸
* @param {object} data
*/
const login = (data) => {
return http.post('/users/login', data)
}
/**
* 獲取使用者列表
* @param {object} params
*/
const getUserList = params => {
return http.fetch('/users', params)
}
/**
* 刪除使用者
* @param {object} params
*/
const deleteUserById = id => {
return http.del(`/users/${id}`)
}
/**
* 獲取使用者詳情
* @param {id} id
*/
const getUserDetail = id => {
return http.fetch(`/users/${id}`, {})
}
/**
* 儲存使用者資訊
* @param {object} user
*/
const updateUserInfo = user => {
if (!user.id) {
return Promise.reject(new Error(`arg id can't be null`))
}
return http.put(`/users/${user.id}`, user)
}
/**
* 新增使用者
* @param {user物件} user
*/
const addUser = user => {
return http.post('/users', Object.assign({
password: '123456'
}, user))
}
/**
* 退出登陸
* @param {email} email
*/
const logout = email => {
return http.post('/users/logout', {
email
})
}
export { login, getUserList, deleteUserById, getUserDetail, updateUserInfo, addUser, logout }
注意:
1、通過baseURL配置項可以配置介面的基礎path
2、通過request的interceptors,可以實現任意請求前先判斷本地有無token,有的話寫入header或query等地方,從而實現token傳送
3、通過response的interceptors可以對響應資料做進一步處理,比如401或403跳轉至登入頁、報錯時直接reject返回err資訊等
4、基本的rest請求方式程式碼封裝基本一致,只是method不同而已
關於mqtt模組
mqtt是一種傳輸協議,轉為IOT物聯網模組而生,特點是長連線、輕量級等,nodejs使用mqtt模組作為客戶端,每個mqtt都有一個server端(mqtt broker),這裡使用公共broker:ws://mq.tongxinmao.com:18832/web。
mqtt採用簡單的釋出訂閱模式,訊息釋出者(一般是裝置端)釋出裝置相關訊息至某個topic(topic支援表示式寫法),消費者(一般是各個應用程式)接收訊息並持久化處理等。
import mqtt from "mqtt"
import Vue from "vue"
import store from '../store'
import { Notification } from 'element-ui'
let client = null
// 開啟訂閱(登入成功後呼叫)
export const startSub = () => {
client = mqtt.connect("ws://mq.tongxinmao.com:18832/web")
client.on("connect", () => {
client.subscribe("msgNotice") // 訂閱訊息類通知主題
client.subscribe("/devices/#") // 訂閱所有裝置相關主題
console.log("連結mqtt成功,並已訂閱相關主題")
}).on('error', err => {
console.log("連結mqtt報錯", err)
client.end()
client.reconnect()
}).on("message", (topic, message) => {
console.log('topic', topic);
// message is Buffer
if (topic + '' === 'msgNotice') { // 訊息類通知主題
Notification({
title: '通知',
type: "success",
message: JSON.parse(message.toString()).msg
})
} else { // 裝置相關主題,這裡將各個模組訊息寫入各個模組的vuex state中,然後各個模組再getter取值
const devId = topic.substring(9);
const arg = {
devId,
msg: message.toString()
}
console.log('收到裝置上傳訊息:', arg);
store.commit('setDevArgsMsg', arg);
}
})
Vue.prototype.$mqtt = client // 方便在vue元件中可以直接使用this.$mqtt -> client
}
// 關閉訂閱(退出登入時呼叫)
export const closeSub = () => {
client && client.end()
}
注意:
1、前臺應用作為一個mqtt客戶端,後臺也作為一個客戶端,所有的實時裝置訊息前後端都能接收到,前端負責展現層、後端負責持久層
2、前後端只需監聽/devices/#主題即可,所有的裝置訊息都傳送到/devices/裝置id,這樣前後端獲取topic名稱即可判斷當前訊息來源於哪個裝置
3、mqtt連結error時採用client.reconnect()進行重連操作
4、mqtt還負責使用者登入、退出之類的訊息推送,收到訊息直接呼叫element-ui中的Notification提示即可
5、裝置引數實時訊息mqtt接收到後存入vuex的state中,各個元件再使用getters監聽取值再實時圖表展示
關於mqtt實時推送
裝置端傳送的實時引數訊息傳送至主題/devices/裝置id,訊息格式為:引數名1:引數實時值1|引數名2:引數實時值2|引數名3:引數實時值3...
瀏覽器端mqtt收到的實時訊息通過store.commit('setDevArgsMsg', arg);放入vuex中,其中arg格式為:
{
devId, // 當前裝置id
msg: message.toString() // 報警訊息
}
vuex中的寫法為:
const mutations = {
[TYPES.SETDEVARGSMSG]: (state, {msg = '', devId = ''}) => {
const time = moment().format('YYYY/MM/DD HH:mm:ss')
const argValues = msg.split('|')
argValues.forEach(item => {
state.msgs.push({
name: time,
value: [time, item.split(':')[1], item.split(':')[0], devId],
})
})
}
}
const getters = {
doneMsg: state => {
return state.msgs
}
}
拿到實時訊息遍歷取出存入state中,這裡宣告doneMsg這個getters,方便在監控頁面直接監聽,監控頁面寫法:
前端遇到的問題
主頁左側選單欄頁面重新整理時高亮丟失
解決辦法是:在每個router的meta中定義activeItem欄位,表示當前路由對應高亮的左側選單:
麵包屑導航動態改變
解決辦法是:監聽$route路由物件,重新設定導航內容:
後端
後端介面使用restful風格,提供OAuth2授權,基於eggjs、mysql開發:
Eggjs中使用koa2中介軟體
其實只需要在config.default.js中設定中介軟體:
// add your config here
config.middleware = ['errorHandler', 'auth'];
然後再在app/middleware目錄下建立一個同名檔案,比如:err_handler.js,然後寫入中介軟體內容即可。
使用koa2中介軟體,直接引入:
module.exports = require('koa-jwt')
使用自定義中介軟體,寫法如下:
module.exports = () => {
return (ctx, next) => {
return next().catch (err => {
console.log('err: ', err)
// 所有的異常都在 app 上觸發一個 error 事件,框架會記錄一條錯誤日誌
ctx.app.emit('error', err, ctx);
const status = err.status || 500;
// 生產環境時 500 錯誤的詳細錯誤內容不返回給客戶端,因為可能包含敏感資訊
const error = status === 500 && ctx.app.config.env === 'prod'
? 'Internal Server Error'
: err.message;
// 從 error 物件上讀出各個屬性,設定到響應中
ctx.body = { error };
if (status === 422) {
ctx.body.error_description = err.errors;
}
ctx.status = status;
})
}
};
關於路由
專案路由不算複雜,rest風格路由定義也比較簡單:
'use strict';
/**
* @param {Egg.Application} app - egg application
*/
module.exports = app => {
const { router, controller } = app;
// OAuth controller
app.get('/oauth2', controller.oauth.authorize);
app.all('/oauth2/token', app.oAuth2Server.token(), 'oauth.token'); // 獲取token
app.all('/oauth2/authorize', app.oAuth2Server.authorize()); // 獲取授權碼
app.all('/oauth2/authenticate', app.oAuth2Server.authenticate(), 'oauth.authenticate'); // 驗證請求
// rest介面
router.post('/api/v1/users/login', controller.v1.users.login);
router.post('/api/v1/users/logout', controller.v1.users.logout);
router.post('/api/v1/tools/upload', controller.v1.tools.upload);
router.resources('users', '/api/v1/users', controller.v1.users);
...其它介面省略
};
Jwt驗證
前後端介面統一採用jwt驗證,使用者登入成功時呼叫jwt sign服務生成token返回:
const ctx = this.ctx
ctx.validate(users_rules.loginRule)
const {email, password} = ctx.request.body
const user = await ctx.model.User.getUserByArgs({email}, '')
if (!user) {
ctx.throw(404, 'email not found')
}
if (!(ctx.service.user.compareSync(password, user.hashedPassword))) {
ctx.throw(404, 'password wrong')
}
delete user.dataValues.hashedPassword
// 傳送登入通知
msgNoticePub({msg: `使用者${user.email}在${moment().format('YYYYMMDD hh:mm:ss')}登入系統,點選檢視使用者資訊`, type: 'login'})
ctx.body = {
user,
token: await ctx.service.auth.sign(user) // 生成jwt token
}
這裡的auth.sign的service寫法如下:
const Service = require('egg').Service;
const jwt = require('jsonwebtoken')
class AuthService extends Service {
sign(user) {
let userToken = {
id: user.id
}
const token = jwt.sign(userToken, this.app.config.auth.secret, {expiresIn: '7d'})
return token
}
}
module.exports = AuthService;
Postal.js釋出訂閱
使用postal.js釋出訂閱,確保程式碼模組清晰,postal的釋出訂閱模式簡單如下:
postal.publish({ // 動態讓客戶端訂閲
channel: "msg",
topic: "item.notice",
data: {...data} // 傳送的訊息 {msg: "xxx裝置掉線了...."}
})
// 動態給前端推送訊息
postal.subscribe({
channel: "msg",
topic: "item.notice",
callback: function (data, envelope) {
client.publish('msgNotice', JSON.stringify(data)) // 向前端釋出訊息
console.log('向前端推送訊息成功:', JSON.stringify(data))
}
})
Model模型定義
eggjs下定義資料庫資料模型比較簡單,在app/model目錄下新建任意檔案,如下是定義一個role模型:
'use strict'
module.exports = app => {
const { STRING, INTEGER, DATE, TEXT } = app.Sequelize;
const Role = app.model.define('role', {
role: {type: STRING, allowNull: false, unique: true}, // 角色名英文
roleName: {type: STRING, allowNull: false, unique: true}, // 角色名稱(中文)
pid: TEXT, // 許可權id集合
permission: TEXT // 許可權url集合
}, {
createdAt: 'createdAt',
updatedAt: 'updatedAt',
freezeTableName: true
});
return Role;
};
關於部署
eggjs還是比較nice的一個框架,部署時可以擺脫pm2,egg-cluster也比較穩定,適合直接線上部署,直接上線後:
npm start // 啟動應用
npm stop // 停止應用
nginx部署前端也比較簡單就不說明了,簡單記錄就這麼多,有機會再分享。