From 0270903d6891a8181a2abbee17a3b9ba47c6648d Mon Sep 17 00:00:00 2001
From: hbrwang <hbrwang@outlook.com>
Date: Mon, 23 Nov 2020 17:24:43 +0800
Subject: [PATCH] refactor requests

---
 web/frps/package.json                    |   3 +-
 web/frps/src/App.vue                     |  10 +-
 web/frps/src/components/Overview.vue     | 121 +++++++++++------------
 web/frps/src/components/ProxiesHttp.vue  |  49 ++++-----
 web/frps/src/components/ProxiesHttps.vue |  50 ++++------
 web/frps/src/components/ProxiesStcp.vue  |  26 ++---
 web/frps/src/components/ProxiesTcp.vue   |  36 +++----
 web/frps/src/components/ProxiesUdp.vue   |  28 ++----
 web/frps/src/components/Traffic.vue      |  31 ++----
 web/frps/src/main.js                     |   8 +-
 web/frps/src/store/index.js              |  24 +++++
 web/frps/src/utils/fetch.js              |  20 ++++
 web/frps/vue.config.js                   |   2 +-
 13 files changed, 200 insertions(+), 208 deletions(-)
 create mode 100644 web/frps/src/store/index.js
 create mode 100644 web/frps/src/utils/fetch.js

diff --git a/web/frps/package.json b/web/frps/package.json
index 6fa17146..b777b71f 100644
--- a/web/frps/package.json
+++ b/web/frps/package.json
@@ -15,7 +15,8 @@
     "core-js": "^3.7.0",
     "vue": "^2.6.12",
     "vue-router": "^3.4.9",
-    "whatwg-fetch": "^3.5.0"
+    "whatwg-fetch": "^3.5.0",
+    "vuex": "^3.5.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.9",
diff --git a/web/frps/src/App.vue b/web/frps/src/App.vue
index 43372ad4..3ebd41f9 100644
--- a/web/frps/src/App.vue
+++ b/web/frps/src/App.vue
@@ -24,7 +24,7 @@
 
         <el-col :xs="24" :md="20">
           <div id="content">
-            <router-view />
+            <router-view v-if="serverInfo" />
           </div>
         </el-col>
       </el-row>
