前端增加注册功能

main
yuan 7 months ago
parent 8f4ae4e4da
commit a438890b30

@ -46,10 +46,10 @@ public class SysRegisterService
// 验证码开关
boolean captchaEnabled = configService.selectCaptchaEnabled();
if (captchaEnabled)
{
validateCaptcha(username, registerBody.getCode(), registerBody.getUuid());
}
// if (captchaEnabled)
// {
// validateCaptcha(username, registerBody.getCode(), registerBody.getUuid());
// }
if (StringUtils.isEmpty(username))
{

@ -1,57 +1,170 @@
<template>
<div class="login-container">
<div class="login-box">
<h2>注册</h2>
<form @submit.prevent="register">
<div class="input-group">
<i class="fas fa-user"></i>
<input type="text" v-model="username" placeholder="用户名" required />
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" v-model="password" placeholder="密码" required />
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" v-model="confirmPassword" placeholder="确认密码" required />
</div>
<button type="submit" class="login-button">注册</button>
</form>
</div>
<div id="register">
<el-row class="full-height" justify="center" align="middle">
<el-col :span="8">
<el-card shadow="never">
<h2 class="title">用户注册</h2>
<el-form :model="form" :rules="rules" ref="form" label-width="120px">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input v-model="form.confirmPassword" type="password" placeholder="确认密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm" :loading="loading" style="width: 100%;">注册</el-button>
</el-form-item>
<!-- 返回登录按钮与注册按钮同行 -->
<el-form-item>
<el-row gutter={10}>
<el-col :span="12" class="text-left">
<el-button @click="goToLogin" type="text">返回登录</el-button>
</el-col>
<el-col :span="12" class="text-right">
<el-button @click="clearForm" type="text" style="color: #999;">清除表单</el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import axios from 'axios';
import axios from "axios";
export default {
data() {
return {
username: '',
password: '',
confirmPassword: ''
loading: false,
form: {
username: '',
password: '',
confirmPassword: ''
},
rules: {
username: [
{required: true, message: '请输入用户名', trigger: 'blur'},
{min: 3, max: 20, message: '用户名长度在 3 到 20 个字符之间', trigger: 'blur'}
],
password: [
{required: true, message: '请输入密码', trigger: 'blur'},
{min: 6, message: '密码长度不能小于 6 个字符', trigger: 'blur'}
],
confirmPassword: [
{required: true, message: '请确认密码', trigger: 'blur'},
{validator: this.checkConfirmPassword, trigger: 'blur'}
]
}
};
},
methods: {
async register() {
if (this.password !== this.confirmPassword) {
alert('密码不匹配');
return;
}
async submitForm() {
this.loading = true;
try {
const response = await axios.post('http://localhost:8080/register', {
username: this.username,
password: this.password
});
console.log('注册成功', response.data);
const response = await axios.post('http://localhost:8080/register', this.form);
if (response.data.code === 200) {
this.$message.success('注册成功');
await this.$router.push('/login');
} else {
this.$message.error('注册失败, ' + response.data.msg);
}
} catch (error) {
console.error('注册失败', error);
this.$message.error('注册失败, ' + error);
} finally {
this.loading = false;
}
},
checkConfirmPassword(rule, value, callback) {
if (value !== this.form.password) {
callback(new Error('两次输入的密码不一致'));
} else {
callback();
}
},
goToLogin() {
this.$router.push('/login');
},
clearForm() {
this.$refs.form.resetFields();
}
}
};
</script>
<style scoped>
/* 使用与 Login.vue 相同的样式 */
#register {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.title {
text-align: center;
margin-bottom: 20px;
}
.el-card {
padding: 20px;
}
.el-form-item {
margin-bottom: 20px;
}
.el-col {
width: 100%;
}
.el-card {
width: 100%;
max-width: 500px; /* Limit card width */
}
.el-form-item .el-input {
padding-right: 10px; /* Improve input field padding */
}
.el-button {
width: 100%; /* Make button full width */
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.el-row {
display: flex;
justify-content: space-between;
}
.el-button[type="text"] {
font-size: 14px;
color: #409EFF;
}
.el-button[type="primary"] {
background-color: #409EFF;
border-color: #409EFF;
}
.el-button[type="primary"]:hover {
background-color: #66b1ff;
border-color: #66b1ff;
}
</style>

Loading…
Cancel
Save