增加telegram bot推送

master
pan 4 years ago
parent f3a09a0cde
commit f00c70b44d
  1. 47
      mock/test.ts
  2. 2
      package.json
  3. 17
      src/App.vue
  4. 44
      src/components/Config.vue
  5. 4
      src/components/Email.vue
  6. 24
      src/components/Home.vue
  7. 4
      src/components/Password.vue
  8. 82
      src/components/TelegramBot.vue
  9. 49
      src/components/Vue3.vue
  10. 2
      src/interface.ts
  11. 22
      src/request.ts
  12. 6
      src/router.ts
  13. 2
      src/store.ts

@ -1,5 +1,5 @@
import {MockMethod} from 'vite-plugin-mock';
import {changeEmailApi, changePwdApi, sendCodeApi} from "../src/interface";
import {changeEmailApi, changePwdApi, sendCodeApi, telegramBotApi} from "../src/interface";
const Mock = require('mockjs')
@ -45,6 +45,7 @@ export default [
url: changePwdApi,
method: 'post',
response: ({query}) => {
debugger
const result = Mock.mock({
'result': /OK|FAIL/,
})
@ -60,5 +61,49 @@ export default [
}
}
}
},
{
url: telegramBotApi,
method: 'get',
response: ({query}) => {
debugger
const result = Mock.mock({
'result': Math.random() < 0.9 ? 'OK' : "FAIL",
})
if (result.result === 'OK') {
result.message = '获取机器人信息成功'
result.bot = Mock.mock({
name: /\w{5}/
})
return result
} else {
return {
...result, ...Mock.mock({
'message': '获取机器人信息失败'
})
}
}
}
},
{
url: telegramBotApi,
method: 'post',
response: ({body}) => {
debugger
const result = Mock.mock({
'result': Math.random() < 0.9 ? 'OK' : "FAIL",
})
if (result.res === 'OK') {
result.message = '机器人绑定成功'
} else {
return {
...result, ...Mock.mock({
'message': /机器人绑定失败,(token不合法)/
})
}
}
}
}
] as MockMethod[];

