disposal frps

This commit is contained in:
hubery.wang 2020-12-04 10:09:53 +08:00
parent 0e56137f07
commit 76b692e9e0
4 changed files with 97 additions and 106 deletions

View File

@ -1,10 +1,12 @@
.PHONY: dist build .PHONY: dist build
build: install build: install
@npm run build @npm run build:s
@npm run build:c
dev: install dev: install
@npm run serve @npm run serve:s
@npm run serve:c
install: install:
@npm install @npm install

View File

@ -8,14 +8,22 @@ npm install
### Compiles and hot-reloads for development ### Compiles and hot-reloads for development
``` ```shell
npm run serve # frps
npm run serve:s
# frpc
npm run serve:c
``` ```
### Compiles and minifies for production ### Compiles and minifies for production
``` ```shell
npm run build # frps
npm run build:s
# frpc
npm run build:c
``` ```
### Lints and fixes files ### Lints and fixes files

View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="configure-container">
<el-row id="head"> <el-row id="head">
<el-button type="primary" @click="fetchData">Refresh</el-button> <el-button type="primary" @click="fetchData">Refresh</el-button>
<el-button type="primary" @click="uploadConfig">Upload</el-button> <el-button type="primary" @click="uploadConfig">Upload</el-button>
@ -15,88 +15,75 @@ export default {
textarea: '' textarea: ''
} }
}, },
watch: {
$route: 'fetchData'
},
created() { created() {
this.fetchData() this.fetchData()
}, },
methods: { methods: {
fetchData() { async fetchData() {
fetch('/api/config', { credentials: 'include' }) const res = await this.$fetch('config')
.then(res => { if (!res.ok) {
return res.text() this.$message({
}) showClose: true,
.then(text => { message: 'Get configure content from frpc failed!',
this.textarea = text type: 'warning'
})
.catch(err => {
this.$message({
showClose: true,
message: 'Get configure content from frpc failed!',
type: 'warning'
})
return err
}) })
return
}
this.textarea = await res.text()
}, },
uploadConfig() { uploadConfig() {
this.$confirm('This operation will upload your frpc configure file content and hot reload it, do you want to continue?', 'Notice', { this.$confirm('This operation will upload your frpc configure file content and hot reload it, do you want to continue?', 'Notice', {
confirmButtonText: 'Yes', confirmButtonText: 'Yes',
cancelButtonText: 'No', cancelButtonText: 'No',
type: 'warning' type: 'warning'
}) }).then(async () => {
.then(() => { if (!this.textarea) {
if (!this.textarea) {
this.$message({
type: 'warning',
message: 'Configure content can not be empty!'
})
return
}
fetch('/api/config', {
credentials: 'include',
method: 'PUT',
body: this.textarea
})
.then(() => {
fetch('/api/reload', { credentials: 'include' })
.then(() => {
this.$message({
type: 'success',
message: 'Success'
})
})
.catch(err => {
this.$message({
showClose: true,
message: 'Reload frpc configure file error, ' + err,
type: 'warning'
})
})
})
.catch(err => {
this.$message({
showClose: true,
message: 'Put config to frpc and hot reload failed!',
type: 'warning'
})
return err
})
})
.catch(() => {
this.$message({ this.$message({
type: 'info', type: 'warning',
message: 'Canceled' message: 'Configure content can not be empty!'
}) })
return
}
const putRes = await this.$fetch('config', {
method: 'PUT',
body: this.textarea
}) })
if (!putRes.ok) {
this.$message({
showClose: true,
message: 'Put config to frpc and hot reload failed!',
type: 'warning'
})
return
}
const reloadRes = await this.$fetch('reload')
if (!reloadRes.ok) {
this.$message({
showClose: true,
message: 'Reload frpc configure file error, ' + reloadRes.statusText,
type: 'warning'
})
return
}
this.$message({
type: 'success',
message: 'Success'
})
})
} }
} }
} }
</script> </script>
<style> <style>
.configure-container {
margin: 20px;
}
#head { #head {
margin-bottom: 30px; margin-bottom: 20px;
} }
</style> </style>

View File

@ -22,50 +22,44 @@
export default { export default {
data() { data() {
return { return {
status: null status: []
} }
}, },
watch: {
$route: 'fetchData'
},
created() { created() {
this.fetchData() this.fetchData()
}, },
methods: { methods: {
fetchData() { async fetchData() {
fetch('/api/status', { credentials: 'include' }) const res = await this.$fetch('status')
.then(res => { if (!res.ok) {
return res.json() this.$message({
}) showClose: true,
.then(json => { message: 'Get status info from frpc failed!',
this.status = [] type: 'warning'
for (const s of json.tcp) {
this.status.push(s)
}
for (const s of json.udp) {
this.status.push(s)
}
for (const s of json.http) {
this.status.push(s)
}
for (const s of json.https) {
this.status.push(s)
}
for (const s of json.stcp) {
this.status.push(s)
}
for (const s of json.xtcp) {
this.status.push(s)
}
})
.catch(err => {
this.$message({
showClose: true,
message: 'Get status info from frpc failed!',
type: 'warning'
})
return err
}) })
return
}
const json = await res.json()
this.status = []
for (const s of json.tcp) {
this.status.push(s)
}
for (const s of json.udp) {
this.status.push(s)
}
for (const s of json.http) {
this.status.push(s)
}
for (const s of json.https) {
this.status.push(s)
}
for (const s of json.stcp) {
this.status.push(s)
}
for (const s of json.xtcp) {
this.status.push(s)
}
} }
} }
} }