zyb/DCFronted
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

如果vue使用redis会报出Uncaught ReferenceError: Buffer is not defined错误，但是使用在node.js中就没问题

Browse Source
This commit is contained in:
Kunagisa
2025-06-22 17:25:33 +08:00
parent ce92712a30
commit d5ee474b09
13 changed files with 444 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/components/SuccessDialog.vue Normal file
View File

@@ -0,0 +1,128 @@
<template>
<div v-if="visible" class="success-dialog-overlay" @click.self="handleClose">
<div class="success-dialog">
<div class="success-dialog-content">
<div class="success-icon">✓</div>
<div class="success-message">{{ message }}</div>
</div>
<div class="success-dialog-footer">
<button class="confirm-button" @click="handleClose">确定</button>
</div>
</div>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
visible: {
type: Boolean,
default: false
},
message: {
type: String,
required: true
}
})
const emit = defineEmits(['close'])
const handleClose = () => {
emit('close')
}
</script>
<style scoped>
.success-dialog-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.success-dialog {
background: white;
border-radius: 8px;
width: 90%;
max-width: 400px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
animation: dialog-fade-in 0.3s ease;
}
.success-dialog-content {
padding: 20px;
text-align: center;
}
.success-icon {
font-size: 48px;
color: #67c23a;
margin-bottom: 16px;
font-weight: bold;
}
.success-message {
color: #606266;
font-size: 16px;
line-height: 1.5;
}
.success-dialog-footer {
padding: 10px 20px 20px;
text-align: center;
}
.confirm-button {
background-color: #67c23a;
color: white;
border: none;
padding: 8px 24px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s;
}
.confirm-button:hover {
background-color: #85ce61;
}
@keyframes dialog-fade-in {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 移动端适配 */
@media screen and (max-width: 480px) {
.success-dialog {
width: 85%;
}
.success-icon {
font-size: 40px;
}
.success-message {
font-size: 14px;
padding: 16px;
}
.confirm-button {
padding: 6px 20px;
font-size: 13px;
}
}
</style>

62
src/components/login_module.vue
View File

@@ -45,7 +45,7 @@
<span class="error-message" v-if="captchaError">{{ captchaError }}</span>
</div>
<div class="login-button">
<button type="submit" :disabled="!isFormValid">登录</button>
<button type="submit">登录</button>
</div>
<div class="register-link">
<a @click.prevent="$emit('register')">注册账号</a>
@@ -83,16 +83,6 @@ const showError = ref(false)
const errorTitle = ref('错误提示')
const errorMessage = ref('')
const isFormValid = computed(() => {
return !usernameError.value &&
!passwordError.value &&
!captchaError.value &&
username.value &&
password.value &&
captcha.value
})
const showErrorMessage = (message, title = '错误提示') => {
errorMessage.value = message
errorTitle.value = title
@@ -108,7 +98,13 @@ const refreshCaptcha = async () => {
captcha.value = '' // 清空验证码输入
} catch (error) {
console.error('获取验证码失败:', error)
showErrorMessage('获取验证码失败，请刷新页面重试')
// 优先使用API返回的detail字段
const apiError = error.response?.data?.detail || error.response?.data?.message
if (apiError) {
showErrorMessage(apiError)
} else {
showErrorMessage('获取验证码失败，请刷新页面重试')
}
}
}
@@ -128,23 +124,18 @@ const handleLogin = async () => {
captcha.value
)
// 登录成功，跳转到首页
if (response.access_token) {
localStorage.setItem('access_token', response.access_token)
localStorage.setItem('user_id', username.value)
router.push('/')
} else {
throw new Error('登录失败：未获取到访问令牌')
}
// 登录成功，API中的loginSuccess函数会处理跳转
// 不需要在这里再次设置localStorage或跳转路由
console.log('登录成功')
} catch (error) {
console.error('登录失败:', error)
if (error.response) {
switch (error.response.status) {
case 401:
showErrorMessage('错误的用户名或密码')
break
default:
showErrorMessage(error.response?.data?.message || error.message || '登录失败，请稍后重试')
// 优先使用API返回的detail字段
const apiError = error.response?.data?.detail || error.response?.data?.message
if (apiError) {
showErrorMessage(apiError)
} else {
showErrorMessage('登录失败，请稍后重试')
}
} else {
showErrorMessage(error.message || '登录失败，请稍后重试')
@@ -165,7 +156,8 @@ const validateForm = () => {
usernameError.value = '请输入QQ号码'
return false
}
if (!/^[/\d/g]+$/.test(username.value)) {
// 修正正则表达式：只允许纯数字
if (!/^\d+$/.test(username.value)) {
usernameError.value = 'QQ号码只能包含数字'
return false
}
@@ -201,6 +193,22 @@ const validateForm = () => {
return true
}
// 重置表单数据
const resetForm = () => {
username.value = ''
password.value = ''
captcha.value = ''
usernameError.value = ''
passwordError.value = ''
captchaError.value = ''
refreshCaptcha()
}
// 暴露resetForm方法给父组件
defineExpose({
resetForm
})
onMounted(() => {
refreshCaptcha()
})

59
src/components/register_module.vue
View File

@@ -53,6 +53,11 @@
:message="errorMessage"
@close="showError = false"
/>
<SuccessDialog
:visible="showSuccess"
:message="successMessage"
@close="showSuccess = false"
/>
</div>
</template>
@@ -61,6 +66,7 @@ import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { userRegister, getCaptcha } from "@/api/login.js";
import ErrorDialog from './ErrorDialog.vue'
import SuccessDialog from './SuccessDialog.vue'
const router = useRouter()
const username = ref('')
@@ -84,12 +90,21 @@ const showError = ref(false)
const errorTitle = ref('错误提示')
const errorMessage = ref('')
// 成功提示相关
const showSuccess = ref(false)
const successMessage = ref('')
const showErrorMessage = (message, title = '错误提示') => {
errorMessage.value = message
errorTitle.value = title
showError.value = true
}
const showSuccessMessage = (message) => {
successMessage.value = message
showSuccess.value = true
}
const refreshCaptcha = async () => {
try {
const response = await getCaptcha()
@@ -98,7 +113,13 @@ const refreshCaptcha = async () => {
captcha.value = '' // 清空验证码输入
} catch (error) {
console.error('获取验证码失败:', error)
showErrorMessage('获取验证码失败，请刷新页面重试')
// 优先使用API返回的detail字段
const apiError = error.response?.data?.detail || error.response?.data?.message
if (apiError) {
showErrorMessage(apiError)
} else {
showErrorMessage('获取验证码失败，请刷新页面重试')
}
}
}
@@ -121,21 +142,31 @@ const handleRegister = async () => {
captcha.value
)
showErrorMessage('注册成功', '提示')
// 切换到登录模块
emit('login')
// 显示成功提示
showSuccessMessage('注册成功！正在切换到登录页面...')
// 清空表单数据
username.value = ''
password.value = ''
confirmPassword.value = ''
captcha.value = ''
// 刷新验证码
refreshCaptcha()
// 延迟1.5秒后切换到登录模块，让用户看到成功提示
setTimeout(() => {
emit('login')
}, 1500)
} catch (error) {
console.error('注册失败:', error)
if (error.response) {
switch (error.response.status) {
case 400:
showErrorMessage('该QQ号已被注册')
break
case 409:
showErrorMessage('用户名已存在')
break
default:
showErrorMessage(error.response?.data?.message || error.message || '注册失败，请稍后重试')
// 优先使用API返回的detail字段
const apiError = error.response?.data?.detail || error.response?.data?.message
if (apiError) {
showErrorMessage(apiError)
} else {
showErrorMessage('注册失败，请稍后重试')
}
} else {
showErrorMessage(error.message || '注册失败，请稍后重试')
@@ -281,7 +312,7 @@ const validateForm = () => {
transition: background 0.2s;
}
.login-button button:hover:not(:disabled) {
.login-button button:hover {
background: linear-gradient(90deg, #66b1ff 0%, #6dd5fa 100%);
}