@@ -34,6 +34,14 @@
 
 <script>
 export default {
+  computed: {
+    serverInfo() {
+      return this.$store.state.serverInfo
+    }
+  },
+  async created() {
+    this.$store.dispatch('fetchServerInfo')
+  },
   methods: {
     handleSelect(key, path) {
       if (key === '') {
diff --git a/web/frps/src/components/Overview.vue b/web/frps/src/components/Overview.vue
index 8ea6bc39..fc0cc732 100644
--- a/web/frps/src/components/Overview.vue
+++ b/web/frps/src/components/Overview.vue
@@ -70,74 +70,65 @@ export default {
       proxy_counts: ''
     }
   },
-  watch: {
-    $route: 'fetchData'
+  computed: {
+    serverInfo() {
+      return this.$store.state.serverInfo
+    }
   },
-  created() {
-    this.fetchData()
+  mounted() {
+    this.initData()
   },
   methods: {
-    fetchData() {
-      fetch('/api/serverinfo', { credentials: 'include' })
-        .then(res => {
-          return res.json()
-        })
-        .then(json => {
-          this.version = json.version
-          this.bind_port = json.bind_port
-          this.bind_udp_port = json.bind_udp_port
-          if (this.bind_udp_port === 0) {
-            this.bind_udp_port = 'disable'
-          }
-          this.vhost_http_port = json.vhost_http_port
-          if (this.vhost_http_port === 0) {
-            this.vhost_http_port = 'disable'
-          }
-          this.vhost_https_port = json.vhost_https_port
-          if (this.vhost_https_port === 0) {
-            this.vhost_https_port = 'disable'
-          }
-          this.subdomain_host = json.subdomain_host
-          this.max_pool_count = json.max_pool_count
-          this.max_ports_per_client = json.max_ports_per_client
-          if (this.max_ports_per_client === 0) {
-            this.max_ports_per_client = 'no limit'
-          }
-          this.heart_beat_timeout = json.heart_beat_timeout
-          this.client_counts = json.client_counts
-          this.cur_conns = json.cur_conns
-          this.proxy_counts = 0
-          if (json.proxy_type_count != null) {
-            if (json.proxy_type_count.tcp != null) {
-              this.proxy_counts += json.proxy_type_count.tcp
-            }
-            if (json.proxy_type_count.udp != null) {
-              this.proxy_counts += json.proxy_type_count.udp
-            }
-            if (json.proxy_type_count.http != null) {
-              this.proxy_counts += json.proxy_type_count.http
-            }
-            if (json.proxy_type_count.https != null) {
-              this.proxy_counts += json.proxy_type_count.https
-            }
-            if (json.proxy_type_count.stcp != null) {
-              this.proxy_counts += json.proxy_type_count.stcp
-            }
-            if (json.proxy_type_count.xtcp != null) {
-              this.proxy_counts += json.proxy_type_count.xtcp
-            }
-          }
-          DrawTrafficChart('traffic', json.total_traffic_in, json.total_traffic_out)
-          DrawProxyChart('proxies', json)
-        })
-        .catch(err => {
-          this.$message({
-            showClose: true,
-            message: 'Get server info from frps failed!',
-            type: 'warning'
-          })
-          return err
-        })
+    initData() {
+      console.log(!!this.serverInfo, this.serverInfo)
+      if (!this.serverInfo) return
+
+      this.version = this.serverInfo.version
+      this.bind_port = this.serverInfo.bind_port
+      this.bind_udp_port = this.serverInfo.bind_udp_port
+      if (this.bind_udp_port === 0) {
+        this.bind_udp_port = 'disable'
+      }
+      this.vhost_http_port = this.serverInfo.vhost_http_port
+      if (this.vhost_http_port === 0) {
+        this.vhost_http_port = 'disable'
+      }
+      this.vhost_https_port = this.serverInfo.vhost_https_port
+      if (this.vhost_https_port === 0) {
+        this.vhost_https_port = 'disable'
+      }
+      this.subdomain_host = this.serverInfo.subdomain_host
+      this.max_pool_count = this.serverInfo.max_pool_count
+      this.max_ports_per_client = this.serverInfo.max_ports_per_client
+      if (this.max_ports_per_client === 0) {
+        this.max_ports_per_client = 'no limit'
+      }
+      this.heart_beat_timeout = this.serverInfo.heart_beat_timeout
+      this.client_counts = this.serverInfo.client_counts
+      this.cur_conns = this.serverInfo.cur_conns
+      this.proxy_counts = 0
+      if (this.serverInfo.proxy_type_count != null) {
+        if (this.serverInfo.proxy_type_count.tcp != null) {
+          this.proxy_counts += this.serverInfo.proxy_type_count.tcp
+        }
+        if (this.serverInfo.proxy_type_count.udp != null) {
+          this.proxy_counts += this.serverInfo.proxy_type_count.udp
+        }
+        if (this.serverInfo.proxy_type_count.http != null) {
+          this.proxy_counts += this.serverInfo.proxy_type_count.http
+        }
+        if (this.serverInfo.proxy_type_count.https != null) {
+          this.proxy_counts += this.serverInfo.proxy_type_count.https
+        }
+        if (this.serverInfo.proxy_type_count.stcp != null) {
+          this.proxy_counts += this.serverInfo.proxy_type_count.stcp
+        }
+        if (this.serverInfo.proxy_type_count.xtcp != null) {
+          this.proxy_counts += this.serverInfo.proxy_type_count.xtcp
+        }
+      }
+      DrawTrafficChart('traffic', this.serverInfo.total_traffic_in, this.serverInfo.total_traffic_out)
+      DrawProxyChart('proxies', this.serverInfo)
     }
   }
 }
diff --git a/web/frps/src/components/ProxiesHttp.vue b/web/frps/src/components/ProxiesHttp.vue
index f31876d2..1a9d44a3 100644
--- a/web/frps/src/components/ProxiesHttp.vue
+++ b/web/frps/src/components/ProxiesHttp.vue
@@ -73,11 +73,13 @@ export default {
       subdomain_host: ''
     }
   },
-  watch: {
-    $route: 'fetchData'
+  computed: {
+    serverInfo() {
+      return this.$store.state.serverInfo
+    }
   },
-  created() {
-    this.fetchData()
+  mounted() {
+    this.initData()
   },
   methods: {
     formatTrafficIn(row, column) {
@@ -86,33 +88,20 @@ export default {
     formatTrafficOut(row, column) {
       return Humanize.fileSize(row.traffic_out)
     },
-    fetchData() {
-      fetch('/api/serverinfo', { credentials: 'include' })
-        .then(res => {
-          return res.json()
-        })
-        .then(json => {
-          this.vhost_http_port = json.vhost_http_port
-          this.subdomain_host = json.subdomain_host
-          if (this.vhost_http_port == null || this.vhost_http_port === 0) {
-            return
-          } else {
-            fetch('/api/proxy/http', { credentials: 'include' })
-              .then(res => {
-                return res.json()
-              })
-              .then(json => {
-                this.proxies = []
-                for (const proxyStats of json.proxies) {
-                  this.proxies.push(new HttpProxy(proxyStats, this.vhost_http_port, this.subdomain_host))
-                }
-              })
-          }
-        })
+    async initData() {
+      if (!this.serverInfo) return
+      this.vhost_http_port = this.serverInfo.vhost_http_port
+      this.subdomain_host = this.serverInfo.subdomain_host
+      if (this.vhost_http_port == null || this.vhost_http_port === 0) return
+
+      const json = await this.$fetch('proxy/http')
+      if (!json) return
+
+      this.proxies = []
+      for (const proxyStats of json.proxies) {
+        this.proxies.push(new HttpProxy(proxyStats, this.vhost_http_port, this.subdomain_host))
+      }
     }
   }
 }
 </script>
-
-<style>
-</style>
diff --git a/web/frps/src/components/ProxiesHttps.vue b/web/frps/src/components/ProxiesHttps.vue
index af7b2a07..cb772291 100644
--- a/web/frps/src/components/ProxiesHttps.vue
+++ b/web/frps/src/components/ProxiesHttps.vue
@@ -67,11 +67,13 @@ export default {
       subdomain_host: ''
     }
   },
-  watch: {
-    $route: 'fetchData'
+  computed: {
+    serverInfo() {
+      return this.$store.state.serverInfo
+    }
   },
-  created() {
-    this.fetchData()
+  mounted() {
+    this.initData()
   },
   methods: {
     formatTrafficIn(row, column) {
@@ -80,33 +82,21 @@ export default {
     formatTrafficOut(row, column) {
       return Humanize.fileSize(row.traffic_out)
     },
-    fetchData() {
-      fetch('/api/serverinfo', { credentials: 'include' })
-        .then(res => {
-          return res.json()
-        })
-        .then(json => {
-          this.vhost_https_port = json.vhost_https_port
-          this.subdomain_host = json.subdomain_host
-          if (this.vhost_https_port == null || this.vhost_https_port === 0) {
-            return
-          } else {
-            fetch('/api/proxy/https', { credentials: 'include' })
-              .then(res => {
-                return res.json()
-              })
-              .then(json => {
-                this.proxies = []
-                for (const proxyStats of json.proxies) {
-                  this.proxies.push(new HttpsProxy(proxyStats, this.vhost_https_port, this.subdomain_host))
-                }
-              })
-          }
-        })
+    async initData() {
+      if (!this.serverInfo) return
+
+      this.vhost_https_port = this.serverInfo.vhost_https_port
+      this.subdomain_host = this.serverInfo.subdomain_host
+      if (this.vhost_https_port == null || this.vhost_https_port === 0) return
+
+      const json = await this.$fetch('proxy/https')
+      if (!json) return
+
+      this.proxies = []
+      for (const proxyStats of json.proxies) {
+        this.proxies.push(new HttpsProxy(proxyStats, this.vhost_https_port, this.subdomain_host))
+      }
     }
   }
 }
 </script>
-
-<style>
-</style>
diff --git a/web/frps/src/components/ProxiesStcp.vue b/web/frps/src/components/ProxiesStcp.vue
index ce3c9e03..fca0f3e8 100644
--- a/web/frps/src/components/ProxiesStcp.vue
+++ b/web/frps/src/components/ProxiesStcp.vue
@@ -60,11 +60,8 @@ export default {
       proxies: []
     }
   },
-  watch: {
-    $route: 'fetchData'
-  },
-  created() {
-    this.fetchData()
+  mounted() {
+    this.initData()
   },
   methods: {
     formatTrafficIn(row, column) {
@@ -73,17 +70,14 @@ export default {
     formatTrafficOut(row, column) {
       return Humanize.fileSize(row.traffic_out)
     },
-    fetchData() {
-      fetch('/api/proxy/stcp', { credentials: 'include' })
-        .then(res => {
-          return res.json()
-        })
-        .then(json => {
-          this.proxies = []
-          for (const proxyStats of json.proxies) {
-            this.proxies.push(new StcpProxy(proxyStats))
-          }
-        })
+    async initData() {
+      const json = await this.$fetch('proxy/stcp')
+      if (!json) return
+
+      this.proxies = []
+      for (const proxyStats of json.proxies) {
+        this.proxies.push(new StcpProxy(proxyStats))
+      }
     }
   }
 }
diff --git a/web/frps/src/components/ProxiesTcp.vue b/web/frps/src/components/ProxiesTcp.vue
index b7bc4403..f69189ed 100644
--- a/web/frps/src/components/ProxiesTcp.vue
+++ b/web/frps/src/components/ProxiesTcp.vue
@@ -3,13 +3,13 @@
     <el-table :data="proxies" :default-sort="{ prop: 'name', order: 'ascending' }" style="width: 100%">
       <el-table-column type="expand">
         <template slot-scope="props">
-          <el-popover ref="popover4" placement="right" width="600" style="margin-left: 0px" trigger="click">
+          <el-popover placement="right" width="600" style="margin-left: 0px" trigger="click">
             <my-traffic-chart :proxy-name="props.row.name" />
-          </el-popover>
 
-          <el-button v-popover:popover4 type="primary" size="small" icon="view" :name="props.row.name" style="margin-bottom: 10px" @click="fetchData2">
-            Traffic Statistics
-          </el-button>
+            <el-button slot="reference" type="primary" size="small" icon="view" :name="props.row.name" style="margin-bottom: 10px">
+              Traffic Statistics
+            </el-button>
+          </el-popover>
 
           <el-form label-position="left" inline class="demo-table-expand">
             <el-form-item label="Name">
@@ -64,11 +64,8 @@ export default {
       proxies: []
     }
   },
-  watch: {
-    $route: 'fetchData'
-  },
-  created() {
-    this.fetchData()
+  mounted() {
+    this.initData()
   },
   methods: {
     formatTrafficIn(row, column) {
@@ -77,17 +74,14 @@ export default {
     formatTrafficOut(row, column) {
       return Humanize.fileSize(row.traffic_out)
     },
-    fetchData() {
-      fetch('/api/proxy/tcp', { credentials: 'include' })
-        .then(res => {
-          return res.json()
-        })
-        .then(json => {
-          this.proxies = []
-          for (const proxyStats of json.proxies) {
-            this.proxies.push(new TcpProxy(proxyStats))
-          }
-        })
+    async initData() {
+      const json = await this.$fetch('proxy/tcp')
+      if (!json) return
+
+      this.proxies = []
+      for (const proxyStats of json.proxies) {
+        this.proxies.push(new TcpProxy(proxyStats))
+      }
     }
   }
 }
diff --git a/web/frps/src/components/ProxiesUdp.vue b/web/frps/src/components/ProxiesUdp.vue
index 7d258c1e..c6a46bd0 100644
--- a/web/frps/src/components/ProxiesUdp.vue
+++ b/web/frps/src/components/ProxiesUdp.vue
@@ -62,11 +62,8 @@ export default {
       proxies: []
     }
   },
-  watch: {
-    $route: 'fetchData'
-  },
-  created() {
-    this.fetchData()
+  mounted() {
+    this.initData()
   },
   methods: {
     formatTrafficIn(row, column) {
@@ -75,21 +72,16 @@ export default {
     formatTrafficOut(row, column) {
       return Humanize.fileSize(row.traffic_out)
     },
-    fetchData() {
-      fetch('/api/proxy/udp', { credentials: 'include' })
-        .then(res => {
-          return res.json()
-        })
-        .then(json => {
-          this.proxies = []
-          for (const proxyStats of json.proxies) {
-            this.proxies.push(new UdpProxy(proxyStats))
-          }
-        })
+    async initData() {
+      const json = await this.$fetch('proxy/udp')
+      if (!json) return
+
+      this.proxies = []
+      for (const proxyStats of json.proxies) {
+        this.proxies.push(new UdpProxy(proxyStats))
+      }
     }
   }
 }
 </script>
 
-<style>
-</style>
diff --git a/web/frps/src/components/Traffic.vue b/web/frps/src/components/Traffic.vue
index c47bf501..9b44b81c 100644
--- a/web/frps/src/components/Traffic.vue
+++ b/web/frps/src/components/Traffic.vue
@@ -11,33 +11,16 @@ export default {
       required: true
     }
   },
-  created() {
-    this.fetchData()
+  mounted() {
+    this.initData()
   },
-  // watch: {
-  // '$route': 'fetchData'
-  // },
   methods: {
-    fetchData() {
-      const url = '/api/traffic/' + this.proxyName
-      fetch(url, { credentials: 'include' })
-        .then(res => {
-          return res.json()
-        })
-        .then(json => {
-          DrawProxyTrafficChart(this.proxyName, json.traffic_in, json.traffic_out)
-        })
-        .catch(err => {
-          this.$message({
-            showClose: true,
-            message: 'Get server info from frps failed!' + err,
-            type: 'warning'
-          })
-        })
+    async initData() {
+      const json = await this.$fetch(`traffic/${this.proxyName}`)
+      if (!json) return
+
+      DrawProxyTrafficChart(this.proxyName, json.traffic_in, json.traffic_out)
     }
   }
 }
 </script>
-
-<style>
-</style>
diff --git a/web/frps/src/main.js b/web/frps/src/main.js
index e525c50b..9fb7bd0a 100644
--- a/web/frps/src/main.js
+++ b/web/frps/src/main.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 // import ElementUI from 'element-ui'
-import { Button, Form, FormItem, Row, Col, Table, TableColumn, Popover, Menu, Submenu, MenuItem, Tag } from 'element-ui'
+import { Button, Form, FormItem, Row, Col, Table, TableColumn, Popover, Menu, Submenu, MenuItem, Tag, Message } from 'element-ui'
 import lang from 'element-ui/lib/locale/lang/en'
 import locale from 'element-ui/lib/locale'
 import 'element-ui/lib/theme-chalk/index.css'
@@ -8,6 +8,7 @@ import './utils/less/custom.less'
 
 import App from './App.vue'
 import router from './router'
+import store from '@/store'
 import 'whatwg-fetch'
 
 locale.use(lang)
@@ -24,10 +25,15 @@ Vue.use(Menu)
 Vue.use(Submenu)
 Vue.use(MenuItem)
 Vue.use(Tag)
+Vue.prototype.$message = Message
+
+import fetch from '@/utils/fetch'
+Vue.prototype.$fetch = fetch
 
 Vue.config.productionTip = false
 
 new Vue({
   router,
+  store,
   render: h => h(App)
 }).$mount('#app')
diff --git a/web/frps/src/store/index.js b/web/frps/src/store/index.js
new file mode 100644
index 00000000..437c206d
--- /dev/null
+++ b/web/frps/src/store/index.js
@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import fetch from '@/utils/fetch'
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  state: {
+    serverInfo: null
+  },
+  mutations: {
+    SET_SERVER_INFO(state, serverInfo) {
+      state.serverInfo = serverInfo
+    }
+  },
+  actions: {
+    async fetchServerInfo({ commit }) {
+      const json = await fetch('serverinfo')
+      commit('SET_SERVER_INFO', json || null)
+      return json
+    }
+  }
+})
+
+export default store
diff --git a/web/frps/src/utils/fetch.js b/web/frps/src/utils/fetch.js
new file mode 100644
index 00000000..4fc354aa
--- /dev/null
+++ b/web/frps/src/utils/fetch.js
@@ -0,0 +1,20 @@
+import { Message } from 'element-ui'
+
+export default function(api, init = {}) {
+  return new Promise(resolve => {
+    fetch(`/api/${api}`, Object.assign({ credentials: 'include' }, init))
+      .then(res => {
+        if (res.status < 200 || res.status >= 300) {
+          Message.warning('Get server info from frps failed!')
+          resolve()
+          return
+        }
+
+        resolve(res ? res.json() : undefined)
+      })
+      .catch(err => {
+        this.$message.error(err.message)
+        resolve()
+      })
+  })
+}
diff --git a/web/frps/vue.config.js b/web/frps/vue.config.js
index b5c88018..e08236a3 100644
--- a/web/frps/vue.config.js
+++ b/web/frps/vue.config.js
@@ -5,7 +5,7 @@ module.exports = {
     port: 8010,
     proxy: {
       '/api/': {
-        target: 'http://127.0.0.1:8080',
+        target: 'http://127.0.0.1:8080/api',
         changeOrigin: true,
         pathRewrite: {
           '^/api': ''