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 @@
-
+
@@ -34,6 +34,14 @@
-
-
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))
+ }
}
}
}
-
-
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 @@
-
+
-
-
- Traffic Statistics
-
+
+ Traffic Statistics
+
+
@@ -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))
+ }
}
}
}
-
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)
}
}
}
-
-
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': ''