@ -8,7 +8,6 @@
},
"dependencies": {
"element3": "^0.0.39",
"mockjs": "^1.1.0",
"vue": "^3.0.5",
"vue-router": "4",
"vuex": "^4.0.0"
@ -19,6 +18,7 @@
"@vuedx/typecheck": "^0.6.0",
"@vuedx/typescript-plugin-vue": "^0.6.0",
"cross-env": "^7.0.3",
"mockjs": "^1.1.0",
"node-sass": "^5.0.0",
"sass": "^1.32.7",
"sass-loader": "^11.0.1",

@ -7,8 +7,15 @@
</el-col>
<el-col :span="20">
<el-menu mode="horizontal" :router="true" :default-active="store.state.route">
<el-menu-item index="/home">主页</el-menu-item>
<el-submenu index="">
<el-submenu index="1">
<template v-slot:title>推送配置</template>
<el-menu-item index="/config">当前配置</el-menu-item>
<el-menu-item index="/config/telegram">修改telegram bot</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template v-slot:title>个人信息</template>
<el-menu-item index="/password">修改密码</el-menu-item>
<el-menu-item index="/email">修改邮箱</el-menu-item>
@ -19,7 +26,7 @@
</el-row>
</el-header>
<el-main>
<Home v-if="$route.fullPath==='/'"/>
<Config v-if="$route.fullPath==='/'"/>
<router-view v-else/>
</el-main>
</el-container>
@ -28,13 +35,13 @@
<script lang="ts">
import {defineComponent} from 'vue'
import Home from "./components/Home.vue";
import Config from "./components/Config.vue";
import {useStore} from "vuex";
export default defineComponent({
name: 'App',
components: {Home},
components: {Config},
setup() {
const store = useStore()

@ -0,0 +1,44 @@
<template>
<el-row type="flex" justify="center">
<el-col :span="8">
<el-input v-model="botName" :disabled="true">
<template v-slot:prepend>Telegram Bot</template>
</el-input>
</el-col>
</el-row>
</template>
<script lang="ts">
import {defineComponent, onMounted, ref} from "vue";
import {useStore} from "vuex";
import {getTelegramBot, message} from "../request";
export default defineComponent({
name: "Config",
setup() {
const store = useStore()
onMounted(() => {
store.commit('updateRoute', '/config')
})
const botName = ref('')
getTelegramBot(store.state.user.email).then(res => res.json())
.then(res => {
if (res.result === 'OK') {
botName.value = res.bot.name
} else {
message(res)
}
})
return {botName}
}
})
</script>
<style scoped>
</style>

@ -30,7 +30,7 @@
</el-col>
<el-col :span="2"/>
<el-col :span="2">
<el-button type="info" class="btn-block" @click="$router.replace('/home')">返回</el-button>
<el-button type="info" class="btn-block" @click="$router.replace('/config')">返回</el-button>
</el-col>
</el-row>
</template>
@ -80,7 +80,7 @@ export default defineComponent({
res => {
message(res)
if (res.result === 'OK') {
router.replace('/home')
router.replace('/config')
}
}
)

@ -1,24 +0,0 @@
<template>
<h1>主页</h1>
</template>
<script lang="ts">
import {defineComponent, onMounted} from "vue";
import {useStore} from "vuex";
export default defineComponent({
name: "Home",
setup() {
const store = useStore()
onMounted(() => {
store.commit('updateRoute', '/home')
})
}
})
</script>
<style scoped>
</style>

@ -24,7 +24,7 @@
</el-col>
<el-col :span="2"/>
<el-col :span="2">
<el-button type="info" class="btn-block" @click="$router.replace('/home')">返回</el-button>
<el-button type="info" class="btn-block" @click="$router.replace('/config')">返回</el-button>
</el-col>
</el-row>
</template>
@ -55,7 +55,7 @@ export default defineComponent({
.then(res => {
message(res)
if (res.result === 'OK') {
router.replace('/home')
router.replace('/config')
}
})

@ -0,0 +1,82 @@
<template>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-input v-model="newBotToken">
<template v-slot:prepend>机器人Api Token</template>
</el-input>
</el-col>
</el-row>
<el-row type="flex" justify="center" class="mt-1">
<el-col :span="2">
<el-button type="primary" class="btn-block" @click="openBot" v-loading.fullscreen.lock="fullscreenLoading">
测试token
</el-button>
</el-col>
</el-row>
<template v-if="botName!==''">
<el-row type="flex" justify="center" class="mt-1">
<el-col :span="12">
<el-input v-model="botName" :disabled="true">
<template v-slot:prepend>即将绑定的机器人</template>
</el-input>
</el-col>
</el-row>
<el-row type="flex" justify="center" class="mt-1">
<el-col :span="2">
<el-button type="primary" class="btn-block" @click="bindBot">绑定</el-button>
</el-col>
</el-row>
</template>
</template>
<script lang="ts">
import {defineComponent, ref} from "vue";
import {updateRoute} from "../router";
import {bindTelegramBot, message, testTelegramBot} from "../request";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
export default defineComponent({
name: "TelegramBot",
setup() {
updateRoute()
const fullscreenLoading = ref<boolean>(false)
const newBotToken = ref<string>('')
const botName = ref<string>('')
const openBot = () => {
fullscreenLoading.value = true
testTelegramBot(newBotToken.value)
.then(res => res.json()).then(res => {
fullscreenLoading.value = false
if (res.ok) {
botName.value = res.result.username
} else {
message({result: 'FAIL', message: '无法获取机器人信息,请确认token输入正确'})
}
})
}
const store = useStore()
const router = useRouter()
const bindBot = () => bindTelegramBot(store.state.user.email, newBotToken.value)
.then(res => res.json())
.then(res => {
message(res)
if (res.result === 'OK') {
router.replace('/config')
}
})
return {newBotToken, openBot, botName, fullscreenLoading, bindBot}
}
})
</script>
<style scoped>
</style>

@ -1,49 +0,0 @@
<template>
<h1>{{num}}*2={{double}}</h1>
<h1>{{num2.count}}*3={{triple}}</h1>
<button @click="add">累加</button>
<button @click="insert">插入</button>
</template>
<script lang="ts">
import {computed, defineComponent, reactive, ref} from 'vue'
export default defineComponent({
name: "Vue3",
setup:()=>{
const num=ref<number>(1)
const isAdd=ref<boolean>(false)
const num2=reactive<{count:number}>({
count:1
})
function add() {
num.value++
num2.count++
}
function insert(){
isAdd.value=true
}
function cancel(){
isAdd.value=false
}
const double=computed<number>(()=>num.value*2)
const triple=computed<number>(()=>num2.count*3)
return {num,add,double,num2,triple,isAdd,insert,cancel}
}
})
</script>
<style scoped>
</style>

@ -1,3 +1,5 @@
export const sendCodeApi = '/api/change/email/code'
export const changeEmailApi = '/api/change/email'
export const changePwdApi = '/api/change/pwd'
export const telegramBotApi = '/api/telegram/bot'
export const testTelegramBotApi = (token: string) => `https://api.telegram.org/bot${token}/getMe`

@ -1,4 +1,4 @@
import {changeEmailApi, changePwdApi, sendCodeApi} from "./interface";
import {changeEmailApi, changePwdApi, sendCodeApi, telegramBotApi, testTelegramBotApi} from "./interface";
// @ts-ignore
import {Message} from 'element3/src/components/Message'
@ -29,6 +29,26 @@ export function changePwd(userEmail: string, password: string) {
return fetch(new Request(changePwdApi, {method: 'POST', body: JSON.stringify({userEmail, password})}))
}
/**
* telegram bot
* @param userEmail
*/
export function getTelegramBot(userEmail: string) {
return fetch(new Request(`${telegramBotApi}?userEmail=${userEmail}`))
}
/**
* token
* @param token
*/
export function testTelegramBot(token: string) {
return fetch(new Request(testTelegramBotApi(token)))
}
export function bindTelegramBot(userEmail: string, token: string) {
return fetch(new Request(telegramBotApi), {method: 'POST', body: JSON.stringify({userEmail, token})})
}
export function message(res: any) {
new Message({
showClose: true,

@ -1,13 +1,15 @@
import {createRouter, createWebHashHistory, useRoute} from "vue-router";
import Email from "./components/Email.vue";
import Home from "./components/Home.vue";
import Config from "./components/Config.vue";
import {useStore} from "vuex";
import {onMounted} from "vue";
import Password from "./components/Password.vue";
import TelegramBot from "./components/TelegramBot.vue";
const routes = [
{path: '/home', component: Home},
{path: '/config', component: Config},
{path: '/config/telegram', component: TelegramBot},
{path: '/email', component: Email},
{path: '/password', component: Password}
]

@ -5,7 +5,7 @@ export const store = createStore({
user: {
email: '1029559041@qq.com'
},
route: '/home'
route: '/config'
}),
mutations: {
setUser(state, user) {

Loading…
Cancel
Save