2025-12-2genxin
This commit is contained in:
@@ -397,14 +397,15 @@
|
||||
<!-- 头部导航 -->
|
||||
<header class="header">
|
||||
<div class="header-content">
|
||||
<a href="frontend.html" class="logo">易搜高</a>
|
||||
<a href="frontend.html" class="logo">🔍 易搜高</a>
|
||||
<nav class="nav-menu">
|
||||
<a href="frontend.html">首页监控</a>
|
||||
<a href="history-articles.html">历史文章</a>
|
||||
<a href="user-center.html" class="active">用户中心</a>
|
||||
<!-- 用户信息和登出按钮会通过JavaScript动态添加 -->
|
||||
<div id="userMenu"></div>
|
||||
<a href="login.html" id="loginLink" class="login-link">登录/注册</a>
|
||||
<a href="frontend.html" class="nav-link">首页</a>
|
||||
<a href="#" class="nav-link">监控中心</a>
|
||||
<a href="#" class="nav-link">数据分析</a>
|
||||
<a href="#" class="nav-link">帮助文档</a>
|
||||
<a href="user-center.html" class="nav-link active" id="userCenterLink">👤 用户中心</a>
|
||||
<a href="login.html" class="nav-link" id="loginLink">🔐 登录</a>
|
||||
<div id="userMenu" class="user-info"></div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
@@ -441,7 +442,6 @@
|
||||
</h2>
|
||||
|
||||
<div class="info-card">
|
||||
<!-- 修复个人信息区域中重复的ID -->
|
||||
<div class="info-row">
|
||||
<span class="info-label">用户名</span>
|
||||
<span class="info-value" id="info-username">--</span>
|
||||
@@ -465,6 +465,23 @@
|
||||
<span class="info-value" id="info-status">--</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑个人信息表单 -->
|
||||
<h3 class="section-title" style="font-size: 18px; margin-top: 30px;">
|
||||
<span class="section-icon">✏️</span>
|
||||
编辑信息
|
||||
</h3>
|
||||
<form id="edit-info-form" onsubmit="return saveUserInfo(event)">
|
||||
<div class="form-group">
|
||||
<label for="edit-email" class="form-label">邮箱</label>
|
||||
<input type="email" id="edit-email" class="form-input" placeholder="请输入邮箱">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-bio" class="form-label">个人简介</label>
|
||||
<textarea id="edit-bio" class="form-input" rows="4" placeholder="介绍一下自己..."></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary">保存修改</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<!-- 密码修改部分 -->
|
||||
@@ -742,6 +759,7 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// 添加缺失的函数定义，确保功能完整性
|
||||
function showMessage(message, type = 'info') {
|
||||
const messageElement = document.getElementById('message');
|
||||
@@ -759,44 +777,64 @@
|
||||
|
||||
function checkLoginStatus() {
|
||||
// 检查本地存储中的认证信息
|
||||
const authToken = localStorage.getItem('authToken') || localStorage.getItem('token') || sessionStorage.getItem('token');
|
||||
const username = localStorage.getItem('username') || localStorage.getItem('nickname');
|
||||
const authData = localStorage.getItem('authData') || sessionStorage.getItem('authData');
|
||||
|
||||
if (authToken && username) {
|
||||
// 用户已登录，更新UI
|
||||
document.getElementById('loginLink').style.display = 'none';
|
||||
const userMenu = document.getElementById('userMenu');
|
||||
if (userMenu) {
|
||||
userMenu.innerHTML = `
|
||||
<div class="user-info">
|
||||
<span class="user-name">${username}</span>
|
||||
<button class="logout-btn" onclick="logout()">退出登录</button>
|
||||
</div>
|
||||
`;
|
||||
if (authData) {
|
||||
try {
|
||||
const auth = JSON.parse(authData);
|
||||
const username = auth.user_info && auth.user_info.username ? auth.user_info.username : '用户';
|
||||
|
||||
// 用户已登录，更新UI
|
||||
const loginLink = document.getElementById('loginLink');
|
||||
if (loginLink) loginLink.style.display = 'none';
|
||||
|
||||
const userMenu = document.getElementById('userMenu');
|
||||
if (userMenu) {
|
||||
userMenu.innerHTML = `
|
||||
<div class="user-info">
|
||||
<span class="user-name">${username}</span>
|
||||
<button class="logout-btn" onclick="logout()">退出登录</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// 加载用户信息
|
||||
loadUserData(auth);
|
||||
} catch (e) {
|
||||
console.error('解析登录数据失败:', e);
|
||||
window.location.href = 'login.html';
|
||||
}
|
||||
|
||||
// 加载用户信息
|
||||
loadUserData();
|
||||
} else {
|
||||
// 用户未登录，跳转到登录页面
|
||||
window.location.href = 'login.html';
|
||||
window.location.href = 'login.html?redirect=' + encodeURIComponent(window.location.href);
|
||||
}
|
||||
}
|
||||
|
||||
function logout() {
|
||||
// 清除本地存储的认证信息
|
||||
localStorage.removeItem('authToken');
|
||||
localStorage.removeItem('username');
|
||||
localStorage.removeItem('userSettings');
|
||||
localStorage.removeItem('lastLogin');
|
||||
const authData = localStorage.getItem('authData') || sessionStorage.getItem('authData');
|
||||
let token = '';
|
||||
|
||||
// 尝试调用登出API（使用fetch而不是apiCall，避免依赖本地函数）
|
||||
fetch('http://localhost:8000/api/user/logout', {
|
||||
if (authData) {
|
||||
try {
|
||||
const auth = JSON.parse(authData);
|
||||
token = auth.token;
|
||||
} catch (e) {
|
||||
console.error('解析token失败:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 清除本地存储的认证信息
|
||||
localStorage.removeItem('authData');
|
||||
sessionStorage.removeItem('authData');
|
||||
|
||||
// 调用登出API
|
||||
fetch('http://localhost:8080/api/user/logout', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': token
|
||||
},
|
||||
credentials: 'include'
|
||||
body: JSON.stringify({ token: token })
|
||||
}).finally(() => {
|
||||
// 无论API调用成功与否，都跳转到登录页面
|
||||
window.location.href = 'login.html';
|
||||
@@ -804,64 +842,53 @@
|
||||
}
|
||||
|
||||
function clearAuthData() {
|
||||
localStorage.removeItem('authToken');
|
||||
localStorage.removeItem('username');
|
||||
localStorage.removeItem('userSettings');
|
||||
localStorage.removeItem('authData');
|
||||
sessionStorage.removeItem('authData');
|
||||
}
|
||||
|
||||
function loadUserData() {
|
||||
// 显示加载状态
|
||||
showLoading(true);
|
||||
function loadUserData(authData) {
|
||||
console.log('🔍 加载用户数据:', authData);
|
||||
|
||||
// 获取认证token
|
||||
const authToken = localStorage.getItem('authToken') || localStorage.getItem('token') || sessionStorage.getItem('token');
|
||||
if (!authData || !authData.user_info) {
|
||||
console.error('❌ 无效的认证数据');
|
||||
window.location.href = 'login.html';
|
||||
return;
|
||||
}
|
||||
|
||||
// 调用后端API获取用户信息
|
||||
fetch('http://localhost:8000/api/user/info', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${authToken}`
|
||||
},
|
||||
credentials: 'include'
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
if (response.status === 401) {
|
||||
// 认证失败，清除认证信息并重定向到登录页面
|
||||
clearAuthData();
|
||||
window.location.href = 'login.html';
|
||||
throw new Error('认证失败，请重新登录');
|
||||
}
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
// 从authData中提取用户信息
|
||||
const userInfo = authData.user_info;
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return '--';
|
||||
try {
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
} catch (e) {
|
||||
return dateStr;
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
if (data && data.data) {
|
||||
// 使用后端返回的用户数据
|
||||
const userData = data.data;
|
||||
|
||||
// 更新用户信息显示
|
||||
updateUserInfoDisplay(userData);
|
||||
}
|
||||
hideLoading();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('加载用户数据失败:', error);
|
||||
hideLoading();
|
||||
// 如果API调用失败，使用模拟数据
|
||||
const username = localStorage.getItem('username') || '测试用户';
|
||||
const userData = {
|
||||
username: username,
|
||||
email: 'test@example.com',
|
||||
nickname: username,
|
||||
role: '普通用户',
|
||||
joinDate: new Date().toLocaleDateString('zh-CN'),
|
||||
lastLogin: new Date().toLocaleString('zh-CN')
|
||||
};
|
||||
updateUserInfoDisplay(userData);
|
||||
});
|
||||
};
|
||||
|
||||
// 准备显示的用户数据
|
||||
const userData = {
|
||||
username: userInfo.username || '--',
|
||||
email: userInfo.email || '--',
|
||||
joinDate: formatDate(userInfo.created_at),
|
||||
lastLogin: formatDate(userInfo.last_login_at),
|
||||
status: userInfo.status === 1 ? 'active' : 'inactive',
|
||||
bio: userInfo.bio || ''
|
||||
};
|
||||
|
||||
console.log('✅ 格式化后的用户数据:', userData);
|
||||
|
||||
// 更新用户信息显示
|
||||
updateUserInfoDisplay(userData);
|
||||
}
|
||||
|
||||
// 增强版API调用包装函数
|
||||
@@ -1195,6 +1222,77 @@
|
||||
|
||||
// 保存用户名用于账号注销确认
|
||||
document.getElementById('username-display').textContent = userData.username || '';
|
||||
|
||||
// 填充编辑表单
|
||||
const emailInput = document.getElementById('edit-email');
|
||||
const bioInput = document.getElementById('edit-bio');
|
||||
if (emailInput) emailInput.value = userData.email || '';
|
||||
if (bioInput) bioInput.value = userData.bio || '';
|
||||
}
|
||||
|
||||
// 保存用户信息
|
||||
function saveUserInfo(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const email = document.getElementById('edit-email').value;
|
||||
const bio = document.getElementById('edit-bio').value;
|
||||
|
||||
// 验证邮箱
|
||||
if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||
showMessage('请输入有效的邮箱地址', 'error');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 获取认证信息
|
||||
const authData = localStorage.getItem('authData') || sessionStorage.getItem('authData');
|
||||
if (!authData) {
|
||||
showMessage('未登录，请先登录', 'error');
|
||||
setTimeout(() => {
|
||||
window.location.href = 'login.html';
|
||||
}, 1500);
|
||||
return false;
|
||||
}
|
||||
|
||||
let token, userId;
|
||||
try {
|
||||
const auth = JSON.parse(authData);
|
||||
token = auth.token;
|
||||
userId = auth.user_id;
|
||||
} catch (e) {
|
||||
showMessage('认证信息错误', 'error');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 调用API更新用户信息
|
||||
fetch('http://localhost:8080/api/user/update', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': token
|
||||
},
|
||||
body: JSON.stringify({
|
||||
user_id: userId,
|
||||
email: email,
|
||||
bio: bio
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log('✅ 更新响应:', data);
|
||||
if (data.success) {
|
||||
showMessage('信息保存成功！', 'success');
|
||||
// 更新显示的邮箱
|
||||
document.getElementById('info-email').textContent = email;
|
||||
} else {
|
||||
showMessage(data.message || '保存失败', 'error');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('❌ 保存错误:', error);
|
||||
showMessage('网络错误，请稍后再试', 'error');
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function showLoading(show) {
|
||||
@@ -1624,8 +1722,9 @@
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
// 添加消息提示的CSS样式
|
||||
<style>
|
||||
/* 消息提示样式 */
|
||||
.message-toast {
|
||||
position: fixed;
|
||||
@@ -1750,4 +1849,7 @@
|
||||
|
||||
.password-match-message.mismatch {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}</style>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user