v1.1 版本发布,代码同步后端v1.1版本

config/index.js

@@ -57,7 +57,7 @@ module.exports = {
      * then assetsPublicPath should be set to "/bar/".
      * In most cases please use '/' !!!
      */
-    assetsPublicPath: '/',
+    assetsPublicPath: './',
 
     /**
      * Source Maps

package.json

@@ -33,7 +33,9 @@
     "xlsx": "^0.11.16",
     "jszip": "3.1.5",
     "@riophae/vue-treeselect": "0.0.37",
-    "file-saver": "1.3.8"
+    "file-saver": "1.3.8",
+    "sockjs-client": "1.3.0",
+    "stompjs": "2.3.3"
   },
   "devDependencies": {
     "autoprefixer": "8.5.0",

src/icons/svg/codeConsole.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1545655517713" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2733" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M909.7 132.6v620H114.3v-620h795.4m50-50H64.3v720h895.5v-720h-0.1zM317.9 208.3L150.8 407.4l0.2 0.2 167.1 199.2 38.3-32.1-140.3-167.3 140.2-167-38.4-32.1z m389 0l-38.3 32.1 140.2 167-140.4 167.3 38.3 32.1 167.1-199.2 0.2-0.2-167.1-199.1z m-143.5 1.2l-149 403.4 46.9 17.3 149-403.4-46.9-17.3zM957 855.8H67v50h890v-50z" fill="" p-id="2734"></path></svg>

src/icons/svg/lock.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1545700954682" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3654" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M868.935 1008.63l-713.868 0c-40.657 0-72.291-31.631-72.291-67.773l0-496.994c0-36.144 31.631-67.773 72.291-67.773l713.868 0c40.657 0 72.291 31.631 72.291 67.773l0 496.994c0 36.144-31.631 67.773-72.291 67.773l0 0 0 0 0 0zM512 543.259c-58.732 0-108.432 45.187-108.432 99.402 0 36.144 22.586 67.773 54.218 85.849l0 94.887c0 27.108 22.586 49.696 54.218 49.696s54.218-22.586 54.218-49.696l0-94.887c31.631-18.071 54.218-49.696 54.218-85.849 0-54.218-49.696-99.402-108.432-99.402l0 0 0 0zM512 114.031c-117.471 0-216.867 90.356-216.867 198.797l-108.432 0c0-162.655 144.582-298.202 320.79-298.202s320.79 135.546 320.79 298.202l-108.432 0c9.041-112.951-90.356-198.797-207.836-198.797l0 0 0 0zM512 114.031z" p-id="3655"></path></svg>

src/icons/svg/unlock.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1545700997954" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1381" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M880 512H320V288c0-106.032 85.968-192 192-192s192 85.968 192 192a48 48 0 1 0 96 0c0-159.056-128.944-288-288-288S224 128.944 224 288v224H144a48 48 0 0 0-48 48v416a48 48 0 0 0 48 48h736a48 48 0 0 0 48-48V560a48 48 0 0 0-48-48zM560 786.688V880a48 48 0 1 1-96 0v-93.312c-28.576-16.624-48-47.248-48-82.688a96 96 0 1 1 192 0c0 35.44-19.424 66.064-48 82.688z" fill="" p-id="1382"></path></svg>

src/main.js

@@ -1,7 +1,6 @@
 import Vue from 'vue'
 
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
-
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

src/views/monitor/log/msg.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="container">
+    <div class="handle">
+      <div class="buttons">
+        <button class="closes"/>
+        <button class="minimize"/>
+        <button class="maximize"/>
+      </div>
+      <span class="title">real-time console</span>
+    </div>
+    <div id="console" :style="'height:'+ height" class="console">
+      <div v-for="item in data" :key="item.time">
+        <span>{{ item.name }}</span>
+        <span style="color:#CD0066 ">{{ item.timestamp+' ' }}</span>
+        <span style="color: #00CD00">{{ item.threadName+' ' }}</span>
+        <span :style="'color:'+ getColor(item.level) ">
+          {{ item.level+' ' }}
+        </span>
+        <span style="color: #DE00CC">{{ item.className+' ' }}</span>
+        <span v-html="item.body"/>
+        <span>{{ item.exception }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SockJS from 'sockjs-client'
+import Stomp from 'stompjs'
+import { parseTime } from '@/utils/index'
+export default {
+  name: 'Msg',
+  data() {
+    return {
+      height: document.documentElement.clientHeight - 132 + 'px;',
+      data: [{ name: 'elAdmin-', timestamp: parseTime(new Date()), threadName: 'system-prompt-message', level: 'INFO', className: 'me.zhengjie.AppRun' + ' :', body: '(*^ω^*) 欢迎使用，暂无日志输出~', exception: '' }],
+      // level
+      INFO: '#0000ff', WARN: '#FFFF00', ERROR: '#FF0000', DEBUG: '#DEA000'
+    }
+  },
+  // 监听控制滚动条
+  watch: {
+    data: {
+      handler(val, oldVal) {
+        this.$nextTick(() => {
+          var div = document.getElementById('console')
+          div.scrollTop = div.scrollHeight
+        })
+      }
+    }
+  },
+  mounted: function() {
+    this.initWebSocket()
+  },
+  beforeDestroy: function() {
+    // 页面离开时断开连接,清除定时器
+    this.disconnect()
+    clearInterval(this.timer)
+  },
+  methods: {
+    initWebSocket() {
+      this.connection(this)
+      // 断开重连机制,尝试发送消息,捕获异常发生时重连
+      this.timer = setInterval(() => {
+        try {
+          this.stompClient.send('test')
+        } catch (err) {
+          console.log('断线了: ' + err)
+          this.connection()
+        }
+      }, 5000)
+    },
+    connection(_this) {
+      // 建立连接对象，注意部署到线上后也要修改对应的地址
+      const socket = new SockJS('http://localhost:8000/websocket?token=kl')// 连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息
+      // 获取STOMP子协议的客户端对象
+      this.stompClient = Stomp.over(socket)
+      // 定义客户端的认证信息,按需求配置
+      var headers = {
+        token: 'k1'
+      }
+      // 向服务器发起websocket连接
+      this.stompClient.connect(headers, (frame) => {
+        this.stompClient.subscribe('/topic/logMsg', (msg) => { // 订阅服务端提供的某个topic
+          var content = JSON.parse(msg.body)
+          content.name = 'elAdmin-'
+          console.log(_this.data)
+          this.data.push(content)
+        })
+      }, (err) => {
+        // 连接发生错误时的处理函数
+        console.log(err)
+      })
+    },
+    // 断开连接
+    disconnect() {
+      if (this.stompClient != null) {
+        this.stompClient.disconnect()
+        clearInterval(this.timer)
+      }
+    },
+    getColor(level) {
+      // INFO: '#0000ff', WARN: '#FFFF00', ERROR: '#FF0000', DEBUG: '#DEA000',
+      if (level === 'INFO') {
+        return this.INFO
+      } else if (level === 'WARN') {
+        return this.WARN
+      } else if (level === 'DEBUG') {
+        return this.DEBUG
+      } else {
+        return this.ERROR
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  textarea,input,button{outline:0}.container .buttons .closes,.container .buttons .minimize,.container .buttons .maximize{padding:0;margin:0;margin-right:6px;width:12px;height:12px;border:1px solid rgba(0,0,0,0);border-radius:6px}.container{width:100%;margin:5px}.container .handle{height:38px;background:#f9f9f9;border:1px solid #eee;border-top-left-radius:3px;border-top-right-radius:3px;font-family:'consolas';font-size:13px;line-height:38px;text-align:center}.container .buttons{position:absolute;float:left;margin:0 8px}.container .buttons .closes{background-color:#fc625d}.container .buttons .minimize{margin-left:8px;background-color:#fdbc40}.container .buttons .maximize{margin-left:8px;background-color:#35cd4b}.container .console{font-family:consolas;overflow-y:scroll;background:#494949;color:#f7f7f7;padding:10px;font-size:14px}
+</style>