|
|
|
@ -13,7 +13,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div class="input-group captcha-group">
|
|
|
|
|
<i class="fas fa-shield-alt"></i>
|
|
|
|
|
<input type="text" v-model="captcha" placeholder="验证码" required />
|
|
|
|
|
<input type="text" v-model="code" placeholder="验证码" required />
|
|
|
|
|
<!-- 显示验证码图片 -->
|
|
|
|
|
<img :src="captchaUrl" @click="refreshCaptcha" alt="验证码" class="captcha-image" style="margin-top: 5px"/>
|
|
|
|
|
</div>
|
|
|
|
@ -33,8 +33,9 @@ export default {
|
|
|
|
|
return {
|
|
|
|
|
username: '',
|
|
|
|
|
password: '',
|
|
|
|
|
captcha: '', // 存储用户输入的验证码
|
|
|
|
|
captchaUrl: '' // 验证码图片的 URL
|
|
|
|
|
code: '', // 存储用户输入的验证码
|
|
|
|
|
captchaUrl: '' ,// 验证码图片的 URL
|
|
|
|
|
uuid: ''
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
@ -45,6 +46,7 @@ export default {
|
|
|
|
|
if (data.code === 200) {
|
|
|
|
|
// 将 Base64 编码的图像转换为数据 URL
|
|
|
|
|
this.captchaUrl = `data:image/jpeg;base64,${data.img}`;
|
|
|
|
|
this.uuid = data.uuid; // 存储 uuid
|
|
|
|
|
} else {
|
|
|
|
|
console.error('获取验证码失败:', data.msg);
|
|
|
|
|
}
|
|
|
|
@ -58,10 +60,25 @@ export default {
|
|
|
|
|
const response = await axios.post('http://localhost:8081/login', {
|
|
|
|
|
username: this.username,
|
|
|
|
|
password: this.password,
|
|
|
|
|
captcha: this.captcha // 将验证码传递给后端
|
|
|
|
|
code: this.code,// 将验证码传递给后端
|
|
|
|
|
uuid: this.uuid
|
|
|
|
|
}, {
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/json' // 指定内容类型为 JSON
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 处理成功登录的逻辑,比如存储 token
|
|
|
|
|
console.log('用户名',this.username);
|
|
|
|
|
console.log('密码',this.password);
|
|
|
|
|
console.log('验证码',this.code);
|
|
|
|
|
console.log('uuid',this.uuid);
|
|
|
|
|
|
|
|
|
|
if (response.data.code === 200) {
|
|
|
|
|
console.log('登录成功', response.data);
|
|
|
|
|
window.location.href = 'http://localhost:8080'; // 登录成功后跳转
|
|
|
|
|
} else {
|
|
|
|
|
console.error('登录失败', response.data.msg);
|
|
|
|
|
this.refreshCaptcha(); // 登录失败时刷新验证码
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('登录失败', error);
|
|
|
|
|
// 登录失败时可以选择刷新验证码
|
|
|
|
|