123 lines
5.4 KiB
Plaintext
123 lines
5.4 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>个人中心</title>
|
|
<style>
|
|
body { background: #f5f6fa; font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; }
|
|
.container { max-width: 900px; margin: 40px auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); padding: 30px; }
|
|
h2 { color: #2c3e50; margin-bottom: 20px; }
|
|
.section { margin-bottom: 40px; }
|
|
.section-title { font-size: 20px; color: #2980b9; margin-bottom: 15px; border-left: 4px solid #2980b9; padding-left: 10px; }
|
|
.form-group { margin-bottom: 15px; }
|
|
label { display: block; margin-bottom: 6px; color: #555; }
|
|
input[type="password"] { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
|
|
.btn { background: #2980b9; color: #fff; border: none; padding: 8px 18px; border-radius: 4px; cursor: pointer; transition: background 0.2s; }
|
|
.btn:hover { background: #1a5a8a; }
|
|
.favorites-list, .comments-list { list-style: none; padding: 0; }
|
|
.favorites-list li, .comments-list li { background: #f8f9fa; margin-bottom: 10px; padding: 12px 16px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
|
|
.favorites-list .post-title, .comments-list .post-title { color: #2980b9; text-decoration: none; font-weight: 500; }
|
|
.favorites-list .remove-btn { background: #e74c3c; color: #fff; border: none; padding: 4px 10px; border-radius: 3px; cursor: pointer; }
|
|
.favorites-list .remove-btn:hover { background: #c0392b; }
|
|
.comments-list .comment-content { color: #333; margin-right: 10px; }
|
|
.comments-list .comment-meta { color: #888; font-size: 13px; }
|
|
.error-msg { color: #e74c3c; margin-bottom: 10px; }
|
|
.success-msg { color: #27ae60; margin-bottom: 10px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h2>个人中心</h2>
|
|
<!-- 密码修改 -->
|
|
<div class="section">
|
|
<div class="section-title">修改密码</div>
|
|
<form id="changePwdForm" method="post" action="/user/changePassword">
|
|
<div class="form-group">
|
|
<label for="oldPassword">原密码</label>
|
|
<input type="password" id="oldPassword" name="oldPassword" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="newPassword">新密码</label>
|
|
<input type="password" id="newPassword" name="newPassword" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="confirmPassword">确认新密码</label>
|
|
<input type="password" id="confirmPassword" name="confirmPassword" required>
|
|
</div>
|
|
<button class="btn" type="submit">修改密码</button>
|
|
</form>
|
|
<div id="pwdMsg"></div>
|
|
</div>
|
|
<!-- 收藏管理 -->
|
|
<div class="section">
|
|
<div class="section-title">我的收藏</div>
|
|
<% if (favorites && favorites.length > 0) { %>
|
|
<ul class="favorites-list">
|
|
<% favorites.forEach(function(post) { %>
|
|
<li>
|
|
<a class="post-title" href="/posts/<%= post._id %>"><%= post.title %></a>
|
|
<form method="post" action="/posts/<%= post._id %>/unfavorite" style="display:inline;">
|
|
<button class="remove-btn" type="submit">取消收藏</button>
|
|
</form>
|
|
</li>
|
|
<% }); %>
|
|
</ul>
|
|
<% } else { %>
|
|
<div>暂无收藏的博文</div>
|
|
<% } %>
|
|
</div>
|
|
<!-- 评论管理 -->
|
|
<div class="section">
|
|
<div class="section-title">我的评论</div>
|
|
<% if (comments && comments.length > 0) { %>
|
|
<ul class="comments-list">
|
|
<% comments.forEach(function(comment) { %>
|
|
<li>
|
|
<span class="comment-content"><%= comment.content %></span>
|
|
<span class="comment-meta">于 <a class="post-title" href="/posts/<%= comment.post._id %>"><%= comment.post.title %></a> • <%= new Date(comment.createdAt).toLocaleString('zh-CN') %></span>
|
|
</li>
|
|
<% }); %>
|
|
</ul>
|
|
<% } else { %>
|
|
<div>暂无评论</div>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// 密码修改表单前端校验和异步提交
|
|
document.getElementById('changePwdForm').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
const oldPassword = document.getElementById('oldPassword').value;
|
|
const newPassword = document.getElementById('newPassword').value;
|
|
const confirmPassword = document.getElementById('confirmPassword').value;
|
|
const msgDiv = document.getElementById('pwdMsg');
|
|
msgDiv.textContent = '';
|
|
if (newPassword !== confirmPassword) {
|
|
msgDiv.textContent = '两次新密码输入不一致';
|
|
msgDiv.className = 'error-msg';
|
|
return;
|
|
}
|
|
try {
|
|
const res = await fetch('/user/changePassword', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ oldPassword, newPassword })
|
|
});
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
msgDiv.textContent = '密码修改成功';
|
|
msgDiv.className = 'success-msg';
|
|
document.getElementById('changePwdForm').reset();
|
|
} else {
|
|
msgDiv.textContent = data.message || '密码修改失败';
|
|
msgDiv.className = 'error-msg';
|
|
}
|
|
} catch (err) {
|
|
msgDiv.textContent = '请求失败，请稍后再试';
|
|
msgDiv.className = 'error-msg';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|