pan
4 years ago
parent
f00c70b44d
commit
fd1c8a6693
@ -1,28 +0,0 @@ |
|||||||
<template> |
|
||||||
<h1>一个异步组件</h1> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="ts"> |
|
||||||
import {defineComponent} from 'vue' |
|
||||||
|
|
||||||
function sleep(timeout: number | undefined){ |
|
||||||
return new Promise(resolve => setTimeout(resolve,timeout)) |
|
||||||
} |
|
||||||
|
|
||||||
export default defineComponent({ |
|
||||||
name: "AsyncComponent", |
|
||||||
props:{ |
|
||||||
timeout:{ |
|
||||||
type:Number, |
|
||||||
required:true |
|
||||||
} |
|
||||||
}, |
|
||||||
async setup(props){ |
|
||||||
await sleep(props.timeout) |
|
||||||
} |
|
||||||
}) |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
|
|
||||||
</style> |
|
||||||
@ -0,0 +1,73 @@ |
|||||||
|
<!--登录--> |
||||||
|
<template> |
||||||
|
<el-row justify="center" type="flex"> |
||||||
|
<el-col :span="8"><h1>后台登陆</h1></el-col> |
||||||
|
</el-row> |
||||||
|
<el-row justify="center" type="flex"> |
||||||
|
<el-col :span="8"> |
||||||
|
<el-input v-model="user"> |
||||||
|
<template v-slot:prepend>管理员邮箱</template> |
||||||
|
</el-input> |
||||||
|
<span v-if="user===''">邮箱不能为空</span> |
||||||
|
<span v-else-if="!checkUser">邮箱不合法</span> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row type="flex" justify="center" class="mt-1"> |
||||||
|
<el-col :span="8"> |
||||||
|
<span>密码必须包含数字、字母，6-10位</span> |
||||||
|
<el-input v-model="password" show-password> |
||||||
|
<template v-slot:prepend>密码</template> |
||||||
|
</el-input> |
||||||
|
<span v-if="password===''">密码不能为空</span> |
||||||
|
<span v-else-if="!checkPwd">密码不合法</span> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row type="flex" justify="center" class="mt-1"> |
||||||
|
<el-col :span="8"> |
||||||
|
<el-button type="primary" class="btn-block" :disabled="user===''||password===''" @click="requestLogin">登录 |
||||||
|
</el-button> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts"> |
||||||
|
import {computed, defineComponent, ref} from "vue"; |
||||||
|
import {emailRegexp, passwordRegexp} from "../validate"; |
||||||
|
import {JSONResponse, login, message} from "../request"; |
||||||
|
//@ts-ignore |
||||||
|
import crumbs from 'crumbsjs'; |
||||||
|
import {useRouter} from "vue-router"; |
||||||
|
import {email_cookie_key, token_cookie_key} from "../global"; |
||||||
|
|
||||||
|
export default defineComponent({ |
||||||
|
name: "Login", |
||||||
|
setup() { |
||||||
|
const user = ref<string>('') |
||||||
|
const password = ref<string>('') |
||||||
|
|
||||||
|
const checkUser = computed<boolean>(() => emailRegexp.test(user.value)) |
||||||
|
|
||||||
|
const checkPwd = computed<boolean>(() => passwordRegexp.test(password.value)) |
||||||
|
|
||||||
|
const router = useRouter() |
||||||
|
|
||||||
|
const requestLogin = () => { |
||||||
|
login(user.value, password.value).then(res => res.json()) |
||||||
|
.then((res: JSONResponse) => { |
||||||
|
message(res) |
||||||
|
if (res.result === 'OK') { |
||||||
|
crumbs.set(token_cookie_key, res.body.token) |
||||||
|
crumbs.set(email_cookie_key, res.body.userEmail) |
||||||
|
router.replace('/') |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
return {user, password, checkUser, checkPwd, requestLogin} |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
<!--注册--> |
||||||
|
<template> |
||||||
|
<template v-if="step===1"> |
||||||
|
<el-row justify="center" type="flex"> |
||||||
|
<el-col :span="8"> |
||||||
|
<h1>欢迎使用直播间开播通知应用，请完成管理员注册操作</h1> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row type="flex" justify="center"> |
||||||
|
<el-col :span="8"> |
||||||
|
<el-button type="info" class="btn-block" @click="step=2">开始注册</el-button> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</template> |
||||||
|
<template v-else-if="step===2"> |
||||||
|
<el-row type="flex" justify="center"> |
||||||
|
<el-col :span="8"> |
||||||
|
<h1>注册管理员</h1> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row type="flex" justify="center"> |
||||||
|
<el-col :span="8"> |
||||||
|
<el-input v-model="userEmail"> |
||||||
|
<template v-slot:prepend>管理员邮箱</template> |
||||||
|
</el-input> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row type="flex" justify="center" class="mt-1"> |
||||||
|
<el-col :span="8"> |
||||||
|
<el-input v-model="code" placeholder="请输入验证码"/> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</template> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts"> |
||||||
|
import {defineComponent, ref} from "vue"; |
||||||
|
|
||||||
|
export default defineComponent({ |
||||||
|
name: "Register", |
||||||
|
setup() { |
||||||
|
const step = ref<number>(1) |
||||||
|
const userEmail = ref<string>('') |
||||||
|
const code = ref<string>('') |
||||||
|
|
||||||
|
return {step, userEmail, code} |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
export const token_cookie_key = 'token' |
||||||
|
export const email_cookie_key = 'user_email' |
||||||
@ -1,5 +1,8 @@ |
|||||||
export const sendCodeApi = '/api/change/email/code' |
const prefix = '/api/backend' |
||||||
export const changeEmailApi = '/api/change/email' |
export const sendCodeApi = `${prefix}/change/email/code` |
||||||
export const changePwdApi = '/api/change/pwd' |
export const changeEmailApi = `${prefix}/change/email` |
||||||
export const telegramBotApi = '/api/telegram/bot' |
export const changePwdApi = `${prefix}/change/pwd` |
||||||
|
export const telegramBotApi = `${prefix}/telegram/bot` |
||||||
export const testTelegramBotApi = (token: string) => `https://api.telegram.org/bot${token}/getMe` |
export const testTelegramBotApi = (token: string) => `https://api.telegram.org/bot${token}/getMe` |
||||||
|
export const checkAdminApi = `${prefix}/checkAdmin` |
||||||
|
export const loginApi = `${prefix}/login` |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
//邮箱校验
|
||||||
|
export const emailRegexp = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/ |
||||||
|
//密码校验，必须包含数字、字母，6-10位
|
||||||
|
export const passwordRegexp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/ |
||||||
Loading…
Reference in new issue