cyonjan/frp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor requests

Browse Source
This commit is contained in:
hbrwang 2020-11-23 17:24:43 +08:00
parent 61c3ea69d3
commit 0270903d68
13 changed files with 200 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/frps/package.json
View File

@ -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",

10
web/frps/src/App.vue
View File

@ -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 === '') {

121
web/frps/src/components/Overview.vue
View File

@ -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)
}
}
}

49
web/frps/src/components/ProxiesHttp.vue
View File

@ -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>

50
web/frps/src/components/ProxiesHttps.vue
View File

@ -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>

26
web/frps/src/components/ProxiesStcp.vue
View File

@ -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))
}
}
}
}

36
web/frps/src/components/ProxiesTcp.vue
View File

@ -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))
}
}
}
}

28
web/frps/src/components/ProxiesUdp.vue
View File

@ -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>

31
web/frps/src/components/Traffic.vue
View File

@ -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>

8
web/frps/src/main.js
View File

@ -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')

24
web/frps/src/store/index.js Normal file
View File

@ -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

20
web/frps/src/utils/fetch.js Normal file
View File

@ -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()
})
})
}

2
web/frps/vue.config.js
View File

@ -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': ''