1

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@stomp/stompjs": "^5.4.4",
     "@tinymce/tinymce-vue": "^3.2.2",
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
@@ -17,6 +18,7 @@
     "lodash": "^4.17.15",
     "moment": "^2.27.0",
     "naf-core": "^0.1.2",
+    "stomp": "^0.1.1",
     "tinymce": "^5.4.0",
     "vue": "^2.6.11",
     "vue-meta": "^2.4.0",

src/main.js

@@ -11,12 +11,14 @@ import '@/plugins/loading';
 import '@/plugins/var';
 import '@/plugins/methods';
 import '@/plugins/setting';
+import InitStomp from '@/plugins/stomp';
 
 new Vue({
   router,
   store,
   render: h => h(App),
 }).$mount('#app');
+InitStomp();
 window.vm = new Vue({
   router,
 });

src/plugins/setting.js

@@ -9,9 +9,9 @@ Vue.config.stomp = {
   // brokerURL: 'ws://192.168.1.190:15674/ws',
   brokerURL: '/ws', // ws://${location.host}/ws
   connectHeaders: {
-    host: 'smart',
-    login: 'web',
-    passcode: 'web123',
+    host: 'visit',
+    login: 'visit',
+    passcode: 'visit',
   },
   // debug: true,
   reconnectDelay: 5000,

src/store/index.js

@@ -13,6 +13,7 @@ import news from './news';
 import demand from './demand';
 import comment from './comment';
 import links from './links';
+import topmessage from './topmessage';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
@@ -31,5 +32,6 @@ export default new Vuex.Store({
     demand,
     comment,
     links,
+    topmessage,
   },
 });

src/store/topmessage.js

@@ -0,0 +1,41 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  topInfo: `/api/count/top`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit = 10, ...info } = {}) {
+    const res = await this.$axios.$get(api.topInfo, { skip, limit, ...info });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.topInfo}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.topInfo}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...info } = {}) {
+    const res = await this.$axios.$post(`${api.topInfo}/update/${id}`, {
+      ...info,
+    });
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.newsInfo}/${payload}`);
+    return res;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/views/service/parts/sign.vue

@@ -35,6 +35,7 @@
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: topmessage } = createNamespacedHelpers('topmessage');
 export default {
   name: 'sign',
   props: {
@@ -50,8 +51,27 @@ export default {
       ],
     };
   },
-  created() {},
-  methods: {},
+  async created() {
+    await this.search();
+  },
+  mounted() {
+    this.channel();
+  },
+  methods: {
+    ...topmessage(['query', 'fetch', 'update', 'create', 'delete']),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      let res = await this.query();
+      console.log(res);
+    },
+    channel() {
+      this.$stomp({
+        [`/exchange/service_count/nodes`]: this.onMessage,
+      });
+    },
+    onMessage(message) {
+      console.log(message);
+    },
+  },
   computed: {
     ...mapState(['user']),
     pageTitle() {