配合前后端
This commit is contained in:
橙子
163
Yi.Vue/src/views/login.vue
Normal file
163
Yi.Vue/src/views/login.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<v-card
|
||||
class="px-6 py-4 mx-auto elevation-4 rounded-md"
|
||||
style="height: 600px; width: 500px"
|
||||
>
|
||||
<div>
|
||||
<h1 class="title my-2">Angstrong</h1>
|
||||
<v-subheader>登入你的用户</v-subheader>
|
||||
</div>
|
||||
|
||||
<v-form ref="form" v-model="valid" lazy-validation>
|
||||
<v-text-field
|
||||
v-model="user_name"
|
||||
:rules="user_nameRules"
|
||||
label="用户名"
|
||||
outlined
|
||||
clearable
|
||||
required
|
||||
:counter="20"
|
||||
></v-text-field>
|
||||
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
:rules="passwordRules"
|
||||
label="密码"
|
||||
outlined
|
||||
clearable
|
||||
required
|
||||
type="password"
|
||||
></v-text-field>
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<v-checkbox
|
||||
v-model="checkbox"
|
||||
:rules="[(v) => !!v || '同意后才可进入']"
|
||||
label="你同意协议吗？"
|
||||
required
|
||||
></v-checkbox
|
||||
></v-col>
|
||||
<v-col cols="6" class="text-right pt-8"
|
||||
><router-link to="/register">前往注册</router-link></v-col
|
||||
>
|
||||
</v-row>
|
||||
</v-form>
|
||||
|
||||
<v-btn
|
||||
class="my-2 light-blue white--text"
|
||||
@click="login"
|
||||
large
|
||||
style="width: 100%"
|
||||
@keyup.enter="enterSearch"
|
||||
:loading="loader"
|
||||
:disabled="btn_dis"
|
||||
>
|
||||
登入
|
||||
</v-btn>
|
||||
<p class="my-2">或使用登录</p>
|
||||
<v-btn class="my-2 cyan white--text" @click="qqlogin" large style="width: 100%" :loading="loader" :disabled="btn_dis">
|
||||
<v-icon class="mx-2" > mdi-qqchat </v-icon>
|
||||
QQ
|
||||
</v-btn>
|
||||
|
||||
<v-btn class="cyan white--text" @click="yklogin" large style="width: 100%" :loading="loader" :disabled="btn_dis">
|
||||
<v-icon class="mx-2"> mdi-message-text </v-icon>
|
||||
临时游客
|
||||
</v-btn>
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
btn_dis:false,
|
||||
loader: null,
|
||||
valid: true,
|
||||
user_name: "",
|
||||
user_nameRules: [
|
||||
(v) => !!v || "用户名不能为空",
|
||||
(v) => (v && v.length <= 20) || "用户名必须小于20个字符",
|
||||
],
|
||||
password: "",
|
||||
passwordRules: [
|
||||
(v) => !!v || "密码不能为空",
|
||||
(v) => (v && v.length <= 120) || "密码必须小于20个字符",
|
||||
],
|
||||
select: null,
|
||||
checkbox: true,
|
||||
}),
|
||||
created() {
|
||||
this.enterSearch();
|
||||
},
|
||||
methods: {
|
||||
enterSearch() {
|
||||
document.onkeydown = (e) => {
|
||||
//13表示回车键，baseURI是当前页面的地址，为了更严谨，也可以加别的，可以打印e看一下
|
||||
if (e.keyCode === 13 && e.target.baseURI.match("/")) {
|
||||
//回车后执行搜索方法
|
||||
this.login();
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
qqlogin() {
|
||||
// QC.Login.showPopup(myqq.myqqLogin);
|
||||
// window.close();
|
||||
},
|
||||
yklogin() {
|
||||
this.loader = "true";
|
||||
this.btn_dis=true;
|
||||
this.$store
|
||||
.dispatch("Login", {
|
||||
username: "游客",
|
||||
password: "",
|
||||
})
|
||||
.then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$router.push("/");
|
||||
} else {
|
||||
this.loader=null;
|
||||
this.btn_dis=false;
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
login() {
|
||||
if (this.$refs.form.validate()) {
|
||||
this.loader = "true";
|
||||
this.btn_dis=true;
|
||||
this.$store
|
||||
.dispatch("Login", {
|
||||
username: this.user_name,
|
||||
password: this.password,
|
||||
})
|
||||
.then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$router.push("/");
|
||||
} else {
|
||||
this.loader = null;
|
||||
this.btn_dis=false;
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error("请合理输入数据", {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.$refs.form.reset();
|
||||
},
|
||||
resetValidation() {
|
||||
this.$refs.form.resetValidation();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
238
Yi.Vue/src/views/register.vue
Normal file
238
Yi.Vue/src/views/register.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<v-card
|
||||
class="px-6 py-4 mx-auto elevation-4 rounded-md"
|
||||
style=" height: 600px; width: 500px"
|
||||
>
|
||||
<div>
|
||||
<h1 class="title my-2">Angstrong</h1>
|
||||
<v-subheader>注册加入我们</v-subheader>
|
||||
</div>
|
||||
|
||||
<v-form ref="form" v-model="valid" lazy-validation>
|
||||
<v-text-field
|
||||
v-model="user_name"
|
||||
:rules="user_nameRules"
|
||||
label="用户名"
|
||||
outlined
|
||||
clearable
|
||||
required
|
||||
:counter="20"
|
||||
></v-text-field>
|
||||
|
||||
<v-text-field
|
||||
ref="myemail"
|
||||
v-model="email"
|
||||
:rules="emailRules"
|
||||
label="邮箱"
|
||||
outlined
|
||||
clearable
|
||||
required
|
||||
></v-text-field>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="6" md="8">
|
||||
<v-text-field
|
||||
v-model="code"
|
||||
label="验证码"
|
||||
outlined
|
||||
clearable
|
||||
required
|
||||
:counter="20"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="2" md="1">
|
||||
<v-progress-circular
|
||||
class="mt-2"
|
||||
size="40"
|
||||
:rotate="360"
|
||||
:value="value"
|
||||
color="cyan"
|
||||
>
|
||||
{{ value }}
|
||||
</v-progress-circular>
|
||||
</v-col>
|
||||
<v-col cols="4" md="3">
|
||||
<v-btn class="mt-1" large :dark="!dis_mail" color="cyan" @click="sendMail"
|
||||
:disabled="dis_mail"
|
||||
>发送</v-btn
|
||||
>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
:rules="passwordRules"
|
||||
label="密码"
|
||||
outlined
|
||||
clearable
|
||||
required
|
||||
type="password"
|
||||
></v-text-field>
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<v-checkbox
|
||||
v-model="checkbox"
|
||||
:rules="[(v) => !!v || '同意后才可进入']"
|
||||
label="你同意协议吗？"
|
||||
required
|
||||
></v-checkbox
|
||||
></v-col>
|
||||
<v-col cols="6" class="text-right pt-8"
|
||||
><router-link to="/login">返回</router-link></v-col
|
||||
>
|
||||
</v-row>
|
||||
</v-form>
|
||||
|
||||
<v-btn
|
||||
class="my-2 light-blue white--text"
|
||||
@click="register"
|
||||
large
|
||||
style="width: 100%"
|
||||
:loading="loader"
|
||||
:disabled="btn_dis"
|
||||
>
|
||||
注册
|
||||
</v-btn>
|
||||
<!-- <p>或使用登录</p>
|
||||
<v-btn dark class="my-2 cyan" @click="login" large style="width: 100%">
|
||||
<v-icon class="mx-2"> mdi-message-text </v-icon>
|
||||
QQ
|
||||
</v-btn>
|
||||
|
||||
<v-btn dark class="cyan" @click="login" large style="width: 100%">
|
||||
<v-icon class="mx-2"> mdi-message-text </v-icon>
|
||||
微信
|
||||
</v-btn> -->
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
import accountApi from "../api/accountApi.js";
|
||||
export default {
|
||||
data: () => ({
|
||||
btn_dis:false,
|
||||
loader: null,
|
||||
dis_mail:false,
|
||||
value:100,
|
||||
code: "",
|
||||
valid: true,
|
||||
user_name: "",
|
||||
user_nameRules: [
|
||||
(v) => !!v || "用户名不能为空",
|
||||
(v) => (v && v.length <= 20) || "用户名必须小于20个字符",
|
||||
],
|
||||
email: "",
|
||||
emailRules: [
|
||||
(v) => !!v || "邮箱不能为空",
|
||||
(v) => /.+@.+\..+/.test(v) || "无效的邮箱",
|
||||
],
|
||||
password: "",
|
||||
passwordRules: [
|
||||
(v) => !!v || "密码不能为空",
|
||||
(v) => (v && v.length <= 120) || "密码必须小于120个字符",
|
||||
(v) => (v && v.length >= 7) || "密码必须大于等于7个字符",
|
||||
],
|
||||
select: null,
|
||||
checkbox: true,
|
||||
}),
|
||||
created()
|
||||
{
|
||||
setInterval(this.addValue,1000)
|
||||
},
|
||||
// watch:{
|
||||
// value(val,old)
|
||||
// {
|
||||
|
||||
// val+=1
|
||||
// if (val==100)
|
||||
// {
|
||||
// this.dis_mail=false
|
||||
// }
|
||||
// else
|
||||
// {
|
||||
// this.dis_mail=true
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
methods: {
|
||||
addValue()
|
||||
{
|
||||
if(this.value<=99)
|
||||
{
|
||||
this.value+=1
|
||||
}
|
||||
if(this.value==100)
|
||||
{
|
||||
this.dis_mail=false
|
||||
}
|
||||
else
|
||||
{
|
||||
this.dis_mail=true
|
||||
}
|
||||
},
|
||||
register() {
|
||||
if (this.$refs.form.validate()) {
|
||||
this.loader = "true";
|
||||
this.btn_dis=true;
|
||||
this.$store
|
||||
.dispatch("Register", {
|
||||
username: this.user_name,
|
||||
password: this.password,
|
||||
email: this.email,
|
||||
code: this.code,
|
||||
})
|
||||
.then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$dialog.notify.success(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
this.$router.push("/login");
|
||||
} else {
|
||||
this.loader=null;
|
||||
this.btn_dis=false;
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error("请合理输入数据", {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.$refs.form.reset();
|
||||
},
|
||||
resetValidation() {
|
||||
this.$refs.form.resetValidation();
|
||||
},
|
||||
sendMail() {
|
||||
if (this.$refs.myemail.validate()) {
|
||||
|
||||
this.value=0
|
||||
this.dis_mail=true
|
||||
accountApi.email(this.email).then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$dialog.notify.success(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error("请合理输入邮箱", {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user