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' |
||||
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` |
||||
const prefix = '/api/backend' |
||||
export const sendCodeApi = `${prefix}/change/email/code` |
||||
export const changeEmailApi = `${prefix}/change/email` |
||||
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 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