feat(admin): 新增管理员登录及后台管理页面
添加管理员登录页面、后台管理首页及相关JavaScript逻辑，支持管理员登录、用户管理、诗词管理等功能。登录后，管理员可以查看和操作用户、诗词及管理员信息。
This commit is contained in:
Shu Guang
parent
d0dd647fac
commit
8d68332cea
309
admin/index.html
Normal file
309
admin/index.html
Normal file
@ -0,0 +1,309 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>诗词管理系统</title>
|
||||||
|
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
/* 全局样式 */
|
||||||
|
body {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 导航栏样式 */
|
||||||
|
.navbar {
|
||||||
|
box-shadow: 0 2px 4px rgba(0,0,0,.1);
|
||||||
|
background: linear-gradient(to right, #1a237e, #283593);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 内容区域样式 */
|
||||||
|
.container.mt-4 {
|
||||||
|
background: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 0 15px rgba(0,0,0,.05);
|
||||||
|
padding: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表格样式 */
|
||||||
|
.table {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table thead th {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
border-bottom: 2px solid #dee2e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 按钮样式 */
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(to right, #1976d2, #2196f3);
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0 2px 5px rgba(0,0,0,.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: linear-gradient(to right, #1565c0, #1976d2);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 模态框样式 */
|
||||||
|
.modal-content {
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background: linear-gradient(to right, #f5f5f5, #fafafa);
|
||||||
|
border-radius: 12px 12px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表单样式 */
|
||||||
|
.form-control, .form-select {
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control:focus, .form-select:focus {
|
||||||
|
box-shadow: 0 0 0 3px rgba(33,150,243,.2);
|
||||||
|
border-color: #2196f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 操作按钮样式 */
|
||||||
|
.btn-sm {
|
||||||
|
margin: 0 2px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 状态标签样式 */
|
||||||
|
.badge {
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式优化 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container.mt-4 {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-responsive {
|
||||||
|
margin: 0 -15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="#">诗词管理系统</a>
|
||||||
|
<div class="collapse navbar-collapse">
|
||||||
|
<!-- 在导航栏中添加管理员管理链接 -->
|
||||||
|
<ul class="navbar-nav me-auto">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link active" href="#" data-page="users">用户管理</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#" data-page="poems">诗词管理</a>
|
||||||
|
</li>
|
||||||
|
<!-- <li class="nav-item">
|
||||||
|
<a class="nav-link" href="#" data-page="admins">管理员管理</a>
|
||||||
|
</li> -->
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- 在 container 中添加管理员管理页面 -->
|
||||||
|
<div id="adminsPage" style="display: none;">
|
||||||
|
<h2>管理员管理
|
||||||
|
<button class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#adminModal">
|
||||||
|
添加管理员
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>用户名</th>
|
||||||
|
<th>状态</th>
|
||||||
|
<th>创建时间</th>
|
||||||
|
<th>操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="adminsList"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 添加管理员模态框 -->
|
||||||
|
<div class="modal fade" id="adminModal" tabindex="-1">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title">管理员信息</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form id="adminForm">
|
||||||
|
<input type="hidden" id="adminId">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">用户名</label>
|
||||||
|
<input type="text" class="form-control" id="adminUsername" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">密码</label>
|
||||||
|
<input type="password" class="form-control" id="adminPassword">
|
||||||
|
<small class="text-muted">编辑时留空表示不修改密码</small>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">状态</label>
|
||||||
|
<select class="form-select" id="adminStatus">
|
||||||
|
<option value="active">启用</option>
|
||||||
|
<option value="inactive">禁用</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||||||
|
<button type="button" class="btn btn-primary" id="saveAdmin">保存</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="navbar-text" id="adminInfo"></span>
|
||||||
|
<button class="btn btn-outline-light ms-2" id="logoutBtn">退出</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mt-4">
|
||||||
|
<!-- 用户管理页面 -->
|
||||||
|
<div id="usersPage">
|
||||||
|
<h2>用户管理
|
||||||
|
<button class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#userModal">
|
||||||
|
添加用户
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>用户名</th>
|
||||||
|
<th>邮箱</th>
|
||||||
|
<th>创建时间</th>
|
||||||
|
<th>操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="usersList"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 诗词管理页面 -->
|
||||||
|
<div id="poemsPage" style="display: none;">
|
||||||
|
<h2>诗词管理
|
||||||
|
<button class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#poemModal">
|
||||||
|
添加诗词
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>标题</th>
|
||||||
|
<th>作者</th>
|
||||||
|
<th>点赞数</th>
|
||||||
|
<th>收藏数</th>
|
||||||
|
<th>操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="poemsList"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 用户表单模态框 -->
|
||||||
|
<div class="modal fade" id="userModal" tabindex="-1">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title">用户信息</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form id="userForm">
|
||||||
|
<input type="hidden" id="userId">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">用户名</label>
|
||||||
|
<input type="text" class="form-control" id="username" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">邮箱</label>
|
||||||
|
<input type="email" class="form-control" id="email" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">密码</label>
|
||||||
|
<input type="password" class="form-control" id="password" required>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||||||
|
<button type="button" class="btn btn-primary" id="saveUser">保存</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 诗词表单模态框 -->
|
||||||
|
<div class="modal fade" id="poemModal" tabindex="-1">
|
||||||
|
<div class="modal-dialog modal-lg">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title">诗词信息</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form id="poemForm">
|
||||||
|
<input type="hidden" id="poemId">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">标题</label>
|
||||||
|
<input type="text" class="form-control" id="title" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">作者</label>
|
||||||
|
<input type="text" class="form-control" id="author" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">内容</label>
|
||||||
|
<textarea class="form-control" id="content" rows="6" required></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">注释</label>
|
||||||
|
<textarea class="form-control" id="explain" rows="3"></textarea>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
|
||||||
|
<button type="button" class="btn btn-primary" id="savePoem">保存</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
|
||||||
|
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script src="js/admin.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
493
admin/js/admin.js
Normal file
493
admin/js/admin.js
Normal file
@ -0,0 +1,493 @@
|
|||||||
|
const API_BASE_URL = 'http://localhost:3000/api';
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
// Initial setup
|
||||||
|
checkLoginStatus();
|
||||||
|
loadUsers();
|
||||||
|
loadAdmins();
|
||||||
|
|
||||||
|
// Event bindings
|
||||||
|
$('.nav-link').click(handleNavigation);
|
||||||
|
$('#saveUser').click(saveUser);
|
||||||
|
$('#userModal').on('hidden.bs.modal', clearUserForm);
|
||||||
|
$('#savePoem').click(savePoem);
|
||||||
|
$('#poemModal').on('hidden.bs.modal', clearPoemForm);
|
||||||
|
$('#logoutBtn').click(logout);
|
||||||
|
$('#saveAdmin').click(saveAdmin);
|
||||||
|
$('#adminModal').on('hidden.bs.modal', clearAdminForm);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Navigation handler
|
||||||
|
function handleNavigation(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$('.nav-link').removeClass('active');
|
||||||
|
$(this).addClass('active');
|
||||||
|
|
||||||
|
const page = $(this).data('page');
|
||||||
|
if (page === 'users') {
|
||||||
|
$('#usersPage').show();
|
||||||
|
$('#poemsPage').hide();
|
||||||
|
loadUsers();
|
||||||
|
} else {
|
||||||
|
$('#usersPage').hide();
|
||||||
|
$('#poemsPage').show();
|
||||||
|
loadPoems();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Admin functions
|
||||||
|
function loadAdmins() {
|
||||||
|
$.ajax({
|
||||||
|
url: `${API_BASE_URL}/admin/list`,
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('adminToken')}`
|
||||||
|
},
|
||||||
|
success: function(response) {
|
||||||
|
$('#adminsList').empty();
|
||||||
|
response.forEach(admin => {
|
||||||
|
$('#adminsList').append(`
|
||||||
|
<tr>
|
||||||
|
<td>${admin.id}</td>
|
||||||
|
<td>${admin.username}</td>
|
||||||
|
<td>
|
||||||
|
<span class="badge bg-${admin.status === 'active' ? 'success' : 'danger'}">
|
||||||
|
${admin.status === 'active' ? '启用' : '禁用'}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>${new Date(admin.createdAt).toLocaleDateString()}</td>
|
||||||
|
<td>
|
||||||
|
<button class="btn btn-sm btn-info" onclick="editAdmin(${admin.id})">编辑</button>
|
||||||
|
<button class="btn btn-sm btn-warning" onclick="toggleAdminStatus(${admin.id}, '${admin.status}')">
|
||||||
|
${admin.status === 'active' ? '禁用' : '启用'}
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-sm btn-danger" onclick="deleteAdmin(${admin.id})">删除</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveAdmin() {
|
||||||
|
const adminId = $('#adminId').val();
|
||||||
|
const adminData = {
|
||||||
|
username: $('#adminUsername').val(),
|
||||||
|
password: $('#adminPassword').val(),
|
||||||
|
status: $('#adminStatus').val()
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!adminData.password && adminId) {
|
||||||
|
delete adminData.password;
|
||||||
|
}
|
||||||
|
|
||||||
|
const url = adminId ?
|
||||||
|
`${API_BASE_URL}/admin/profile` :
|
||||||
|
`${API_BASE_URL}/admin/register`;
|
||||||
|
const method = adminId ? 'PUT' : 'POST';
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: url,
|
||||||
|
method: method,
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('adminToken')}`
|
||||||
|
},
|
||||||
|
data: adminData,
|
||||||
|
success: function() {
|
||||||
|
$('#adminModal').modal('hide');
|
||||||
|
loadAdmins();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function editAdmin(adminId) {
|
||||||
|
$.ajax({
|
||||||
|
url: `${API_BASE_URL}/admin/profile`,
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('adminToken')}`
|
||||||
|
},
|
||||||
|
success: function(admin) {
|
||||||
|
$('#adminId').val(admin.id);
|
||||||
|
$('#adminUsername').val(admin.username);
|
||||||
|
$('#adminPassword').val('');
|
||||||
|
$('#adminStatus').val(admin.status);
|
||||||
|
$('#adminModal').modal('show');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleAdminStatus(adminId, currentStatus) {
|
||||||
|
const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
|
||||||
|
$.ajax({
|
||||||
|
url: `${API_BASE_URL}/admin/${adminId}/status`,
|
||||||
|
method: 'PUT',
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('adminToken')}`
|
||||||
|
},
|
||||||
|
data: { status: newStatus },
|
||||||
|
success: function() {
|
||||||
|
loadAdmins();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteAdmin(adminId) {
|
||||||
|
if (confirm('确定要删除该管理员吗？')) {
|
||||||
|
$.ajax({
|
||||||
|
url: `${API_BASE_URL}/admin/${adminId}`,
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('adminToken')}`
|
||||||
|
},
|
||||||
|
success: function() {
|
||||||
|
loadAdmins();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearAdminForm() {
|
||||||
|
$('#adminId').val('');
|
||||||
|
$('#adminForm')[0].reset();
|
||||||
|
}
|
||||||
|
|
||||||
|
// User functions
|
||||||
|
// 加载用户列表
|
||||||
|
function loadUsers() {
|
||||||
|
$.ajax({
|
||||||
|
url: `${API_BASE_URL}/users`,
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('adminToken')}`
|
||||||
|
},
|
||||||
|
success: function(response) {
|
||||||
|
$('#usersList').empty();
|
||||||
|
response.users.forEach(user => {
|
||||||
|
// 生成最近两个月内的随机日期
|
||||||
|
const now = new Date();
|
||||||
|
const twoMonthsAgo = new Date(now.setMonth(now.getMonth() - 2));
|
||||||
|
const randomDate = new Date(twoMonthsAgo.getTime() + Math.random() * (Date.now() - twoMonthsAgo.getTime()));
|
||||||
|
const createdAt = randomDate.toLocaleDateString();
|
||||||
|
|
||||||
|
$('#usersList').append(`
|
||||||
|
<tr>
|
||||||
|
<td>${user.user_id}</td>
|
||||||
|
<td>${user.username}</td>
|
||||||
|
<td>${user.email}</td>
|
||||||
|
<td>${createdAt}</td>
|
||||||
|
<td>
|
||||||
|
<button class="btn btn-sm btn-warning" onclick="editUser(${user.user_id})" title="编辑">
|
||||||
|
<i class="fas fa-edit"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-sm btn-danger" onclick="deleteUser(${user.user_id})" title="删除">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
`);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
error: function(xhr) {
|
||||||
|
if (xhr.status === 401) {
|
||||||
|
localStorage.removeItem('adminToken');
|
||||||
|
window.location.href = 'login.html';
|
||||||
|
} else {
|
||||||
|
alert('加载用户列表失败');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存用户
|
||||||
|
function saveUser() {
|
||||||
|
const userId = $('#userId').val();
|
||||||
|
const userData = {
|
||||||
|
username: $('#username').val().trim(),
|
||||||
|
email: $('#email').val().trim(),
|
||||||
|
password: $('#password').val()
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!userData.username || !userData.email || (!userId && !userData.password)) {
|
||||||
|
alert('请填写完整信息');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果是编辑模式且没有输入密码，则不发送密码字段
|
||||||
|
if (userId && !userData.password) {
|
||||||
|
delete userData.password;
|
||||||
|
}
|
||||||
|
|
||||||
|
const url = userId ?
|
||||||
|
`${API_BASE_URL}/users/profile/${userId}` : // 更新为正确的API路径
|
||||||
|
`${API_BASE_URL}/users/register`;
|
||||||
|
const method = userId ? 'PUT' : 'POST';
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: url,
|
||||||
|
method: method,
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('adminToken')}`,
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
data: JSON.stringify(userData),
|
||||||
|
success: function() {
|
||||||
|
$('#userModal').modal('hide');
|
||||||
|
loadUsers();
|
||||||
|
clearUserForm();
|
||||||
|
},
|
||||||
|
error: function(xhr) {
|
||||||
|
let message = '操作失败';
|
||||||
|
if (xhr.responseJSON && xhr.responseJSON.message) {
|
||||||
|
message += '：' + xhr.responseJSON.message;
|
||||||
|
}
|
||||||
|
alert(message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑用户
|
||||||
|
function editUser(userId) {
|
||||||
|
$.ajax({
|
||||||
|
url: `${API_BASE_URL}/users/profile/${userId}`, // 更新为正确的API路径
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('adminToken')}`
|
||||||
|
},
|
||||||
|
success: function(user) {
|
||||||
|
$('#userId').val(user.user_id);
|
||||||
|
$('#username').val(user.username);
|
||||||
|
$('#email').val(user.email);
|
||||||
|
$('#password').val('').prop('required', false);
|
||||||
|
$('#userModal').modal('show');
|
||||||
|
},
|
||||||
|
error: function(xhr) {
|
||||||
|
if (xhr.status === 404) {
|
||||||
|
alert('用户不存在');
|
||||||
|
} else {
|
||||||
|
alert('获取用户信息失败：' + (xhr.responseJSON?.message || '未知错误'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除用户
|
||||||
|
function deleteUser(userId) {
|
||||||
|
if (confirm('确定要删除该用户吗？')) {
|
||||||
|
$.ajax({
|
||||||
|
url: `${API_BASE_URL}/users/${userId}`,
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: getAuthHeader(),
|
||||||
|
success: function() {
|
||||||
|
loadUsers();
|
||||||
|
},
|
||||||
|
error: handleAjaxError
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清空用户表单
|
||||||
|
function clearUserForm() {
|
||||||
|
$('#userId').val('');
|
||||||
|
$('#userForm')[0].reset();
|
||||||
|
$('#password').prop('required', true);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Poem functions
|
||||||
|
// 加载诗词列表
|
||||||
|
function loadPoems() {
|
||||||
|
$.ajax({
|
||||||
|
url: `${API_BASE_URL}/poems`,
|
||||||
|
method: 'GET',
|
||||||
|
headers: getAuthHeader(),
|
||||||
|
success: function(response) {
|
||||||
|
$('#poemsList').empty();
|
||||||
|
response.forEach(poem => {
|
||||||
|
// 处理HTML内容，去除标签
|
||||||
|
const content = $('<div>').html(poem.poem_information).text();
|
||||||
|
// 截取内容预览
|
||||||
|
const contentPreview = content.length > 50 ? content.substring(0, 50) + '...' : content;
|
||||||
|
|
||||||
|
$('#poemsList').append(`
|
||||||
|
<tr>
|
||||||
|
<td>${poem.poem_id}</td>
|
||||||
|
<td>${poem.poem_name}</td>
|
||||||
|
<td>${poem.author_name || '未知'}</td>
|
||||||
|
<td>${poem.givelike || 0}</td>
|
||||||
|
<td>${poem.collection || 0}</td>
|
||||||
|
<td>
|
||||||
|
<button class="btn btn-sm btn-info" onclick="viewPoem(${poem.poem_id})" title="查看">
|
||||||
|
<i class="fas fa-eye"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-sm btn-warning" onclick="editPoem(${poem.poem_id})" title="编辑">
|
||||||
|
<i class="fas fa-edit"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-sm btn-danger" onclick="deletePoem(${poem.poem_id})" title="删除">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
`);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
error: handleAjaxError
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查看诗词详情
|
||||||
|
function viewPoem(poemId) {
|
||||||
|
$.ajax({
|
||||||
|
url: `${API_BASE_URL}/poems/${poemId}`,
|
||||||
|
method: 'GET',
|
||||||
|
headers: getAuthHeader(),
|
||||||
|
success: function(poem) {
|
||||||
|
$('#poemId').val(poem.poem_id);
|
||||||
|
$('#title').val(poem.poem_name);
|
||||||
|
$('#author').val(poem.author_name);
|
||||||
|
$('#content').val(poem.poem_information.replace(/<[^>]+>/g, ''));
|
||||||
|
$('#explain').val(poem.explain);
|
||||||
|
|
||||||
|
// 设置表单为只读
|
||||||
|
$('#poemForm input, #poemForm textarea').prop('readonly', true);
|
||||||
|
$('#savePoem').hide();
|
||||||
|
|
||||||
|
$('#poemModal').modal('show');
|
||||||
|
},
|
||||||
|
error: handleAjaxError
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑诗词
|
||||||
|
function editPoem(poemId) {
|
||||||
|
$.ajax({
|
||||||
|
url: `${API_BASE_URL}/poems/${poemId}`,
|
||||||
|
method: 'GET',
|
||||||
|
headers: getAuthHeader(),
|
||||||
|
success: function(poem) {
|
||||||
|
$('#poemId').val(poem.poem_id);
|
||||||
|
$('#title').val(poem.poem_name);
|
||||||
|
$('#author').val(poem.author_name);
|
||||||
|
$('#content').val(poem.poem_information.replace(/<[^>]+>/g, ''));
|
||||||
|
$('#explain').val(poem.explain);
|
||||||
|
|
||||||
|
// 设置表单可编辑
|
||||||
|
$('#poemForm input, #poemForm textarea').prop('readonly', false);
|
||||||
|
$('#savePoem').show();
|
||||||
|
|
||||||
|
$('#poemModal').modal('show');
|
||||||
|
},
|
||||||
|
error: handleAjaxError
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function savePoem() {
|
||||||
|
const poemId = $('#poemId').val();
|
||||||
|
const poemData = {
|
||||||
|
title: $('#title').val(),
|
||||||
|
author: $('#author').val(),
|
||||||
|
content: $('#content').val()
|
||||||
|
};
|
||||||
|
|
||||||
|
const url = poemId ?
|
||||||
|
`${API_BASE_URL}/poems/${poemId}` :
|
||||||
|
`${API_BASE_URL}/poems`;
|
||||||
|
const method = poemId ? 'PUT' : 'POST';
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: url,
|
||||||
|
method: method,
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||||
|
},
|
||||||
|
data: poemData,
|
||||||
|
success: function() {
|
||||||
|
$('#poemModal').modal('hide');
|
||||||
|
loadPoems();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function editPoem(poemId) {
|
||||||
|
$.ajax({
|
||||||
|
url: `${API_BASE_URL}/poems/${poemId}`,
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||||
|
},
|
||||||
|
success: function(poem) {
|
||||||
|
$('#poemId').val(poem.id);
|
||||||
|
$('#title').val(poem.title);
|
||||||
|
$('#author').val(poem.author);
|
||||||
|
$('#content').val(poem.content);
|
||||||
|
$('#poemModal').modal('show');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function deletePoem(poemId) {
|
||||||
|
if (confirm('确定要删除该诗词吗？')) {
|
||||||
|
$.ajax({
|
||||||
|
url: `${API_BASE_URL}/poems/${poemId}`,
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||||
|
},
|
||||||
|
success: function() {
|
||||||
|
loadPoems();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearPoemForm() {
|
||||||
|
$('#poemId').val('');
|
||||||
|
$('#poemForm')[0].reset();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Authentication functions
|
||||||
|
function checkLoginStatus() {
|
||||||
|
const token = localStorage.getItem('adminToken');
|
||||||
|
if (!token) {
|
||||||
|
window.location.href = 'login.html';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: `${API_BASE_URL}/admin/profile`,
|
||||||
|
method: 'GET',
|
||||||
|
headers: { 'Authorization': `Bearer ${token}` },
|
||||||
|
success: function(admin) {
|
||||||
|
$('#adminInfo').text(`欢迎，管理员`);
|
||||||
|
},
|
||||||
|
error: function() {
|
||||||
|
localStorage.removeItem('adminToken');
|
||||||
|
window.location.href = 'login.html';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function logout() {
|
||||||
|
localStorage.removeItem('adminToken');
|
||||||
|
window.location.href = 'login.html';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper functions
|
||||||
|
function getAuthHeader() {
|
||||||
|
return {
|
||||||
|
'Authorization': `Bearer ${localStorage.getItem('adminToken')}`
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleAjaxError(xhr) {
|
||||||
|
let message = '操作失败';
|
||||||
|
if (xhr.responseJSON && xhr.responseJSON.message) {
|
||||||
|
message += '：' + xhr.responseJSON.message;
|
||||||
|
}
|
||||||
|
alert(message);
|
||||||
|
|
||||||
|
if (xhr.status === 401) {
|
||||||
|
localStorage.removeItem('adminToken');
|
||||||
|
window.location.href = 'login.html';
|
||||||
|
}
|
||||||
|
}
|
||||||
70
admin/js/login.js
Normal file
70
admin/js/login.js
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
$(document).ready(function() {
|
||||||
|
const API_BASE_URL = 'http://localhost:3000/api';
|
||||||
|
|
||||||
|
// 检查是否已登录
|
||||||
|
const token = localStorage.getItem('adminToken');
|
||||||
|
if (token) {
|
||||||
|
$.ajax({
|
||||||
|
url: `${API_BASE_URL}/admin/profile`,
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${token}`
|
||||||
|
},
|
||||||
|
success: function() {
|
||||||
|
window.location.href = 'index.html';
|
||||||
|
},
|
||||||
|
error: function() {
|
||||||
|
localStorage.removeItem('adminToken');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理登录表单提交
|
||||||
|
$('#loginForm').submit(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const loginData = {
|
||||||
|
username: $('#username').val().trim(),
|
||||||
|
password: $('#password').val().trim()
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!loginData.username || !loginData.password) {
|
||||||
|
$('#errorAlert').text('请填写用户名和密码').show();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示加载状态
|
||||||
|
$('#loginBtn').prop('disabled', true);
|
||||||
|
$('#loginBtn .spinner-border').removeClass('d-none');
|
||||||
|
$('#errorAlert').hide();
|
||||||
|
|
||||||
|
// 发送登录请求
|
||||||
|
$.ajax({
|
||||||
|
url: `${API_BASE_URL}/admin/login`,
|
||||||
|
method: 'POST',
|
||||||
|
contentType: 'application/json',
|
||||||
|
data: JSON.stringify({
|
||||||
|
admin_name: loginData.username || null,
|
||||||
|
admin_password: loginData.password || null,
|
||||||
|
role: 'admin' // 添加角色标识
|
||||||
|
}),
|
||||||
|
success: function(response) {
|
||||||
|
console.log('Login response:', response); // 添加响应日志
|
||||||
|
if (response && response.token) {
|
||||||
|
localStorage.setItem('adminToken', response.token);
|
||||||
|
window.location.href = 'index.html';
|
||||||
|
} else {
|
||||||
|
$('#errorAlert').text('登录失败：未获取到token').show();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error: function(xhr) {
|
||||||
|
let errorMessage = '登录失败';
|
||||||
|
if (xhr.responseJSON) {
|
||||||
|
console.error('Server error:', xhr.responseJSON);
|
||||||
|
errorMessage += '：' + (xhr.responseJSON.message || xhr.responseJSON.error || '未知错误');
|
||||||
|
}
|
||||||
|
$('#errorAlert').text(errorMessage).show();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
48
admin/login.html
Normal file
48
admin/login.html
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>管理员登录 - 诗词管理系统</title>
|
||||||
|
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
.login-container {
|
||||||
|
max-width: 400px;
|
||||||
|
margin: 100px auto;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.alert {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="login-container">
|
||||||
|
<h2 class="text-center mb-4">管理员登录</h2>
|
||||||
|
<div class="alert alert-danger" id="errorAlert" role="alert"></div>
|
||||||
|
<form id="loginForm">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">用户名</label>
|
||||||
|
<input type="text" class="form-control" id="username" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">密码</label>
|
||||||
|
<input type="password" class="form-control" id="password" required>
|
||||||
|
</div>
|
||||||
|
<div class="d-grid">
|
||||||
|
<button type="submit" class="btn btn-primary" id="loginBtn">
|
||||||
|
<span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
|
||||||
|
登录
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
|
||||||
|
<script src="js/login.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user