完善用户注册
This commit is contained in:
@@ -88,7 +88,7 @@
|
||||
<!-- <span class="code">验证码</span> -->
|
||||
<img :src="imageUrl" @click="resetImg" class="vertify_img"/>
|
||||
</el-form-item>
|
||||
<div style="display: flex;flex-direction: row;justify-content: space-between">
|
||||
<div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;align-content: center">
|
||||
<el-form-item prop="remember">
|
||||
<el-checkbox v-model="ruleForm.remember" class="remember">记住我</el-checkbox>
|
||||
</el-form-item>
|
||||
@@ -112,7 +112,59 @@
|
||||
title="注册"
|
||||
:visible.sync="registerDialogVisible"
|
||||
width="25vw">
|
||||
注册
|
||||
<div>
|
||||
<el-form :model="resisterRuleForm" :rules="rules" ref="resisterRuleForm" class="form">
|
||||
<el-form-item prop="username">
|
||||
<!-- v-model：双向绑定，placeholder：不输入内容之前提示 -->
|
||||
<el-input
|
||||
prefix-icon="el-icon-user"
|
||||
v-model="resisterRuleForm.username"
|
||||
placeholder="用户名"
|
||||
auto-complete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<!-- type：密码显示* -->
|
||||
<el-input
|
||||
prefix-icon="el-icon-unlock"
|
||||
:type="passwordVisible"
|
||||
v-model="resisterRuleForm.password"
|
||||
placeholder="密码"
|
||||
auto-complete="new-password"
|
||||
>
|
||||
<i slot="suffix" :class="icon" @click="showPass"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" style="display: flex;flex-wrap: nowrap;flex-direction: row;">
|
||||
<el-input
|
||||
prefix-icon="el-icon-mobile-phone"
|
||||
type="text"
|
||||
placeholder="点击图片更换验证码"
|
||||
v-model="resisterRuleForm.code"
|
||||
class="vertify_code"
|
||||
auto-complete="false"
|
||||
style="width: 15.8vw"
|
||||
></el-input>
|
||||
<!-- <span class="code">验证码</span> -->
|
||||
<img :src="imageUrl" @click="resetImg" class="vertify_img"/>
|
||||
</el-form-item>
|
||||
<div style="display: flex;flex-direction: row;justify-content: center;align-items: center;align-content: center">
|
||||
<!-- <el-form-item prop="remember">-->
|
||||
<!-- <el-checkbox v-model="ruleForm.remember" class="remember">记住我</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
|
||||
<el-link type="success" @click="loginFun()">已有账户？去登录!</el-link>
|
||||
</div>
|
||||
|
||||
<div class="login-btn" style="margin-top: 10px;">
|
||||
<el-button type="primary" @click="resisterForm('resisterRuleForm')"
|
||||
>注册
|
||||
</el-button
|
||||
>
|
||||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-main>
|
||||
</el-container>
|
||||
@@ -137,6 +189,11 @@ export default {
|
||||
code: null,
|
||||
remember:null
|
||||
},
|
||||
resisterRuleForm: {
|
||||
username: null,
|
||||
password: null,
|
||||
code: null,
|
||||
},
|
||||
rules: {
|
||||
username: [
|
||||
// required：规则，trigger：失去焦点触发
|
||||
@@ -158,6 +215,12 @@ export default {
|
||||
closeLogin(){
|
||||
this.loginDialogVisible=false;
|
||||
},
|
||||
openResister(){
|
||||
this.registerDialogVisible=true;
|
||||
},
|
||||
closeRegister(){
|
||||
this.registerDialogVisible=false;
|
||||
},
|
||||
// ******登录*****
|
||||
account() {
|
||||
// console.log(this.getCookie("username"));
|
||||
@@ -261,13 +324,72 @@ export default {
|
||||
this.icon = "el-icon-lock";
|
||||
}
|
||||
},
|
||||
loginFun(){
|
||||
this.loginDialogVisible = true;
|
||||
this.registerDialogVisible = false;
|
||||
},
|
||||
// ******登录方法结束*****
|
||||
|
||||
// ----------注册------------
|
||||
registerFun() {
|
||||
this.loginDialogVisible = false;
|
||||
this.registerDialogVisible = true;
|
||||
}
|
||||
},
|
||||
resisterForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
//取参数
|
||||
// let params = new URLSearchParams();
|
||||
// params.append("username", this.ruleForm.username);
|
||||
// params.append("password", this.ruleForm.password);
|
||||
// params.append("code", this.ruleForm.code);
|
||||
// params.append("remember",this.ruleForm.remember)
|
||||
if (this.checked == true) {
|
||||
//存入cookie
|
||||
this.setCookie(this.ruleForm.username, this.ruleForm.password,7); //保存7天
|
||||
} else {
|
||||
this.clearCookie();
|
||||
}
|
||||
|
||||
//调用方法提交
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/userRegister',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
username: this.resisterRuleForm.username,
|
||||
password: this.resisterRuleForm.password,
|
||||
code: this.resisterRuleForm.code,
|
||||
|
||||
}
|
||||
}).then(function (res){
|
||||
// Vue.prototype.$message({
|
||||
// message: '成功！',
|
||||
// type: 'success'
|
||||
// });
|
||||
if(res.data.code===200){
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', { style: 'color: teal'}, res.data.msg),
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: res.data.msg
|
||||
});
|
||||
}
|
||||
console.log(res);
|
||||
});
|
||||
} else {
|
||||
this.closeLogin();
|
||||
return false;
|
||||
}
|
||||
this.closeLogin();
|
||||
|
||||
});
|
||||
},
|
||||
//----------注册结束----------
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user